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
/// 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
private var repliesSection: some View {
VStack(alignment: .leading, spacing: 0) {
@@ -221,7 +234,7 @@ struct CommentView: View {
#endif
}
.buttonStyle(.plain)
.padding(.leading, 44) // Align with comment content (avatar width + spacing)
.padding(.leading, contentIndent)
.padding(.bottom, 8)
// Replies list
@@ -229,11 +242,11 @@ struct CommentView: View {
VStack(alignment: .leading, spacing: 0) {
ForEach(replies) { reply in
CommentView(comment: reply, source: source, isReply: true, showAvatar: showAvatar)
.padding(.leading, 44)
.padding(.leading, repliesIndent)
if reply.id != replies.last?.id {
Divider()
.padding(.leading, 44)
.padding(.leading, repliesIndent)
}
}
@@ -245,7 +258,7 @@ struct CommentView: View {
.padding(.vertical, 8)
Spacer()
}
.padding(.leading, 44)
.padding(.leading, repliesIndent)
} else if repliesContinuation != nil {
Button {
Task { await loadReplies() }
@@ -262,7 +275,7 @@ struct CommentView: View {
#endif
}
.buttonStyle(.plain)
.padding(.leading, 44)
.padding(.leading, repliesIndent)
.padding(.vertical, 8)
}
}

View File

@@ -16,13 +16,16 @@ struct CommentsPillView: View {
var fillWidth: Bool = false
/// When true, uses smaller sizing for the collapsed state (e.g. on narrow devices).
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
var body: some View {
Button(action: onTap) {
HStack(spacing: isCollapsed ? 0 : 12) {
// Show icon when collapsed, avatar when expanded
if isCollapsed {
// Show icon when collapsed (or avatars are off), avatar when expanded
if isCollapsed || !showAvatar {
collapsedIconView
} else {
avatarView

View File

@@ -19,6 +19,8 @@ struct ExpandedCommentsView: View {
// Panel resize drag callbacks
var onDragChanged: ((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 scrollToTopTrigger: Int = 0
@@ -223,7 +225,7 @@ struct ExpandedCommentsView: View {
@ViewBuilder
private var commentsContent: some View {
CommentsListContent(videoID: videoID)
CommentsListContent(videoID: videoID, showAvatars: showAvatars)
}
@ViewBuilder