From 9b1178ca2f03fbed212d6ffbc7f26248efaf84c0 Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Mon, 20 Apr 2026 11:39:40 +0200
Subject: [PATCH] style(ui): subtasks, notes, details metadata footer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/ClaudeDo.Ui/Design/IslandStyles.axaml     |  21 +++
 .../Islands/DetailsIslandViewModel.cs         |  34 +++++
 .../ViewModels/Islands/TaskRowViewModel.cs    |   4 +
 .../Views/Islands/DetailsIslandView.axaml     | 122 +++++++++++++-----
 .../Views/Islands/DetailsIslandView.axaml.cs  |   7 +
 5 files changed, 158 insertions(+), 30 deletions(-)

diff --git a/src/ClaudeDo.Ui/Design/IslandStyles.axaml b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
index 36b4da8..bbf0438 100644
--- a/src/ClaudeDo.Ui/Design/IslandStyles.axaml
+++ b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
@@ -759,6 +759,27 @@
     <Setter Property="HorizontalAlignment" Value="Left" />
   </Style>
 
+  <!-- ============================================================ -->
+  <!-- SUBTASK ROW                                                   -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.subtask-row">
+    <Setter Property="Padding"      Value="8,5" />
+    <Setter Property="CornerRadius" Value="6" />
+    <Setter Property="Background"   Value="Transparent" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <BrushTransition Property="Background" Duration="0:0:0.10"/>
+      </Transitions>
+    </Setter>
+  </Style>
+  <Style Selector="Border.subtask-row:pointerover">
+    <Setter Property="Background" Value="{StaticResource Surface2Brush}" />
+  </Style>
+  <Style Selector="Border.subtask-row.done TextBlock.subtask-title">
+    <Setter Property="Opacity"         Value="0.5" />
+    <Setter Property="TextDecorations" Value="Strikethrough" />
+  </Style>
+
   <!-- ============================================================ -->
   <!-- SECTION LABELS (OVERDUE / TASKS / COMPLETED)                 -->
   <!-- ============================================================ -->
diff --git a/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs b/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
index 3c39a2b..dcfe566 100644
--- a/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
+++ b/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
@@ -66,6 +66,12 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase
 
     private CancellationTokenSource? _loadCts;
 
+    // Set by shell so CloseDetailCommand can clear SelectedTask
+    public Action? CloseDetail { get; set; }
+
+    // Set by shell so DeleteTaskCommand can remove from list
+    public Func<TaskRowViewModel, System.Threading.Tasks.Task>? DeleteFromList { get; set; }
+
     // Set by the view so OpenDiffCommand can show the modal as a dialog
     public Func<DiffModalViewModel, System.Threading.Tasks.Task>? ShowDiffModal { get; set; }
 
@@ -198,6 +204,34 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase
         await System.Threading.Tasks.Task.CompletedTask;
     }
 
+    [RelayCommand]
+    private void CloseDetails() => CloseDetail?.Invoke();
+
+    [RelayCommand]
+    private async System.Threading.Tasks.Task DeleteTaskAsync()
+    {
+        if (Task == null) return;
+        var row = Task;
+        await using var ctx = _dbFactory.CreateDbContext();
+        var repo = new TaskRepository(ctx);
+        await repo.DeleteAsync(row.Id);
+        if (DeleteFromList != null)
+            await DeleteFromList(row);
+        CloseDetail?.Invoke();
+    }
+
+    [RelayCommand]
+    private async System.Threading.Tasks.Task SaveNotesAsync()
+    {
+        if (Task == null) return;
+        await using var ctx = _dbFactory.CreateDbContext();
+        var repo = new TaskRepository(ctx);
+        var entity = await repo.GetByIdAsync(Task.Id);
+        if (entity == null) return;
+        entity.Notes = Notes;
+        await repo.UpdateAsync(entity);
+    }
+
     [RelayCommand]
     private async System.Threading.Tasks.Task ApproveMergeAsync()
     {
diff --git a/src/ClaudeDo.Ui/ViewModels/Islands/TaskRowViewModel.cs b/src/ClaudeDo.Ui/ViewModels/Islands/TaskRowViewModel.cs
index 5f56782..4010c3d 100644
--- a/src/ClaudeDo.Ui/ViewModels/Islands/TaskRowViewModel.cs
+++ b/src/ClaudeDo.Ui/ViewModels/Islands/TaskRowViewModel.cs
@@ -22,6 +22,9 @@ public sealed partial class TaskRowViewModel : ViewModelBase
     [ObservableProperty] private int _diffAdditions;
     [ObservableProperty] private int _diffDeletions;
 
+    public DateTime CreatedAt { get; init; }
+    public string CreatedAtFormatted => CreatedAt == default ? "—" : $"Created {CreatedAt:MMM d}";
+
     public IReadOnlyList<string> Tags { get; init; } = Array.Empty<string>();
     public int StepsCount { get; init; }
     public int StepsCompleted { get; init; }
@@ -78,6 +81,7 @@ public sealed partial class TaskRowViewModel : ViewModelBase
             ScheduledFor  = t.ScheduledFor,
             DiffAdditions = add,
             DiffDeletions = del,
+            CreatedAt     = t.CreatedAt,
         };
     }
 
diff --git a/src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml b/src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml
index c4a5114..96e7746 100644
--- a/src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml
+++ b/src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml
@@ -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>
diff --git a/src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml.cs b/src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml.cs
index 422362e..81935cd 100644
--- a/src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml.cs
+++ b/src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml.cs
@@ -1,4 +1,5 @@
 using Avalonia.Controls;
+using Avalonia.Interactivity;
 using ClaudeDo.Ui.ViewModels.Islands;
 using ClaudeDo.Ui.Views.Modals;
 
@@ -33,4 +34,10 @@ public partial class DetailsIslandView : UserControl
             };
         }
     }
+
+    private void NotesLostFocus(object? sender, RoutedEventArgs e)
+    {
+        if (DataContext is DetailsIslandViewModel vm)
+            vm.SaveNotesCommand.Execute(null);
+    }
 }