style(ui): task row chip set, selected/done states, live tail

- Expose IsOverdue, Tags, StepsCount/StepsCompleted, DiffAdditions/Deletions
  on TaskRowViewModel; parse DiffStat into numeric add/del.
- Rebuild TaskRowView with explicit chip set: status, list-with-dot, branch
  (GitBranch icon + mono), diff (+N moss / −M blood), per-tag chips.
- Selected row shows 2px accent left bar + AccentSoft background.
- Done rows dim to 0.55 opacity with faint title plus strikethrough.
- Live-tail row: mono 11px ellipsized text + slim 3px moss progress bar,
  visible only when Status=Running and HasLiveTail.
- task-row Border now transitions Background and Margin.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mika kuns
2026-04-20 11:30:47 +02:00
parent 940b72f8dd
commit 0ef7113958
2 changed files with 144 additions and 36 deletions

View File

@@ -3,10 +3,18 @@
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
x:Class="ClaudeDo.Ui.Views.Islands.TaskRowView"
x:DataType="vm:TaskRowViewModel">
<Border Classes="task-row" Classes.selected="{Binding IsSelected}">
<Grid ColumnDefinitions="36,*,32" Margin="10,10">
<Border Classes="task-row"
Classes.selected="{Binding IsSelected}"
Classes.done="{Binding Done}">
<Grid ColumnDefinitions="4,32,*,32" Margin="6,8,10,8">
<!-- Left accent bar (visible when selected) -->
<Border Grid.Column="0" Classes="task-row-accent"
IsVisible="{Binding IsSelected}"/>
<!-- Done toggle -->
<Button Grid.Column="0" Classes="check-btn" VerticalAlignment="Center"
<Button Grid.Column="1" Classes="check-btn" VerticalAlignment="Top"
Margin="0,2,0,0"
Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).ToggleDoneCommand}"
CommandParameter="{Binding}">
<Ellipse Width="18" Height="18" Classes="task-check"
@@ -14,43 +22,91 @@
</Button>
<!-- Title + chip row + live tail -->
<StackPanel Grid.Column="1" Spacing="6" VerticalAlignment="Center">
<TextBlock Text="{Binding Title}" FontSize="14"
<StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
<TextBlock Classes="task-title"
Text="{Binding Title}" FontSize="14"
Foreground="{DynamicResource TextBrush}"
TextDecorations="{Binding Done, Converter={StaticResource StrikeIfTrue}}"/>
<!-- Chip row -->
<StackPanel Orientation="Horizontal" Spacing="6">
<!-- Status chip -->
<Border Classes="chip"
Classes.running="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Running}"
Classes.review="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Done}"
Classes.error="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Failed}"
Classes.queued="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Queued}">
<TextBlock Text="{Binding Status}" FontSize="10"
FontFamily="{DynamicResource MonoFamily}" Margin="6,2"/>
<TextBlock Text="{Binding Status}"/>
</Border>
<Border Classes="chip">
<TextBlock Text="{Binding ListName}" FontSize="10" Margin="6,2"
Foreground="{DynamicResource TextDimBrush}"/>
<!-- List chip with dot -->
<Border Classes="chip chip-list">
<StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center">
<Ellipse Width="6" Height="6"
Fill="{DynamicResource MossBrush}"
VerticalAlignment="Center"/>
<TextBlock Text="{Binding ListName}"/>
</StackPanel>
</Border>
<Border Classes="chip" IsVisible="{Binding Branch, Converter={StaticResource NotNullToBool}}">
<TextBlock Text="{Binding Branch}" FontFamily="{DynamicResource MonoFamily}"
FontSize="10" Margin="6,2"/>
<!-- Branch chip -->
<Border Classes="chip chip-branch" IsVisible="{Binding HasBranch}">
<StackPanel Orientation="Horizontal" Spacing="4" VerticalAlignment="Center">
<PathIcon Width="10" Height="10"
Data="{StaticResource Icon.GitBranch}"
Foreground="{DynamicResource TextDimBrush}"/>
<TextBlock Text="{Binding Branch}"/>
</StackPanel>
</Border>
<Border Classes="chip" IsVisible="{Binding DiffStat, Converter={StaticResource NotNullToBool}}">
<TextBlock Text="{Binding DiffStat}" FontFamily="{DynamicResource MonoFamily}"
FontSize="10" Margin="6,2"/>
<!-- Diff chip -->
<Border Classes="chip chip-diff" IsVisible="{Binding HasDiff}">
<StackPanel Orientation="Horizontal" Spacing="4" VerticalAlignment="Center">
<TextBlock Classes="diff-add" Text="{Binding DiffAdditionsText}"/>
<TextBlock Classes="diff-del" Text="{Binding DiffDeletionsText}"/>
</StackPanel>
</Border>
<!-- Tag chips -->
<ItemsControl ItemsSource="{Binding Tags}" IsVisible="{Binding HasTags}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="6"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Classes="chip chip-tag">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<TextBlock Text="{Binding LiveTail}" FontFamily="{DynamicResource MonoFamily}"
FontSize="11" Foreground="{DynamicResource TextMuteBrush}"
TextTrimming="CharacterEllipsis" MaxLines="1"
IsVisible="{Binding LiveTail, Converter={StaticResource NotNullToBool}}"/>
<!-- Live-tail row (visible when running + has tail) -->
<Border Classes="task-live-tail" IsVisible="{Binding HasLiveTail}">
<StackPanel Spacing="3">
<TextBlock Text="{Binding LiveTail}"
TextTrimming="CharacterEllipsis" MaxLines="1"/>
<Grid Height="3" HorizontalAlignment="Stretch">
<Rectangle Fill="{DynamicResource Surface3Brush}"
HorizontalAlignment="Stretch" RadiusX="1.5" RadiusY="1.5"/>
<Rectangle Fill="{DynamicResource MossBrush}"
HorizontalAlignment="Left" Width="60" RadiusX="1.5" RadiusY="1.5"/>
</Grid>
</StackPanel>
</Border>
</StackPanel>
<!-- Star toggle -->
<Button Grid.Column="2" Classes="icon-btn" VerticalAlignment="Center"
<Button Grid.Column="3" Classes="icon-btn star-btn"
Classes.on="{Binding IsStarred}"
VerticalAlignment="Top" Margin="0,2,0,0"
Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).ToggleStarCommand}"
CommandParameter="{Binding}">
<PathIcon Width="14" Height="14"/>
<PathIcon Width="14" Height="14" Data="{StaticResource Icon.Star}"/>
</Button>
</Grid>
</Border>