Skip to content

Sidebar Counts & Local-Today

The sidebar shows per-View and per-List Task counts, computed entirely on the client from the cached data and refreshed as data changes.

The pure count derivation, the reactive store that drives it, and the badge island:

flowchart LR
  CS["counts-store.ts<br/>(getSidebarCounts / useSidebarCounts)"] -->|"liveQuery"| DEX[("Dexie<br/>db.tasks + db.myDay")]
  CS -->|"computeCounts()"| SC["sidebar-counts.ts<br/>(SidebarCounts)"]
  CS -->|"localTodayISO()"| LT["local-today.ts"]
  CB["CountBadge.tsx"] -->|"useSidebarCounts()"| CS
  SV["SystemViews.tsx"] --> CB
  LI["ListItem.tsx"] --> CB
  • src/lib/offline/sidebar-counts.tscomputeCounts(...) derives SidebarCounts (perView + perList); emptyPerView() / EMPTY_COUNTS are the zero state.
  • src/lib/sidebar/counts-store.ts — an observable store: getSidebarCounts(), useSidebarCounts() (React hook), _resetSidebarCounts(). The CountBadge.tsx island renders the numbers and re-renders on change.
  • Counts respect the authorization boundary and the View definitions (owned + member Lists; “Important”/“Planned”/“Assigned to me”/“My Day”; see My Day & Owner-Scoped Views).
  • src/lib/date/local-today.tslocalTodayISO(d = new Date()) returns the user’s local calendar day (YYYY-MM-DD). This is the boundary that resets “My Day” each local midnight and that “Planned”/due-date logic compares against, so day-sensitive counts and views follow the user’s timezone, not UTC (Product Brief §5.2).

A data change triggers one liveQuery pass that recomputes counts and re-renders every badge:

sequenceDiagram
  participant DEX as Dexie (db.tasks / db.myDay)
  participant LQ as counts-store liveQuery
  participant LT as localTodayISO()
  participant CC as computeCounts()
  participant CB as CountBadge.tsx
  DEX->>LQ: change emits
  LQ->>LT: localTodayISO()
  LT-->>LQ: today (local day)
  LQ->>LQ: read tasks + today's myDay rows
  LQ->>CC: computeCounts(tasks, myDayTaskIds)
  CC-->>LQ: SidebarCounts (perView + perList)
  LQ->>CB: notify subscribers → re-render

Related: My Day & Owner-Scoped Views, List Sidebar & Drag-Drop, Date/Number Format Utils.