Skip to content

Create Forms & Search Triggers

The quick-entry surfaces for creating Lists, Groups, and Tasks, and for opening search (src/islands).

The diagram below shows the create forms and search triggers and what they connect to.

flowchart LR
  CreateList["CreateListForm.tsx"]
  CreateGroup["CreateGroupButton.tsx"]
  AddTask["AddTaskInput.tsx"]
  Untitled["untitled-name.ts<br/>(nextUntitledName)"]
  Sync["sync.ts<br/>(offline mutation API)"]
  Dexie[("Dexie cache<br/>+ outbox")]
  SearchTrig["SearchTrigger.tsx"]
  SearchOv["SearchOverlay.tsx"]
  Matcher["Search Match Engine<br/>(client-side)"]

  CreateList --> Untitled
  CreateList -->|createList| Sync
  CreateGroup -->|createGroup| Sync
  AddTask -->|createTask| Sync
  Sync -->|optimistic write + queue| Dexie
  SearchTrig -->|opens| SearchOv
  SearchOv --> Matcher
  Matcher --> Dexie
  • CreateListForm.tsx — inline new-List draft (footer create affordance); names default via nextUntitledName(...) (src/lib/lists/untitled-name.ts) when left blank.
  • CreateGroupButton.tsx — opens an inline Group draft.
  • AddTaskInput.tsx — quick add a Task to the active List; new Tasks land at the top of the List (Product Brief §5.2).

All create actions are optimistic: the entity appears immediately from the Dexie cache and the mutation queues in the outbox (see Offline Outbox & Optimistic Writes).

The sequence below traces a quick Task add from AddTaskInput.tsx through the optimistic write to outbox replay.

sequenceDiagram
  participant User
  participant Add as AddTaskInput.tsx
  participant Sync as sync.ts
  participant Dexie as Dexie cache + outbox
  participant Worker as Worker API
  User->>Add: type title + submit
  Add->>Sync: createTask(listId, title)
  Sync->>Dexie: optimistic insert (top of List) + queue op
  Dexie-->>Add: liveQuery emits (Task appears)
  Sync->>Worker: replayOutbox()
  Worker-->>Dexie: reconcile
  • SearchTrigger.tsx — the entry control that opens search; SearchOverlay.tsx — the overlay that runs queries against the client-side matcher (see Search Match Engine) and renders highlighted results, fully offline.

Related: Search Match Engine, List Sidebar & Drag-Drop, Task Attributes API (Task creation).