Allow showing the content of collapsed comments

aeharding · Jul 17, 2023 · 6b79f69 · 6b79f69
1 parent b8d18da
commit 6b79f69
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 19 deletions.
diff --git a/src/features/comment/Comment.tsx b/src/features/comment/Comment.tsx
@@ -194,6 +194,10 @@ export default function Comment({
   className,
   rootIndex,
 }: CommentProps) {
+  const showCollapsedComment = useAppSelector(
+    (state) => state.settings.general.comments.showCollapsedComment
+  );
+
   const commentById = useAppSelector((state) => state.comment.commentById);
   // eslint-disable-next-line no-undef
   const commentRef = useRef<HTMLIonItemElement>(null);
@@ -256,14 +260,18 @@ export default function Comment({
                 ) : (
                   <>
                     <AmountCollapsed>
-                      {commentView.counts.child_count + 1}
+                      {commentView.counts.child_count +
+                        (showCollapsedComment ? 0 : 1)}
                     </AmountCollapsed>
                     <CollapsedIcon icon={chevronDownOutline} />
                   </>
                 )}
               </Header>
 
-              <AnimateHeight duration={200} height={collapsed ? 0 : "auto"}>
+              <AnimateHeight
+                duration={200}
+                height={!showCollapsedComment && collapsed ? 0 : "auto"}
+              >
                 <Content
                   onClick={(e) => {
                     if (!(e.target instanceof HTMLElement)) return;

diff --git a/src/features/comment/CommentTree.tsx b/src/features/comment/CommentTree.tsx
@@ -24,6 +24,10 @@ export default function CommentTree({
   fullyCollapsed,
   rootIndex,
 }: CommentTreeProps) {
+  const showCollapsedComment = useAppSelector(
+    (state) => state.settings.general.comments.showCollapsedComment
+  );
+
   const dispatch = useAppDispatch();
   const commentCollapsedById = useAppSelector(
     (state) => state.comment.commentCollapsedById
@@ -62,7 +66,14 @@ export default function CommentTree({
         comment={comment.comment_view}
         highlightedCommentId={highlightedCommentId}
         depth={comment.depth}
-        onClick={() => setCollapsed(!collapsed)}
+        onClick={() => {
+          if (
+            !showCollapsedComment ||
+            comment.comment_view.counts.child_count ||
+            collapsed
+          )
+            setCollapsed(!collapsed);
+        }}
         collapsed={collapsed}
         fullyCollapsed={!!fullyCollapsed}
         rootIndex={rootIndex}

diff --git a/src/features/comment/useCollapseRootComment.ts b/src/features/comment/useCollapseRootComment.ts
@@ -1,7 +1,7 @@
 import { CommentView } from "lemmy-js-client";
 import { useCallback, useContext } from "react";
 import { toggleCommentCollapseState } from "./commentSlice";
-import { useAppDispatch } from "../../store";
+import { useAppDispatch, useAppSelector } from "../../store";
 import { AppContext } from "../auth/AppContext";
 
 export default function useCollapseRootComment(
@@ -11,12 +11,21 @@ export default function useCollapseRootComment(
   const dispatch = useAppDispatch();
   const { activePage } = useContext(AppContext);
 
+  const showCollapsedComment = useAppSelector(
+    (state) => state.settings.general.comments.showCollapsedComment
+  );
+
   return useCallback(() => {
     if (!rootIndex) return;
 
     const rootCommentId = +item.comment.path.split(".")[1];
-
-    dispatch(toggleCommentCollapseState(rootCommentId));
+    if (
+      !showCollapsedComment ||
+      item.comment.id !== rootCommentId ||
+      item.counts.child_count
+    ) {
+      dispatch(toggleCommentCollapseState(rootCommentId));
+    }
 
     const currentActivePage = activePage?.current;
     if (!currentActivePage || !("scrollToIndex" in currentActivePage)) return;
@@ -25,5 +34,12 @@ export default function useCollapseRootComment(
       index: rootIndex,
       behavior: "smooth",
     });
-  }, [activePage, dispatch, item.comment.path, rootIndex]);
+  }, [
+    activePage,
+    dispatch,
+    item.comment,
+    item.counts.child_count,
+    rootIndex,
+    showCollapsedComment,
+  ]);
 }
diff --git a/src/features/settings/general/comments/CollapsedByDefault.tsx b/src/features/settings/general/comments/CollapsedByDefault.tsx
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import { IonLabel, IonToggle } from "@ionic/react";
 import { InsetIonItem } from "../../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../../store";
@@ -7,13 +6,6 @@ import {
   setCommentsCollapsed,
 } from "../../settingsSlice";
 
-export const ListHeader = styled.div`
-  font-size: 0.8em;
-  margin: 32px 0 -8px 32px;
-  text-transform: uppercase;
-  color: var(--ion-color-medium);
-`;
-
 export default function CollapsedByDefault() {
   const dispatch = useAppDispatch();
   const { collapseCommentThreads } = useAppSelector(

diff --git a/src/features/settings/general/comments/Comments.tsx b/src/features/settings/general/comments/Comments.tsx
@@ -1,8 +1,15 @@
+import styled from "@emotion/styled";
 import { IonLabel, IonList } from "@ionic/react";
-import CollapsedByDefault, {
-  ListHeader,
-} from "../../general/comments/CollapsedByDefault";
 import DefaultSort from "./DefaultSort";
+import ShowCollapsedComment from "./ShowCollapsedComment";
+import CollapsedByDefault from "./CollapsedByDefault";
+
+export const ListHeader = styled.div`
+  font-size: 0.8em;
+  margin: 32px 0 -8px 32px;
+  text-transform: uppercase;
+  color: var(--ion-color-medium);
+`;
 
 export default function Comments() {
   return (
@@ -12,6 +19,7 @@ export default function Comments() {
       </ListHeader>
       <IonList inset>
         <CollapsedByDefault />
+        <ShowCollapsedComment />
         <DefaultSort />
       </IonList>
     </>

diff --git a/src/features/settings/general/comments/ShowCollapsedComment.tsx b/src/features/settings/general/comments/ShowCollapsedComment.tsx
@@ -0,0 +1,21 @@
+import { IonLabel, IonToggle } from "@ionic/react";
+import { InsetIonItem } from "../../../../pages/profile/ProfileFeedItemsPage";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { setShowCollapsedComment } from "../../settingsSlice";
+
+export default function ShowCollapsedComment() {
+  const dispatch = useAppDispatch();
+  const showCollapsedComment = useAppSelector(
+    (state) => state.settings.general.comments.showCollapsedComment
+  );
+
+  return (
+    <InsetIonItem>
+      <IonLabel>Show Collapsed Comment</IonLabel>
+      <IonToggle
+        checked={showCollapsedComment}
+        onIonChange={(e) => dispatch(setShowCollapsedComment(e.detail.checked))}
+      />
+    </InsetIonItem>
+  );
+}
diff --git a/src/features/settings/general/posts/Posts.tsx b/src/features/settings/general/posts/Posts.tsx
@@ -1,5 +1,5 @@
 import { IonLabel, IonList } from "@ionic/react";
-import { ListHeader } from "../comments/CollapsedByDefault";
+import { ListHeader } from "../comments/Comments";
 import { InsetIonItem } from "../../../user/Profile";
 
 export default function Posts() {

diff --git a/src/features/settings/settingsSlice.tsx b/src/features/settings/settingsSlice.tsx
@@ -61,6 +61,7 @@ interface SettingsState {
   general: {
     comments: {
       collapseCommentThreads: CommentThreadCollapse;
+      showCollapsedComment: boolean;
       sort: CommentDefaultSort;
     };
     posts: {
@@ -109,6 +110,7 @@ const initialState: SettingsState = {
   general: {
     comments: {
       collapseCommentThreads: OCommentThreadCollapse.Never,
+      showCollapsedComment: false,
       sort: OCommentDefaultSort.Hot,
     },
     posts: {
@@ -178,6 +180,10 @@ export const appearanceSlice = createSlice({
       state.general.comments.collapseCommentThreads = action.payload;
       db.setSetting("collapse_comment_threads", action.payload);
     },
+    setShowCollapsedComment(state, action: PayloadAction<boolean>) {
+      state.general.comments.showCollapsedComment = action.payload;
+      db.setSetting("show_collapsed_comment", action.payload);
+    },
     setPostAppearance(state, action: PayloadAction<PostAppearanceType>) {
       state.appearance.posts.type = action.payload;
       db.setSetting("post_appearance_type", action.payload);
@@ -273,6 +279,9 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
       const collapse_comment_threads = await db.getSetting(
         "collapse_comment_threads"
       );
+      const show_collapsed_comment = await db.getSetting(
+        "show_collapsed_comment"
+      );
       const user_instance_url_display = await db.getSetting(
         "user_instance_url_display"
       );
@@ -318,6 +327,9 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
             collapseCommentThreads:
               collapse_comment_threads ??
               initialState.general.comments.collapseCommentThreads,
+            showCollapsedComment:
+              show_collapsed_comment ??
+              initialState.general.comments.showCollapsedComment,
             sort: default_comment_sort ?? initialState.general.comments.sort,
           },
           posts: {
@@ -348,6 +360,7 @@ export const {
   setUseSystemFontSize,
   setUserInstanceUrlDisplay,
   setCommentsCollapsed,
+  setShowCollapsedComment,
   setNsfwBlur,
   setPostAppearance,
   setThumbnailPosition,

diff --git a/src/services/db.ts b/src/services/db.ts
@@ -59,6 +59,7 @@ export type InstanceUrlDisplayMode =
 
 export type SettingValueTypes = {
   collapse_comment_threads: CommentThreadCollapse;
+  show_collapsed_comment: boolean;
   user_instance_url_display: InstanceUrlDisplayMode;
   post_appearance_type: PostAppearanceType;
   compact_thumbnail_position_type: CompactThumbnailPositionType;