diff --git a/Yattee/Views/Components/CommentView.swift b/Yattee/Views/Components/CommentView.swift index d8e73d3c..69c6f484 100644 --- a/Yattee/Views/Components/CommentView.swift +++ b/Yattee/Views/Components/CommentView.swift @@ -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) } } diff --git a/Yattee/Views/Components/CommentsPillView.swift b/Yattee/Views/Components/CommentsPillView.swift index f0483e4f..72214ddf 100644 --- a/Yattee/Views/Components/CommentsPillView.swift +++ b/Yattee/Views/Components/CommentsPillView.swift @@ -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 diff --git a/Yattee/Views/Components/ExpandedCommentsView.swift b/Yattee/Views/Components/ExpandedCommentsView.swift index 3e90e8fc..6f0cbd76 100644 --- a/Yattee/Views/Components/ExpandedCommentsView.swift +++ b/Yattee/Views/Components/ExpandedCommentsView.swift @@ -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