feat: folding options (#459)

* feat: folding options

* chore: update

* chore: update

Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/components/MemoContent.tsx

@@ -2,6 +2,8 @@ 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 } from "../helpers/consts";
+import useLocalStorage from "../hooks/useLocalStorage";
 import "../less/memo-content.less";
 
 export interface DisplayConfig {
@@ -31,6 +33,7 @@ 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 [state, setState] = useState<State>({
     expandButtonStatus: -1,
   });
@@ -45,7 +48,7 @@ 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,

web/src/components/Settings/PreferencesSection.tsx

@@ -1,7 +1,14 @@
 import { useTranslation } from "react-i18next";
+import Switch from "@mui/joy/Switch";
 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,
+  SETTING_IS_FOLDING_ENABLED_KEY,
+  IS_FOLDING_ENABLED_DEFAULT_VALUE,
+} from "../../helpers/consts";
+import useLocalStorage from "../../hooks/useLocalStorage";
 import Selector from "../common/Selector";
 import "../../less/settings/preferences-section.less";
 
@@ -37,6 +44,8 @@ const PreferencesSection = () => {
     };
   });
 
+  const [isFoldingEnabled, setIsFoldingEnabled] = useLocalStorage(SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE);
+
   const handleLocaleChanged = async (value: string) => {
     await userService.upsertUserSetting("locale", value);
     globalService.setLocale(value as Locale);
@@ -50,6 +59,10 @@ const PreferencesSection = () => {
     await userService.upsertUserSetting("memoDisplayTsOption", value);
   };
 
+  const handleIsFoldingEnabledChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsFoldingEnabled(event.target.checked);
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -67,6 +80,10 @@ const PreferencesSection = () => {
           handleValueChanged={handleDefaultMemoVisibilityChanged}
         />
       </label>
+      <label className="form-label selector">
+        <span className="normal-text">{t("setting.preference-section.fold-memo")}</span>
+        <Switch className="ml-2" checked={isFoldingEnabled} onChange={handleIsFoldingEnabledChanged} />
+      </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,7 @@ export const MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS = [
   { text: "created_ts", value: "updated_ts" },
 ];
 
+export const IS_FOLDING_ENABLED_DEFAULT_VALUE = true;
+export const SETTING_IS_FOLDING_ENABLED_KEY = "setting_IS_FOLDING_ENABLED";
+
 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

@@ -139,6 +139,7 @@
     },
     "preference-section": {
       "default-memo-visibility": "Default memo visibility",
+      "fold-memo": "Fold Memo",
       "editor-font-style": "Editor font style",
       "mobile-editor-style": "Mobile editor style",
       "default-memo-sort-option": "Display by created/updated time",

web/src/locales/vi.json

@@ -138,6 +138,7 @@
     },
     "preference-section": {
       "default-memo-visibility": "Chế độ memo mặc định",
+      "fold-memo": "nếp gấp Memo",
       "editor-font-style": "Thay đổi font cho trình soạn thảo",
       "mobile-editor-style": "Vị trí editor trên mobile",
       "default-memo-sort-option": "Sắp xếp theo thời gian đã tạo",

web/src/locales/zh.json

@@ -139,6 +139,7 @@
     },
     "preference-section": {
       "default-memo-visibility": "默认 Memo 可见性",
+      "fold-memo": "折叠 Memo",
       "editor-font-style": "编辑器字体样式",
       "mobile-editor-style": "移动端编辑器样式",
       "default-memo-sort-option": "按创建时间/更新时间显示",