Allow showing the content of collapsed comments

src/features/comment/Comment.tsx

@@ -109,12 +109,15 @@ function Comment({
   depth,
   absoluteDepth,
   onClick,
-  collapsed,
+  collapsed: _collapsed,
   context,
   routerLink,
   className,
   rootIndex,
 }: CommentProps) {
+  const showCollapsedComment = useAppSelector(
+    (state) => state.settings.general.comments.showCollapsed,
+  );
   const commentFromStore = useAppSelector(
     (state) => state.comment.commentById[commentView.comment.id],
   );
@@ -128,6 +131,11 @@ function Comment({
 
   const commentEllipsisHandleRef = useRef<CommentEllipsisHandle>(null);
 
+  const collapsed =
+    showCollapsedComment && !commentView.counts.child_count
+      ? false
+      : _collapsed;
+
   const onCommentLongPress = useCallback(() => {
     commentEllipsisHandleRef.current?.present();
   }, []);
@@ -183,27 +191,32 @@ function Comment({
                   <CommentVote item={commentView} />
                   <Edited item={commentView} />
                   <div style={{ flex: 1 }} />
-                  {!collapsed ? (
-                    <ActionsContainer>
-                      {renderActions()}
-                      <CommentEllipsis
-                        comment={commentView}
-                        rootIndex={rootIndex}
-                        ref={commentEllipsisHandleRef}
-                      />
-                      <Ago date={comment.published} />
-                    </ActionsContainer>
-                  ) : (
+                  <ActionsContainer
+                    className={collapsed ? "ion-hide" : undefined}
+                  >
+                    {renderActions()}
+                    <CommentEllipsis
+                      comment={commentView}
+                      rootIndex={rootIndex}
+                      ref={commentEllipsisHandleRef}
+                    />
+                    <Ago date={comment.published} />
+                  </ActionsContainer>
+                  {collapsed && (
                     <>
                       <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
                     className="collapse-md-margins"
                     onClick={(e) => {

src/features/comment/commentSlice.ts

@@ -51,14 +51,6 @@ export const commentSlice = createSlice({
       if (comment.my_vote)
         state.commentVotesById[comment.comment.id] = comment.my_vote as 1 | -1;
     },
-
-    updateCommentCollapseState: (
-      state,
-      action: PayloadAction<{ commentId: number; collapsed: boolean }>,
-    ) => {
-      state.commentCollapsedById[action.payload.commentId] =
-        action.payload.collapsed;
-    },
     toggleCommentCollapseState: (state, action: PayloadAction<number>) => {
       state.commentCollapsedById[action.payload] =
         !state.commentCollapsedById[action.payload];
@@ -86,7 +78,6 @@ export const commentSlice = createSlice({
 export const {
   receivedComments,
   mutatedComment,
-  updateCommentCollapseState,
   toggleCommentCollapseState,
   updateCommentVote,
   updateCommentSaved,

src/features/comment/inTree/CommentTree.tsx

@@ -2,7 +2,7 @@ import { CommentNodeI } from "../../../helpers/lemmy";
 import React, { RefObject, memo, useContext, useMemo } from "react";
 import CommentHr from "./CommentHr";
 import { useAppDispatch, useAppSelector } from "../../../store";
-import { updateCommentCollapseState } from "../commentSlice";
+import { toggleCommentCollapseState } from "../commentSlice";
 import CommentExpander from "./CommentExpander";
 import { OTapToCollapseType } from "../../../services/db";
 import { getOffsetTop, scrollIntoView } from "../../../helpers/dom";
@@ -34,8 +34,8 @@ function CommentTree({
     (state) =>
       state.comment.commentCollapsedById[comment.comment_view.comment.id],
   );
-  const { tapToCollapse } = useAppSelector(
-    (state) => state.settings.general.comments,
+  const tapToCollapse = useAppSelector(
+    (state) => state.settings.general.comments.tapToCollapse,
   );
   const { activePageRef } = useContext(AppContext);
 
@@ -53,13 +53,8 @@ function CommentTree({
     return false;
   }, [comment.comment_view.comment.path, highlightedCommentId]);
 
-  function setCollapsed(collapsed: boolean) {
-    dispatch(
-      updateCommentCollapseState({
-        commentId: comment.comment_view.comment.id,
-        collapsed,
-      }),
-    );
+  function toggleCollapsed() {
+    dispatch(toggleCommentCollapseState(comment.comment_view.comment.id));
   }
 
   if (
@@ -101,7 +96,7 @@ function CommentTree({
           )
             return;
 
-          setCollapsed(!collapsed);
+          toggleCollapsed();
 
           scrollCommentIntoViewIfNeeded(e.target, activePageRef);
         }}

src/features/settings/general/comments/Comments.tsx

@@ -8,6 +8,7 @@ import HighlightNewAccount from "./HighlightNewAccount";
 import TouchFriendlyLinks from "./TouchFriendlyLinks";
 import TapToCollapse from "./TapToCollapse";
 import ShowCommentImages from "./ShowCommentImages";
+import ShowCollapsed from "./ShowCollapsed";
 
 export default function Comments() {
   return (
@@ -24,6 +25,7 @@ export default function Comments() {
         <HighlightNewAccount />
         <TouchFriendlyLinks />
         <ShowCommentImages />
+        <ShowCollapsed />
       </IonList>
     </>
   );

src/features/settings/general/comments/ShowCollapsed.tsx

@@ -0,0 +1,22 @@
+import { IonToggle } from "@ionic/react";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { InsetIonItem } from "../../shared/formatting";
+import { setShowCollapsedComment } from "../../settingsSlice";
+
+export default function ShowCollapsed() {
+  const dispatch = useAppDispatch();
+  const showCollapsedComment = useAppSelector(
+    (state) => state.settings.general.comments.showCollapsed,
+  );
+
+  return (
+    <InsetIonItem>
+      <IonToggle
+        checked={showCollapsedComment}
+        onIonChange={(e) => dispatch(setShowCollapsedComment(e.detail.checked))}
+      >
+        Show Collapsed Comment
+      </IonToggle>
+    </InsetIonItem>
+  );
+}

src/features/settings/settingsSlice.tsx

@@ -102,6 +102,7 @@ interface SettingsState {
       highlightNewAccount: boolean;
       touchFriendlyLinks: boolean;
       showCommentImages: boolean;
+      showCollapsed: boolean;
     };
     posts: {
       sort: SortType;
@@ -191,6 +192,7 @@ export const initialState: SettingsState = {
       highlightNewAccount: true,
       touchFriendlyLinks: true,
       showCommentImages: true,
+      showCollapsed: false,
     },
     posts: {
       sort: "Active",
@@ -325,6 +327,10 @@ export const appearanceSlice = createSlice({
       state.general.comments.showCommentImages = action.payload;
       db.setSetting("show_comment_images", action.payload);
     },
+    setShowCollapsedComment(state, action: PayloadAction<boolean>) {
+      state.general.comments.showCollapsed = 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);
@@ -637,6 +643,9 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
       const filtered_keywords = await db.getSetting("filtered_keywords");
       const touch_friendly_links = await db.getSetting("touch_friendly_links");
       const show_comment_images = await db.getSetting("show_comment_images");
+      const show_collapsed_comment = await db.getSetting(
+        "show_collapsed_comment",
+      );
       const no_subscribed_in_feed = await db.getSetting(
         "no_subscribed_in_feed",
       );
@@ -713,6 +722,9 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
             showCommentImages:
               show_comment_images ??
               initialState.general.comments.showCommentImages,
+            showCollapsed:
+              show_collapsed_comment ??
+              initialState.general.comments.showCollapsed,
           },
           posts: {
             disableMarkingRead:
@@ -824,6 +836,7 @@ export const {
   setDefaultFeed,
   setNoSubscribedInFeed,
   setAlwaysUseReaderMode,
+  setShowCollapsedComment,
 } = appearanceSlice.actions;
 
 export default appearanceSlice.reducer;

src/features/shared/sliding/BaseSlidingVote.tsx

@@ -37,7 +37,7 @@ import {
 } from "../../../helpers/toastMessages";
 import {
   saveComment,
-  updateCommentCollapseState,
+  toggleCommentCollapseState,
   voteOnComment,
 } from "../../comment/commentSlice";
 import { PageContext } from "../../auth/PageContext";
@@ -247,16 +247,11 @@ function BaseSlidingVoteInternal({
     (e: TouchEvent | MouseEvent) => {
       if (isPost) return;
 
-      dispatch(
-        updateCommentCollapseState({
-          commentId: item.comment.id,
-          collapsed: !collapsed,
-        }),
-      );
+      dispatch(toggleCommentCollapseState(item.comment.id));
 
       if (e.target) scrollCommentIntoViewIfNeeded(e.target, activePageRef);
     },
-    [collapsed, dispatch, isPost, item, activePageRef],
+    [dispatch, isPost, item, activePageRef],
   );
   const collapseAction = useMemo(() => {
     return {

src/services/db.ts

@@ -305,6 +305,7 @@ export type SettingValueTypes = {
   embed_crossposts: boolean;
   show_community_icons: boolean;
   autoplay_media: AutoplayMediaType;
+  show_collapsed_comment: boolean;
 };
 
 export interface ISettingItem<T extends keyof SettingValueTypes> {