474 lines
23 KiB
Markdown
474 lines
23 KiB
Markdown
# UI Normalization Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Make the design tokens the single source of truth for every visual value in the Avalonia UI, remove duplicated styles, and add a reusable `ModalShell` control for the copy-pasted modal chrome.
|
||
|
||
**Architecture:** Establish global control defaults in `App.axaml`, expand/repoint brushes in `Tokens.axaml`, promote shared styles into `IslandStyles.axaml`, then mechanically migrate every view to reference tokens (snapping stray values to the nearest token per "lane B"). Off-palette colors fold into the existing palette. A new `ModalShell` templated control replaces the per-modal titlebar/border/footer markup.
|
||
|
||
**Tech Stack:** .NET 8, Avalonia 12 (Fluent theme, dark variant), compiled XAML (`x:DataType`), CommunityToolkit.Mvvm.
|
||
|
||
**Verification model:** There are no unit tests for XAML. The "test" for every task is a clean build:
|
||
- `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj` (compiles Ui + Data; validates all StaticResource keys and compiled bindings)
|
||
|
||
Build with the `.csproj` directly — `.slnx` requires .NET 9 and will fail on this machine (.NET 8).
|
||
|
||
**Normalization rules (apply everywhere unless a task says otherwise):**
|
||
|
||
Font sizes — replace every `FontSize="N"` literal with the token whose value it snaps to:
|
||
| literal | token |
|
||
|---|---|
|
||
| 9 | `{StaticResource FontSizeEyebrow}` (10) |
|
||
| 10 | `{StaticResource FontSizeEyebrow}` (10) |
|
||
| 11 | `{StaticResource FontSizeMono}` (11) |
|
||
| 12 | `{StaticResource FontSizeBody}` (13) |
|
||
| 13 | `{StaticResource FontSizeBody}` (13) |
|
||
| 14 | `{StaticResource FontSizeTaskTitle}` (14) |
|
||
| 16 | `{StaticResource FontSizeH3}` (18) |
|
||
| 18 | `{StaticResource FontSizeH3}` (18) |
|
||
| 24 | `{StaticResource FontSizeH2}` (24) |
|
||
| 32 | `{StaticResource FontSizeH1}` (32) |
|
||
|
||
Spacing — modal body padding literals `16` and `20` snap to `18`; keep other axis values mapped to the nearest of SpaceXs=4/SpaceSm=8/SpaceMd=12/SpaceLg=14/SpaceXl=18/Space2Xl=24. Leave values that already equal a token as plain numbers (do **not** churn every margin into a resource ref — only modal body padding is standardized).
|
||
|
||
Corner radius — `4` → `6`; TextBox inputs use `8`.
|
||
|
||
Colors — fold off-palette to palette:
|
||
| literal / named | replacement |
|
||
|---|---|
|
||
| `#4CAF50` (online dot) | `{DynamicResource StatusRunningBrush}` |
|
||
| `#FFA726` (reconnecting dot) | `{DynamicResource StatusReviewBrush}` |
|
||
| `#EF5350` (offline / phantom) | `{DynamicResource StatusErrorBrush}` |
|
||
| `OrangeRed`, `Orange` | `{DynamicResource BloodBrush}` |
|
||
| `White` (badge / danger text) | `{DynamicResource TextBrush}` |
|
||
| `White` (on accent primary button) | `{DynamicResource DeepBrush}` |
|
||
| `#FF080C0B` (terminal bg) | `{DynamicResource VoidBrush}` |
|
||
| `#0DFFFFFF` (island hairline) | `{DynamicResource HairlineOverlayBrush}` |
|
||
|
||
---
|
||
|
||
## Phase 1 — Foundation
|
||
|
||
### Task 1: Add new brushes & repoint badges in Tokens.axaml
|
||
|
||
**Files:**
|
||
- Modify: `src/ClaudeDo.Ui/Design/Tokens.axaml`
|
||
|
||
- [ ] **Step 1: Add named tint, hairline brushes**
|
||
|
||
In the BRUSHES section (after the Status*Brush block ending ~line 85), add:
|
||
|
||
```xml
|
||
<!-- Subtle white overlay (island hairline border) -->
|
||
<SolidColorBrush x:Key="HairlineOverlayBrush" Color="#0DFFFFFF" />
|
||
|
||
<!-- Status tints (12% fill / 30% border of the status hue) — reused by chips & agent strips -->
|
||
<SolidColorBrush x:Key="RunningTintBrush" Color="#1F7C9166" />
|
||
<SolidColorBrush x:Key="RunningTintBorderBrush" Color="#4C7C9166" />
|
||
<SolidColorBrush x:Key="ReviewTintBrush" Color="#1FD4A574" />
|
||
<SolidColorBrush x:Key="ReviewTintBorderBrush" Color="#4CD4A574" />
|
||
<SolidColorBrush x:Key="ErrorTintBrush" Color="#1FC87060" />
|
||
<SolidColorBrush x:Key="ErrorTintBorderBrush" Color="#4CC87060" />
|
||
<SolidColorBrush x:Key="QueuedTintBrush" Color="#1F8B9D7A" />
|
||
<SolidColorBrush x:Key="QueuedTintBorderBrush" Color="#4C8B9D7A" />
|
||
```
|
||
|
||
- [ ] **Step 2: Build to verify tokens parse**
|
||
|
||
Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
|
||
Expected: PASS (no errors).
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/ClaudeDo.Ui/Design/Tokens.axaml
|
||
git commit -m "feat(ui): add named tint and hairline overlay brush tokens"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: Global control defaults in App.axaml
|
||
|
||
**Files:**
|
||
- Modify: `src/ClaudeDo.App/App.axaml`
|
||
|
||
- [ ] **Step 1: Add Window default style**
|
||
|
||
Inside `<Application.Styles>`, after `<StyleInclude Source="avares://ClaudeDo.Ui/Design/IslandStyles.axaml" />` and before the ListBoxItem styles, add:
|
||
|
||
```xml
|
||
<!-- Global defaults: every Window inherits Inter Tight + body size.
|
||
Controls that need mono opt in via their own class/style. -->
|
||
<Style Selector="Window">
|
||
<Setter Property="FontFamily" Value="{DynamicResource SansFont}" />
|
||
<Setter Property="FontSize" Value="{DynamicResource FontSizeBody}" />
|
||
<Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
|
||
</Style>
|
||
```
|
||
|
||
(FontFamily/FontSize/Foreground are inherited properties in Avalonia, so setting them on the Window root propagates to all descendant text controls.)
|
||
|
||
- [ ] **Step 2: Build**
|
||
|
||
Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
|
||
Expected: PASS.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/ClaudeDo.App/App.axaml
|
||
git commit -m "feat(ui): set global Inter Tight font default on all windows"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: Promote shared styles into IslandStyles.axaml
|
||
|
||
**Files:**
|
||
- Modify: `src/ClaudeDo.Ui/Design/IslandStyles.axaml`
|
||
|
||
- [ ] **Step 1: Add shared modal styles**
|
||
|
||
At the end of the `<Styles>` element (before the closing `</Styles>` at line ~901), add:
|
||
|
||
```xml
|
||
<!-- ============================================================ -->
|
||
<!-- SHARED MODAL STYLES (promoted from per-modal Window.Styles) -->
|
||
<!-- ============================================================ -->
|
||
<Style Selector="TextBlock.field-label">
|
||
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
|
||
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
|
||
<Setter Property="Margin" Value="0,0,0,4" />
|
||
</Style>
|
||
|
||
<Style Selector="TextBlock.path-mono">
|
||
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
|
||
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
|
||
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
|
||
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
|
||
</Style>
|
||
|
||
<!-- Standalone modal action buttons (not the .btn family) -->
|
||
<Style Selector="Button.primary">
|
||
<Setter Property="Background" Value="{StaticResource AccentDimBrush}" />
|
||
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
|
||
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
|
||
<Setter Property="FontWeight" Value="SemiBold" />
|
||
</Style>
|
||
<Style Selector="Button.danger">
|
||
<Setter Property="Background" Value="{StaticResource BloodBrush}" />
|
||
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
|
||
</Style>
|
||
```
|
||
|
||
Note: `TextBlock.section-label` already exists at line ~864 — do NOT re-add it.
|
||
|
||
- [ ] **Step 2: Replace hardcoded values inside existing IslandStyles rules**
|
||
|
||
Apply the normalization rules to the existing style setters in this file:
|
||
- Every `FontSize="N"` setter → the snapped token ref (table above). Specific lines: 149 (10→FontSizeEyebrow), 206 (11→FontSizeMono), 252 (13→FontSizeBody), 397 (11→FontSizeMono), 453 (9→FontSizeEyebrow), 475 (10→FontSizeEyebrow), 483 (10→FontSizeEyebrow), 556 (12→FontSizeBody), 573 (9→FontSizeEyebrow), 597 (12→FontSizeBody), 622 (10→FontSizeEyebrow), 638 (12→FontSizeBody), 697 (14→FontSizeTaskTitle), 771 (10→FontSizeEyebrow), 783 (10→FontSizeEyebrow), 788 (10→FontSizeEyebrow), 819 (11→FontSizeMono), 867 (10→FontSizeEyebrow), 884 (9→FontSizeEyebrow).
|
||
- Chip tint backgrounds/borders → named brushes:
|
||
- line 155/156 `#1F7C9166`/`#4C7C9166` → `{StaticResource RunningTintBrush}`/`{StaticResource RunningTintBorderBrush}`
|
||
- 163/164 review tints → `ReviewTintBrush`/`ReviewTintBorderBrush`
|
||
- 171/172 error tints → `ErrorTintBrush`/`ErrorTintBorderBrush`
|
||
- 179/180 queued tints → `QueuedTintBrush`/`QueuedTintBorderBrush`
|
||
- agent-strip tints at 361/362 (`#147C9166`/`#4C7C9166`), 365/366, 368/369, 374/375 → the matching `*TintBrush`/`*TintBorderBrush` (snap the `#14` alpha to the shared `#1F` tint).
|
||
- line 123 `#0DFFFFFF` → `{StaticResource HairlineOverlayBrush}`.
|
||
- line 389 & 810 `#FF080C0B` → `{StaticResource VoidBrush}`.
|
||
- line 887 badge `White` → `{StaticResource TextBrush}`.
|
||
- Badge brushes at lines 88-90: replace the three `<SolidColorBrush>` definitions with palette refs:
|
||
```xml
|
||
<SolidColorBrush x:Key="DraftBadgeBrush" Color="{StaticResource TextMuteColor}"/>
|
||
<SolidColorBrush x:Key="PlanningBadgeBrush" Color="{StaticResource PeatColor}"/>
|
||
<SolidColorBrush x:Key="PlannedBadgeBrush" Color="{StaticResource SageColor}"/>
|
||
```
|
||
- Corner radius `4` setters (447 live-chip, 813 task-live-tail `5`→leave, badges 878 `3`→leave) → only snap `4`→`6` where it appears as `CornerRadius="4"` on live-chip (447) and kbd (614) and badge tints. Leave `3` and `5` as-is (no nearby token; they're intentional micro-radii). NOTE: if unsure, leave radius alone — radius churn is lowest priority.
|
||
|
||
- [ ] **Step 3: Build**
|
||
|
||
Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
|
||
Expected: PASS.
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/ClaudeDo.Ui/Design/IslandStyles.axaml
|
||
git commit -m "refactor(ui): tokenize IslandStyles values and add shared modal styles"
|
||
```
|
||
|
||
---
|
||
|
||
## Phase 2 — Per-view token migration (independent; parallelizable)
|
||
|
||
For each task: open the file, apply the **normalization rules** (font/color/spacing/radius tables at top). Remove any local `Window.Styles` block that only redefines `section-label`, `field-label`, `path-mono`, `Button.primary`, or `Button.danger` (now shared from IslandStyles). Keep local styles that are genuinely unique to that view. After each file, build and commit.
|
||
|
||
Each task ends with:
|
||
- Build: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj` → PASS
|
||
- Commit: `git add <file> && git commit -m "refactor(ui): tokenize <view>"`
|
||
|
||
### Task 4: MainWindow.axaml
|
||
- Snap all `FontSize` literals (lines ~46,52,59,67,112,136,209,222,231).
|
||
- Status dots: `#4CAF50`→`StatusRunningBrush`, `#FFA726`→`StatusReviewBrush`, `#EF5350`→`StatusErrorBrush` (lines ~200,203,205).
|
||
|
||
### Task 5: Islands — ListsIslandView.axaml, TasksIslandView.axaml
|
||
- ListsIslandView: snap FontSize (18,10,12 at lines ~18,49,57,58,59); username TextBlock (~57) gets no explicit FontFamily (inherits SansFont now — correct, leave it).
|
||
- TasksIslandView: snap FontSize (24,11 at ~15,19).
|
||
|
||
### Task 6: DetailsIslandView.axaml
|
||
- Snap all FontSize (10,14,11,10,13,12 at lines ~54,57,92,114,138,142,199,269).
|
||
- `OrangeRed`→`BloodBrush` (~154).
|
||
- TextBox `CornerRadius="6"`→`8` (~172,274). TextBox `Padding="8"` leave.
|
||
- Remove any redundant inline label styles superseded by shared `field-label`.
|
||
|
||
### Task 7: TaskRowView.axaml (includes the BorderBrush bug fix)
|
||
- Snap FontSize (10,14 at ~85,103).
|
||
- **Bug fix:** `BorderBrush="{DynamicResource BorderBrush}"` → `{DynamicResource LineBrush}` (the schedule-flyout border, ~line 188/222). `BorderBrush` is not a defined key.
|
||
- Schedule flyout: title/labels inherit SansFont now (leave unset).
|
||
|
||
### Task 8: AgentStripView.axaml, SessionTerminalView.axaml
|
||
- AgentStrip: snap FontSize (10,9 at ~22,29,73,78); commit chip radius `4`→`6` (~102).
|
||
- SessionTerminal: snap FontSize (10,11 at ~17,69).
|
||
|
||
### Task 9: ThemedDatePicker.axaml
|
||
- Snap any FontSize literals; popup border `CornerRadius="10"` → leave (10 = ChipCornerRadius value, acceptable) OR `{StaticResource ChipCornerRadius}`. Tokenize colors if any literals present.
|
||
|
||
---
|
||
|
||
## Phase 3 — ModalShell control
|
||
|
||
### Task 10: Create ModalShell control
|
||
|
||
**Files:**
|
||
- Create: `src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml.cs`
|
||
- Create: `src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml`
|
||
|
||
- [ ] **Step 1: Write the code-behind (templated control)**
|
||
|
||
`ModalShell.axaml.cs`:
|
||
```csharp
|
||
using System;
|
||
using System.Windows.Input;
|
||
using Avalonia;
|
||
using Avalonia.Controls;
|
||
using Avalonia.Controls.Primitives;
|
||
using Avalonia.Input;
|
||
|
||
namespace ClaudeDo.Ui.Views.Controls;
|
||
|
||
/// <summary>Reusable modal chrome: titlebar (drag + close) wrapping a body and optional footer.</summary>
|
||
public class ModalShell : ContentControl
|
||
{
|
||
public static readonly StyledProperty<string?> TitleProperty =
|
||
AvaloniaProperty.Register<ModalShell, string?>(nameof(Title));
|
||
|
||
public static readonly StyledProperty<object?> FooterProperty =
|
||
AvaloniaProperty.Register<ModalShell, object?>(nameof(Footer));
|
||
|
||
public static readonly StyledProperty<ICommand?> CloseCommandProperty =
|
||
AvaloniaProperty.Register<ModalShell, ICommand?>(nameof(CloseCommand));
|
||
|
||
public string? Title { get => GetValue(TitleProperty); set => SetValue(TitleProperty, value); }
|
||
public object? Footer { get => GetValue(FooterProperty); set => SetValue(FooterProperty, value); }
|
||
public ICommand? CloseCommand { get => GetValue(CloseCommandProperty); set => SetValue(CloseCommandProperty, value); }
|
||
|
||
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
|
||
{
|
||
base.OnApplyTemplate(e);
|
||
if (e.NameScope.Find<Border>("PART_TitleBar") is { } bar)
|
||
bar.PointerPressed += OnTitleBarPressed;
|
||
}
|
||
|
||
private void OnTitleBarPressed(object? sender, PointerPressedEventArgs e)
|
||
{
|
||
if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed
|
||
&& VisualRoot is Window w)
|
||
w.BeginMoveDrag(e);
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Write the ControlTheme**
|
||
|
||
`ModalShell.axaml`:
|
||
```xml
|
||
<ResourceDictionary xmlns="https://github.com/avaloniaui"
|
||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||
xmlns:ctl="using:ClaudeDo.Ui.Views.Controls">
|
||
<ControlTheme x:Key="{x:Type ctl:ModalShell}" TargetType="ctl:ModalShell">
|
||
<Setter Property="Template">
|
||
<ControlTemplate>
|
||
<Border Background="{DynamicResource SurfaceBrush}"
|
||
BorderBrush="{DynamicResource LineBrush}"
|
||
BorderThickness="1"
|
||
CornerRadius="{DynamicResource ModalCornerRadius}"
|
||
ClipToBounds="True">
|
||
<DockPanel>
|
||
<!-- Title bar -->
|
||
<Border Name="PART_TitleBar" DockPanel.Dock="Top" Height="36"
|
||
Background="{DynamicResource DeepBrush}"
|
||
BorderBrush="{DynamicResource LineBrush}"
|
||
BorderThickness="0,0,0,1">
|
||
<Grid ColumnDefinitions="*,Auto" Margin="14,0">
|
||
<TextBlock Text="{TemplateBinding Title}"
|
||
FontFamily="{DynamicResource MonoFont}"
|
||
FontSize="{DynamicResource FontSizeMono}"
|
||
LetterSpacing="1.4"
|
||
Foreground="{DynamicResource TextBrush}"
|
||
VerticalAlignment="Center"/>
|
||
<Button Grid.Column="1" Classes="icon-btn" Content="✕"
|
||
FontSize="{DynamicResource FontSizeBody}"
|
||
Command="{TemplateBinding CloseCommand}"
|
||
VerticalAlignment="Center"/>
|
||
</Grid>
|
||
</Border>
|
||
<!-- Footer (optional) -->
|
||
<Border Name="PART_Footer" DockPanel.Dock="Bottom"
|
||
Background="{DynamicResource DeepBrush}"
|
||
BorderBrush="{DynamicResource LineBrush}"
|
||
BorderThickness="0,1,0,0"
|
||
IsVisible="{TemplateBinding Footer, Converter={x:Static ObjectConverters.IsNotNull}}">
|
||
<ContentPresenter Content="{TemplateBinding Footer}" Margin="16,8"/>
|
||
</Border>
|
||
<!-- Body -->
|
||
<ContentPresenter Content="{TemplateBinding Content}"/>
|
||
</DockPanel>
|
||
</Border>
|
||
</ControlTemplate>
|
||
</Setter>
|
||
</ControlTheme>
|
||
</ResourceDictionary>
|
||
```
|
||
|
||
- [ ] **Step 3: Register the ControlTheme**
|
||
|
||
In `src/ClaudeDo.App/App.axaml`, inside `<ResourceDictionary.MergedDictionaries>` (after the Tokens include), add:
|
||
```xml
|
||
<ResourceInclude Source="avares://ClaudeDo.Ui/Views/Controls/ModalShell.axaml" />
|
||
```
|
||
|
||
- [ ] **Step 4: Build**
|
||
|
||
Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
|
||
Expected: PASS.
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml.cs src/ClaudeDo.App/App.axaml
|
||
git commit -m "feat(ui): add reusable ModalShell control"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 11: Migrate SettingsModalView to ModalShell (reference migration)
|
||
|
||
**Files:**
|
||
- Modify: `src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml`
|
||
- Modify (if needed): `src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml.cs`
|
||
|
||
- [ ] **Step 1: Replace chrome with ModalShell**
|
||
|
||
- Add namespace if missing: `xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"` (already present).
|
||
- Remove the local `Window.Styles` entries for `section-label`, `field-label`, `path-mono`, `Button.danger`, `Button.primary` (now shared). Keep any genuinely unique styles.
|
||
- Replace the outer `<Border>...<Grid RowDefinitions="36,*,52">` structure with:
|
||
```xml
|
||
<ctl:ModalShell Title="SETTINGS" CloseCommand="{Binding CancelCommand}">
|
||
<ctl:ModalShell.Footer>
|
||
<StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Right" VerticalAlignment="Center">
|
||
<Button Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
|
||
<Button Content="Save" Classes="primary" Command="{Binding SaveCommand}" IsEnabled="{Binding !IsBusy}" MinWidth="90"/>
|
||
</StackPanel>
|
||
</ctl:ModalShell.Footer>
|
||
<!-- existing DockPanel body (tabs + validation strip) goes here unchanged -->
|
||
</ctl:ModalShell>
|
||
```
|
||
- The body is the existing `<DockPanel Grid.Row="1">` content minus `Grid.Row`.
|
||
- Snap remaining FontSize literals in the body per the rules.
|
||
|
||
- [ ] **Step 2: Remove obsolete drag handler if now unused**
|
||
|
||
If `TitleBar_PointerPressed` in `SettingsModalView.axaml.cs` is no longer referenced (ModalShell handles dragging), delete the method and the `x:Name="TitleBar"`/`PointerPressed` wiring. If the build complains about an unused handler, that's the signal.
|
||
|
||
- [ ] **Step 3: Build**
|
||
|
||
Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
|
||
Expected: PASS.
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml.cs
|
||
git commit -m "refactor(ui): migrate SettingsModal to ModalShell"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 12: Migrate remaining modals to ModalShell
|
||
|
||
Repeat the Task 11 pattern for each modal below. One commit per file. Each: swap chrome → `ModalShell`, lift action buttons into `ModalShell.Footer`, drop local duplicate styles, delete now-unused `*_PointerPressed` drag handlers, snap FontSize/colors per rules, build, commit.
|
||
|
||
- [ ] **12a:** `ListSettingsModalView.axaml` (+ `.axaml.cs`)
|
||
- [ ] **12b:** `MergeModalView.axaml` (+ `.axaml.cs`)
|
||
- [ ] **12c:** `AboutModalView.axaml` (+ `.axaml.cs`) — labels inherit SansFont now.
|
||
- [ ] **12d:** `UnfinishedPlanningModalView.axaml` (+ `.axaml.cs`)
|
||
- [ ] **12e:** `RepoImportModalView.axaml` (+ `.axaml.cs`)
|
||
- [ ] **12f:** `WorktreesOverviewModalView.axaml` (+ `.axaml.cs`) — also fold `Border.wt-row` to reuse `task-row` if trivial; snap FontSize; `#EF5350`→`StatusErrorBrush`; `White` badge text→`TextBrush`.
|
||
|
||
Each ends with build PASS + `git commit -m "refactor(ui): migrate <Modal> to ModalShell"`.
|
||
|
||
---
|
||
|
||
### Task 13: DiffModalView, PlanningDiffView, ConflictResolutionView (Static→Dynamic + chrome)
|
||
|
||
These three currently use `StaticResource` for token lookups. Migrate chrome to `ModalShell` where they are full windows, and convert token references.
|
||
|
||
- [ ] **Step 1: Convert resource references**
|
||
|
||
In each of `DiffModalView.axaml`, `PlanningDiffView.axaml`, `ConflictResolutionView.axaml`: change every `{StaticResource <Brush/Token>}` used in an **element attribute** to `{DynamicResource ...}`. Leave `{StaticResource ...}` inside `<Style>`/`Setter` blocks (Avalonia styles resolve StaticResource fine and DynamicResource in setters is discouraged).
|
||
|
||
- [ ] **Step 2: Apply normalization rules**
|
||
|
||
- Snap FontSize literals.
|
||
- `Consolas,Menlo,monospace` raw font (PlanningDiffView ~98, ConflictResolution ~47) → `{DynamicResource MonoFont}`.
|
||
- `Orange`/`OrangeRed` → `{DynamicResource BloodBrush}`.
|
||
- DiffModal tints `#1A4A6B4A`/`#1AC87060` → `{DynamicResource RunningTintBrush}`/`{DynamicResource ErrorTintBrush}`.
|
||
- Migrate window chrome to `ModalShell` if the file is a Window with the titlebar/footer pattern (DiffModalView, ConflictResolutionView). PlanningDiffView is an embedded view — only convert resources + fonts, no ModalShell.
|
||
|
||
- [ ] **Step 3: Build + commit (one per file)**
|
||
|
||
Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj` → PASS
|
||
Commit: `git commit -m "refactor(ui): tokenize and dynamic-ize <view>"`
|
||
|
||
---
|
||
|
||
## Phase 4 — Final verification
|
||
|
||
### Task 14: Full build + visual checklist
|
||
|
||
- [ ] **Step 1: Build both projects**
|
||
|
||
Run:
|
||
```bash
|
||
dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj
|
||
dotnet build src/ClaudeDo.Worker/ClaudeDo.Worker.csproj
|
||
```
|
||
Expected: both PASS.
|
||
|
||
- [ ] **Step 2: Grep for stragglers**
|
||
|
||
Confirm no remaining hardcoded values slipped through:
|
||
- `FontSize="` with a numeric literal in any `Views/**/*.axaml` (should be near-zero; only token refs remain).
|
||
- Off-palette hex (`#4CAF50`, `#FFA726`, `#EF5350`, `#FF080C0B`, `OrangeRed`, `Orange`) — should be zero.
|
||
|
||
- [ ] **Step 3: Produce the human visual-check checklist**
|
||
|
||
Write a short checklist (`docs/superpowers/plans/2026-05-30-ui-normalization-visualcheck.md`) listing each view/modal and what to eyeball (font looks like Inter Tight, status dots correct color, modal titlebars/footers intact, badges distinguishable, diff/planning views render). This is the regression gate the user runs by launching the app.
|
||
|
||
---
|
||
|
||
## Self-Review notes
|
||
|
||
- **Spec coverage:** global defaults (T2), token source-of-truth fonts/spacing/radius (rules + T3–T13), color fold (T1,T3,T4,T6,T12,T13), shared styles (T3), ModalShell (T10–T13), bug fixes — BorderBrush (T7), Static→Dynamic (T13). All spec sections mapped.
|
||
- **Risk note:** ModalShell migration (T11–T13) is the highest-risk part because each modal's body layout differs. Tasks are per-file so a failure is isolated. If a modal's body has tight coupling to the old Grid rows, keeping that modal's hand-rolled chrome (and only tokenizing it) is an acceptable fallback — note it in the commit.
|
||
- **Line numbers** are from the pre-change audit and may drift as edits land; treat them as guides, locate by content.
|