Add Zustand Store

Workflow

1. Keep the store small and feature-local

Place it near the owning feature when possible:

• route-local state under the route folder
• cross-feature app state under src/components/ or src/dialogs/

2. Separate state and actions

Follow the common shape:

type MyState = { open: boolean };
type MyActions = { setOpen: (open: boolean) => void };
type MyStore = MyState & MyActions;

3. Add middleware only when justified

• persist for browser-only preferences
• immer when nested updates would otherwise get noisy
• zundo only for editor-style undo/redo workflows

Do not add middleware by default.

4. Prefer selectors at usage sites

Read only what a component needs:

const open = useMyStore((state) => state.open);
const setOpen = useMyStore((state) => state.setOpen);

5. Persist with explicit keys

For persisted state:

• use a stable, scoped key
• keep the persisted slice minimal
• remember localStorage is browser-only

Checks

• verify the store is not duplicating query/form state
• verify browser-only APIs are guarded when needed
• run pnpm typecheck
• run pnpm lint

Anti-Patterns

• Don’t put server data caches into Zustand
• Don’t persist large or sensitive payloads without a strong reason
• Don’t expose giant store objects to components when selectors are enough
• Don’t introduce undo/history middleware unless the UX clearly needs it