Feat: Persist 'Share as Image' options

src/features/share/asImage/DefaultPreferences.ts

@@ -0,0 +1,16 @@
+import { ShareAsImagePreferences } from "./ShareAsImagePreferences";
+
+export const defaultPreferences: ShareAsImagePreferences = {
+  common: {
+    hideUsernames: false,
+    watermark: false,
+  },
+  post: {
+    hideCommunity: false,
+  },
+  comment: {
+    includePostContent: false,
+    includePostDetails: false,
+    allParentComments: false,
+  },
+};

src/features/share/asImage/ShareAsImage.tsx

@@ -26,6 +26,7 @@ import { webviewServerUrl } from "#/services/nativeFetch";
 
 import AddRemoveButtons from "./AddRemoveButtons";
 import { ShareAsImageData } from "./ShareAsImageModal";
+import { useShareAsImagePreferences } from "./ShareAsImagePreferences";
 import Watermark from "./Watermark";
 import includeStyleProperties from "./includeStyleProperties";
 
@@ -163,22 +164,28 @@ interface ShareAsImageProps {
 export default function ShareAsImage({ data, header }: ShareAsImageProps) {
   const presentToast = useAppToast();
 
-  const [hideUsernames, setHideUsernames] = useState(false);
-  const [hideCommunity, setHideCommunity] = useState(false);
-  const [includePostDetails, setIncludePostDetails] = useState(
-    !("comment" in data),
-  );
-  const [includePostText, setIncludePostText] = useState(true);
-  const [watermark, setWatermark] = useState(false);
-
   const [blob, setBlob] = useState<Blob | undefined>();
   const [imageSrc, setImageSrc] = useState("");
 
-  const [minDepth, setMinDepth] = useState(
-    ("comment" in data
+  const {
+    shareAsImagePreferences: {
+      comment: { includePostContent, includePostDetails, allParentComments },
+      common: { hideUsernames, watermark },
+      post: { hideCommunity },
+    },
+    setShareAsImagePreferences,
+  } = useShareAsImagePreferences();
+
+  const isComment = "comment" in data;
+
+  // eslint-disable-next-line no-nested-ternary
+  const defaultMinDepth = allParentComments
+    ? 0
+    : isComment
       ? getDepthFromComment(data.comment.comment)
-      : undefined) ?? 0,
-  );
+      : 0;
+
+  const [minDepth, setMinDepth] = useState(defaultMinDepth ?? 0);
 
   const hasPostBody = data.post.post.body || data.post.post.url;
 
@@ -191,7 +198,7 @@ export default function ShareAsImage({ data, header }: ShareAsImageProps) {
   }, [blob]);
 
   const filteredComments = (() => {
-    if (!("comment" in data)) return [];
+    if (!isComment) return [];
 
     const filtered = data.comments
       .filter(
@@ -239,15 +246,15 @@ export default function ShareAsImage({ data, header }: ShareAsImageProps) {
     watermark,
     hideUsernames,
     hideCommunity,
+    includePostContent,
     includePostDetails,
-    includePostText,
+    allParentComments,
   ]);
 
   async function onShare() {
     if (!blob) return;
 
-    const apId =
-      "comment" in data ? data.comment.comment.ap_id : data.post.post.ap_id;
+    const apId = isComment ? data.comment.comment.ap_id : data.post.post.ap_id;
 
     const filename = `${apId
       .replace(/^https:\/\//, "")
@@ -307,23 +314,31 @@ export default function ShareAsImage({ data, header }: ShareAsImageProps) {
       )}
 
       <StyledIonList inset lines="full">
-        {"comment" in data && (
+        {isComment && (
           <>
             <IonItem>
               <IonToggle
                 checked={includePostDetails}
-                onIonChange={(e) => setIncludePostDetails(e.detail.checked)}
+                onIonChange={({ detail: { checked } }) =>
+                  setShareAsImagePreferences({
+                    comment: { includePostDetails: checked },
+                  })
+                }
               >
                 Include Post Details
               </IonToggle>
             </IonItem>
-            {includePostDetails && hasPostBody ? (
+            {(isComment ? includePostDetails : true) && hasPostBody ? (
               <IonItem>
                 <IonToggle
-                  checked={includePostText}
-                  onIonChange={(e) => setIncludePostText(e.detail.checked)}
+                  checked={includePostContent}
+                  onIonChange={({ detail: { checked } }) =>
+                    setShareAsImagePreferences({
+                      comment: { includePostContent: checked },
+                    })
+                  }
                 >
-                  Include Post Text
+                  Include Post Content
                 </IonToggle>
               </IonItem>
             ) : undefined}
@@ -341,8 +356,30 @@ export default function ShareAsImage({ data, header }: ShareAsImageProps) {
                     removeDisabled={
                       minDepth === getDepthFromComment(data.comment.comment)
                     }
-                    onAdd={() => setMinDepth((minDepth) => minDepth - 1)}
-                    onRemove={() => setMinDepth((minDepth) => minDepth + 1)}
+                    onAdd={() => {
+                      setMinDepth((minDepth) => {
+                        const newValue = minDepth - 1;
+                        if (newValue === 0) {
+                          setShareAsImagePreferences({
+                            comment: { allParentComments: true },
+                          });
+                        }
+                        return newValue;
+                      });
+                    }}
+                    onRemove={() => {
+                      setMinDepth((minDepth) => {
+                        const newValue = minDepth + 1;
+                        if (
+                          newValue === getDepthFromComment(data.comment.comment)
+                        ) {
+                          setShareAsImagePreferences({
+                            comment: { allParentComments: false },
+                          });
+                        }
+                        return newValue;
+                      });
+                    }}
                   />
                 </ParentCommentValues>
               </IonItem>
@@ -353,7 +390,9 @@ export default function ShareAsImage({ data, header }: ShareAsImageProps) {
           <IonItem>
             <IonToggle
               checked={hideCommunity}
-              onIonChange={(e) => setHideCommunity(e.detail.checked)}
+              onIonChange={({ detail: { checked } }) =>
+                setShareAsImagePreferences({ post: { hideCommunity: checked } })
+              }
             >
               Hide Community
             </IonToggle>
@@ -362,15 +401,19 @@ export default function ShareAsImage({ data, header }: ShareAsImageProps) {
         <IonItem>
           <IonToggle
             checked={hideUsernames}
-            onIonChange={(e) => setHideUsernames(e.detail.checked)}
+            onIonChange={({ detail: { checked } }) =>
+              setShareAsImagePreferences({ common: { hideUsernames: checked } })
+            }
           >
             Hide Usernames
           </IonToggle>
         </IonItem>
         <IonItem lines="none">
           <IonToggle
             checked={watermark}
-            onIonChange={(e) => setWatermark(e.detail.checked)}
+            onIonChange={({ detail: { checked } }) =>
+              setShareAsImagePreferences({ common: { watermark: checked } })
+            }
           >
             Watermark
           </IonToggle>
@@ -385,16 +428,16 @@ export default function ShareAsImage({ data, header }: ShareAsImageProps) {
           <ShareImageContext.Provider
             value={{ capturing: true, hideUsernames, hideCommunity }}
           >
-            {includePostDetails && (
+            {(isComment ? includePostDetails : true) && (
               <PostHeader
-                className={!("comment" in data) ? hideBottomBorderCss : ""}
+                className={!isComment ? hideBottomBorderCss : ""}
                 post={data.post}
-                showPostText={includePostText}
+                showPostText={isComment ? includePostContent : true}
                 showPostActions={false}
                 constrainHeight={false}
               />
             )}
-            {"comment" in data && (
+            {isComment && (
               <>
                 {includePostDetails && <PostCommentSpacer />}
                 <CommentTree

src/features/share/asImage/ShareAsImagePreferences.ts

@@ -0,0 +1,90 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { useCallback, useEffect } from "react";
+
+import { DeepPartial } from "#/helpers/deepPartial";
+import { db } from "#/services/db";
+
+import { AppDispatch, useAppDispatch, useAppSelector } from "../../../store";
+import { defaultPreferences } from "./DefaultPreferences";
+
+export interface ShareAsImagePreferences {
+  common: {
+    hideUsernames: boolean;
+    watermark: boolean;
+  };
+  post: {
+    hideCommunity: boolean;
+  };
+  comment: {
+    includePostDetails: boolean;
+    includePostContent: boolean;
+    allParentComments: boolean;
+  };
+}
+
+const initialState = defaultPreferences;
+
+const { reducer, actions } = createSlice({
+  name: "shareAsImagePreferences",
+  initialState,
+  reducers: {
+    setShareAsImagePreferences: (
+      state,
+      action: PayloadAction<DeepPartial<ShareAsImagePreferences>>,
+    ) => {
+      const { post, comment, common } = action.payload;
+
+      state.common.hideUsernames =
+        common?.hideUsernames ?? state.common.hideUsernames;
+      state.common.watermark = common?.watermark ?? state.common.watermark;
+
+      state.post.hideCommunity =
+        post?.hideCommunity ?? state.post.hideCommunity;
+
+      state.comment.includePostContent =
+        comment?.includePostContent ?? state.comment.includePostContent;
+      state.comment.includePostDetails =
+        comment?.includePostDetails ?? state.comment.includePostDetails;
+      state.comment.allParentComments =
+        comment?.allParentComments ?? state.comment.allParentComments;
+
+      db.setSetting(
+        "share_as_image_preferences",
+        JSON.parse(JSON.stringify(state)),
+      );
+    },
+  },
+});
+
+export default reducer;
+
+export const useShareAsImagePreferences = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    // Load settings from DB on mount
+    dispatch(async (dispatchImpl: AppDispatch) => {
+      const share_as_image_preferences = await db.getSetting(
+        "share_as_image_preferences",
+      );
+      dispatchImpl(
+        actions.setShareAsImagePreferences(
+          share_as_image_preferences ?? initialState,
+        ),
+      );
+    });
+  }, [dispatch]);
+
+  const shareAsImagePreferences = useAppSelector(
+    (state) => state.shareAsImagePreferences,
+  );
+
+  const setShareAsImagePreferences = useCallback(
+    (payload: DeepPartial<ShareAsImagePreferences>) => {
+      dispatch(actions.setShareAsImagePreferences(payload));
+    },
+    [dispatch],
+  );
+
+  return { shareAsImagePreferences, setShareAsImagePreferences };
+};

src/helpers/deepPartial.ts

@@ -0,0 +1,7 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends Array<infer U>
+    ? Array<DeepPartial<U>>
+    : T[P] extends ReadonlyArray<infer U>
+      ? ReadonlyArray<DeepPartial<U>>
+      : DeepPartial<T[P]>;
+};

src/services/db.ts

@@ -11,6 +11,7 @@ import {
 
 import { COMMENT_SORTS } from "#/features/comment/CommentSort";
 import { ALL_POST_SORTS } from "#/features/feed/PostSort";
+import { ShareAsImagePreferences } from "#/features/share/asImage/ShareAsImagePreferences";
 import { arrayOfAll } from "#/helpers/array";
 
 export interface IPostMetadata {
@@ -360,6 +361,7 @@ export interface GlobalSettingValueTypes {
   remember_community_comment_sort: boolean;
   remember_community_post_sort: boolean;
   remember_post_appearance_type: boolean;
+  share_as_image_preferences: ShareAsImagePreferences;
   show_collapsed_comment: boolean;
   show_comment_images: boolean;
   show_community_icons: boolean;
@@ -456,6 +458,7 @@ export const ALL_GLOBAL_SETTINGS = arrayOfAll<keyof GlobalSettingValueTypes>()([
   "user_instance_url_display",
   "vote_display_mode",
   "votes_theme",
+  "share_as_image_preferences",
 ]);
 
 export interface ISettingItem<T extends keyof SettingValueTypes> {

src/store.tsx

@@ -49,6 +49,7 @@ import settingsSlice, {
   getFilteredKeywords,
   getFilteredWebsites,
 } from "./features/settings/settingsSlice";
+import ShareAsImagePreferencesSlice from "./features/share/asImage/ShareAsImagePreferences";
 import spoilerSlice from "./features/shared/markdown/components/spoiler/spoilerSlice";
 import uploadImageSlice from "./features/shared/markdown/editing/uploadImageSlice";
 import userTagSlice from "./features/tags/userTagSlice";
@@ -77,6 +78,7 @@ const store = configureStore({
     redgifs: redgifsSlice,
     resolve: resolveSlice,
     settings: settingsSlice,
+    shareAsImagePreferences: ShareAsImagePreferencesSlice,
     site: siteSlice,
     spoiler: spoilerSlice,
     thumbnail: thumbnailSlice,