rename

apps/storybook/src/stories/playground/liveblocks-layout.tsx

@@ -6,7 +6,7 @@ import {
   PageHeader,
   PageProvider,
   Sidebar2,
-  useBoundStore,
+  usePlatformStore,
   WorkspaceSwitcher2,
 } from "@swy/notion";
 import {
@@ -37,10 +37,12 @@ export const LayoutWithLiveblocks = ({ children }: LayoutProps) => {
   const { minSize, ref, collapse, expand, isResizing, isMobile, isCollapsed } =
     useSidebarLayout("group", "sidebar", 240);
   /** Bound stores */
-  const activeWorkspace = useBoundStore((state) => state.activeWorkspace);
-  const workspaces = useBoundStore((state) => state.workspaces);
-  const user = useBoundStore((state) => state.user);
-  const setActiveWorkspace = useBoundStore((state) => state.setActiveWorkspace);
+  const activeWorkspace = usePlatformStore((state) => state.activeWorkspace);
+  const workspaces = usePlatformStore((state) => state.workspaces);
+  const user = usePlatformStore((state) => state.user);
+  const setActiveWorkspace = usePlatformStore(
+    (state) => state.setActiveWorkspace,
+  );
   const { pageId, isLoading, fetchPages, selectPage } =
     usePages(activeWorkspace);
 

apps/storybook/src/stories/playground/use-pages.ts

@@ -1,6 +1,6 @@
 import useSWR from "swr";
 
-import { useBoundStore, type Page } from "@swy/notion";
+import { usePlatformStore, type Page } from "@swy/notion";
 import { mockPages } from "@swy/notion/mock";
 
 import { delay } from "@/lib/utils";
@@ -11,9 +11,9 @@ const fetcher = async () => {
 };
 
 export const usePages = (workspaceId: string | null) => {
-  const activePage = useBoundStore((state) => state.activePage);
-  const setActivePage = useBoundStore((state) => state.setActivePage);
-  const setPages = useBoundStore((state) => state.setPages);
+  const activePage = usePlatformStore((state) => state.activePage);
+  const setActivePage = usePlatformStore((state) => state.setActivePage);
+  const setPages = usePlatformStore((state) => state.setPages);
 
   const { isLoading } = useSWR<Page[], Error>(workspaceId, fetcher, {
     onSuccess: (data) => setPages(data),

apps/storybook/src/stories/playground/worxpace.stories.tsx

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { CollaborativeEditor } from "@swy/liveblocks";
-import { useBoundStore } from "@swy/notion";
+import { usePlatformStore } from "@swy/notion";
 import { user, workspaces } from "@swy/notion/mock";
 import { ModalProvider } from "@swy/ui/shared";
 
@@ -21,10 +21,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const Template: Story["render"] = () => {
-  const setWorkspaces = useBoundStore((state) => state.setWorkspaces);
-  const setUser = useBoundStore((state) => state.setUser);
-  const setActiveWorkspace = useBoundStore((state) => state.setActiveWorkspace);
-  const setActivePage = useBoundStore((state) => state.setActivePage);
+  const setWorkspaces = usePlatformStore((state) => state.setWorkspaces);
+  const setUser = usePlatformStore((state) => state.setUser);
+  const setActiveWorkspace = usePlatformStore(
+    (state) => state.setActiveWorkspace,
+  );
+  const setActivePage = usePlatformStore((state) => state.setActivePage);
   useEffect(() => {
     setWorkspaces(workspaces);
     setUser(user);

packages/notion/src/sidebar-2/_components/doc-list.tsx

@@ -8,7 +8,7 @@ import {
   type IconInfo,
 } from "@swy/ui/shared";
 
-import { useBoundStore } from "../../slices";
+import { usePlatformStore } from "../../slices";
 import { ActionGroup } from "./action-group";
 
 interface DocListProps {
@@ -30,13 +30,13 @@ export const DocList: React.FC<DocListProps> = ({
   onCreate,
   onArchive,
 }) => {
-  const pages = useBoundStore((state) =>
+  const pages = usePlatformStore((state) =>
     Object.values(state.pages).filter(
       (page) => page.type === group && !page.isArchived,
     ),
   );
-  const activePage = useBoundStore((state) => state.activePage);
-  const setActivePage = useBoundStore((state) => state.setActivePage);
+  const activePage = usePlatformStore((state) => state.activePage);
+  const setActivePage = usePlatformStore((state) => state.setActivePage);
 
   const nodes = buildTree(pages);
 

packages/notion/src/slices/index.ts

@@ -1 +1 @@
-export * from "./use-bound-store";
+export * from "./use-platform-store";

packages/notion/src/slices/use-bound-store.ts → packages/notion/src/slices/use-platform-store.ts

@@ -1,4 +1,7 @@
+"use client";
+
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
 
 import { createUserSlice, type UserSlice } from "./account";
@@ -7,11 +10,16 @@ import { createWorkspaceSlice, type WorkspaceSlice } from "./workspace";
 
 type Store = UserSlice & WorkspaceSlice & PageSlice;
 
-const useStore = create<Store>((...a) => ({
-  ...createUserSlice(...a),
-  ...createWorkspaceSlice(...a),
-  ...createPageSlice(...a),
-}));
+const useStore = create<Store, [["zustand/persist", unknown]]>(
+  persist(
+    (...a) => ({
+      ...createUserSlice(...a),
+      ...createWorkspaceSlice(...a),
+      ...createPageSlice(...a),
+    }),
+    { name: "platform" },
+  ),
+);
 
-export const useBoundStore = <T>(selector: (state: Store) => T) =>
+export const usePlatformStore = <T>(selector: (state: Store) => T) =>
   useStore<T>(useShallow(selector));