From eb7c1ebf69b11ef1b303ede85186143c2497f1bf Mon Sep 17 00:00:00 2001
From: Mika Kuns <mika.kuns@fb-tuning.de>
Date: Tue, 14 Apr 2026 10:29:44 +0200
Subject: [PATCH] style(ui): redesign task rows with checkboxes, inline add
 field, remove toolbar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/ClaudeDo.Ui/Views/TaskListView.axaml    | 93 ++++++++++++++++-----
 src/ClaudeDo.Ui/Views/TaskListView.axaml.cs |  6 ++
 2 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/src/ClaudeDo.Ui/Views/TaskListView.axaml b/src/ClaudeDo.Ui/Views/TaskListView.axaml
index 2d75156..81a5f55 100644
--- a/src/ClaudeDo.Ui/Views/TaskListView.axaml
+++ b/src/ClaudeDo.Ui/Views/TaskListView.axaml
@@ -6,20 +6,35 @@
              x:DataType="vm:TaskListViewModel"
              x:Name="Root">
     <DockPanel>
-        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="4">
-            <TextBlock Text="Tasks" FontWeight="Bold" FontSize="14" VerticalAlignment="Center" Margin="4,0"/>
-        </StackPanel>
-        <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Spacing="4" Margin="4">
-            <Button Content="+ Task" Command="{Binding AddTaskCommand}" MinWidth="60"/>
-            <Button Content="Edit" Command="{Binding EditTaskCommand}" MinWidth="50"/>
-            <Button Content="Delete" Command="{Binding DeleteTaskCommand}" MinWidth="50"/>
-        </StackPanel>
-        <ListBox ItemsSource="{Binding Tasks}"
+        <!-- Inline add field at bottom -->
+        <Border DockPanel.Dock="Bottom" Padding="8,8"
+                BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderSubtleBrush}">
+            <TextBox x:Name="InlineAddBox"
+                     Text="{Binding InlineAddTitle, Mode=TwoWay}"
+                     Watermark="+ Add a task..."
+                     BorderThickness="1"
+                     BorderBrush="{StaticResource BorderSubtleBrush}"
+                     CornerRadius="8"
+                     Padding="10,8"
+                     FontSize="13"
+                     KeyDown="OnInlineAddKeyDown"
+                     GotFocus="OnInlineAddGotFocus"
+                     LostFocus="OnInlineAddLostFocus"/>
+        </Border>
+
+        <!-- Task list -->
+        <ListBox x:Name="TaskListBox"
+                 ItemsSource="{Binding Tasks}"
                  SelectedItem="{Binding SelectedTask}"
-                 Margin="4">
+                 Background="Transparent"
+                 Margin="4,0"
+                 KeyDown="OnTaskListKeyDown">
             <ListBox.ItemTemplate>
                 <DataTemplate x:DataType="vm:TaskItemViewModel">
-                    <Grid ColumnDefinitions="*,Auto,Auto" Margin="4,2" Background="Transparent" HorizontalAlignment="Stretch" DoubleTapped="OnTaskItemDoubleTapped" PointerPressed="OnTaskItemPointerPressed">
+                    <Grid ColumnDefinitions="Auto,*" Margin="4,4"
+                          Background="Transparent"
+                          DoubleTapped="OnTaskItemDoubleTapped"
+                          PointerPressed="OnTaskItemPointerPressed">
                         <Grid.ContextFlyout>
                             <MenuFlyout>
                                 <MenuItem Header="Edit"
@@ -31,19 +46,51 @@
                                           Command="{Binding RunNowCommand}"/>
                             </MenuFlyout>
                         </Grid.ContextFlyout>
-                        <StackPanel Grid.Column="0">
-                            <TextBlock Text="{Binding Title}" FontWeight="SemiBold"/>
-                            <TextBlock Text="{Binding TagsText}" FontSize="10" Foreground="Gray"
-                                       IsVisible="{Binding TagsText, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
-                        </StackPanel>
-                        <Border Grid.Column="1" CornerRadius="3" Padding="6,2" Margin="4,0"
-                                Background="{Binding StatusText, Converter={x:Static conv:StatusColorConverter.Instance}}"
-                                VerticalAlignment="Center">
-                            <TextBlock Text="{Binding StatusText}" Foreground="White" FontSize="11"/>
+
+                        <!-- Circular checkbox -->
+                        <Border Grid.Column="0" Width="22" Height="22"
+                                CornerRadius="11"
+                                BorderThickness="2"
+                                BorderBrush="{Binding StatusText, Converter={x:Static conv:CheckboxBorderConverter.Instance}}"
+                                Background="Transparent"
+                                VerticalAlignment="Center" Margin="0,0,10,0"
+                                Cursor="Hand"
+                                PointerPressed="OnCheckboxPressed">
+                            <Panel>
+                                <!-- Checkmark for done -->
+                                <Canvas Width="12" Height="12"
+                                        IsVisible="{Binding IsDone}"
+                                        HorizontalAlignment="Center" VerticalAlignment="Center">
+                                    <Path Stroke="{StaticResource StatusGreenBrush}" StrokeThickness="2"
+                                          Data="M 1,6 L 4.5,9.5 L 11,3"/>
+                                </Canvas>
+                                <!-- Running dot -->
+                                <Ellipse Width="8" Height="8"
+                                         Fill="{StaticResource StatusOrangeBrush}"
+                                         IsVisible="{Binding IsRunning}"
+                                         HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                            </Panel>
                         </Border>
-                        <Button Grid.Column="2" Content="Run" Command="{Binding RunNowCommand}"
-                                Margin="4,0,0,0" VerticalAlignment="Center" Padding="8,2"
-                                FontSize="11"/>
+
+                        <!-- Task content -->
+                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
+                            <TextBlock Text="{Binding Title}" FontWeight="Medium"
+                                       Foreground="{StaticResource TextPrimaryBrush}"
+                                       TextTrimming="CharacterEllipsis"/>
+                            <TextBlock FontSize="11"
+                                       Foreground="{StaticResource TextDimBrush}"
+                                       IsVisible="{Binding TagsText, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
+                                <TextBlock.Text>
+                                    <MultiBinding StringFormat="{}{0} · {1}">
+                                        <Binding Path="TagsText"/>
+                                        <Binding Path="StatusText"/>
+                                    </MultiBinding>
+                                </TextBlock.Text>
+                            </TextBlock>
+                            <TextBlock Text="{Binding StatusText}" FontSize="11"
+                                       Foreground="{StaticResource TextDimBrush}"
+                                       IsVisible="{Binding TagsText, Converter={x:Static StringConverters.IsNullOrEmpty}}"/>
+                        </StackPanel>
                     </Grid>
                 </DataTemplate>
             </ListBox.ItemTemplate>
diff --git a/src/ClaudeDo.Ui/Views/TaskListView.axaml.cs b/src/ClaudeDo.Ui/Views/TaskListView.axaml.cs
index 23c01e0..6fe82cf 100644
--- a/src/ClaudeDo.Ui/Views/TaskListView.axaml.cs
+++ b/src/ClaudeDo.Ui/Views/TaskListView.axaml.cs
@@ -31,4 +31,10 @@ public partial class TaskListView : UserControl
             e.Handled = true;
         }
     }
+
+    private void OnInlineAddKeyDown(object? sender, Avalonia.Input.KeyEventArgs e) { }
+    private void OnInlineAddGotFocus(object? sender, Avalonia.Interactivity.RoutedEventArgs e) { }
+    private void OnInlineAddLostFocus(object? sender, Avalonia.Interactivity.RoutedEventArgs e) { }
+    private void OnTaskListKeyDown(object? sender, Avalonia.Input.KeyEventArgs e) { }
+    private void OnCheckboxPressed(object? sender, Avalonia.Input.PointerPressedEventArgs e) { }
 }