style(ui): redesign TaskDetailView with editable fields, tag chips, and accent styling

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mika Kuns
2026-04-14 10:30:17 +02:00
parent eb7c1ebf69
commit df132e8be1
2 changed files with 115 additions and 44 deletions

View File

@@ -2,80 +2,148 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:ClaudeDo.Ui.ViewModels" xmlns:vm="using:ClaudeDo.Ui.ViewModels"
xmlns:conv="using:ClaudeDo.Ui.Converters" xmlns:conv="using:ClaudeDo.Ui.Converters"
xmlns:m="using:ClaudeDo.Data.Models"
x:Class="ClaudeDo.Ui.Views.TaskDetailView" x:Class="ClaudeDo.Ui.Views.TaskDetailView"
x:DataType="vm:TaskDetailViewModel"> x:DataType="vm:TaskDetailViewModel">
<ScrollViewer> <ScrollViewer>
<StackPanel Margin="8" Spacing="8" <StackPanel Margin="12" Spacing="8"
IsVisible="{Binding Title, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"> IsVisible="{Binding Title, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
<!-- Header --> <!-- Title (large, editable) -->
<TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="16"/> <TextBox x:Name="TitleBox"
<Border CornerRadius="3" Padding="6,2" HorizontalAlignment="Left" Text="{Binding Title}"
Background="{Binding StatusText, Converter={x:Static conv:StatusColorConverter.Instance}}"> FontWeight="Bold" FontSize="16"
<TextBlock Text="{Binding StatusText}" Foreground="White" FontSize="11"/> Foreground="{StaticResource TextPrimaryBrush}"
</Border> BorderThickness="0" Background="Transparent"
Padding="0,4"
LostFocus="OnFieldLostFocus"/>
<!-- Description --> <!-- Status + Commit Type row -->
<TextBlock Text="Description" FontWeight="SemiBold" Margin="0,8,0,2"/> <Grid ColumnDefinitions="*,16,*" Margin="0,4,0,0">
<!-- TODO: Markdown rendering --> <StackPanel Grid.Column="0" Spacing="4">
<TextBox Text="{Binding Description, Mode=OneWay}" IsReadOnly="True" <TextBlock Text="Status" FontSize="12" FontWeight="SemiBold"
AcceptsReturn="True" TextWrapping="Wrap" MinHeight="60" Foreground="{StaticResource TextSecondaryBrush}"/>
IsVisible="{Binding Description, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/> <ComboBox ItemsSource="{Binding StatusChoices}"
<TextBlock Text="(no description)" Foreground="Gray" FontStyle="Italic" SelectedItem="{Binding StatusChoice}"
IsVisible="{Binding Description, Converter={x:Static StringConverters.IsNullOrEmpty}}"/> MinWidth="100"
LostFocus="OnFieldLostFocus"/>
</StackPanel>
<StackPanel Grid.Column="2" Spacing="4">
<TextBlock Text="Commit Type" FontSize="12" FontWeight="SemiBold"
Foreground="{StaticResource TextSecondaryBrush}"/>
<ComboBox ItemsSource="{Binding CommitTypes}"
SelectedItem="{Binding CommitType}"
MinWidth="100"
LostFocus="OnFieldLostFocus"/>
</StackPanel>
</Grid>
<!-- Result --> <!-- Tags -->
<TextBlock Text="Result" FontWeight="SemiBold" Margin="0,8,0,2"/> <StackPanel Spacing="4" Margin="0,8,0,0">
<!-- TODO: Markdown rendering --> <TextBlock Text="Tags" FontSize="12" FontWeight="SemiBold"
<TextBox Text="{Binding Result, Mode=OneWay}" IsReadOnly="True" Foreground="{StaticResource TextSecondaryBrush}"/>
AcceptsReturn="True" TextWrapping="Wrap" MinHeight="80" <WrapPanel Orientation="Horizontal">
IsVisible="{Binding Result, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/> <ItemsControl ItemsSource="{Binding Tags}">
<TextBlock Text="(no result yet)" Foreground="Gray" FontStyle="Italic" <ItemsControl.ItemsPanel>
IsVisible="{Binding Result, Converter={x:Static StringConverters.IsNullOrEmpty}}"/> <ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
<!-- Log path --> </ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" </ItemsControl.ItemsPanel>
IsVisible="{Binding LogPath, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"> <ItemsControl.ItemTemplate>
<TextBlock Text="Log:" FontWeight="SemiBold" VerticalAlignment="Center"/> <DataTemplate x:DataType="m:TagEntity">
<TextBlock Text="{Binding LogPath}" FontSize="11" Foreground="Gray" VerticalAlignment="Center"/> <Border CornerRadius="10" Padding="8,3" Margin="0,0,4,4"
Background="{StaticResource AccentSubtleBrush}">
<StackPanel Orientation="Horizontal" Spacing="4">
<TextBlock Text="{Binding Name}" FontSize="12"
Foreground="{StaticResource AccentLightBrush}"
VerticalAlignment="Center"/>
<Button Content="x" FontSize="10" Padding="2,0"
Background="Transparent" BorderThickness="0"
Foreground="{StaticResource TextMutedBrush}"
Cursor="Hand"
Command="{Binding $parent[UserControl].((vm:TaskDetailViewModel)DataContext).RemoveTagCommand}"
CommandParameter="{Binding}"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBox Text="{Binding NewTagInput}"
Watermark="Add tag..."
Width="100" FontSize="12"
BorderThickness="0" Background="Transparent"
Padding="4,3"
KeyDown="OnTagInputKeyDown"/>
</WrapPanel>
</StackPanel> </StackPanel>
<!-- Live stream --> <!-- Description (editable) -->
<TextBlock Text="Live Output" FontWeight="SemiBold" Margin="0,8,0,2"/> <TextBlock Text="Description" FontSize="12" FontWeight="SemiBold"
<Border BorderBrush="Gray" BorderThickness="1" CornerRadius="3" Padding="4" Foreground="{StaticResource TextSecondaryBrush}" Margin="0,8,0,2"/>
MaxHeight="200"> <TextBox Text="{Binding Description}"
AcceptsReturn="True" TextWrapping="Wrap" MinHeight="60"
Foreground="{StaticResource TextPrimaryBrush}"
Watermark="Add a description..."
LostFocus="OnFieldLostFocus"/>
<!-- === READ-ONLY ZONE === -->
<TextBlock Text="Result" FontWeight="SemiBold" FontSize="12"
Foreground="{StaticResource TextSecondaryBrush}" Margin="0,12,0,2"/>
<TextBox Text="{Binding Result, Mode=OneWay}" IsReadOnly="True"
AcceptsReturn="True" TextWrapping="Wrap" MinHeight="60"
IsVisible="{Binding Result, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
<TextBlock Text="(no result yet)" Foreground="{StaticResource TextMutedBrush}" FontStyle="Italic"
IsVisible="{Binding Result, Converter={x:Static StringConverters.IsNullOrEmpty}}"/>
<StackPanel Orientation="Horizontal" Spacing="4"
IsVisible="{Binding LogPath, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
<TextBlock Text="Log:" FontWeight="SemiBold" FontSize="12"
Foreground="{StaticResource TextSecondaryBrush}" VerticalAlignment="Center"/>
<TextBlock Text="{Binding LogPath}" FontSize="11"
Foreground="{StaticResource TextDimBrush}" VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Live Output" FontWeight="SemiBold" FontSize="12"
Foreground="{StaticResource TextSecondaryBrush}" Margin="0,8,0,2"/>
<Border BorderBrush="{StaticResource BorderSubtleBrush}" BorderThickness="1"
CornerRadius="6" Padding="6" MaxHeight="200">
<ScrollViewer> <ScrollViewer>
<ItemsControl ItemsSource="{Binding LiveLines}"> <ItemsControl ItemsSource="{Binding LiveLines}">
<ItemsControl.ItemTemplate> <ItemsControl.ItemTemplate>
<DataTemplate> <DataTemplate>
<TextBlock Text="{Binding}" FontFamily="Consolas,Courier New,monospace" <TextBlock Text="{Binding}" FontFamily="Consolas,Courier New,monospace"
FontSize="11" TextWrapping="NoWrap"/> FontSize="11" TextWrapping="NoWrap"
Foreground="{StaticResource TextPrimaryBrush}"/>
</DataTemplate> </DataTemplate>
</ItemsControl.ItemTemplate> </ItemsControl.ItemTemplate>
</ItemsControl> </ItemsControl>
</ScrollViewer> </ScrollViewer>
</Border> </Border>
<!-- Worktree section --> <Border IsVisible="{Binding HasWorktree}" BorderBrush="{StaticResource AccentBrush}"
<Border IsVisible="{Binding HasWorktree}" BorderBrush="CornflowerBlue" BorderThickness="1" CornerRadius="8" Padding="10" Margin="0,8,0,0">
BorderThickness="1" CornerRadius="5" Padding="8" Margin="0,8,0,0">
<StackPanel Spacing="6"> <StackPanel Spacing="6">
<TextBlock Text="Worktree" FontWeight="Bold" FontSize="14"/> <TextBlock Text="Worktree" FontWeight="Bold" FontSize="14"
Foreground="{StaticResource TextPrimaryBrush}"/>
<StackPanel Orientation="Horizontal" Spacing="8"> <StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="Branch:" FontWeight="SemiBold"/> <TextBlock Text="Branch:" FontWeight="SemiBold"
<TextBlock Text="{Binding BranchName}" FontFamily="Consolas,Courier New,monospace"/> Foreground="{StaticResource TextSecondaryBrush}"/>
<TextBlock Text="{Binding BranchName}" FontFamily="Consolas,Courier New,monospace"
Foreground="{StaticResource TextPrimaryBrush}"/>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8"> <StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="State:" FontWeight="SemiBold"/> <TextBlock Text="State:" FontWeight="SemiBold"
<TextBlock Text="{Binding WorktreeState}"/> Foreground="{StaticResource TextSecondaryBrush}"/>
<TextBlock Text="{Binding WorktreeState}"
Foreground="{StaticResource TextPrimaryBrush}"/>
</StackPanel> </StackPanel>
<TextBlock Text="Diff Stat:" FontWeight="SemiBold" <TextBlock Text="Diff Stat:" FontWeight="SemiBold"
Foreground="{StaticResource TextSecondaryBrush}"
IsVisible="{Binding DiffStat, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/> IsVisible="{Binding DiffStat, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
<TextBox Text="{Binding DiffStat, Mode=OneWay}" IsReadOnly="True" <TextBox Text="{Binding DiffStat, Mode=OneWay}" IsReadOnly="True"
AcceptsReturn="True" FontFamily="Consolas,Courier New,monospace" FontSize="11" AcceptsReturn="True" FontFamily="Consolas,Courier New,monospace" FontSize="11"
IsVisible="{Binding DiffStat, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/> IsVisible="{Binding DiffStat, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
<!-- Worktree actions -->
<WrapPanel Orientation="Horizontal" Margin="0,4,0,0"> <WrapPanel Orientation="Horizontal" Margin="0,4,0,0">
<Button Content="Open Worktree" Command="{Binding OpenWorktreeCommand}" Margin="0,0,4,4"/> <Button Content="Open Worktree" Command="{Binding OpenWorktreeCommand}" Margin="0,0,4,4"/>
<Button Content="Show Diff" Command="{Binding ShowDiffCommand}" Margin="0,0,4,4"/> <Button Content="Show Diff" Command="{Binding ShowDiffCommand}" Margin="0,0,4,4"/>

View File

@@ -8,4 +8,7 @@ public partial class TaskDetailView : UserControl
{ {
InitializeComponent(); InitializeComponent();
} }
private void OnFieldLostFocus(object? sender, Avalonia.Interactivity.RoutedEventArgs e) { }
private void OnTagInputKeyDown(object? sender, Avalonia.Input.KeyEventArgs e) { }
} }