feat: add page setting atom (#2725)

apps/web/src/atoms/index.ts

@@ -2,9 +2,8 @@ import { DebugLogger } from '@affine/debug';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import type { Page } from '@blocksuite/store';
 import { atom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
+import { atomFamily, atomWithStorage } from 'jotai/utils';
 
 import { WorkspaceAdapters } from '../adapters/workspace';
 import type { CreateWorkspaceMode } from '../components/affine/create-workspace-modal';
@@ -96,34 +95,70 @@ export const workspaceRecentViewsAtom = atomWithStorage<WorkspaceRecentViews>(
   {}
 );
 
-export type PreferredModeRecord = Record<Page['id'], 'page' | 'edgeless'>;
-/**
- * @deprecated Use `useWorkspacePreferredMode` instead.
- */
-export const workspacePreferredModeAtom = atomWithStorage<PreferredModeRecord>(
-  'preferredMode',
-  {}
+type PageMode = 'page' | 'edgeless';
+type PageLocalSetting = {
+  mode: PageMode;
+};
+
+type PartialPageLocalSettingWithPageId = Partial<PageLocalSetting> & {
+  id: string;
+};
+
+const pageSettingsBaseAtom = atomWithStorage(
+  'pageSettings',
+  {} as Record<string, PageLocalSetting>
 );
 
-export const workspaceRecentViresWriteAtom = atom<null, [string, View], View[]>(
-  null,
-  (get, set, id, value) => {
-    const record = get(workspaceRecentViewsAtom);
-    if (Array.isArray(record[id])) {
-      const idx = record[id].findIndex(view => view.id === value.id);
-      if (idx !== -1) {
-        record[id].splice(idx, 1);
-      }
-      record[id] = [value, ...record[id]];
-    } else {
-      record[id] = [value];
-    }
+// readonly atom by design
+export const pageSettingsAtom = atom(get => get(pageSettingsBaseAtom));
 
-    record[id] = record[id].slice(0, 3);
-    set(workspaceRecentViewsAtom, { ...record });
-    return record[id];
+const recentPageSettingsBaseAtom = atomWithStorage<string[]>(
+  'recentPageSettings',
+  []
+);
+
+export const recentPageSettingsAtom = atom<PartialPageLocalSettingWithPageId[]>(
+  get => {
+    const recentPageIDs = get(recentPageSettingsBaseAtom);
+    const pageSettings = get(pageSettingsAtom);
+    return recentPageIDs.map(id => ({
+      ...pageSettings[id],
+      id,
+    }));
+  }
+);
+
+export const pageSettingFamily = atomFamily((pageId: string) =>
+  atom(
+    get => get(pageSettingsBaseAtom)[pageId],
+    (
+      get,
+      set,
+      patch:
+        | Partial<PageLocalSetting>
+        | ((prevSetting: PageLocalSetting | undefined) => void)
+    ) => {
+      set(recentPageSettingsBaseAtom, ids => {
+        // pick 3 recent page ids
+        return [...new Set([pageId, ...ids]).values()].slice(0, 3);
+      });
+      set(pageSettingsBaseAtom, settings => ({
+        ...settings,
+        [pageId]: {
+          ...settings[pageId],
+          ...(typeof patch === 'function' ? patch(settings[pageId]) : patch),
+        },
+      }));
+    }
+  )
+);
+
+export const setPageModeAtom = atom(
+  void 0,
+  (get, set, pageId: string, mode: PageMode) => {
+    set(pageSettingFamily(pageId), { mode });
   }
 );
 
 export type PageModeOption = 'all' | 'page' | 'edgeless';
-export const pageModeSelectAtom = atom<PageModeOption>('all');
+export const allPageModeSelectAtom = atom<PageModeOption>('all');