releases/ClaudeDo
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

docs: add UX redesign spec (Microsoft To Do style)

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mika Kuns
2026-04-14 09:54:45 +02:00
parent 473e0f71d5
commit 0e41c37d37
1 changed files with 222 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
docs/superpowers/specs/2026-04-14-todo-ux-redesign-design.md Normal file
View File

@@ -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)