feat: store local data to local db (#2037)

apps/web/src/atoms/index.ts

@@ -7,6 +7,7 @@ import {
   rootCurrentWorkspaceIdAtom,
   rootWorkspacesMetadataAtom,
 } from '@affine/workspace/atom';
+import { WorkspaceFlavour } from '@affine/workspace/type';
 import type { Page } from '@blocksuite/store';
 import { atom } from 'jotai';
 
@@ -46,6 +47,21 @@ rootWorkspacesMetadataAtom.onMount = setAtom => {
     }
     return metadata;
   });
+
+  if (environment.isDesktop) {
+    window.apis.workspace.list().then(workspaceIDs => {
+      const newMetadata = workspaceIDs.map(w => ({
+        id: w,
+        flavour: WorkspaceFlavour.LOCAL,
+      }));
+      setAtom(metadata => {
+        return [
+          ...metadata,
+          ...newMetadata.filter(m => !metadata.find(m2 => m2.id === m.id)),
+        ];
+      });
+    });
+  }
 };
 
 /**

apps/web/src/components/affine/workspace-setting-detail/panel/export/index.tsx

@@ -6,7 +6,14 @@ export const ExportPanel = () => {
   return (
     <>
       <Wrapper marginBottom="42px"> {t('Export Description')}</Wrapper>
-      <Button type="light" shape="circle" disabled>
+      <Button
+        type="light"
+        shape="circle"
+        disabled={!environment.isDesktop}
+        onClick={() => {
+          window.apis.openSaveDBFileDialog();
+        }}
+      >
         {t('Export AFFiNE backup file')}
       </Button>
     </>

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -158,7 +158,13 @@ export const GeneralPanel: React.FC<PanelProps> = ({
       {/*  </StyledRow>*/}
       {/*)}*/}
 
-      <StyledRow>
+      <StyledRow
+        onClick={() => {
+          if (environment.isDesktop) {
+            window.apis.openDBFolder();
+          }
+        }}
+      >
         <StyledSettingKey>{t('Workspace Type')}</StyledSettingKey>
         {isOwner ? (
           workspace.flavour === WorkspaceFlavour.LOCAL ? (

apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/index.tsx

@@ -7,7 +7,9 @@ export const ThemeModeSwitch = () => {
   const { setTheme, resolvedTheme } = useTheme();
 
   useEffect(() => {
-    window.apis?.onThemeChange(resolvedTheme === 'dark' ? 'dark' : 'light');
+    if (environment.isDesktop) {
+      window.apis?.onThemeChange(resolvedTheme === 'dark' ? 'dark' : 'light');
+    }
   }, [resolvedTheme]);
 
   const [isHover, setIsHover] = useState(false);

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -95,7 +95,9 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
   const show = isPublicWorkspace ? false : sidebarOpen;
   const actualWidth = floatingSlider ? 'calc(10vw + 400px)' : sliderWidth;
   useEffect(() => {
-    window.apis?.onSidebarVisibilityChange(sidebarOpen);
+    if (environment.isDesktop) {
+      window.apis?.onSidebarVisibilityChange(sidebarOpen);
+    }
   }, [sidebarOpen]);
 
   useEffect(() => {

apps/web/src/hooks/use-sync-router-with-current-workspace-id.ts

@@ -28,6 +28,9 @@ export function useSyncRouterWithCurrentWorkspaceId(router: NextRouter) {
     if (targetWorkspace) {
       console.log('set workspace id', workspaceId);
       setCurrentWorkspaceId(targetWorkspace.id);
+      if (environment.isDesktop) {
+        window.apis?.onWorkspaceChange(targetWorkspace.id);
+      }
       void router.push({
         pathname: '/workspace/[workspaceId]/all',
         query: {