ClaudeDo/docs/superpowers/specs/2026-04-14-todo-ux-redesign-design.md

ClaudeDo UX Redesign — Microsoft To Do Style

Goal

Redesign ClaudeDo's UI for usability and visual polish, modeled after Microsoft To Do. Focus on keyboard-driven task creation, inline editing, and a cleaner visual language. All changes are within the ClaudeDo.Ui project (Views, ViewModels, Converters).

Design Decisions

• Accent color: Forest Teal #3d9474
• Task creation: inline text field + detail pane editing (no more modal as primary path)
• Editing: auto-save on focus-lost in the detail pane
• Layout: proportional/reactive column sizing, no fixed pixel widths
• Toolbars removed — all actions via keyboard shortcuts, context menus, or inline controls

---

1. Inline Task Creation

Current

Bottom toolbar with + Task, Edit, Delete buttons. Clicking + Task opens a modal TaskEditorView dialog.

New

• Replace the bottom button toolbar in TaskListView with an inline text field: + Add a task...
• Styled with dashed border, Forest Teal + icon, placeholder text
• Enter creates a new task with the typed title. Defaults: Manual status, list's DefaultCommitType, no tags
• Escape clears the field and returns focus to the task list
• After creation, the new task is auto-selected, which loads it in the detail pane for further editing
• The modal TaskEditorView remains accessible via Ctrl+N for power users who want all fields at once

Implementation Notes

• Add an InlineAddTitle observable property and InlineAddCommand to TaskListViewModel
• The inline TextBox in TaskListView.axaml binds to InlineAddTitle and triggers the command on Enter via KeyDown handler
• Task creation logic reuses existing _taskRepo.AddAsync path but with minimal defaults

---

2. Editable Detail Pane

Current

TaskDetailView is read-only. Shows title, status badge, description, result, log path, live output, and worktree controls.

New

Split the detail pane into two zones:

Editable zone (top):

• Title — editable TextBox (no label, large font, like To Do)
• Status — ComboBox dropdown
• Commit Type — ComboBox dropdown
• Tags — display as clickable chips/badges with an inline "add tag" TextBox; click x on a chip to remove
• Description — editable TextBox with AcceptsReturn, TextWrapping

Read-only zone (below):

• Result (read-only TextBox, same as current)
• Log path
• Live output stream
• Worktree section (branch, state, diff stat, action buttons)

Auto-Save

• Changes save automatically when the field loses focus (LostFocus event)
• TaskDetailViewModel gets a SaveAsync method that persists via _taskRepo.UpdateAsync
• Tag add/remove saves immediately on action
• No Save/Cancel buttons in the detail pane

Implementation Notes

• TaskDetailViewModel needs write access: inject TaskRepository, TagRepository
• Add observable properties for editable fields with LostFocus triggering save
• Add AddTagCommand, RemoveTagCommand with immediate persistence
• Tag chips: use an ItemsRepeater or ItemsControl with a WrapPanel layout

---

3. Keyboard Shortcuts

All shortcuts handled via KeyDown on MainWindow or individual view controls.

Action	Shortcut	Scope	Handler
Add task (inline focus)	Ctrl+N	MainWindow	Focus inline TextBox (or open modal if Shift held)
Confirm inline add	Enter	Inline TextBox	Create task
Cancel inline add	Escape	Inline TextBox	Clear and defocus
Delete task	Delete	Task list focused	DeleteTaskCommand
Edit / focus detail	Enter or F2	Task selected in list	Focus first editable field in detail pane
Toggle done	Space	Task selected in list	Toggle status between Done and Manual
Run now	Ctrl+R	Task selected	RunNowCommand
Navigate tasks	Up/Down	Task list	Built-in ListBox behavior
Focus lists pane	Ctrl+L	Anywhere	Focus list ListBox
Add new list	Ctrl+Shift+N	Anywhere	AddListCommand

Implementation Notes

• MainWindow.axaml.cs gets a KeyDown handler that routes global shortcuts
• Task-list-scoped shortcuts (Delete, Space, Enter/F2) handled in TaskListView.axaml.cs
• Inline TextBox shortcuts handled locally on the TextBox

---

4. Visual Overhaul

4.1 Accent Color

Primary accent: #3d9474 (Forest Teal)

Derived palette:

• Accent: #3d9474
• Accent light (text on dark bg): #6bb89e
• Accent subtle (hover/selection bg): rgba(61, 148, 116, 0.10)
• Accent muted (selected list text): #6bb89e

These should be defined as Avalonia SolidColorBrush resources in App.axaml or a resource dictionary for easy theming.

4.2 Circular Checkboxes

Replace the status badge + Run button in each task row with a circular checkbox on the left.

• Circle: 20px diameter, 2px border
• Border color by status:
  • Manual / Queued: #475569 (gray)
  • Running: #e67e22 (orange), with a filled inner dot
  • Done: #3d9474 (accent green), with a checkmark SVG
  • Failed: #ef4444 (red)
• Click toggles between Done and previous non-done status
• Running and Failed checkboxes are not togglable (controlled by worker)

4.3 Completed Task Styling

Tasks with Done status:

• Title: strikethrough, muted color (#5a6578)
• Subtitle/tags: dimmer color (#475569)
• Row opacity: 0.6
• Checkmark SVG inside the circle

4.4 Sidebar Polish

List items:

• Colored dot (8px circle) to the left of each list name
• Dot color: cycle through a fixed palette (green, blue, amber, purple, rose) based on list index modulo palette length — no schema change needed
• Selected list: subtle accent background rgba(61, 148, 116, 0.15), accent-colored text
• Unselected: muted text color #94a3b8
• More vertical padding (10px) and horizontal padding (12px)
• Border radius 8px on list items

Bottom:

• Replace +/E/- buttons with a single + New List text link in accent color
• Edit and Delete remain accessible via context menu and keyboard

4.5 Task List Header

Replace the static Tasks TextBlock with the selected list's name:

• Font size 16, font weight 600, color #e2e8f0
• Bind to MainWindowViewModel.SelectedList.Name
• Falls back to "Tasks" if no list selected

4.6 Inline Add Field Styling

• Dashed border: 1px dashed #3a4560
• Border radius: 8px
• Placeholder text: + Add a task... with + in accent color
• Padding: 10px 14px
• On focus: border becomes solid accent color, placeholder disappears

4.7 Remove Button Toolbars

• Remove the StackPanel DockPanel.Dock="Bottom" from both MainWindow.axaml (lists pane) and TaskListView.axaml (tasks pane)
• Lists pane bottom: replace with + New List link
• Tasks pane bottom: replace with inline add TextBox
• All removed actions (Edit, Delete) remain available via context menu and keyboard shortcuts

---

5. Reactive Layout

Current

Grid ColumnDefinitions="220,Auto,*,Auto,350" — fixed 220px sidebar, fixed 350px detail pane.

New

• Sidebar: Auto with MinWidth="180" and MaxWidth="320", default content-driven
• GridSplitters: remain as-is (Auto columns)
• Tasks pane: * (takes remaining space)
• Detail pane: * with MinWidth="280" and MaxWidth="500"

Use proportional sizing: ColumnDefinitions="1*,Auto,2*,Auto,1.5*" with min constraints on columns 0 and 4. This gives proportional resizing out of the box without needing content-driven measurement.

Additional

• Task row content adapts: title truncates with TextTrimming="CharacterEllipsis"
• Detail pane fields stretch to available width
• Status bar stretches full width (already does)
• Window MinWidth="800" and MinHeight="500" remain as-is

---

6. Scope — What Does NOT Change

• ClaudeDo.Worker, ClaudeDo.Data, ClaudeDo.App — no changes
• Database schema — no changes
• SignalR protocol — no changes
• WorkerClient — no changes
• ListEditorView / ListEditorViewModel — modal remains for list CRUD
• TaskEditorView / TaskEditorViewModel — modal remains as Ctrl+N fallback
• Status bar layout and functionality
• Context menu structure (items may be adjusted but menus stay)
• Task status flow (Manual | Queued -> Running -> Done | Failed)
• Worktree section in detail pane (read-only, action buttons)

---

7. Files to Create or Modify

Modify

• MainWindow.axaml — reactive column definitions, list header binding, sidebar polish, keyboard handler
• MainWindow.axaml.cs — global KeyDown routing
• TaskListView.axaml — remove toolbar, add inline TextBox, checkbox task template, keyboard handlers
• TaskListView.axaml.cs — inline add KeyDown, task KeyDown (Delete/Space/Enter)
• TaskDetailView.axaml — editable fields, tag chips, auto-save bindings
• TaskDetailView.axaml.cs — LostFocus handlers for auto-save
• TaskDetailViewModel.cs — add write capabilities, SaveAsync, tag CRUD, editable properties
• TaskListViewModel.cs — InlineAddTitle property, InlineAddCommand, toggle-done logic
• TaskItemViewModel.cs — add IsDone property, status-to-checkbox-state logic
• StatusColorConverter.cs — may need adjustment for checkbox border colors (or add new converter)
• App.axaml (or resource dictionary) — accent color brush resources

Possibly Create

• CheckboxBorderConverter.cs — status string to checkbox border color
• Color resource dictionary (if not inlining in App.axaml)