From 5c96566dd8a23ae5de63ab63924d29a1c9cd1667 Mon Sep 17 00:00:00 2001 From: EYHN Date: Fri, 30 May 2025 04:42:27 +0000 Subject: [PATCH] feat(core): save all docs options by mode (#12654) ## Summary by CodeRabbit - **Refactor** - Improved state management for display preferences, view mode, and selected collection in the "All Docs" page, making the experience more modular and consistent, especially when using multiple views. - Updated the header component to handle view changes more directly, allowing smoother toggling between different document views. - **New Features** - Enhanced support for independent display settings in split view or multiple "All Docs" instances. --- .../workspace/all-page/all-page-header.tsx | 16 +- .../pages/workspace/all-page/all-page.tsx | 235 ++++++++++++++---- 2 files changed, 196 insertions(+), 55 deletions(-) diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.tsx b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.tsx index fbaa95f909..c86799d655 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.tsx @@ -28,11 +28,15 @@ const menuProps: Partial = { export const AllDocsHeader = ({ displayPreference, onDisplayPreferenceChange, + view, + onViewChange, }: { displayPreference: ExplorerDisplayPreference; onDisplayPreferenceChange: ( displayPreference: ExplorerDisplayPreference ) => void; + view: DocListItemView; + onViewChange: (view: DocListItemView) => void; }) => { const t = useI18n(); const workspaceService = useService(WorkspaceService); @@ -77,22 +81,12 @@ export const AllDocsHeader = ({ }); }, [workspaceDialogService, handleOpenDocs]); - const handleViewChange = useCallback( - (view: DocListItemView) => { - onDisplayPreferenceChange({ ...displayPreference, view }); - }, - [displayPreference, onDisplayPreferenceChange] - ); - return (
- + ; export const AllPage = () => { const t = useI18n(); const collectionService = useService(CollectionService); const pinnedCollectionService = useService(PinnedCollectionService); - const workspaceLocalState = useService(WorkspaceLocalState); - - const [initialState] = useState(() => { - return workspaceLocalState.get( - 'allDocsDisplayPreference' - ); - }); + const { + viewMode, + setViewMode, + selectedCollectionId, + setSelectedCollectionId, + displayPreference, + setDisplayPreference, + } = useAllDocsOptions(); const isCollectionDataReady = useLiveData( collectionService.collectionDataReady$ @@ -58,9 +125,6 @@ export const AllPage = () => { pinnedCollectionService.pinnedCollections$ ); - const [selectedCollectionId, setSelectedCollectionId] = useState< - string | null - >(initialState?.selectedCollectionId ?? null); const selectedCollection = useLiveData( selectedCollectionId ? collectionService.collection$(selectedCollectionId) @@ -76,14 +140,24 @@ export const AllPage = () => { ) { setSelectedCollectionId(null); } - }, [isPinnedCollectionDataReady, pinnedCollections, selectedCollectionId]); + }, [ + isPinnedCollectionDataReady, + pinnedCollections, + selectedCollectionId, + setSelectedCollectionId, + ]); useEffect(() => { // if selected collection is not found, set selected collection id to null if (!selectedCollection && selectedCollectionId && isCollectionDataReady) { setSelectedCollectionId(null); } - }, [isCollectionDataReady, selectedCollection, selectedCollectionId]); + }, [ + isCollectionDataReady, + selectedCollection, + selectedCollectionId, + setSelectedCollectionId, + ]); const selectedCollectionInfo = useLiveData( selectedCollection ? selectedCollection.info$ : null @@ -94,25 +168,15 @@ export const AllPage = () => { useState(null); const [explorerContextValue] = useState(() => - createDocExplorerContext(initialState) + createDocExplorerContext(displayPreference) ); - const groupBy = useLiveData(explorerContextValue.groupBy$); - const orderBy = useLiveData(explorerContextValue.orderBy$); - const displayPreference = useLiveData( - explorerContextValue.displayPreference$ - ); - - const allDocsStateSave = useMemo(() => { - return { - ...displayPreference, - selectedCollectionId, - }; - }, [displayPreference, selectedCollectionId]); - useEffect(() => { - workspaceLocalState.set('allDocsDisplayPreference', allDocsStateSave); - }, [allDocsStateSave, workspaceLocalState]); + explorerContextValue.displayPreference$.next(displayPreference); + }, [displayPreference, explorerContextValue]); + + const groupBy = displayPreference.groupBy; + const orderBy = displayPreference.orderBy; const { openPromptModal } = usePromptModal(); @@ -211,15 +275,18 @@ export const AllPage = () => { setTempFilters(filters); }, []); - const handleSelectCollection = useCallback((collectionId: string) => { - setSelectedCollectionId(collectionId); - setTempFilters(null); - }, []); + const handleSelectCollection = useCallback( + (collectionId: string) => { + setSelectedCollectionId(collectionId); + setTempFilters(null); + }, + [setSelectedCollectionId] + ); const handleSelectAll = useCallback(() => { setSelectedCollectionId(null); setTempFilters(null); - }, []); + }, [setSelectedCollectionId]); const handleSaveFilters = useCallback(() => { if (selectedCollectionId) { @@ -263,21 +330,25 @@ export const AllPage = () => { openPromptModal, pinnedCollectionService, selectedCollectionId, + setSelectedCollectionId, t, tempFilters, ]); - const handleNewTempFilter = useCallback((params: FilterParams) => { - setSelectedCollectionId(null); - setTempFilters([]); - setTempFiltersInitial(params); - }, []); + const handleNewTempFilter = useCallback( + (params: FilterParams) => { + setSelectedCollectionId(null); + setTempFilters([]); + setTempFiltersInitial(params); + }, + [setSelectedCollectionId] + ); const handleDisplayPreferenceChange = useCallback( (displayPreference: ExplorerDisplayPreference) => { - explorerContextValue.displayPreference$.next(displayPreference); + setDisplayPreference(displayPreference); }, - [explorerContextValue] + [setDisplayPreference] ); return ( @@ -288,6 +359,8 @@ export const AllPage = () => { @@ -338,3 +411,77 @@ export const AllPage = () => { export const Component = () => { return ; }; + +/** + * Since split view allows users to open multiple all docs simultaneously, each with its own state, + * we only read the stored state once during useState initialization to maintain independent states. + */ +const useAllDocsOptions = () => { + const workspaceLocalState = useService(WorkspaceLocalState); + + const readSavedViewMode = useCallback(() => { + return workspaceLocalState.get('allDocsMode') ?? 'list'; + }, [workspaceLocalState]); + + const readSavedDisplayPreference = useCallback( + (mode: ViewMode) => { + const saved = workspaceLocalState.get( + 'allDocsDisplayPreference:' + mode + ); + return { + ...DefaultDisplayPreference[mode], + ...saved, + view: mode, + }; + }, + [workspaceLocalState] + ); + + const [viewMode, setViewMode] = useState(readSavedViewMode); + const [displayPreference, setDisplayPreference] = + useState(() => + readSavedDisplayPreference(viewMode) + ); + const [selectedCollectionId, setSelectedCollectionId] = useState( + () => + workspaceLocalState.get('allDocsSelectedCollectionId') ?? + null + ); + + const handleViewModeChange = useCallback( + (mode: ViewMode) => { + workspaceLocalState.set('allDocsMode', mode); + setViewMode(mode); + setDisplayPreference(readSavedDisplayPreference(mode)); + }, + [workspaceLocalState, readSavedDisplayPreference] + ); + + const handleDisplayPreferenceChange = useCallback( + (displayPreference: ExplorerDisplayPreference) => { + workspaceLocalState.set( + 'allDocsDisplayPreference:' + viewMode, + displayPreference + ); + setDisplayPreference(displayPreference); + }, + [viewMode, workspaceLocalState] + ); + + const handleSelectedCollectionIdChange = useCallback( + (collectionId: string | null) => { + workspaceLocalState.set('allDocsSelectedCollectionId', collectionId); + setSelectedCollectionId(collectionId); + }, + [workspaceLocalState] + ); + + return { + viewMode, + setViewMode: handleViewModeChange, + displayPreference, + setDisplayPreference: handleDisplayPreferenceChange, + selectedCollectionId, + setSelectedCollectionId: handleSelectedCollectionIdChange, + }; +};