From 0e41c37d3720cb082fab74868267e8a33aa28072 Mon Sep 17 00:00:00 2001 From: Mika Kuns Date: Tue, 14 Apr 2026 09:54:45 +0200 Subject: [PATCH] docs: add UX redesign spec (Microsoft To Do style) Co-Authored-By: Claude Opus 4.6 (1M context) --- .../2026-04-14-todo-ux-redesign-design.md | 222 ++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-14-todo-ux-redesign-design.md diff --git a/docs/superpowers/specs/2026-04-14-todo-ux-redesign-design.md b/docs/superpowers/specs/2026-04-14-todo-ux-redesign-design.md new file mode 100644 index 0000000..2623732 --- /dev/null +++ b/docs/superpowers/specs/2026-04-14-todo-ux-redesign-design.md @@ -0,0 +1,222 @@ +# 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)