chore: rename `enableFoldMemo` (#671)

* chore: rename `enableFoldMemo`

* chore: update

web/src/App.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from "react-i18next";
 import { RouterProvider } from "react-router-dom";
 import { globalService, locationService } from "./services";
 import { useAppSelector } from "./store";
-import Loading from "./pages/Loading";
 import router from "./router";
 import * as storage from "./helpers/storage";
 import { getSystemColorScheme } from "./helpers/utils";
+import Loading from "./pages/Loading";
 
 function App() {
   const { i18n } = useTranslation();
@@ -69,7 +69,7 @@ function App() {
     const root = document.documentElement;
     if (mode === "light") {
       root.classList.remove("dark");
-    } else {
+    } else if (mode === "dark") {
       root.classList.add("dark");
     }
   }, [mode]);

web/src/components/MemoContent.tsx

@@ -52,7 +52,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
       return;
     }
 
-    if (displayConfig.enableExpand && user && user.localSetting.isFoldingEnabled) {
+    if (displayConfig.enableExpand && user && user.localSetting.enableFoldMemo) {
       if (foldedContent.length !== content.length) {
         setState({
           ...state,
@@ -65,7 +65,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         expandButtonStatus: -1,
       });
     }
-  }, [user?.localSetting.isFoldingEnabled]);
+  }, [user?.localSetting.enableFoldMemo]);
 
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     if (onMemoContentClick) {

web/src/components/Settings/PreferencesSection.tsx

@@ -61,7 +61,7 @@ const PreferencesSection = () => {
   };
 
   const handleIsFoldingEnabledChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    userService.upsertLocalSetting("isFoldingEnabled", event.target.checked);
+    userService.upsertLocalSetting("enableFoldMemo", event.target.checked);
   };
 
   return (
@@ -129,7 +129,7 @@ const PreferencesSection = () => {
       </label>
       <label className="form-label selector">
         <span className="normal-text">{t("setting.preference-section.enable-folding-memo")}</span>
-        <Switch className="ml-2" checked={localSetting.isFoldingEnabled} onChange={handleIsFoldingEnabledChanged} />
+        <Switch className="ml-2" checked={localSetting.enableFoldMemo} onChange={handleIsFoldingEnabledChanged} />
       </label>
     </div>
   );

web/src/less/memo-editor.less

@@ -71,13 +71,13 @@
           }
 
           > .resource-action-list {
-            @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-36 max-h-52 overflow-auto font-mono bg-zinc-100;
+            @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-auto overflow-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600;
 
             > .resource-action-item {
-              @apply w-full flex text-black cursor-pointer rounded text-sm leading-6 px-2 truncate hover:bg-zinc-300 shrink-0;
+              @apply w-full flex text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 truncate hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0;
 
               > .icon-img {
-                @apply w-4 mr-2;
+                @apply w-4 mr-1;
               }
             }
           }

web/src/services/userService.ts

@@ -14,7 +14,7 @@ const defaultSetting: Setting = {
 };
 
 const defaultLocalSetting: LocalSetting = {
-  isFoldingEnabled: true,
+  enableFoldMemo: true,
 };
 
 export const convertResponseModelUser = (user: User): User => {

web/src/types/modules/setting.d.ts

@@ -8,7 +8,7 @@ interface Setting {
 }
 
 interface LocalSetting {
-  isFoldingEnabled: boolean;
+  enableFoldMemo: boolean;
 }
 
 interface UserLocaleSetting {