record the status of detail to local storage (#7194)

* record the status of detail to local storage * face recognition view support show detail * feat: optimize code * fix: bug --------- Co-authored-by: zhouwenxuan <aries@Mac.local> Co-authored-by: 杨国璇 <ygx@Hello-word.local>
2025-09-13 13:50:07 +00:00 · 2024-12-23 17:47:20 +08:00
parent 544c4edbf2
commit 2af78338bf
19 changed files with 81 additions and 86 deletions
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -10,7 +10,6 @@ import ViewModes from '../../components/view-modes';
 import SortMenu from '../../components/sort-menu';
 import MetadataViewToolBar from '../../metadata/components/view-toolbar';
 import { PRIVATE_FILE_TYPE } from '../../constants';
-import { DIRENT_DETAIL_MODE } from '../dir-view-mode/constants';

 const propTypes = {
  repoID: PropTypes.string.isRequired,
@@ -25,7 +24,7 @@ const propTypes = {
  sortOrder: PropTypes.string,
  sortItems: PropTypes.func,
  viewId: PropTypes.string,
-  onCloseDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };

 class DirTool extends React.Component {
@@ -92,14 +91,10 @@ class DirTool extends React.Component {
    this.props.sortItems(sortBy, sortOrder);
  };

-  showDirentDetail = () => {
-    this.props.switchViewMode(DIRENT_DETAIL_MODE);
-  };
-
  render() {
    const menuItems = this.getMenu();
    const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission, onToggleDetail } = this.props;
    const propertiesText = TextTranslation.PROPERTIES.value;
    const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
    const isTagView = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.TAGS_PROPERTIES + '/');
@@ -110,8 +105,7 @@ class DirTool extends React.Component {
          <MetadataViewToolBar
            viewId={viewId}
            isCustomPermission={isCustomPermission}
-            showDetail={this.showDirentDetail}
-            closeDetail={this.props.onCloseDetail}
+            onToggleDetail={onToggleDetail}
          />
        </div>
      );
@@ -130,7 +124,7 @@ class DirTool extends React.Component {
          <ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
          <SortMenu sortBy={sortBy} sortOrder={sortOrder} onSelectSortOption={this.onSelectSortOption} />
          {(!isCustomPermission) &&
-            <div className="cur-view-path-btn" onClick={this.showDirentDetail}>
+            <div className="cur-view-path-btn" onClick={onToggleDetail}>
              <span className="sf3-font sf3-font-info" aria-label={propertiesText} title={propertiesText}></span>
            </div>
          }
--- a/frontend/src/components/dir-view-mode/constants.js
+++ b/frontend/src/components/dir-view-mode/constants.js
@@ -1,5 +1,4 @@
 export const LIST_MODE = 'list';
 export const GRID_MODE = 'grid';
-export const DIRENT_DETAIL_MODE = 'detail';
 export const METADATA_MODE = 'metadata';
 export const TAGS_MODE = 'tags';
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -83,7 +83,6 @@ const propTypes = {
  onItemsScroll: PropTypes.func.isRequired,
  eventBus: PropTypes.object,
  updateCurrentDirent: PropTypes.func.isRequired,
-  closeDirentDetail: PropTypes.func.isRequired,
 };

 class DirColumnView extends React.Component {
@@ -211,7 +210,6 @@ class DirColumnView extends React.Component {
              copyFileCallback={this.props.copyFileCallback}
              addFolder={this.props.onAddFolder}
              updateCurrentDirent={this.props.updateCurrentDirent}
-              closeDirentDetail={this.props.closeDirentDetail}
              showDirentDetail={this.props.showDirentDetail}
            />
          )}
@@ -224,7 +222,6 @@ class DirColumnView extends React.Component {
              deleteFilesCallback={this.props.deleteFilesCallback}
              renameFileCallback={this.props.renameFileCallback}
              updateCurrentDirent={this.props.updateCurrentDirent}
-              closeDirentDetail={this.props.closeDirentDetail}
            />
          )}
          {currentMode === LIST_MODE &&
--- a/frontend/src/components/dirent-detail/index.js
+++ b/frontend/src/components/dirent-detail/index.js
@@ -6,9 +6,10 @@ import ViewDetails from '../../metadata/components/view-details';
 import ObjectUtils from '../../metadata/utils/object-utils';
 import { MetadataContext } from '../../metadata';
 import { PRIVATE_FILE_TYPE } from '../../constants';
+import { METADATA_MODE, TAGS_MODE } from '../dir-view-mode/constants';

-const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
-  const isView = useMemo(() => path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES), [path]);
+const Detail = React.memo(({ repoID, path, currentMode, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
+  const isView = useMemo(() => currentMode === METADATA_MODE || path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES), [currentMode, path]);

  useEffect(() => {
    if (isView) return;
@@ -25,6 +26,8 @@ const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fi
    };
  }, [repoID, currentRepoInfo, isView]);

+  if (currentMode === TAGS_MODE) return null;
+
  if (isView) {
    const viewId = path.split('/').pop();
    if (!dirent) return (<ViewDetails viewId={viewId} onClose={onClose} />);
@@ -60,6 +63,7 @@ const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fi
 Detail.propTypes = {
  repoID: PropTypes.string,
  path: PropTypes.string,
+  currentMode: PropTypes.string,
  dirent: PropTypes.object,
  currentRepoInfo: PropTypes.object,
  repoTags: PropTypes.array,
--- a/frontend/src/components/toolbar/selected-dirents-toolbar.js
+++ b/frontend/src/components/toolbar/selected-dirents-toolbar.js
@@ -35,7 +35,6 @@ const propTypes = {
  unSelectDirent: PropTypes.func.isRequired,
  updateDirent: PropTypes.func.isRequired,
  currentMode: PropTypes.string.isRequired,
-  switchViewMode: PropTypes.func.isRequired,
  direntList: PropTypes.array.isRequired,
  onItemRename: PropTypes.func.isRequired,
  showDirentDetail: PropTypes.func.isRequired,
--- a/frontend/src/constants/index.js
+++ b/frontend/src/constants/index.js
@@ -43,3 +43,5 @@ export const SYSTEM_FOLDERS = [
  '/_Internal',
  '/images'
 ];
+
+export const DIRENT_DETAIL_SHOW_KEY = 'sf_dirent_detail_show';
--- a/frontend/src/metadata/components/view-details/index.js
+++ b/frontend/src/metadata/components/view-details/index.js
@@ -4,7 +4,7 @@ import { gettext, mediaUrl } from '../../../utils/constants';
 import { Detail, Header, Body } from '../../../components/dirent-detail/detail';
 import EmptyTip from '../../../components/empty-tip';
 import { useMetadata } from '../../hooks';
-import { VIEW_TYPE } from '../../constants';
+import { VIEW_TYPE, VIEW_TYPES_SUPPORT_SHOW_DETAIL } from '../../constants';

 import './index.css';

@@ -13,7 +13,7 @@ const ViewDetails = ({ viewId, onClose }) => {

  const view = useMemo(() => idViewMap[viewId], [viewId, idViewMap]);
  const icon = useMemo(() => {
-    const type = view.type;
+    const type = view?.type;
    if (type === VIEW_TYPE.GALLERY) return `${mediaUrl}favicons/gallery.png`;
    if (type === VIEW_TYPE.TABLE) return `${mediaUrl}favicons/table.png`;
    if (type === VIEW_TYPE.FACE_RECOGNITION) return `${mediaUrl}favicons/face-recognition-view.png`;
@@ -21,6 +21,8 @@ const ViewDetails = ({ viewId, onClose }) => {
    return `${mediaUrl}img/file/256/file.png`;
  }, [view]);

+  if (!view || !VIEW_TYPES_SUPPORT_SHOW_DETAIL.includes(view.type)) return null;
+
  return (
    <Detail className="sf-metadata-view-detail">
      <Header title={view.name} icon={icon} iconSize={28} onClose={onClose} />
--- a/frontend/src/metadata/components/view-toolbar/face-recognition/index.js
+++ b/frontend/src/metadata/components/view-toolbar/face-recognition/index.js
@@ -4,7 +4,7 @@ import { GalleryGroupBySetter, GallerySliderSetter, SortSetter } from '../../dat
 import { gettext } from '../../../../utils/constants';
 import { EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID, VIEW_TYPE } from '../../../constants';

-const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }) => {
+const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, onToggleDetail }) => {
  const [isShow, setShow] = useState(false);
  const [view, setView] = useState({});

@@ -35,11 +35,11 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  if (!isShow) return null;
-
  return (
    <>
      <div className="sf-metadata-tool-left-operations">
+        {isShow && (
+          <>
            <GalleryGroupBySetter view={{ _id: FACE_RECOGNITION_VIEW_ID }} />
            <GallerySliderSetter view={{ _id: FACE_RECOGNITION_VIEW_ID }} />
            <SortSetter
@@ -52,8 +52,10 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }
              columns={viewColumns}
              modifySorts={modifySorts}
            />
+          </>
+        )}
        {!isCustomPermission && (
-          <div className="cur-view-path-btn ml-2" onClick={showDetail}>
+          <div className="cur-view-path-btn ml-2" onClick={onToggleDetail}>
            <span className="sf3-font sf3-font-info" aria-label={gettext('Properties')} title={gettext('Properties')}></span>
          </div>
        )}
@@ -66,7 +68,7 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }
 FaceRecognitionViewToolbar.propTypes = {
  isCustomPermission: PropTypes.bool,
  readOnly: PropTypes.bool,
-  showDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };

 export default FaceRecognitionViewToolbar;
--- a/frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js
@@ -6,7 +6,7 @@ import { gettext } from '../../../../utils/constants';

 const GalleryViewToolbar = ({
  readOnly, isCustomPermission, view, collaborators,
-  modifyFilters, modifySorts, showDetail,
+  modifyFilters, modifySorts, onToggleDetail,
 }) => {
  const viewType = useMemo(() => view.type, [view]);
  const viewColumns = useMemo(() => {
@@ -48,7 +48,7 @@ const GalleryViewToolbar = ({
          modifySorts={modifySorts}
        />
        {!isCustomPermission && (
-          <div className="cur-view-path-btn ml-2" onClick={showDetail}>
+          <div className="cur-view-path-btn ml-2" onClick={onToggleDetail}>
            <span className="sf3-font sf3-font-info" aria-label={gettext('Properties')} title={gettext('Properties')}></span>
          </div>
        )}
@@ -65,7 +65,7 @@ GalleryViewToolbar.propTypes = {
  collaborators: PropTypes.array,
  modifyFilters: PropTypes.func,
  modifySorts: PropTypes.func,
-  showDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };

 export default GalleryViewToolbar;
--- a/frontend/src/metadata/components/view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/index.js
@@ -9,7 +9,7 @@ import MapViewToolBar from './map-view-toolbar';

 import './index.css';

-const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => {
+const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail }) => {
  const [view, setView] = useState(null);
  const [collaborators, setCollaborators] = useState([]);

@@ -89,14 +89,14 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
          collaborators={collaborators}
          modifyFilters={modifyFilters}
          modifySorts={modifySorts}
-          showDetail={showDetail}
+          onToggleDetail={onToggleDetail}
        />
      )}
      {viewType === VIEW_TYPE.FACE_RECOGNITION && (
        <FaceRecognitionViewToolbar
          isCustomPermission={isCustomPermission}
          view={view}
-          showDetail={showDetail}
+          onToggleDetail={onToggleDetail}
        />
      )}
      {viewType === VIEW_TYPE.KANBAN && (
@@ -107,8 +107,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
          collaborators={collaborators}
          modifyFilters={modifyFilters}
          modifySorts={modifySorts}
-          showDetail={showDetail}
-          closeDetail={closeDetail}
+          onToggleDetail={onToggleDetail}
        />
      )}
      {viewType === VIEW_TYPE.MAP && (
@@ -126,8 +125,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
 ViewToolBar.propTypes = {
  viewId: PropTypes.string,
  isCustomPermission: PropTypes.bool,
-  showDetail: PropTypes.func,
-  closeDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };

 export default ViewToolBar;
--- a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
@@ -12,8 +12,7 @@ const KanbanViewToolBar = ({
  collaborators,
  modifyFilters,
  modifySorts,
-  showDetail,
-  closeDetail,
+  onToggleDetail,
 }) => {
  const viewType = useMemo(() => view.type, [view]);
  const viewColumns = useMemo(() => {
@@ -26,14 +25,14 @@ const KanbanViewToolBar = ({
  }, [viewColumns]);

  const onToggleKanbanSetting = () => {
-    closeDetail();
+    onToggleDetail();
    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
  };

  const toggleDetails = useCallback(() => {
    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.CLOSE_KANBAN_SETTINGS);
-    showDetail();
-  }, [showDetail]);
+    onToggleDetail();
+  }, [onToggleDetail]);

  return (
    <>
@@ -88,7 +87,8 @@ KanbanViewToolBar.propTypes = {
  view: PropTypes.object,
  collaborators: PropTypes.array,
  modifyFilters: PropTypes.func,
-  modifySorts: PropTypes.func
+  modifySorts: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };

 export default KanbanViewToolBar;
--- a/frontend/src/metadata/constants/view.js
+++ b/frontend/src/metadata/constants/view.js
@@ -123,3 +123,5 @@ export const VIEW_DEFAULT_SETTINGS = {
    [KANBAN_SETTINGS_KEYS.COLUMNS]: [],
  }
 };
+
+export const VIEW_TYPES_SUPPORT_SHOW_DETAIL = [VIEW_TYPE.GALLERY, VIEW_TYPE.KANBAN, VIEW_TYPE.FACE_RECOGNITION];
--- a/frontend/src/metadata/hooks/metadata-view.js
+++ b/frontend/src/metadata/hooks/metadata-view.js
@@ -340,7 +340,6 @@ export const MetadataViewProvider = ({
        store: storeRef.current,
        isDirentDetailShow: params.isDirentDetailShow,
        updateCurrentDirent: params.updateCurrentDirent,
-        closeDirentDetail: params.closeDirentDetail,
        showDirentDetail: params.showDirentDetail,
        deleteFilesCallback: deleteFilesCallback,
        renameFileCallback: renameFileCallback,
--- a/frontend/src/metadata/views/face-recognition/index.js
+++ b/frontend/src/metadata/views/face-recognition/index.js
@@ -9,7 +9,7 @@ const FaceRecognition = () => {
  const [showPeopleFaces, setShowPeopleFaces] = useState(false);
  const peopleRef = useRef(null);

-  const { metadata, store } = useMetadataView();
+  const { metadata, store, updateCurrentDirent } = useMetadataView();

  const peoples = useMemo(() => {
    if (!Array.isArray(metadata.rows) || metadata.rows.length === 0) return [];
@@ -21,7 +21,6 @@ const FaceRecognition = () => {
  }, [store]);

  const onRemovePeoplePhotos = useCallback((peopleId, peoplePhotos, { success_callback }) => {
-    //
    store.removePeoplePhotos(peopleId, peoplePhotos, { success_callback });
  }, [store]);

@@ -33,7 +32,8 @@ const FaceRecognition = () => {
  const closePeople = useCallback(() => {
    peopleRef.current = null;
    setShowPeopleFaces(false);
-  }, []);
+    updateCurrentDirent();
+  }, [updateCurrentDirent]);

  const onRename = useCallback((id, newName, oldName) => {
    store.renamePeopleName(id, newName, oldName);
--- a/frontend/src/metadata/views/face-recognition/peoples/index.js
+++ b/frontend/src/metadata/views/face-recognition/peoples/index.js
@@ -17,7 +17,7 @@ const Peoples = ({ peoples, onOpenPeople, onRename }) => {

  const containerRef = useRef(null);

-  const { metadata, store, closeDirentDetail } = useMetadataView();
+  const { metadata, store } = useMetadataView();

  const loadMore = useCallback(async () => {
    if (isLoadingMore) return;
@@ -63,12 +63,6 @@ const Peoples = ({ peoples, onOpenPeople, onRename }) => {
    return () => {};
  }, []);

-  useEffect(() => {
-    closeDirentDetail();
-    return () => {};
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
  if (!Array.isArray(peoples) || peoples.length === 0) return (<EmptyTip text={gettext('Identifying portraits...')} />);

  return (
--- a/frontend/src/metadata/views/face-recognition/person-photos/index.js
+++ b/frontend/src/metadata/views/face-recognition/person-photos/index.js
@@ -158,7 +158,7 @@ const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeo
  useEffect(() => {
    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, true);
    return () => {
-      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, false);
+      window?.sfMetadataContext?.eventBus?.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, false);
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -21,17 +21,16 @@ import FileUploader from '../../components/file-uploader/file-uploader';
 import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
 import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
 import { EVENT_BUS_TYPE } from '../../components/common/event-bus-type';
-import { PRIVATE_FILE_TYPE } from '../../constants';
+import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY } from '../../constants';
 import { MetadataStatusProvider } from '../../hooks';
 import { MetadataProvider, CollaboratorsProvider } from '../../metadata/hooks';
 import { TagsProvider } from '../../tag/hooks';
-import { LIST_MODE, METADATA_MODE, DIRENT_DETAIL_MODE, TAGS_MODE } from '../../components/dir-view-mode/constants';
+import { LIST_MODE, METADATA_MODE, TAGS_MODE } from '../../components/dir-view-mode/constants';
 import CurDirPath from '../../components/cur-dir-path';
 import DirTool from '../../components/cur-dir-path/dir-tool';
 import Detail from '../../components/dirent-detail';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
 import SelectedDirentsToolbar from '../../components/toolbar/selected-dirents-toolbar';
-import { VIEW_TYPE } from '../../metadata/constants';

 import '../../css/lib-content-view.css';

@@ -53,8 +52,12 @@ class LibContentView extends React.Component {
    let isTreePanelShown = true;
    const storedTreePanelState = localStorage.getItem('sf_dir_view_tree_panel_open');
    if (storedTreePanelState != undefined) {
-      isTreePanelShown = storedTreePanelState == 'true';
+      isTreePanelShown = storedTreePanelState === 'true';
    }
+
+    const storedDirentDetailShowState = localStorage.getItem(DIRENT_DETAIL_SHOW_KEY);
+    const isDirentDetailShow = storedDirentDetailShowState === 'true';
+
    this.state = {
      currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
      isTreePanelShown: isTreePanelShown, // display the 'dirent tree' side panel
@@ -88,7 +91,7 @@ class LibContentView extends React.Component {
      isAllDirentSelected: false,
      dirID: '', // for update dir list
      errorMsg: '',
-      isDirentDetailShow: false,
+      isDirentDetailShow,
      itemsShowLength: 100,
      isSessionExpired: false,
      isCopyMoveProgressDialogShow: false,
@@ -133,15 +136,22 @@ class LibContentView extends React.Component {
  };

  showDirentDetail = () => {
-    this.setState({ isDirentDetailShow: true });
+    this.setState({ isDirentDetailShow: true }, () => {
+      localStorage.setItem(DIRENT_DETAIL_SHOW_KEY, true);
+    });
  };

  toggleDirentDetail = () => {
-    this.setState({ isDirentDetailShow: !this.state.isDirentDetailShow });
+    const newState = !this.state.isDirentDetailShow;
+    this.setState({ isDirentDetailShow: newState }, () => {
+      localStorage.setItem(DIRENT_DETAIL_SHOW_KEY, newState);
+    });
  };

  closeDirentDetail = () => {
-    this.setState({ isDirentDetailShow: false });
+    this.setState({ isDirentDetailShow: false }, () => {
+      localStorage.setItem(DIRENT_DETAIL_SHOW_KEY, false);
+    });
  };

  componentDidMount() {
@@ -501,14 +511,13 @@ class LibContentView extends React.Component {
    window.history.pushState({ url: url, path: filePath }, filePath, url);
  };

-  showFileMetadata = (filePath, viewId, viewType) => {
+  showFileMetadata = (filePath, viewId) => {
    const repoID = this.props.repoID;
    const repoInfo = this.state.currentRepoInfo;
    this.setState({
      currentMode: METADATA_MODE,
      path: filePath,
      viewId: viewId,
-      isDirentDetailShow: viewType === VIEW_TYPE.GALLERY ? this.state.isDirentDetailShow : false,
    });
    const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?view=${encodeURIComponent(viewId)}`;
    window.history.pushState({ url: url, path: '' }, '', url);
@@ -532,7 +541,6 @@ class LibContentView extends React.Component {
      currentMode: TAGS_MODE,
      path: filePath,
      tagId: tagId,
-      isDirentDetailShow: false
    });
    const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?tag=${encodeURIComponent(tagId)}`;
    window.history.pushState({ url: url, path: '' }, '', url);
@@ -988,10 +996,7 @@ class LibContentView extends React.Component {
    if (mode === this.state.currentMode) {
      return;
    }
-    if (mode === DIRENT_DETAIL_MODE) {
-      this.toggleDirentDetail();
-      return;
-    }
+
    cookie.save('seafile_view_mode', mode);
    let path = this.state.path;
    if (this.state.isTreePanelShown && this.state.isViewFile) {
@@ -1869,7 +1874,7 @@ class LibContentView extends React.Component {
    } else {
      if (Utils.isFileMetadata(node?.object?.type)) {
        if (node.path !== this.state.path) {
-          this.showFileMetadata(node.path, node.view_id || '0000', node.view_type || VIEW_TYPE.TABLE);
+          this.showFileMetadata(node.path, node.view_id || '0000');
        }
      } else if (Utils.isTags(node?.object?.type)) {
        if (node.path !== this.state.path) {
@@ -2001,6 +2006,7 @@ class LibContentView extends React.Component {
      isDirentSelected: false,
      isAllDirentSelected: false,
      currentMode: nextModel,
+      currentDirent: null,
    });
  };

@@ -2248,7 +2254,6 @@ class LibContentView extends React.Component {
                          isGroupOwnedRepo={this.state.isGroupOwnedRepo}
                          showDirentDetail={this.showDirentDetail}
                          currentMode={this.state.currentMode}
-                          switchViewMode={this.switchViewMode}
                          onItemConvert={this.onConvertItem}
                          onAddFolder={this.onAddFolder}
                        />
@@ -2304,7 +2309,7 @@ class LibContentView extends React.Component {
                          sortItems={this.sortItems}
                          viewId={this.state.viewId}
                          viewType={this.props.viewType}
-                          onCloseDetail={this.closeDirentDetail}
+                          onToggleDetail={this.toggleDirentDetail}
                        />
                      </div>
                    }
@@ -2378,12 +2383,11 @@ class LibContentView extends React.Component {
                        onItemsScroll={this.onItemsScroll}
                        eventBus={this.props.eventBus}
                        updateCurrentDirent={this.updateCurrentDirent}
-                        closeDirentDetail={this.closeDirentDetail}
                      />
                      :
                      <div className="message err-tip">{gettext('Folder does not exist.')}</div>
                    }
-                    {this.state.isDirentDetailShow && (
+                    {!isCustomPermission && this.state.isDirentDetailShow && (
                      <Detail
                        path={this.state.path}
                        repoID={this.props.repoID}
@@ -2393,6 +2397,7 @@ class LibContentView extends React.Component {
                        fileTags={this.state.isViewFile ? this.state.fileTags : []}
                        onFileTagChanged={this.onFileTagChanged}
                        onClose={this.closeDirentDetail}
+                        currentMode={this.state.currentMode}
                      />
                    )}
                  </div>
--- a/frontend/src/tag/hooks/tag-view.js
+++ b/frontend/src/tag/hooks/tag-view.js
@@ -49,7 +49,6 @@ export const TagViewProvider = ({ repoID, tagID, children, ...params }) => {
      deleteFilesCallback: params.deleteFilesCallback,
      renameFileCallback: params.renameFileCallback,
      updateCurrentDirent: params.updateCurrentDirent,
-      closeDirentDetail: params.closeDirentDetail,
    }}>
      {children}
    </TagViewContext.Provider>
--- a/frontend/src/tag/hooks/tags.js
+++ b/frontend/src/tag/hooks/tags.js
@@ -248,7 +248,6 @@ export const TagsProvider = ({ repoID, currentPath, selectTagsView, children, ..
      deleteFilesCallback: params.deleteFilesCallback,
      renameFileCallback: params.renameFileCallback,
      updateCurrentDirent: params.updateCurrentDirent,
-      closeDirentDetail: params.closeDirentDetail,
      addTag,
      addTags,
      modifyTags,