mirror of
https://github.com/yattee/yattee.git
synced 2026-10-23 21:22:53 +00:00
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:
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user