Automatic collapse child comments

Mlem.xcodeproj/project.pbxproj

@@ -296,6 +296,7 @@
 		6DEB0FFB2A4F87BF007CAB99 /* User Moderator View.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6DEB0FFA2A4F87BF007CAB99 /* User Moderator View.swift */; };
 		6DFF50432A48DED3001E648D /* Inbox View.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6DFF50422A48DED3001E648D /* Inbox View.swift */; };
 		6DFF50452A48E373001E648D /* GetPrivateMessages.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6DFF50442A48E373001E648D /* GetPrivateMessages.swift */; };
+		6FB4A4DE2B47860B00A7CD82 /* CollapsedCommentReplies.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6FB4A4DD2B47860B00A7CD82 /* CollapsedCommentReplies.swift */; };
 		88B165B82A8643F4007C9115 /* View+NavigationBarColor.swift in Sources */ = {isa = PBXBuildFile; fileRef = 88B165B72A8643F4007C9115 /* View+NavigationBarColor.swift */; };
 		AD1B0D352A5F63F60006F554 /* AboutView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD1B0D342A5F63F60006F554 /* AboutView.swift */; };
 		AD1B0D372A5F7A260006F554 /* Licenses.swift in Sources */ = {isa = PBXBuildFile; fileRef = AD1B0D362A5F7A260006F554 /* Licenses.swift */; };
@@ -837,6 +838,7 @@
 		6DEB0FFA2A4F87BF007CAB99 /* User Moderator View.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "User Moderator View.swift"; sourceTree = "<group>"; };
 		6DFF50422A48DED3001E648D /* Inbox View.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Inbox View.swift"; sourceTree = "<group>"; };
 		6DFF50442A48E373001E648D /* GetPrivateMessages.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GetPrivateMessages.swift; sourceTree = "<group>"; };
+		6FB4A4DD2B47860B00A7CD82 /* CollapsedCommentReplies.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CollapsedCommentReplies.swift; sourceTree = "<group>"; };
 		88B165B72A8643F4007C9115 /* View+NavigationBarColor.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "View+NavigationBarColor.swift"; sourceTree = "<group>"; };
 		AD1B0D342A5F63F60006F554 /* AboutView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AboutView.swift; sourceTree = "<group>"; };
 		AD1B0D362A5F7A260006F554 /* Licenses.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Licenses.swift; sourceTree = "<group>"; };
@@ -2039,6 +2041,7 @@
 			children = (
 				CDE6A80C2A45EAB30062D161 /* Embedded Post.swift */,
 				CD391F992A537EF900E213B5 /* CommentBodyView.swift */,
+				6FB4A4DD2B47860B00A7CD82 /* CollapsedCommentReplies.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -3451,6 +3454,7 @@
 				6D15D74C2A44DC240061B5CB /* Date+RelativeTime.swift in Sources */,
 				CDA217E62A63016A00BDA173 /* ReportMessage.swift in Sources */,
 				CD9DD8832A622A6C0044EA8E /* ReportCommentReply.swift in Sources */,
+				6FB4A4DE2B47860B00A7CD82 /* CollapsedCommentReplies.swift in Sources */,
 				CD3FBCE12A4A836000B2063F /* AllItemsFeedView.swift in Sources */,
 				6D91D4582A4159D8006B8F9A /* CommunityListRowViews.swift in Sources */,
 				63F0C7B92A0533C700A18C5D /* Add Account View.swift in Sources */,

Mlem/API/Internal/HierarchicalComment.swift

@@ -21,12 +21,20 @@ class HierarchicalComment: ObservableObject {
     /// Indicates whether the *current* comment is collapsed.
     @Published var isCollapsed: Bool = false
 
-    init(comment: APICommentView, children: [HierarchicalComment], parentCollapsed: Bool, collapsed: Bool) {
+    init(
+        comment: APICommentView,
+        children: [HierarchicalComment],
+        parentCollapsed: Bool,
+        collapsed: Bool,
+        shouldCollapseChildren: Bool = false
+    ) {
+        let depth = max(0, comment.comment.path.split(separator: ".").count - 2)
+
         self.commentView = comment
         self.children = children
-        self.depth = max(0, commentView.comment.path.split(separator: ".").count - 2)
-        self.isParentCollapsed = parentCollapsed
-        self.isCollapsed = collapsed
+        self.depth = depth
+        self.isParentCollapsed = shouldCollapseChildren && depth >= 1 || parentCollapsed
+        self.isCollapsed = shouldCollapseChildren && depth == 1 || collapsed
         self.links = comment.comment.content.parseLinks()
     }
 }
@@ -161,23 +169,26 @@ extension [APICommentView] {
         }
 
         let identifiedComments = Dictionary(uniqueKeysWithValues: allComments.lazy.map { ($0.id, $0) })
-
+        let collapseChildComments = UserDefaults.standard.bool(forKey: "collapseChildComments")
+
         /// Recursively populates child comments by looking up IDs from `childrenById`
         func populateChildren(_ comment: APICommentView) -> HierarchicalComment {
             guard let childIds = childrenById[comment.id] else {
                 return .init(
                     comment: comment,
                     children: [],
                     parentCollapsed: false,
-                    collapsed: false
+                    collapsed: false,
+                    shouldCollapseChildren: collapseChildComments
                 )
             }
 
             let commentWithChildren = HierarchicalComment(
                 comment: comment,
                 children: [],
                 parentCollapsed: false,
-                collapsed: false
+                collapsed: false,
+                shouldCollapseChildren: collapseChildComments
             )
             commentWithChildren.children = childIds
                 .compactMap { id -> HierarchicalComment? in

Mlem/Icons.swift

@@ -9,7 +9,7 @@ import Foundation
 import SwiftUI
 
 /// SFSymbol names for icons
-struct Icons {
+enum Icons {
     // votes
     static let votes: String = "arrow.up.arrow.down.square"
     static let upvote: String = "arrow.up"
@@ -187,6 +187,7 @@ struct Icons {
     static let developerMode: String = "wrench.adjustable.fill"
     static let limitImageHeightSetting: String = "rectangle.compress.vertical"
     static let swipeUpGestureSetting: String = "arrow.up.to.line.alt"
+    static let collapseComments: String = "arrow.down.and.line.horizontal.and.arrow.up"
 
     // misc
     static let switchUser: String = "person.crop.circle.badge.plus"

Mlem/Views/Shared/Comments/Comment Item Logic.swift

@@ -137,12 +137,41 @@ extension CommentItem {
     func toggleCollapsed() {
         withAnimation(.showHideComment(!hierarchicalComment.isCollapsed)) {
             // Perhaps we want an explict flag for this in the future?
-            if !showPostContext {
+            if collapseComments, !isCommentReplyHidden, pageContext == .posts {
+                toggleTopLevelCommentCollapse(isCollapsed: !hierarchicalComment.isCollapsed)
+            } else if !showPostContext {
                 commentTracker.setCollapsed(!hierarchicalComment.isCollapsed, comment: hierarchicalComment)
             }
         }
     }
 
+    /// Uncollapses HierarchicalComment and children at depth level 1
+    func uncollapseComment() {
+        commentTracker.setCollapsed(false, comment: hierarchicalComment)
+
+        for comment in hierarchicalComment.children where comment.depth == 1 {
+            commentTracker.setCollapsed(false, comment: comment)
+        }
+    }
+
+    // Collapses the top level comment and retains the child comment collapse state
+    // If a user views all child comments, then collapses top level comment, the children will be uncollapsed along side top level
+    func toggleTopLevelCommentCollapse(isCollapsed: Bool) {
+        hierarchicalComment.isCollapsed = isCollapsed
+
+        if !isCollapsed {
+            isCommentReplyHidden = false
+        }
+    }
+
+    /// Collapses HierarchicalComment and children at depth level 1
+    func collapseComment() {
+        for comment in hierarchicalComment.children where comment.depth == 1 {
+            commentTracker.setCollapsed(true, comment: comment)
+            comment.isParentCollapsed = true
+        }
+    }
+
     // MARK: helpers
 
     // swiftlint:disable function_body_length

Mlem/Views/Shared/Comments/Comment Item.swift

@@ -13,6 +13,10 @@ struct CommentItem: View {
         case standard, never
     }
 
+    enum PageContext {
+        case posts, profile
+    }
+
     @Dependency(\.apiClient) var apiClient
     @Dependency(\.commentRepository) var commentRepository
     @Dependency(\.errorHandler) var errorHandler
@@ -27,6 +31,7 @@ struct CommentItem: View {
     @AppStorage("shouldShowSavedInCommentBar") var shouldShowSavedInCommentBar: Bool = false
     @AppStorage("shouldShowRepliesInCommentBar") var shouldShowRepliesInCommentBar: Bool = true
     @AppStorage("compactComments") var compactComments: Bool = false
+    @AppStorage("collapseChildComments") var collapseComments: Bool = false
 
     // MARK: Temporary
 
@@ -35,6 +40,8 @@ struct CommentItem: View {
     @State var dirtyScore: Int // = 0
     @State var dirtySaved: Bool // = false
     @State var dirty: Bool = false
+
+    @State var isCommentReplyHidden: Bool = false
 
     @State var isComposingReport: Bool = false
 
@@ -64,6 +71,7 @@ struct CommentItem: View {
     let showPostContext: Bool
     let showCommentCreator: Bool
     let enableSwipeActions: Bool
+    let pageContext: PageContext
 
     // MARK: Destructive confirmation
 
@@ -100,14 +108,16 @@ struct CommentItem: View {
         indentBehaviour: IndentBehaviour = .standard,
         showPostContext: Bool,
         showCommentCreator: Bool,
-        enableSwipeActions: Bool = true
+        enableSwipeActions: Bool = true,
+        pageContext: PageContext = .posts
     ) {
         self.hierarchicalComment = hierarchicalComment
         self.postContext = postContext
         self.indentBehaviour = indentBehaviour
         self.showPostContext = showPostContext
         self.showCommentCreator = showCommentCreator
         self.enableSwipeActions = enableSwipeActions
+        self.pageContext = pageContext
 
         _dirtyVote = State(initialValue: hierarchicalComment.commentView.myVote ?? .resetVote)
         _dirtyScore = State(initialValue: hierarchicalComment.commentView.counts.score)
@@ -184,11 +194,29 @@ struct CommentItem: View {
                     Spacer()
                         .frame(height: AppConstants.postAndCommentSpacing)
                 }
+
+                if collapseComments,
+                   pageContext == .posts,
+                   !hierarchicalComment.isCollapsed,
+                   hierarchicalComment.depth == 0,
+                   hierarchicalComment.children.count > 0,
+                   !isCommentReplyHidden {
+                    Divider()
+                    HStack {
+                        CollapsedCommentReplies(numberOfReplies: .constant(hierarchicalComment.commentView.counts.childCount))
+                            .onTapGesture {
+                                isCommentReplyHidden = true
+                                uncollapseComment()
+                            }
+                    }
+                }
             }
         }
         .contentShape(Rectangle()) // allow taps in blank space to register
         .onTapGesture {
-            toggleCollapsed()
+            if pageContext == .posts {
+                toggleCollapsed()
+            }
         }
         .destructiveConfirmation(
             isPresentingConfirmDestructive: $isPresentingConfirmDestructive,
@@ -205,6 +233,15 @@ struct CommentItem: View {
                 MenuButton(menuFunction: item, confirmDestructive: confirmDestructive)
             }
         }
+        .onChange(of: collapseComments) { newValue in
+            if pageContext == .posts {
+                if newValue == false {
+                    uncollapseComment()
+                } else {
+                    collapseComment()
+                }
+            }
+        }
     }
     // swiftlint:enable function_body_length
 }

Mlem/Views/Shared/Comments/Components/CollapsedCommentReplies.swift

@@ -0,0 +1,31 @@
+//
+//  CollapsedCommentReplies.swift
+//  Mlem
+//
+//  Created by Sumeet Gill on 2024-01-04.
+//
+
+import SwiftUI
+
+struct CollapsedCommentReplies: View {
+    @Binding var numberOfReplies: Int
+    var lineWidth: CGFloat = 2
+
+    var body: some View {
+        HStack {
+            Rectangle()
+                .border(width: lineWidth, edges: [.leading], color: .accentColor)
+                .frame(width: lineWidth)
+            Image(systemName: Icons.replies)
+            Text("Show ^[\(numberOfReplies) Reply](inflect: true)")
+                .foregroundStyle(.blue)
+                .padding(.vertical, 10)
+        }
+        .frame(maxHeight: 50)
+        .padding(.leading, 10)
+    }
+}
+
+#Preview {
+    CollapsedCommentReplies(numberOfReplies: .constant(1))
+}

Mlem/Views/Shared/Posts/Expanded Post.swift

@@ -81,7 +81,11 @@ struct ExpandedPost: View {
             .toolbar {
                 ToolbarItemGroup(placement: .navigationBarTrailing) { toolbarMenu }
             }
-            .task { await loadComments() }
+            .task {
+                if commentTracker.comments.isEmpty {
+                    await loadComments()
+                }
+            }
             .task { await postTracker.markRead(post: post) }
             .refreshable { await refreshComments() }
             .onChange(of: commentSortingType) { newSortingType in

Mlem/Views/Tabs/Profile/UserFeedView.swift

@@ -5,8 +5,8 @@
 //  Created by Sjmarf on 25/08/2023.
 //
 
-import SwiftUI
 import Dependencies
+import SwiftUI
 
 struct UserFeedView: View {
     @Dependency(\.siteInformation) var siteInformation
@@ -33,11 +33,10 @@ struct UserFeedView: View {
     }
 
     var isOwnProfile: Bool {
-        return siteInformation.myUserInfo?.localUserView.person.id == user.userId
+        siteInformation.myUserInfo?.localUserView.person.id == user.userId
     }
 
     var body: some View {
-
         LazyVStack(spacing: 0) {
             switch selectedTab {
             case .communities:
@@ -117,7 +116,8 @@ struct UserFeedView: View {
                 postContext: nil,
                 indentBehaviour: .never,
                 showPostContext: true,
-                showCommentCreator: false
+                showCommentCreator: false,
+                pageContext: .profile
             )
 
             Divider()

Mlem/Views/Tabs/Profile/UserView+Logic.swift

@@ -42,8 +42,8 @@ extension UserView {
     func tryReloadUser() async {
         do {
             let authoredContent = try await personRepository.loadUserDetails(for: user.userId, limit: internetSpeed.pageSize)
-            self.user = UserModel(from: authoredContent)
-            self.communityTracker.replaceAll(with: user.moderatedCommunities ?? [])
+            user = UserModel(from: authoredContent)
+            communityTracker.replaceAll(with: user.moderatedCommunities ?? [])
 
             var savedContentData: GetPersonDetailsResponse?
             if isOwnProfile {
@@ -74,16 +74,16 @@ extension UserView {
             privateCommentTracker.comments = newComments
             privatePostTracker.reset(with: newPosts)
 
-            self.isLoadingContent = false
+            isLoadingContent = false
 
         } catch {
-                errorHandler.handle(
-                    .init(
-                        title: "Couldn't load user info",
-                        message: "There was an error while loading user information.\nTry again later.",
-                        underlyingError: error
-                    )
+            errorHandler.handle(
+                .init(
+                    title: "Couldn't load user info",
+                    message: "There was an error while loading user information.\nTry again later.",
+                    underlyingError: error
                 )
-            }
+            )
+        }
     }
 }

Mlem/Views/Tabs/Settings/Components/Views/Appearance/Comment/CommentSettingsView.swift

@@ -51,6 +51,7 @@ struct CommentSettingsView: View {
     @AppStorage("shouldShowUserServerInComment") var shouldShowUserServerInComment: Bool = false
 
     @AppStorage("showCommentJumpButton") var showCommentJumpButton: Bool = true
+    @AppStorage("collapseChildComments") var collapseChildComments: Bool = false
     @AppStorage("commentJumpButtonSide") var commentJumpButtonSide: JumpButtonLocation = .bottomTrailing
 
     var body: some View {
@@ -61,6 +62,11 @@ struct CommentSettingsView: View {
                     settingName: "Compact Comments",
                     isTicked: $compactComments
                 )
+                SwitchableSettingsItem(
+                    settingPictureSystemName: Icons.collapseComments,
+                    settingName: "Collapse Comments",
+                    isTicked: $collapseChildComments
+                )
 
                 NavigationLink(.commentSettings(.layoutWidget)) {
                     Label {