223 lines
9.3 KiB
Markdown
223 lines
9.3 KiB
Markdown
# 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)
|