reactive-sqlite-ui

Source excerpt starting at line 1.

1---2name: reactive-sqlite-ui3description: Build SQLite-backed reactive UI in `apps/desktop` using stable patterns for reads, selection, forms, writes, and loading states. Use when implementing or reviewing screens built on `useDrizzleLiveQuery` and SQLite mutations.4metadata:5  internal: true6---7 8## Goal9 10Use SQLite live queries as the screen data source without duplicating subscriptions, fighting the reactivity model, or making selection and form state unstable.11 12## Patterns13 14### 1. Screen Boundary Query15 16- Subscribe once per resource domain at the screen boundary.17- Pass derived data downward.18- Open another live query only when the child truly needs different data.19 20```ts21const items = useItems();22const selectedItem = items.find((item) => item.id === selectedId) ?? null;23```24 25### 2. Selection Is UI State26 27- Keep selection in tab/zustand/local UI state as an id or index.28- Do not model selection as a second live query.29- Resolve the selected item from the already-loaded collection when possible.30 31### 3. Detail Pane From Snapshot32 33- Pass the selected object into detail components.34- Key detail forms by entity id only when you want local state reset on entity switch.35- Preserve visible data across normal selection changes.36 37This is the main anti-flicker pattern.38 39### 4. Forms Own Draft State40 41- Reactive query data is the source for persisted state.42- The form owns draft state while editing.43- Reset form state when the entity changes, not on every reactive payload.44 45### 5. Writes Flow One Way46 47- Reads: `useDrizzleLiveQuery(db.select()...)`48- Imperative reads: helper/query outside the render path49- Writes: `db.insert`, `db.update`, `db.delete` inside `useMutation`50- Let SQLite change notifications update subscribed UI51 52Do not add manual invalidation unless the write affects data outside the subscribed query graph.53 54### 6. Loading States Are Scoped55 56- Show loading UI for initial screen load.57- Do not blank the detail pane for ordinary selection changes.58- Prefer preserving previous data until the next snapshot when query args change frequently.59 60## Anti-Patterns61 62- Parent list query plus child selected-row query for the same table63- Child components that take `id` and immediately subscribe again64- Resetting detail data to `undefined` during normal selection changes65- Form resets tied to every incoming reactive payload66- Mixing imperative local cache invalidation with SQLite live-query updates67 68## Review Check69 70- Is there more than one live query for the same resource on the same screen?71- Can the detail view render from the parent snapshot?72- Does entity change reset the form, while ordinary reactive updates do not?73- Is loading UI limited to initial load or truly missing data?74- Are writes relying on the live-query loop instead of manual sync?75