Todo Panel — Polish: first-time prompt, color bleed, tests, edge cases #53

Parent

#44

What to build

Final polish pass: first-time empty state, category color bleeding into item backgrounds, remaining tests, and edge-case hardening.

First-time empty state: When the todo panel is opened and there are zero categories, show a subtle centered prompt: "No categories yet. Click + to create one." This disappears once the first category is created.

Color bleed: Each category's color is applied as a full tint to the header background. Items within the category get a lighter variant of the same color as a subtle background. Use CSS color-mix or opacity to derive the lighter variant. This creates a visual scanning aid.

Remaining tests: Fill in any missing coverage from prior slices. Focus on todoStore edge cases:

• Empty state transitions
• Invalid operations (deleting non-empty category, cycling non-existent item)
• Reorder with gaps
• Concurrent mutations (debounced write handling)

Edge cases:

• Sidebar reopens to last state (not reset)
• Markdown XSS safety (no raw HTML injection)
• Empty item title handling (prevent creation with empty title)
• Very long category names (truncation)

Acceptance criteria

• First-time empty state shows subtle prompt in center of panel
• Prompt disappears when first category is created
• Category header rendered with full color tint
• Items within category have lighter variant of category color as background
• Color is readable against text (either dark text on light bg or vice versa)
• Sidebar reopening preserves last scroll/collapse state
• Empty item title is rejected (no blank items created)
• Long category names are truncated with ellipsis
• Unit tests: empty state transitions, edge cases, invalids
• bun fmt, bun lint, bun typecheck, bun run test all pass
• Full manual smoke test: create categories → add items → reorder → cycle status → edit description → delete → verify persistence after restart

Blocked by

• Todo Panel — Schema + empty sidebar shell with cmd+L toggle #45 (sidebar shell)
• Todo Panel — Read-only categories from JSON persistence #46 (categories)
• Todo Panel — Create items per category + WebSocket sync #47 (items)
• Todo Panel — Status cycle + done section + archive #48 (status cycle)
• Todo Panel — Drag to reorder + recategorize categories and items #49 (drag)
• Todo Panel — Item detail side peek + markdown read/edit toggle #50 (side peek)
• Todo Panel — Category management (create, rename, delete, empty toggle, JIRA) #51 (category mgmt)
• Todo Panel — Item JIRA links + context menu + delete #52 (item JIRA + context menu)

Serves as the integration and polish slice. All prior slices should be merged before starting this one.