@lobehub/lobehub 2.0.0-next.255 → 2.0.0-next.256

package/src/app/[variants]/(main)/group/features/Portal/_layout/Mobile.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PortalContent } from '@/features/Portal/router';
 import { useChatStore } from '@/store/chat';
+import { portalThreadSelectors } from '@/store/chat/selectors';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
@@ -17,7 +18,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 const Layout = () => {
   const [showMobilePortal, isPortalThread, togglePortal] = useChatStore((s) => [
     s.showPortal,
-    !!s.portalThreadId,
+    portalThreadSelectors.showThread(s),
     s.togglePortal,
   ]);
   const { t } = useTranslation('portal');

package/src/app/[variants]/(main)/home/_layout/hooks/useCreateMenuItems.tsx

@@ -13,8 +13,8 @@ import { DEFAULT_CHAT_GROUP_CHAT_CONFIG } from '@/const/settings';
 import { type GroupMemberConfig, chatGroupService } from '@/services/chatGroup';
 import { useAgentStore } from '@/store/agent';
 import { useAgentGroupStore } from '@/store/agentGroup';
-import { useFileStore } from '@/store/file';
 import { useHomeStore } from '@/store/home';
+import { usePageStore } from '@/store/page';
 
 interface HostConfig {
   model?: string;
@@ -45,7 +45,7 @@ export const useCreateMenuItems = () => {
     s.switchToGroup,
   ]);
   const [createGroup, loadGroups] = useAgentGroupStore((s) => [s.createGroup, s.loadGroups]);
-  const createNewPage = useFileStore((s) => s.createNewPage);
+  const createNewPage = usePageStore((s) => s.createNewPage);
 
   const [isCreatingGroup, setIsCreatingGroup] = useState(false);
   const [isCreatingSessionGroup, setIsCreatingSessionGroup] = useState(false);

package/src/app/[variants]/(main)/page/{features/PageTitle → PageTitle}/index.tsx

@@ -11,4 +11,3 @@ const Title = memo(() => {
 Title.displayName = 'PageTitle';
 
 export default Title;
-

package/src/app/[variants]/(main)/page/[id]/index.tsx

@@ -1 +1,43 @@
-export { default } from '../index';
+'use client';
+
+import { useUnmount } from 'ahooks';
+import { Suspense, memo } from 'react';
+import { useParams } from 'react-router-dom';
+import { createStoreUpdater } from 'zustand-utils';
+
+import Loading from '@/components/Loading/BrandTextLoading';
+import PageExplorer from '@/features/PageExplorer';
+import { usePageStore } from '@/store/page';
+import { getIdFromIdentifier } from '@/utils/identifier';
+
+import PageTitle from '../PageTitle';
+
+/**
+ * Pages route - dedicated page for managing documents/pages
+ * This is extracted from the /resource route to have its own dedicated space
+ */
+const PagesPage = memo(() => {
+  const storeUpdater = createStoreUpdater(usePageStore);
+  const params = useParams<{ id: string }>();
+
+  const pageId = getIdFromIdentifier(params.id ?? '', 'docs');
+  storeUpdater('selectedPageId', pageId);
+
+  // Clear activeAgentId when unmounting (leaving chat page)
+  useUnmount(() => {
+    usePageStore.setState({ selectedPageId: undefined });
+  });
+
+  return (
+    <>
+      <PageTitle />
+      <Suspense fallback={<Loading debugId="PagesPage" />}>
+        <PageExplorer pageId={pageId} />
+      </Suspense>
+    </>
+  );
+});
+
+PagesPage.displayName = 'PagesPage';
+
+export default PagesPage;

package/src/app/[variants]/(main)/page/_layout/Body/AllPagesDrawer/Content.tsx

@@ -6,7 +6,7 @@ import { VList, type VListHandle } from 'virtua';
 
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
 import PageEmpty from '@/features/PageEmpty';
-import { documentSelectors, useFileStore } from '@/store/file';
+import { pageSelectors, usePageStore } from '@/store/page';
 import { type LobeDocument } from '@/types/document';
 
 import Item from '../List/Item';
@@ -19,27 +19,27 @@ const Content = memo<ContentProps>(({ searchKeyword }) => {
   const virtuaRef = useRef<VListHandle>(null);
   const fetchedCountRef = useRef(-1);
 
-  const [hasMore, isLoadingMore, loadMoreDocuments] = useFileStore((s) => [
-    documentSelectors.hasMoreDocuments(s),
-    documentSelectors.isLoadingMoreDocuments(s),
+  const [hasMore, isLoadingMore, loadMoreDocuments] = usePageStore((s) => [
+    pageSelectors.hasMoreDocuments(s),
+    pageSelectors.isLoadingMoreDocuments(s),
     s.loadMoreDocuments,
   ]);
 
-  const allFilteredPages = useFileStore(documentSelectors.getFilteredPages);
+  const allFilteredDocuments = usePageStore(pageSelectors.getFilteredDocuments);
 
   // Filter by search keyword
-  const displayPages = useMemo(() => {
-    if (!searchKeyword.trim()) return allFilteredPages;
+  const displayDocuments = useMemo(() => {
+    if (!searchKeyword.trim()) return allFilteredDocuments;
 
     const keyword = searchKeyword.toLowerCase();
-    return allFilteredPages.filter((page: LobeDocument) => {
-      const content = page.content?.toLowerCase() || '';
-      const title = page.title?.toLowerCase() || '';
+    return allFilteredDocuments.filter((doc: LobeDocument) => {
+      const content = doc.content?.toLowerCase() || '';
+      const title = doc.title?.toLowerCase() || '';
       return content.includes(keyword) || title.includes(keyword);
     });
-  }, [allFilteredPages, searchKeyword]);
+  }, [allFilteredDocuments, searchKeyword]);
 
-  const count = displayPages.length;
+  const count = displayDocuments.length;
   const isSearching = searchKeyword.trim().length > 0;
 
   // Handle scroll - use findItemIndex (official pattern)
@@ -74,9 +74,9 @@ const Content = memo<ContentProps>(({ searchKeyword }) => {
       ref={virtuaRef}
       style={{ height: '100%' }}
     >
-      {displayPages.map((page) => (
-        <Flexbox gap={1} key={page.id} padding={'4px 8px'}>
-          <Item pageId={page.id} />
+      {displayDocuments.map((doc) => (
+        <Flexbox gap={1} key={doc.id} padding={'4px 8px'}>
+          <Item pageId={doc.id} />
         </Flexbox>
       ))}
       {showLoading && (

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/Editing.tsx

@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next';
 
 import EmojiPicker from '@/components/EmojiPicker';
 import { useIsDark } from '@/hooks/useIsDark';
-import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
+import { usePageStore } from '@/store/page';
 
 interface EditingProps {
   currentEmoji?: string;
@@ -20,7 +20,7 @@ const Editing = memo<EditingProps>(({ documentId, title, currentEmoji, toggleEdi
   const isDarkMode = useIsDark();
   const { t } = useTranslation('file');
 
-  const editing = useFileStore((s) => s.renamingPageId === documentId);
+  const editing = usePageStore((s) => s.renamingPageId === documentId);
 
   const [newTitle, setNewTitle] = useState(title);
   const [newEmoji, setNewEmoji] = useState(currentEmoji);
@@ -35,7 +35,7 @@ const Editing = memo<EditingProps>(({ documentId, title, currentEmoji, toggleEdi
         if (newTitle && title !== newTitle) updates.title = newTitle;
         if (newEmoji !== undefined && currentEmoji !== newEmoji) updates.emoji = newEmoji;
 
-        await useFileStore.getState().renamePage(documentId, updates.title || title, updates.emoji);
+        await usePageStore.getState().renamePage(documentId, updates.title || title, updates.emoji);
       } catch (error) {
         console.error('Failed to update page:', error);
       }

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/index.tsx

@@ -4,7 +4,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import NavItem from '@/features/NavPanel/components/NavItem';
-import { documentSelectors, useFileStore } from '@/store/file';
+import { pageSelectors, usePageStore } from '@/store/page';
 
 import Actions from './Actions';
 import Editing from './Editing';
@@ -17,18 +17,13 @@ interface DocumentItemProps {
 
 const PageListItem = memo<DocumentItemProps>(({ pageId, className }) => {
   const { t } = useTranslation('file');
-  const [editing, selectedPageId, document] = useFileStore(
-    useCallback(
-      (s) => {
-        const doc = documentSelectors.getDocumentById(pageId)(s);
-        return [s.renamingPageId === pageId, s.selectedPageId, doc] as const;
-      },
-      [pageId],
-    ),
-  );
+  const [editing, selectedPageId, document] = usePageStore((s) => {
+    const doc = pageSelectors.getDocumentById(pageId)(s);
+    return [s.renamingPageId === pageId, s.selectedPageId, doc] as const;
+  });
 
-  const selectPage = useFileStore((s) => s.selectPage);
-  const setRenamingPageId = useFileStore((s) => s.setRenamingPageId);
+  const selectPage = usePageStore((s) => s.selectPage);
+  const setRenamingPageId = usePageStore((s) => s.setRenamingPageId);
 
   const active = selectedPageId === pageId;
   const title = document?.title || t('pageList.untitled');

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/useDropdownMenu.tsx

@@ -4,7 +4,7 @@ import { Copy, CopyPlus, Pencil, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useFileStore } from '@/store/file';
+import { usePageStore } from '@/store/page';
 
 interface ActionProps {
   documentContent?: string;
@@ -19,8 +19,8 @@ export const useDropdownMenu = ({
 }: ActionProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['common', 'file']);
   const { message, modal } = App.useApp();
-  const removeDocument = useFileStore((s) => s.removeDocument);
-  const duplicateDocument = useFileStore((s) => s.duplicateDocument);
+  const removePage = usePageStore((s) => s.removePage);
+  const duplicatePage = usePageStore((s) => s.duplicatePage);
 
   const handleDelete = () => {
     modal.confirm({
@@ -30,7 +30,7 @@ export const useDropdownMenu = ({
       okText: t('delete'),
       onOk: async () => {
         try {
-          await removeDocument(pageId);
+          await removePage(pageId);
           message.success(t('pageEditor.deleteSuccess', { ns: 'file' }));
         } catch (error) {
           console.error('Failed to delete page:', error);
@@ -53,7 +53,7 @@ export const useDropdownMenu = ({
 
   const handleDuplicate = async () => {
     try {
-      await duplicateDocument(pageId);
+      await duplicatePage(pageId);
     } catch (error) {
       console.error('Failed to duplicate page:', error);
     }

package/src/app/[variants]/(main)/page/_layout/Body/List/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import NavItem from '@/features/NavPanel/components/NavItem';
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
-import { documentSelectors, useFileStore } from '@/store/file';
+import { pageSelectors, usePageStore } from '@/store/page';
 
 import Item from './Item';
 
@@ -16,17 +16,17 @@ import Item from './Item';
 const PageList = () => {
   const { t } = useTranslation(['file', 'common']);
 
-  const [filteredPages, hasMore, isLoadingMore, openAllPagesDrawer] = useFileStore((s) => [
-    documentSelectors.getFilteredPagesLimited(s),
-    documentSelectors.hasMoreFilteredPages(s),
-    documentSelectors.isLoadingMoreDocuments(s),
+  const [filteredDocuments, hasMore, isLoadingMore, openAllPagesDrawer] = usePageStore((s) => [
+    pageSelectors.getFilteredDocumentsLimited(s),
+    pageSelectors.hasMoreFilteredDocuments(s),
+    pageSelectors.isLoadingMoreDocuments(s),
     s.openAllPagesDrawer,
   ]);
 
   return (
     <Flexbox gap={1}>
-      {filteredPages.map((page) => (
-        <Item key={page.id} pageId={page.id} />
+      {filteredDocuments.map((doc) => (
+        <Item key={doc.id} pageId={doc.id} />
       ))}
       {isLoadingMore && <SkeletonList rows={3} />}
       {hasMore && !isLoadingMore && (

package/src/app/[variants]/(main)/page/_layout/Body/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
 import PageEmpty from '@/features/PageEmpty';
-import { documentSelectors, useFileStore } from '@/store/file';
+import { pageSelectors, usePageStore } from '@/store/page';
 
 import Actions from './Actions';
 import AllPagesDrawer from './AllPagesDrawer';
@@ -22,12 +22,18 @@ export enum GroupKey {
  */
 const Body = memo(() => {
   const { t } = useTranslation('file');
-  const isDocumentListLoading = useFileStore((s) => s.isDocumentListLoading);
-  const filteredPagesCount = useFileStore(documentSelectors.filteredPagesCount);
-  const filteredPages = useFileStore(documentSelectors.getFilteredPagesLimited);
-  const searchKeywords = useFileStore((s) => s.searchKeywords);
+
+  // Initialize documents list via SWR
+  const useFetchDocuments = usePageStore((s) => s.useFetchDocuments);
+  useFetchDocuments();
+
+  const isLoading = usePageStore(pageSelectors.isDocumentsLoading);
+
+  const filteredDocumentsCount = usePageStore(pageSelectors.filteredDocumentsCount);
+  const filteredDocuments = usePageStore(pageSelectors.getFilteredDocumentsLimited);
+  const searchKeywords = usePageStore((s) => s.searchKeywords);
   const dropdownMenu = useDropdownMenu();
-  const [allPagesDrawerOpen, closeAllPagesDrawer] = useFileStore((s) => [
+  const [allPagesDrawerOpen, closeAllPagesDrawer] = usePageStore((s) => [
     s.allPagesDrawerOpen,
     s.closeAllPagesDrawer,
   ]);
@@ -53,16 +59,16 @@ const Body = memo(() => {
           title={
             <Text ellipsis fontSize={12} type={'secondary'} weight={500}>
               {t('pageList.title')}
-              {filteredPagesCount > 0 && ` ${filteredPagesCount}`}
+              {filteredDocumentsCount > 0 && ` ${filteredDocumentsCount}`}
             </Text>
           }
         >
           <Suspense fallback={<SkeletonList />}>
-            {isDocumentListLoading ? (
+            {isLoading ? (
               <SkeletonList />
             ) : (
               <Flexbox gap={1} paddingBlock={1}>
-                {filteredPages.length === 0 ? (
+                {filteredDocuments.length === 0 ? (
                   <PageEmpty search={Boolean(searchKeywords.trim())} />
                 ) : (
                   <List />

package/src/app/[variants]/(main)/page/_layout/Body/useDropdownMenu.tsx

@@ -6,14 +6,14 @@ import { Hash, LucideCheck } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
+import { usePageStore } from '@/store/page';
 
 export const useDropdownMenu = (): MenuProps['items'] => {
   const { t } = useTranslation();
-  const showOnlyPagesNotInLibrary = useFileStore((s) => s.showOnlyPagesNotInLibrary);
-  const setShowOnlyPagesNotInLibrary = useFileStore((s) => s.setShowOnlyPagesNotInLibrary);
+  const showOnlyPagesNotInLibrary = usePageStore((s) => s.showOnlyPagesNotInLibrary);
+  const setShowOnlyPagesNotInLibrary = usePageStore((s) => s.setShowOnlyPagesNotInLibrary);
 
   const [pagePageSize, updateSystemStatus] = useGlobalStore((s) => [
     systemStatusSelectors.pagePageSize(s),

package/src/app/[variants]/(main)/page/_layout/DataSync.tsx

@@ -0,0 +1,15 @@
+import { useNavigate } from 'react-router-dom';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { usePageStore } from '@/store/page';
+
+const DataSync = () => {
+  const usePageStoreUpdater = createStoreUpdater(usePageStore);
+
+  const navigate = useNavigate();
+  usePageStoreUpdater('navigate', navigate);
+
+  return null;
+};
+
+export default DataSync;

package/src/app/[variants]/(main)/page/_layout/Header/AddButton.tsx

@@ -5,12 +5,12 @@ import { SquarePenIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useFileStore } from '@/store/file';
+import { usePageStore } from '@/store/page';
 
 const AddButton = memo(() => {
   const { t } = useTranslation('file');
 
-  const createNewPage = useFileStore((s) => s.createNewPage);
+  const createNewPage = usePageStore((s) => s.createNewPage);
 
   const handleNewDocument = () => {
     const untitledTitle = t('pageList.untitled');

package/src/app/[variants]/(main)/page/_layout/index.tsx

@@ -4,6 +4,7 @@ import { Flexbox } from '@lobehub/ui';
 import { type FC } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import DataSync from './DataSync';
 import Sidebar from './Sidebar';
 import { styles } from './style';
 
@@ -14,6 +15,7 @@ const DesktopPagesLayout: FC = () => {
       <Flexbox className={styles.mainContainer} flex={1} height={'100%'}>
         <Outlet />
       </Flexbox>
+      <DataSync />
     </>
   );
 };

package/src/app/[variants]/(main)/page/index.tsx

@@ -1,26 +1,22 @@
 'use client';
 
 import { Suspense, memo } from 'react';
-import { useParams } from 'react-router-dom';
 
 import Loading from '@/components/Loading/BrandTextLoading';
-import PageExplorer from '@/features/PageExplorer';
-import { standardizeIdentifier } from '@/utils/identifier';
+import PageExplorerPlaceholder from '@/features/PageExplorer/PageExplorerPlaceholder';
 
-import PageTitle from './features/PageTitle';
+import PageTitle from './PageTitle';
 
 /**
  * Pages route - dedicated page for managing documents/pages
  * This is extracted from the /resource route to have its own dedicated space
  */
 const PagesPage = memo(() => {
-  const { id } = useParams<{ id: string }>();
-
   return (
     <>
       <PageTitle />
       <Suspense fallback={<Loading debugId="PagesPage" />}>
-        <PageExplorer pageId={standardizeIdentifier(id ?? '', 'docs')} />
+        <PageExplorerPlaceholder />
       </Suspense>
     </>
   );

package/src/components/Editor/AutoSaveHint.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 dayjs.extend(relativeTime);
 
 interface AutoSaveHintProps {
-  lastUpdatedTime?: Date | null;
+  lastUpdatedTime?: string | Date | null;
   saveStatus: 'idle' | 'saving' | 'saved';
   style?: CSSProperties;
 }

package/src/features/Conversation/Messages/User/Actions/index.tsx

@@ -76,7 +76,11 @@ export const UserActionsBar = memo<UserActionsProps>(({ actionsConfig, id, data
   // Use external config if provided, otherwise use defaults
   // Append extra actions from factories
   const barItems = useMemo(() => {
-    const base = actionsConfig?.bar ?? [defaultActions.regenerate, defaultActions.edit];
+    const base = actionsConfig?.bar ?? [
+      defaultActions.regenerate,
+      defaultActions.edit,
+      defaultActions.copy,
+    ];
     return [...base, ...extraBarItems];
   }, [actionsConfig?.bar, defaultActions.regenerate, defaultActions.edit, extraBarItems]);
 

package/src/features/EditorCanvas/AutoSaveHint.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { type CSSProperties, memo } from 'react';
+
+import AutoSaveHintBase from '@/components/Editor/AutoSaveHint';
+import { useDocumentStore } from '@/store/document';
+import { editorSelectors } from '@/store/document/slices/editor';
+
+export interface AutoSaveHintProps {
+  /**
+   * Document ID to get save status from DocumentStore
+   */
+  documentId: string;
+  /**
+   * Custom styles
+   */
+  style?: CSSProperties;
+}
+
+/**
+ * AutoSave hint component that reads from DocumentStore
+ * Use this component externally to display save status for a document
+ */
+const AutoSaveHint = memo<AutoSaveHintProps>(({ documentId, style }) => {
+  const saveStatus = useDocumentStore((s) => editorSelectors.saveStatus(documentId)(s));
+  const lastUpdatedTime = useDocumentStore(
+    (s) => editorSelectors.lastUpdatedTime(documentId)(s) ?? null,
+  );
+
+  return (
+    <AutoSaveHintBase lastUpdatedTime={lastUpdatedTime} saveStatus={saveStatus} style={style} />
+  );
+});
+
+AutoSaveHint.displayName = 'AutoSaveHint';
+
+export default AutoSaveHint;

package/src/features/{PageEditor → EditorCanvas}/DiffAllToolbar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { DiffAction, LITEXML_DIFFNODE_ALL_COMMAND } from '@lobehub/editor';
+import { DiffAction, IEditor, LITEXML_DIFFNODE_ALL_COMMAND } from '@lobehub/editor';
 import { Block, Icon } from '@lobehub/ui';
 import { Button, Space } from 'antd';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
@@ -9,8 +9,7 @@ import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useIsDark } from '@/hooks/useIsDark';
-
-import { usePageEditorStore } from './store';
+import { useDocumentStore } from '@/store/document';
 
 const styles = createStaticStyles(({ css }) => ({
   container: css`
@@ -36,18 +35,36 @@ const styles = createStaticStyles(({ css }) => ({
   `,
 }));
 
-const DiffAllToolbar = memo(() => {
-  const { t } = useTranslation('editor');
-  const isDarkMode = useIsDark();
-  const [editor, performSave] = usePageEditorStore((s) => [s.editor, s.performSave]);
+const useIsEditorInit = (editor: IEditor) => {
+  const [isEditInit, setEditInit] = useState<boolean>(!!editor.getLexicalEditor());
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const onInit = () => {
+      console.log('init: id', editor.getLexicalEditor()?._key);
+      setEditInit(true);
+    };
+    editor.on('initialized', onInit);
+    return () => {
+      editor.off('initialized', onInit);
+    };
+  }, [editor]);
+
+  return isEditInit;
+};
+
+const useEditorHasPendingDiffs = (editor: IEditor) => {
   const [hasPendingDiffs, setHasPendingDiffs] = useState(false);
+  const isEditInit = useIsEditorInit(editor);
 
   // Listen to editor state changes to detect diff nodes
   useEffect(() => {
     if (!editor) return;
 
     const lexicalEditor = editor.getLexicalEditor();
-    if (!lexicalEditor) return;
+
+    if (!lexicalEditor || !isEditInit) return;
 
     const checkForDiffNodes = () => {
       const editorState = lexicalEditor.getEditorState();
@@ -67,15 +84,39 @@ const DiffAllToolbar = memo(() => {
     // Check initially
     checkForDiffNodes();
 
-    // Register update listener
     const unregister = lexicalEditor.registerUpdateListener(() => {
       checkForDiffNodes();
     });
+    // Register update listener
+    return () => {
+      unregister();
+    };
+  }, [editor, isEditInit]);
 
-    return unregister;
-  }, [editor]);
+  return hasPendingDiffs;
+};
+
+interface DiffAllToolbarProps {
+  documentId: string;
+  editor: IEditor;
+}
+const DiffAllToolbar = memo<DiffAllToolbarProps>(({ documentId }) => {
+  const { t } = useTranslation('editor');
+  const isDarkMode = useIsDark();
+  const [editor, performSave, markDirty] = useDocumentStore((s) => [
+    s.editor!,
+    s.performSave,
+    s.markDirty,
+  ]);
+
+  const hasPendingDiffs = useEditorHasPendingDiffs(editor);
+
+  if (!hasPendingDiffs) return null;
 
-  if (!editor || !hasPendingDiffs) return null;
+  const handleSave = async () => {
+    markDirty(documentId);
+    await performSave();
+  };
 
   return (
     <div className={styles.container}>
@@ -90,10 +131,10 @@ const DiffAllToolbar = memo(() => {
         <Space>
           <Button
             onClick={async () => {
-              editor.dispatchCommand(LITEXML_DIFFNODE_ALL_COMMAND, {
+              editor?.dispatchCommand(LITEXML_DIFFNODE_ALL_COMMAND, {
                 action: DiffAction.Reject,
               });
-              await performSave({ force: true });
+              await handleSave();
             }}
             size={'small'}
             type="text"
@@ -104,10 +145,10 @@ const DiffAllToolbar = memo(() => {
           <Button
             color={'default'}
             onClick={async () => {
-              editor.dispatchCommand(LITEXML_DIFFNODE_ALL_COMMAND, {
+              editor?.dispatchCommand(LITEXML_DIFFNODE_ALL_COMMAND, {
                 action: DiffAction.Accept,
               });
-              await performSave({ force: true });
+              await handleSave();
             }}
             size={'small'}
             variant="filled"