Todo Panel — Item detail side peek + markdown read/edit toggle #50

Parent

#44

What to build

Clicking an item opens a side peek detail panel that extends beyond the sidebar width (does not narrow the list or overlay it). The panel renders the item description as rich markdown with a read/edit toggle.

UI layout: The side peek slides out from the right edge of the sidebar, expanding the total panel width. The todo list remains at its current width — the detail panel is additive space.

Read mode: Description rendered via react-markdown + remark-gfm (both already in apps/web deps). Supports headers, lists, code blocks, links, bold/italic.

Edit mode: Clicking anywhere in the rendered markdown area flips to a textarea pre-filled with the raw markdown. A small "Editing…" indicator shows. Pressing Escape or clicking outside the textarea returns to read mode with the description updated. Changes are persisted to the server.

State machine: todoStore gains updateDescription(itemId, description: string).

Acceptance criteria

• Clicking an item row opens a side peek detail panel
• Detail panel extends beyond the sidebar width (additive, not overlay/narrowing)
• Description renders as rich markdown (headers, lists, code blocks, links, etc.)
• Clicking the rendered markdown area switches to textarea editing
• "Editing…" indicator shown in edit mode
• Escape returns to read mode (changes saved)
• Click outside the textarea returns to read mode (changes saved)
• Changes persist to server + JSON file
• Empty description shows placeholder text (e.g. "Click to add description…")
• bun fmt, bun lint, bun typecheck all pass

Blocked by

• Todo Panel — Create items per category + WebSocket sync #47