---
title: "State Management"
last_updated: 2026-03-21
---

## Frontend State Model

Commonplace uses multiple Zustand stores organized by domain under `src/state/stores/`.

## Store Slices

Current runtime stores:

- `layout.ts`
  - layout chrome
  - editor presentation
  - view mode
  - writer tools
- `workspace.ts`
  - locations
  - selected location documents/directories
  - per-location sidebar document/directory caches
  - persisted expanded location/directory state
  - sidebar drag/drop state
- `tabs.ts`
  - open tabs
  - active tab
  - session hydration status
- `pdf-export.ts`
- `text-export.ts`
- `docx-export.ts`
- `search.ts`
- `ui.ts`
  - layout settings sheet
  - export dialog options
  - global capture settings
- `shortcuts.ts`
- `toasts.ts`

`src/state/stores/app.ts` now exposes a merged `useAppStore()` facade by combining the domain stores above. It is useful when a single aggregate app shape is needed, but it is not the primary authoring model.

## Selector Layer

`src/state/selectors.ts` exposes narrow hooks to keep components decoupled from raw store shape.

Examples:

- `useLayoutChromeState`
- `useEditorPresentationState`
- `useWorkspaceLocationsState`
- `useWorkspaceDocumentsState`
- `useTabsState`
- `useLayoutSettingsUiState`
- `usePdfDialogUiState`
- `useGlobalCaptureSettingsState`

## State Boundaries

- Structural UI, workspace, tab, export, and settings state lives in Zustand.
- Backend side effects are triggered through ports/controller hooks, not from low-level presentational components.
- Persistent settings are hydrated from Rust/Tauri commands and written back through controller/effect hooks.

## Backend State

Tauri shared backend state (`AppState`) stores:

- persistent `Store`
- active filesystem watchers map

This state is managed in Rust (`src-tauri/src/commands.rs`) and accessed via Tauri commands/events.