Honor the comments avatars setting in the overlay and pill, align replies without avatars

The "Author Avatars" toggle only reached the iPad/macOS comments page.
The expanded comments overlay now takes the same flag (hosts pass it in
the next commit), and the expanded comments pill shows the comments icon
instead of the author avatar when avatars are off.

The replies block in a comment used a hardcoded 44pt leading inset for
the avatar column regardless of the toggle, so "Show replies" was
indented past the comment text when avatars were hidden. The toggle now
aligns with the text (44pt with avatars, 0 without) and nested replies
keep a smaller 16pt inset without avatars so the hierarchy still reads.
This commit is contained in:
Arkadiusz Fal
2026-09-26 23:21:37 +02:00
parent 4210b0ab05
commit 0b2cb4deeb
3 changed files with 26 additions and 8 deletions

View File

@@ -188,6 +188,19 @@ struct CommentView: View {
// MARK: - Replies Section // MARK: - Replies Section
/// Leading inset that lines the replies toggle up with the comment text:
/// the avatar column (avatar width + spacing) when avatars show, else
/// nothing.
private var contentIndent: CGFloat {
showAvatar ? 44 : 0
}
/// Leading inset for the nested replies. Without avatars a smaller
/// inset still marks the hierarchy.
private var repliesIndent: CGFloat {
showAvatar ? 44 : 16
}
@ViewBuilder @ViewBuilder
private var repliesSection: some View { private var repliesSection: some View {
VStack(alignment: .leading, spacing: 0) { VStack(alignment: .leading, spacing: 0) {
@@ -221,7 +234,7 @@ struct CommentView: View {
#endif #endif
} }
.buttonStyle(.plain) .buttonStyle(.plain)
.padding(.leading, 44) // Align with comment content (avatar width + spacing) .padding(.leading, contentIndent)
.padding(.bottom, 8) .padding(.bottom, 8)
// Replies list // Replies list
@@ -229,11 +242,11 @@ struct CommentView: View {
VStack(alignment: .leading, spacing: 0) { VStack(alignment: .leading, spacing: 0) {
ForEach(replies) { reply in ForEach(replies) { reply in
CommentView(comment: reply, source: source, isReply: true, showAvatar: showAvatar) CommentView(comment: reply, source: source, isReply: true, showAvatar: showAvatar)
.padding(.leading, 44) .padding(.leading, repliesIndent)
if reply.id != replies.last?.id { if reply.id != replies.last?.id {
Divider() Divider()
.padding(.leading, 44) .padding(.leading, repliesIndent)
} }
} }
@@ -245,7 +258,7 @@ struct CommentView: View {
.padding(.vertical, 8) .padding(.vertical, 8)
Spacer() Spacer()
} }
.padding(.leading, 44) .padding(.leading, repliesIndent)
} else if repliesContinuation != nil { } else if repliesContinuation != nil {
Button { Button {
Task { await loadReplies() } Task { await loadReplies() }
@@ -262,7 +275,7 @@ struct CommentView: View {
#endif #endif
} }
.buttonStyle(.plain) .buttonStyle(.plain)
.padding(.leading, 44) .padding(.leading, repliesIndent)
.padding(.vertical, 8) .padding(.vertical, 8)
} }
} }

View File

@@ -16,13 +16,16 @@ struct CommentsPillView: View {
var fillWidth: Bool = false var fillWidth: Bool = false
/// When true, uses smaller sizing for the collapsed state (e.g. on narrow devices). /// When true, uses smaller sizing for the collapsed state (e.g. on narrow devices).
var compact: Bool = false var compact: Bool = false
/// Whether the expanded pill leads with the author's avatar; when the
/// comments avatars setting is off it shows the comments icon instead.
var showAvatar: Bool = true
let onTap: () -> Void let onTap: () -> Void
var body: some View { var body: some View {
Button(action: onTap) { Button(action: onTap) {
HStack(spacing: isCollapsed ? 0 : 12) { HStack(spacing: isCollapsed ? 0 : 12) {
// Show icon when collapsed, avatar when expanded // Show icon when collapsed (or avatars are off), avatar when expanded
if isCollapsed { if isCollapsed || !showAvatar {
collapsedIconView collapsedIconView
} else { } else {
avatarView avatarView

View File

@@ -19,6 +19,8 @@ struct ExpandedCommentsView: View {
// Panel resize drag callbacks // Panel resize drag callbacks
var onDragChanged: ((CGFloat) -> Void)? = nil var onDragChanged: ((CGFloat) -> Void)? = nil
var onDragEnded: ((CGFloat, CGFloat) -> Void)? = nil var onDragEnded: ((CGFloat, CGFloat) -> Void)? = nil
/// Whether comment rows show author avatars (comments page setting).
var showAvatars: Bool = true
@State private var showScrollButton = false @State private var showScrollButton = false
@State private var scrollToTopTrigger: Int = 0 @State private var scrollToTopTrigger: Int = 0
@@ -223,7 +225,7 @@ struct ExpandedCommentsView: View {
@ViewBuilder @ViewBuilder
private var commentsContent: some View { private var commentsContent: some View {
CommentsListContent(videoID: videoID) CommentsListContent(videoID: videoID, showAvatars: showAvatars)
} }
@ViewBuilder @ViewBuilder