From df132e8be16e03bfa87f4697386614b1b8ddbd74 Mon Sep 17 00:00:00 2001
From: Mika Kuns <mika.kuns@fb-tuning.de>
Date: Tue, 14 Apr 2026 10:30:17 +0200
Subject: [PATCH] style(ui): redesign TaskDetailView with editable fields, tag
 chips, and accent styling

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/ClaudeDo.Ui/Views/TaskDetailView.axaml    | 156 +++++++++++++-----
 src/ClaudeDo.Ui/Views/TaskDetailView.axaml.cs |   3 +
 2 files changed, 115 insertions(+), 44 deletions(-)

diff --git a/src/ClaudeDo.Ui/Views/TaskDetailView.axaml b/src/ClaudeDo.Ui/Views/TaskDetailView.axaml
index e55eb41..2cf5964 100644
--- a/src/ClaudeDo.Ui/Views/TaskDetailView.axaml
+++ b/src/ClaudeDo.Ui/Views/TaskDetailView.axaml
@@ -2,80 +2,148 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vm="using:ClaudeDo.Ui.ViewModels"
              xmlns:conv="using:ClaudeDo.Ui.Converters"
+             xmlns:m="using:ClaudeDo.Data.Models"
              x:Class="ClaudeDo.Ui.Views.TaskDetailView"
              x:DataType="vm:TaskDetailViewModel">
     <ScrollViewer>
-        <StackPanel Margin="8" Spacing="8"
+        <StackPanel Margin="12" Spacing="8"
                     IsVisible="{Binding Title, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
 
-            <!-- Header -->
-            <TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="16"/>
-            <Border CornerRadius="3" Padding="6,2" HorizontalAlignment="Left"
-                    Background="{Binding StatusText, Converter={x:Static conv:StatusColorConverter.Instance}}">
-                <TextBlock Text="{Binding StatusText}" Foreground="White" FontSize="11"/>
-            </Border>
+            <!-- Title (large, editable) -->
+            <TextBox x:Name="TitleBox"
+                     Text="{Binding Title}"
+                     FontWeight="Bold" FontSize="16"
+                     Foreground="{StaticResource TextPrimaryBrush}"
+                     BorderThickness="0" Background="Transparent"
+                     Padding="0,4"
+                     LostFocus="OnFieldLostFocus"/>
 
-            <!-- Description -->
-            <TextBlock Text="Description" FontWeight="SemiBold" Margin="0,8,0,2"/>
-            <!-- TODO: Markdown rendering -->
-            <TextBox Text="{Binding Description, Mode=OneWay}" IsReadOnly="True"
-                     AcceptsReturn="True" TextWrapping="Wrap" MinHeight="60"
-                     IsVisible="{Binding Description, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
-            <TextBlock Text="(no description)" Foreground="Gray" FontStyle="Italic"
-                       IsVisible="{Binding Description, Converter={x:Static StringConverters.IsNullOrEmpty}}"/>
+            <!-- Status + Commit Type row -->
+            <Grid ColumnDefinitions="*,16,*" Margin="0,4,0,0">
+                <StackPanel Grid.Column="0" Spacing="4">
+                    <TextBlock Text="Status" FontSize="12" FontWeight="SemiBold"
+                               Foreground="{StaticResource TextSecondaryBrush}"/>
+                    <ComboBox ItemsSource="{Binding StatusChoices}"
+                              SelectedItem="{Binding StatusChoice}"
+                              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 -->
-            <TextBlock Text="Result" FontWeight="SemiBold" Margin="0,8,0,2"/>
-            <!-- TODO: Markdown rendering -->
-            <TextBox Text="{Binding Result, Mode=OneWay}" IsReadOnly="True"
-                     AcceptsReturn="True" TextWrapping="Wrap" MinHeight="80"
-                     IsVisible="{Binding Result, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
-            <TextBlock Text="(no result yet)" Foreground="Gray" FontStyle="Italic"
-                       IsVisible="{Binding Result, Converter={x:Static StringConverters.IsNullOrEmpty}}"/>
-
-            <!-- Log path -->
-            <StackPanel Orientation="Horizontal" Spacing="4"
-                        IsVisible="{Binding LogPath, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
-                <TextBlock Text="Log:" FontWeight="SemiBold" VerticalAlignment="Center"/>
-                <TextBlock Text="{Binding LogPath}" FontSize="11" Foreground="Gray" VerticalAlignment="Center"/>
+            <!-- Tags -->
+            <StackPanel Spacing="4" Margin="0,8,0,0">
+                <TextBlock Text="Tags" FontSize="12" FontWeight="SemiBold"
+                           Foreground="{StaticResource TextSecondaryBrush}"/>
+                <WrapPanel Orientation="Horizontal">
+                    <ItemsControl ItemsSource="{Binding Tags}">
+                        <ItemsControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <WrapPanel Orientation="Horizontal"/>
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate x:DataType="m:TagEntity">
+                                <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>
 
-            <!-- Live stream -->
-            <TextBlock Text="Live Output" FontWeight="SemiBold" Margin="0,8,0,2"/>
-            <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="3" Padding="4"
-                    MaxHeight="200">
+            <!-- Description (editable) -->
+            <TextBlock Text="Description" FontSize="12" FontWeight="SemiBold"
+                       Foreground="{StaticResource TextSecondaryBrush}" Margin="0,8,0,2"/>
+            <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>
                     <ItemsControl ItemsSource="{Binding LiveLines}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
                                 <TextBlock Text="{Binding}" FontFamily="Consolas,Courier New,monospace"
-                                           FontSize="11" TextWrapping="NoWrap"/>
+                                           FontSize="11" TextWrapping="NoWrap"
+                                           Foreground="{StaticResource TextPrimaryBrush}"/>
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                     </ItemsControl>
                 </ScrollViewer>
             </Border>
 
-            <!-- Worktree section -->
-            <Border IsVisible="{Binding HasWorktree}" BorderBrush="CornflowerBlue"
-                    BorderThickness="1" CornerRadius="5" Padding="8" Margin="0,8,0,0">
+            <Border IsVisible="{Binding HasWorktree}" BorderBrush="{StaticResource AccentBrush}"
+                    BorderThickness="1" CornerRadius="8" Padding="10" Margin="0,8,0,0">
                 <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">
-                        <TextBlock Text="Branch:" FontWeight="SemiBold"/>
-                        <TextBlock Text="{Binding BranchName}" FontFamily="Consolas,Courier New,monospace"/>
+                        <TextBlock Text="Branch:" FontWeight="SemiBold"
+                                   Foreground="{StaticResource TextSecondaryBrush}"/>
+                        <TextBlock Text="{Binding BranchName}" FontFamily="Consolas,Courier New,monospace"
+                                   Foreground="{StaticResource TextPrimaryBrush}"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal" Spacing="8">
-                        <TextBlock Text="State:" FontWeight="SemiBold"/>
-                        <TextBlock Text="{Binding WorktreeState}"/>
+                        <TextBlock Text="State:" FontWeight="SemiBold"
+                                   Foreground="{StaticResource TextSecondaryBrush}"/>
+                        <TextBlock Text="{Binding WorktreeState}"
+                                   Foreground="{StaticResource TextPrimaryBrush}"/>
                     </StackPanel>
                     <TextBlock Text="Diff Stat:" FontWeight="SemiBold"
+                               Foreground="{StaticResource TextSecondaryBrush}"
                                IsVisible="{Binding DiffStat, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
                     <TextBox Text="{Binding DiffStat, Mode=OneWay}" IsReadOnly="True"
                              AcceptsReturn="True" FontFamily="Consolas,Courier New,monospace" FontSize="11"
                              IsVisible="{Binding DiffStat, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
-
-                    <!-- Worktree actions -->
                     <WrapPanel Orientation="Horizontal" Margin="0,4,0,0">
                         <Button Content="Open Worktree" Command="{Binding OpenWorktreeCommand}" Margin="0,0,4,4"/>
                         <Button Content="Show Diff" Command="{Binding ShowDiffCommand}" Margin="0,0,4,4"/>
diff --git a/src/ClaudeDo.Ui/Views/TaskDetailView.axaml.cs b/src/ClaudeDo.Ui/Views/TaskDetailView.axaml.cs
index 61ef850..6cf2758 100644
--- a/src/ClaudeDo.Ui/Views/TaskDetailView.axaml.cs
+++ b/src/ClaudeDo.Ui/Views/TaskDetailView.axaml.cs
@@ -8,4 +8,7 @@ public partial class TaskDetailView : UserControl
     {
         InitializeComponent();
     }
+
+    private void OnFieldLostFocus(object? sender, Avalonia.Interactivity.RoutedEventArgs e) { }
+    private void OnTagInputKeyDown(object? sender, Avalonia.Input.KeyEventArgs e) { }
 }