style(ui): subtasks, notes, details metadata footer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mika kuns
2026-04-20 11:39:40 +02:00
parent 01af8cb7d7
commit 9b1178ca2f
5 changed files with 158 additions and 30 deletions

View File

@@ -5,11 +5,43 @@
x:Class="ClaudeDo.Ui.Views.Islands.DetailsIslandView"
x:DataType="vm:DetailsIslandViewModel">
<DockPanel>
<!-- ── Metadata footer (sticky bottom) ── -->
<Border DockPanel.Dock="Bottom"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,1,0,0"
Padding="14,8">
<Grid ColumnDefinitions="Auto,*,Auto">
<!-- Delete button -->
<Button Grid.Column="0" Classes="icon-btn"
Command="{Binding DeleteTaskCommand}"
ToolTip.Tip="Delete task"
VerticalAlignment="Center">
<PathIcon Data="{StaticResource Icon.Trash}" Width="14" Height="14"
Foreground="{DynamicResource BloodBrush}"/>
</Button>
<!-- Created date -->
<TextBlock Grid.Column="1"
Text="{Binding Task.CreatedAtFormatted}"
FontFamily="{DynamicResource MonoFont}" FontSize="10"
Foreground="{DynamicResource TextFaintBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<!-- Close button -->
<Button Grid.Column="2" Classes="icon-btn"
Command="{Binding CloseDetailsCommand}"
ToolTip.Tip="Close"
VerticalAlignment="Center">
<PathIcon Data="{StaticResource Icon.X}" Width="14" Height="14"/>
</Button>
</Grid>
</Border>
<!-- ── Header ── -->
<Border DockPanel.Dock="Top" Classes="island-header">
<DockPanel>
<!-- Eyebrow row: LOGBOOK · #T{shortId} -->
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Spacing="6" Margin="0,0,0,4">
<!-- Eyebrow row -->
<StackPanel Spacing="0">
<StackPanel Orientation="Horizontal" Spacing="6" Margin="0,0,0,4">
<Ellipse Width="5" Height="5" Fill="{DynamicResource AccentBrush}"
VerticalAlignment="Center"/>
<TextBlock Classes="eyebrow" Text="LOGBOOK" VerticalAlignment="Center"/>
@@ -17,33 +49,29 @@
FontFamily="{DynamicResource MonoFont}" FontSize="10"
Foreground="{DynamicResource TextFaintBrush}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Margin="8,0,0,0"/>
</StackPanel>
<!-- Editable title TextBox (reduced size) -->
<TextBox DockPanel.Dock="Top"
Text="{Binding EditableTitle, Mode=TwoWay}"
<!-- Editable title (reduced size) -->
<TextBox Text="{Binding EditableTitle, Mode=TwoWay}"
FontSize="14" FontWeight="Medium"
BorderThickness="0" Background="Transparent"
Foreground="{DynamicResource TextBrush}"
Padding="0"/>
</DockPanel>
</StackPanel>
</Border>
<!-- ── Task strip row: check + title + star ── -->
<!-- ── Task strip row: check + title display + star ── -->
<Border DockPanel.Dock="Top"
Padding="18,10,18,10"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,0,0,1">
<Grid ColumnDefinitions="Auto,*,Auto">
<!-- Ellipse checkbox -->
<Ellipse Grid.Column="0"
Classes="task-check"
Classes.done="{Binding Task.Done}"
Width="18" Height="18"
VerticalAlignment="Center"
Cursor="Hand"/>
<!-- Title display -->
<TextBlock Grid.Column="1"
Text="{Binding EditableTitle}"
FontSize="14" FontWeight="Medium"
@@ -51,7 +79,6 @@
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"
Margin="10,0"/>
<!-- Star button -->
<Button Grid.Column="2"
Classes="icon-btn star-btn"
Classes.on="{Binding Task.IsStarred}"
@@ -63,28 +90,63 @@
<!-- ── Scrollable body ── -->
<ScrollViewer>
<StackPanel Margin="0" Spacing="0">
<StackPanel Spacing="0">
<!-- Agent strip -->
<islands:AgentStripView/>
<!-- Session terminal -->
<islands:SessionTerminalView Height="260" Margin="0"/>
<!-- Subtasks -->
<ItemsControl ItemsSource="{Binding Subtasks}" Margin="18,12">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="vm:SubtaskRowViewModel">
<StackPanel Orientation="Horizontal" Spacing="8" Margin="0,2">
<CheckBox IsChecked="{Binding Done, Mode=TwoWay}"/>
<TextBlock Text="{Binding Title}" VerticalAlignment="Center"
Foreground="{DynamicResource TextBrush}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!-- Notes -->
<TextBox Text="{Binding Notes, Mode=TwoWay}" AcceptsReturn="True"
TextWrapping="Wrap" MinHeight="80"
PlaceholderText="Notes…"
Margin="18,0,18,12"/>
<!-- Subtasks section -->
<StackPanel Margin="18,12,18,0"
IsVisible="{Binding Subtasks.Count}">
<TextBlock Classes="section-label" Text="STEPS"
Margin="0,0,0,6"/>
<ItemsControl ItemsSource="{Binding Subtasks}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="vm:SubtaskRowViewModel">
<Border Classes="subtask-row"
Classes.done="{Binding Done}">
<Grid ColumnDefinitions="Auto,*">
<!-- Ellipse checkbox -->
<Ellipse Grid.Column="0"
Classes="task-check"
Classes.done="{Binding Done}"
Width="16" Height="16"
VerticalAlignment="Center"
Cursor="Hand"
Margin="0,0,8,0"/>
<TextBlock Grid.Column="1"
Classes="subtask-title"
Text="{Binding Title}"
FontSize="13"
Foreground="{DynamicResource TextDimBrush}"
VerticalAlignment="Center"
TextWrapping="Wrap"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!-- Notes section -->
<StackPanel Margin="18,12,18,12">
<TextBlock Classes="section-label" Text="NOTES" Margin="0,0,0,6"/>
<TextBox Text="{Binding Notes, Mode=TwoWay}"
AcceptsReturn="True"
TextWrapping="Wrap"
MinHeight="80"
Padding="12"
PlaceholderText="Notes..."
Background="{DynamicResource Surface2Brush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1"
CornerRadius="8"
LostFocus="NotesLostFocus"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DockPanel>