---
name: Tasks page
type: architecture-map-page
slice: 01-frontend
last_verified: 2026/05/09
---

# Tasks page

> **Where you are:** [Architecture map](../../README.md) → [Frontend](../README.md) → [Pages overview](../pages-overview.md) → Tasks

**Plain English summary.** The full screen tasks board. Inbox, today, soon, later buckets. Per task energy chips (low/medium/high), per task lists, micro steps, completion sparkline, search, sort, drag to reorder, and a "pop out" button that opens the same tasks in a small persistent floating window via `open_task_window`.

## At a glance

- **Path:** `src/lib/pages/TasksPage.svelte`
- **LOC:** 725
- **Imports (selected):**
  - Stores: from `page.svelte.ts`: `tasks`, `addTask`, `completeTask`, `uncompleteTask`, `deleteTask`, `updateTask`, `setTaskEnergy`, `taskLists`, `addTaskList`, `renameTaskList`, `deleteTaskList`, `settings`, `saveSettings`. From `completionStats.svelte.ts`: `recentCompletions`, `todayCount`.
  - Components: `WipTaskList`, `EmptyState`, `CompletionSparkline`, `EnergyChip`, `Card`.
  - Utils: `formatTimestamp` (time). `BUCKET_COLORS`, `EFFORT_LABELS`, `EFFORT_ORDER` (constants).
  - External: `lucide-svelte` (`SquareCheck`, `Search`, `ExternalLink`, `ChevronLeft`, `ArrowUpDown`, `Plus`, `X`, `ChevronRight`, `Zap`).

## What's in here

### Local state

- `activeBucket` (`"all" | "inbox" | "today" | "soon" | "later"`).
- `activeListId` (`"all" | "inbox" | <listId>`).
- `showCompleted`, `quickInput`, `searchQuery`, `sidebarCollapsed`.

### Render

- Quick add input (top). Sets bucket via segmented choice, energy via `EnergyChip`.
- Filter / sort header. Sort modes use `EFFORT_ORDER` for effort comparisons.
- Task list body uses `WipTaskList` (which renders rows with `MicroSteps` expansion).
- "Pop out" icon → `invoke("open_task_window")` (`TasksPage.svelte:231`).
- Sparkline panel renders `CompletionSparkline` if `settings.showMomentumSparkline` is true.

### Stores it depends on

- `tasks` (live array). `taskLists`. `recentCompletions` for the sparkline.

### Events

- Listens implicitly to: `lumotia:task-completed`, `lumotia:task-uncompleted`, `lumotia:task-deleted`, `lumotia:step-completed` are emitted from store helpers and consumed by `completionStats.svelte.ts` to refresh the sparkline.

## Tauri command surface (direct)

- `open_task_window` (page action).

The store helpers used here call into Rust through `add_task_cmd`, `complete_task_cmd`, `uncomplete_task_cmd`, `delete_task_cmd`, plus list management commands (`*_task_list_cmd`).

## Watch outs

- Drag and drop is heavy on this page. Reorder mutations should always go via the store helpers; do not manipulate `tasks` directly or you will desync the SQLite source of truth.
- The sparkline is gated on `settings.showMomentumSparkline` (true by default). It re renders on the four `lumotia:task-*` events, plus window focus for date rollover.
- "Pop out" deliberately does not pass any state. The float window reads the same store, which is shared via store hydration on mount and `localStorage` for `settings`.
- Sort, filter, search are not persisted. Reload returns to defaults.

## See also

- [Components](../components.md). `WipTaskList`, `MicroSteps`, `EnergyChip`, `CompletionSparkline`.
- [Stores](../stores.md). `page` task helpers, `completionStats`.
- [Windows and routes](../windows-and-routes.md). The float window equivalent.