Skip to content
Tasuku

List Sidebar & Drag-Drop

The sidebar shows the user’s Lists and Groups and supports drag-and-drop reordering and grouping. It is built from islands in src/islands over the offline cache.

The sidebar islands, the rank helpers, and the offline write path:

flowchart LR
  MC["MainColumn.tsx"] --> LC["ListCollection.tsx"]
  LC --> LI["ListItem.tsx"]
  LC --> GH["GroupHeader.tsx"]
  LC -->|"compareRanks()"| RANK["lib/rank"]
  LC -->|"moveList() / moveGroup()"| SYNC["lib/offline/sync.ts"]
  SYNC -->|"generateKeyBetween()"| RANK
  SYNC --> DEX[("Dexie cache<br/>(optimistic rank)")]
  SYNC -->|"replayOutbox()"| API{{"Worker API"}}
  CS["lib/sidebar/counts-store.ts"] -->|"liveQuery"| DEX
  LI --> CB["CountBadge.tsx"]
  CB --> CS

Components

Section titled “Components”
  • ListCollection.tsx / ListItem.tsx — render the flat + grouped Lists; GroupHeader.tsx renders expandable/collapsible Groups; MainColumn.tsx composes the sidebar column.
  • Drag-and-drop sets the persisted custom order (fractional rank) — per-User for Lists and Groups (Product Brief §5.2). A List can move into/out of a Group; Groups never nest (spec 008). For shared Lists, order + group are per-viewer (stored on listMembers), so each Member arranges them independently (see Idempotency & List-Members Repos).

A drop resolves neighbors, computes a fractional rank, and writes optimistically before the server confirms:

sequenceDiagram
  participant U as User
  participant LC as ListCollection.tsx
  participant RANK as lib/rank
  participant SYNC as moveList()
  participant DEX as Dexie cache
  participant API as Worker API
  U->>LC: drop List on target
  LC->>LC: resolve groupId + beforeId/afterId
  LC->>SYNC: moveList(id, {groupId, beforeId, afterId})
  SYNC->>RANK: generateKeyBetween(beforeRank, afterRank)
  RANK-->>SYNC: optimisticRank
  SYNC->>DEX: patch {rank, groupId, _sync: pending}
  SYNC->>API: enqueue PATCH + replayOutbox()
  API-->>DEX: canonical rank on ACK

Counts

Section titled “Counts”

List/View counts shown in the sidebar come from src/lib/sidebar/counts-store.ts + src/lib/offline/sidebar-counts.ts (see Sidebar Counts & Local-Today).

Related: Fractional Rank Algorithm (the order keys), Sort Modes & Reordering, Group/List Context Menus, Sidebar Counts & Local-Today.