feat(treeview): add option to disable treeview auto expansion (https://github.com/cloudreve/cloudreve/issues/2545)

package.json

@@ -110,9 +110,6 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css,scss,md}": [
       "prettier --write"
-    ],
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --fix"
     ]
   }
 }

public/locales/en-US/application.json

@@ -675,6 +675,9 @@
     "createdAt": "Created at: "
   },
   "setting": {
+    "treeView": "Tree view",
+    "autoExpandTreeView": "Auto expand tree view",
+    "autoExpandTreeViewDes": "When enabled, the file tree in the sidebar will follow the current directory and expand automatically.",
     "syncView": "View settings",
     "syncViewDes": "Remember the view settings of each directory and synchronize to the server.",
     "syncViewOn": "Sync to server",

public/locales/ja-JP/application.json

@@ -676,6 +676,9 @@
     "createdAt": "作成日："
   },
   "setting": {
+    "treeView": "ツリービュー",
+    "autoExpandTreeView": "ツリービューの自動展開",
+    "autoExpandTreeViewDes": "有効にすると、サイドバーのファイルツリーが現在のディレクトリに従って自動的に展開されます。",
     "syncView": "ビュー設定",
     "syncViewDes": "各ディレクトリのビュー設定を記憶し、サーバーに同期します。",
     "syncViewOn": "サーバーに同期",
@@ -851,4 +854,4 @@
     "used": "使用量 - {{size}}",
     "total": "合計容量 - {{size}}"
   }
-}
+}

public/locales/zh-CN/application.json

@@ -679,6 +679,9 @@
     "createdAt": "创建日期："
   },
   "setting": {
+    "treeView": "树视图",
+    "autoExpandTreeView": "自动展开树视图",
+    "autoExpandTreeViewDes": "开启后，侧边栏的文件树会跟随当前目录并自动展开。",
     "syncView": "视图设置",
     "syncViewDes": "是否记住各个目录的视图设置，并同步到服务器。",
     "syncViewOn": "同步到服务器",

public/locales/zh-TW/application.json

@@ -675,6 +675,9 @@
     "createdAt": "建立日期："
   },
   "setting": {
+    "treeView": "樹視圖",
+    "autoExpandTreeView": "自動展開樹視圖",
+    "autoExpandTreeViewDes": "開啟後，側邊欄的文件樹會隨當前目錄自動展開。",
     "syncView": "視圖設置",
     "syncViewDes": "是否記住各個目錄的視圖設置，並同步到服務器。",
     "syncViewOn": "同步到服務器",

src/component/FileManager/TreeView/TreeNavigation.tsx

@@ -6,7 +6,7 @@ import React, { useEffect } from "react";
 import { TransitionGroup } from "react-transition-group";
 import { defaultPath, defaultSharedWithMePath, defaultTrashPath } from "../../../hooks/useNavigation.tsx";
 import { useAppSelector } from "../../../redux/hooks.ts";
-import SessionManager from "../../../session";
+import SessionManager, { UserSettings } from "../../../session";
 import CrUri, { Filesystem } from "../../../util/uri.ts";
 import { FileManagerIndex } from "../FileManager.tsx";
 import { FmIndexContext } from "../FmIndexContext.tsx";
@@ -46,7 +46,9 @@ const TreeNavigation = React.memo(
           res.push(b.toString());
         });
       }
-      setExpanded((e) => [...new Set([...e, ...res])]);
+      if (SessionManager.getWithFallback(UserSettings.TreeViewAutoExpand)) {
+        setExpanded((e) => [...new Set([...e, ...res])]);
+      }
     }, [path, base, elements]);
 
     const pinned = usePinned();

src/component/Pages/Setting/PreferenceSetting.tsx

@@ -77,6 +77,9 @@ const PreferenceSetting = ({ setting, setSetting }: PreferenceSettingProps) => {
   const [versionRetentionMax, setVersionRetentionMax] = useState(setting.version_retention_max);
   const [versionRetentionExts, setVersionRetentionExts] = useState<string[] | undefined>(setting.version_retention_ext);
   const [showSaveButton, setShowSaveButton] = useState(false);
+  const [autoExpandTreeView, setAutoExpandTreeView] = useState(
+    SessionManager.getWithFallback(UserSettings.TreeViewAutoExpand),
+  );
 
   const onRetentionCheckChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setVersionRetentionEnabled(e.target.checked);
@@ -170,6 +173,11 @@ const PreferenceSetting = ({ setting, setSetting }: PreferenceSettingProps) => {
       });
   };
 
+  const onAutoExpandTreeViewChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setAutoExpandTreeView(e.target.checked);
+    SessionManager.set(UserSettings.TreeViewAutoExpand, e.target.checked);
+  };
+
   return (
     <Stack spacing={3}>
       <SettingForm title={t("setting.language")} lgWidth={3}>
@@ -326,6 +334,13 @@ const PreferenceSetting = ({ setting, setSetting }: PreferenceSettingProps) => {
         </ToggleButtonGroup>
         <FormHelperText>{t("setting.syncViewDes")}</FormHelperText>
       </SettingForm>
+      <SettingForm title={t("setting.treeView")} lgWidth={12}>
+        <SmallFormControlLabel
+          control={<Checkbox size="small" checked={autoExpandTreeView} onChange={onAutoExpandTreeViewChange} />}
+          label={t("application:setting.autoExpandTreeView")}
+        />
+        <FormHelperText>{t("setting.autoExpandTreeViewDes")}</FormHelperText>
+      </SettingForm>
     </Stack>
   );
 };

src/session/index.ts

@@ -32,6 +32,7 @@ export enum UserSettings {
   GalleryWidth = "gallery_width",
   UploadOverwrite = "upload_overwrite",
   TimeZone = "time_zone",
+  TreeViewAutoExpand = "tree_view_auto_expand",
 }
 
 export const UserSettingsDefault: { [key: string]: any } = {
@@ -61,6 +62,7 @@ export const UserSettingsDefault: { [key: string]: any } = {
   [UserSettings.GalleryWidth]: 220,
   [UserSettings.UploadOverwrite]: false,
   [UserSettings.TimeZone]: "Asia/Shanghai",
+  [UserSettings.TreeViewAutoExpand]: true,
 };
 
 export interface Session extends LoginResponse {