feat: folding options

web/src/components/MemoContent.tsx

@@ -2,6 +2,13 @@ import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { marked } from "../labs/marked";
 import Icon from "./Icon";
+import {
+  SETTING_IS_FOLDING_ENABLED_KEY,
+  IS_FOLDING_ENABLED_DEFAULT_VALUE,
+  SETTING_IS_FOLDING_DEFAULT_KEY,
+  IS_FOLDING_DEFAULT_DEFAULT_VALUE,
+} from "../helpers/consts";
+import useLocalStorage from "../hooks/useLocalStorage";
 import "../less/memo-content.less";
 
 export interface DisplayConfig {
@@ -31,6 +38,8 @@ const MAX_MEMO_CONTAINER_HEIGHT = 384;
 const MemoContent: React.FC<Props> = (props: Props) => {
   const { className, content, onMemoContentClick, onMemoContentDoubleClick } = props;
   const { t } = useTranslation();
+  const [isFoldingEnabled] = useLocalStorage(SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE);
+  const [isFoldingDefault] = useLocalStorage(SETTING_IS_FOLDING_DEFAULT_KEY, IS_FOLDING_DEFAULT_DEFAULT_VALUE);
   const [state, setState] = useState<State>({
     expandButtonStatus: -1,
   });
@@ -45,11 +54,11 @@ const MemoContent: React.FC<Props> = (props: Props) => {
       return;
     }
 
-    if (displayConfig.enableExpand) {
+    if (displayConfig.enableExpand && isFoldingEnabled) {
       if (Number(memoContentContainerRef.current?.clientHeight) > MAX_MEMO_CONTAINER_HEIGHT) {
         setState({
           ...state,
-          expandButtonStatus: 0,
+          expandButtonStatus: isFoldingDefault ? 0 : 1,
         });
       }
     }

web/src/components/Settings/PreferencesSection.tsx

@@ -1,7 +1,17 @@
 import { useTranslation } from "react-i18next";
 import { globalService, userService } from "../../services";
 import { useAppSelector } from "../../store";
-import { VISIBILITY_SELECTOR_ITEMS, MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS } from "../../helpers/consts";
+import {
+  VISIBILITY_SELECTOR_ITEMS,
+  MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS,
+  IS_FOLDING_DEFAULT_SELECTOR_ITEMS,
+  IS_FOLDING_ENABLED_SELECTOR_ITEMS,
+  SETTING_IS_FOLDING_ENABLED_KEY,
+  IS_FOLDING_ENABLED_DEFAULT_VALUE,
+  SETTING_IS_FOLDING_DEFAULT_KEY,
+  IS_FOLDING_DEFAULT_DEFAULT_VALUE,
+} from "../../helpers/consts";
+import useLocalStorage from "../../hooks/useLocalStorage";
 import Selector from "../common/Selector";
 import "../../less/settings/preferences-section.less";
 
@@ -37,6 +47,22 @@ const PreferencesSection = () => {
     };
   });
 
+  const isFoldingEnabledSelectorItems = IS_FOLDING_ENABLED_SELECTOR_ITEMS.map((item) => {
+    return {
+      value: String(item.value),
+      text: t(`common.${item.text}`),
+    };
+  });
+  const [isFoldingEnabled, setIsFoldingEnabled] = useLocalStorage(SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE);
+
+  const isFoldingDefaultSelectorItems = IS_FOLDING_DEFAULT_SELECTOR_ITEMS.map((item) => {
+    return {
+      value: String(item.value),
+      text: t(`common.${item.text}`),
+    };
+  });
+  const [isFoldingDefault, setIsFoldingDefault] = useLocalStorage(SETTING_IS_FOLDING_DEFAULT_KEY, IS_FOLDING_DEFAULT_DEFAULT_VALUE);
+
   const handleLocaleChanged = async (value: string) => {
     await userService.upsertUserSetting("locale", value);
     globalService.setLocale(value as Locale);
@@ -50,6 +76,14 @@ const PreferencesSection = () => {
     await userService.upsertUserSetting("memoDisplayTsOption", value);
   };
 
+  const handleIsFoldingEnabledChanged = (value: string) => {
+    setIsFoldingEnabled(value === "true");
+  };
+
+  const handleIsFoldingDefaultChanged = async (value: string) => {
+    setIsFoldingDefault(value === "true");
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -67,6 +101,26 @@ const PreferencesSection = () => {
           handleValueChanged={handleDefaultMemoVisibilityChanged}
         />
       </label>
+      <label className="form-label selector">
+        <span className="normal-text">{t("setting.preference-section.is-folding-fuction-enabled")}</span>
+        <Selector
+          className="ml-2 w-32"
+          value={String(isFoldingEnabled)}
+          dataSource={isFoldingEnabledSelectorItems}
+          handleValueChanged={handleIsFoldingEnabledChanged}
+        />
+      </label>
+      {isFoldingEnabled && (
+        <label className="form-label selector">
+          <span className="normal-text">{t("setting.preference-section.is-folding-default")}</span>
+          <Selector
+            className="ml-2 w-32"
+            value={String(isFoldingDefault)}
+            dataSource={isFoldingDefaultSelectorItems}
+            handleValueChanged={handleIsFoldingDefaultChanged}
+          />
+        </label>
+      )}
       <label className="form-label selector">
         <span className="normal-text">{t("setting.preference-section.default-memo-sort-option")}</span>
         <Selector

web/src/helpers/consts.ts

@@ -18,4 +18,18 @@ export const MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS = [
   { text: "created_ts", value: "updated_ts" },
 ];
 
+export const IS_FOLDING_ENABLED_SELECTOR_ITEMS = [
+  { text: "true", value: true },
+  { text: "false", value: false },
+];
+export const IS_FOLDING_ENABLED_DEFAULT_VALUE = true;
+export const SETTING_IS_FOLDING_ENABLED_KEY = "setting_IS_FOLDING_ENABLED";
+
+export const IS_FOLDING_DEFAULT_SELECTOR_ITEMS = [
+  { text: "true", value: true },
+  { text: "false", value: false },
+];
+export const IS_FOLDING_DEFAULT_DEFAULT_VALUE = true;
+export const SETTING_IS_FOLDING_DEFAULT_KEY = "setting_IS_FOLDING_DEFAULT";
+
 export const TAB_SPACE_WIDTH = 2;

web/src/hooks/useLocalStorage.ts

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+const useLocalStorage = <T>(key: string, initialValue: T) => {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return [storedValue, setValue] as const;
+};
+
+export default useLocalStorage;

web/src/locales/en.json

@@ -41,7 +41,9 @@
     "changed": "changed",
     "update-on": "Update on",
     "fold": "Fold",
-    "expand": "Expand"
+    "expand": "Expand",
+    "true": "True",
+    "false": "False"
   },
   "slogan": "An open-source, self-hosted memo hub for knowledge management and collaboration.",
   "auth": {
@@ -139,6 +141,8 @@
     },
     "preference-section": {
       "default-memo-visibility": "Default memo visibility",
+      "is-folding-fuction-enabled": "Is folding function enabled",
+      "is-folding-default": "Is folding default",
       "editor-font-style": "Editor font style",
       "mobile-editor-style": "Mobile editor style",
       "default-memo-sort-option": "Display by created/updated time",

web/src/locales/zh.json

@@ -41,7 +41,9 @@
     "changed": "已更改",
     "update-on": "更新于",
     "fold": "折叠",
-    "expand": "展开"
+    "expand": "展开",
+    "true": "是",
+    "false": "否"
   },
   "slogan": "An open-source, self-hosted memo hub for knowledge management and collaboration.",
   "auth": {
@@ -139,6 +141,8 @@
     },
     "preference-section": {
       "default-memo-visibility": "默认 Memo 可见性",
+      "is-folding-fuction-enabled": "开启折叠功能",
+      "is-folding-default": "默认折叠",
       "editor-font-style": "编辑器字体样式",
       "mobile-editor-style": "移动端编辑器样式",
       "default-memo-sort-option": "按创建时间/更新时间显示",