persist the currently-selected project

app/src/state/persist.ts

@@ -0,0 +1,13 @@
+import { PersistOptions } from "zustand/middleware/persist";
+import { State } from "./store";
+
+export const stateToPersist = {
+  selectedProjectId: null as string | null,
+};
+
+export const persistOptions: PersistOptions<State, typeof stateToPersist> = {
+  name: "persisted-app-store",
+  partialize: (state) => ({
+    selectedProjectId: state.selectedProjectId,
+  }),
+};

app/src/state/store.ts

@@ -1,11 +1,13 @@
 import { type StateCreator, create } from "zustand";
 import { immer } from "zustand/middleware/immer";
+import { persist } from "zustand/middleware";
 import { createSelectors } from "./createSelectors";
 import {
   type SharedVariantEditorSlice,
   createVariantEditorSlice,
 } from "./sharedVariantEditor.slice";
 import { type APIClient } from "~/utils/api";
+import { persistOptions, stateToPersist } from "./persist";
 
 export type State = {
   drawerOpen: boolean;
@@ -23,30 +25,36 @@ export type SliceCreator<T> = StateCreator<State, [["zustand/immer", never]], []
 export type SetFn = Parameters<SliceCreator<unknown>>[0];
 export type GetFn = Parameters<SliceCreator<unknown>>[1];
 
-const useBaseStore = create<State, [["zustand/immer", never]]>(
-  immer((set, get, ...rest) => ({
-    api: null,
-    setApi: (api) =>
-      set((state) => {
-        state.api = api;
-      }),
+const useBaseStore = create<
+  State,
+  [["zustand/persist", typeof stateToPersist], ["zustand/immer", never]]
+>(
+  persist(
+    immer((set, get, ...rest) => ({
+      api: null,
+      setApi: (api) =>
+        set((state) => {
+          state.api = api;
+        }),
 
-    drawerOpen: false,
-    openDrawer: () =>
-      set((state) => {
-        state.drawerOpen = true;
-      }),
-    closeDrawer: () =>
-      set((state) => {
-        state.drawerOpen = false;
-      }),
-    sharedVariantEditor: createVariantEditorSlice(set, get, ...rest),
-    selectedProjectId: null,
-    setselectedProjectId: (id: string) =>
-      set((state) => {
-        state.selectedProjectId = id;
-      }),
-  })),
+      drawerOpen: false,
+      openDrawer: () =>
+        set((state) => {
+          state.drawerOpen = true;
+        }),
+      closeDrawer: () =>
+        set((state) => {
+          state.drawerOpen = false;
+        }),
+      sharedVariantEditor: createVariantEditorSlice(set, get, ...rest),
+      selectedProjectId: null,
+      setselectedProjectId: (id: string) =>
+        set((state) => {
+          state.selectedProjectId = id;
+        }),
+    })),
+    persistOptions,
+  ),
 );
 
 export const useAppStore = createSelectors(useBaseStore);