From 99c6bf447814d4db5a65e3d9a424dde85d519a2b Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Thu, 4 Jun 2026 20:18:24 +0200
Subject: [PATCH] feat(ui): make steps visible at a glance; lift details card
 off background

The single flip-icon hid that steps existed until toggled. Replace it with an
always-visible "STEPS" summary strip below the description (open/total count,
click to expand and manage). Description is now always the card body. Give the
card a Surface2 background + LineBrush border so it separates from the window.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../Islands/DetailsIslandViewModel.cs         |  31 +++--
 .../Islands/Detail/DescriptionStepsCard.axaml | 112 +++++++++---------
 2 files changed, 79 insertions(+), 64 deletions(-)

diff --git a/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs b/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
index 2be5bd2..c73429d 100644
--- a/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
+++ b/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
@@ -104,15 +104,28 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase
     [RelayCommand]
     private void ToggleDescriptionExpanded() => IsDescriptionExpanded = !IsDescriptionExpanded;
 
-    // ── Description/Steps card (redesign) ──────────────────────────────
-    [ObservableProperty]
-    [NotifyPropertyChangedFor(nameof(IsDescriptionView))]
-    private bool _isStepsView;
-
-    public bool IsDescriptionView => !IsStepsView;
+    // ── Description / Steps card (redesign) ─────────────────────────────
+    // Description is always the card body; steps live in an expandable summary
+    // strip below it so step presence is visible without switching views.
+    [ObservableProperty] private bool _isStepsExpanded;
 
     [RelayCommand]
-    private void ToggleCardView() => IsStepsView = !IsStepsView;
+    private void ToggleStepsExpanded() => IsStepsExpanded = !IsStepsExpanded;
+
+    public int TotalStepCount => Subtasks.Count;
+    public int OpenStepCount => Subtasks.Count(s => !s.Done);
+    public string StepsSummary =>
+        TotalStepCount == 0 ? "no steps yet"
+        : OpenStepCount == 0 ? $"all done · {TotalStepCount} total"
+        : $"{OpenStepCount} open · {TotalStepCount} total";
+
+    private void NotifyStepsChanged()
+    {
+        OnPropertyChanged(nameof(TotalStepCount));
+        OnPropertyChanged(nameof(OpenStepCount));
+        OnPropertyChanged(nameof(StepsSummary));
+        OnPropertyChanged(nameof(ComposedPreview));
+    }
 
     // The exact text handed to Claude: title + description + open steps only.
     public string ComposedPreview =>
@@ -375,7 +388,7 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase
         _services = services;
         _notesApi = notesApi;
         Notes = new NotesEditorViewModel(_notesApi);
-        Subtasks.CollectionChanged += (_, _) => OnPropertyChanged(nameof(ComposedPreview));
+        Subtasks.CollectionChanged += (_, _) => NotifyStepsChanged();
         Loc.LanguageChanged += (_, _) =>
         {
             OnPropertyChanged(nameof(AgentStatusLabel));
@@ -1140,7 +1153,7 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase
     {
         if (row is null) return;
         row.Done = !row.Done;
-        OnPropertyChanged(nameof(ComposedPreview));
+        NotifyStepsChanged();
         await using var ctx = _dbFactory.CreateDbContext();
         var repo = new SubtaskRepository(ctx);
         var subs = await repo.GetByTaskIdAsync(Task?.Id ?? "");
diff --git a/src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml b/src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml
index a8459fd..ee30847 100644
--- a/src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml
+++ b/src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml
@@ -5,69 +5,46 @@
              x:Class="ClaudeDo.Ui.Views.Islands.Detail.DescriptionStepsCard"
              x:DataType="vm:DetailsIslandViewModel">
 
-  <Border Classes="island">
+  <Border Classes="island"
+          Background="{DynamicResource Surface2Brush}"
+          BorderBrush="{DynamicResource LineBrush}">
     <DockPanel>
 
-      <!-- Header -->
+      <!-- Header: DETAILS · copy · preview/edit -->
       <Border DockPanel.Dock="Top" Classes="island-header">
-        <Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto" VerticalAlignment="Center">
+        <Grid ColumnDefinitions="Auto,*,Auto,Auto" VerticalAlignment="Center">
 
-          <!-- Col 0: section label -->
-          <Panel Grid.Column="0" VerticalAlignment="Center">
-            <TextBlock Classes="section-label" Text="DETAILS" IsVisible="{Binding IsDescriptionView}"/>
-            <TextBlock Classes="section-label" Text="STEPS"   IsVisible="{Binding IsStepsView}"/>
-          </Panel>
+          <TextBlock Grid.Column="0" Classes="section-label" Text="DETAILS"
+                     VerticalAlignment="Center"/>
 
-          <!-- Col 1: spacer (auto from *) -->
-
-          <!-- Col 2: Copy button — Description view only -->
+          <!-- Copy formatted -->
           <Button Grid.Column="2"
                   Classes="icon-btn"
                   Margin="0,0,4,0"
                   ToolTip.Tip="Copy formatted (title + description + open steps)"
-                  IsVisible="{Binding IsDescriptionView}"
                   Click="OnCopyClick">
             <PathIcon Data="{StaticResource Icon.Copy}" Width="11" Height="11"/>
           </Button>
 
-          <!-- Col 3: Preview/Edit toggle — Description view only -->
+          <!-- Preview/Edit toggle -->
           <Button Grid.Column="3"
                   Classes="btn"
                   Padding="8,3"
-                  Margin="0,0,4,0"
-                  Command="{Binding ToggleEditDescriptionCommand}"
-                  IsVisible="{Binding IsDescriptionView}">
+                  Command="{Binding ToggleEditDescriptionCommand}">
             <Panel>
               <TextBlock Text="Preview" IsVisible="{Binding IsEditingDescription}"/>
               <TextBlock Text="Edit"    IsVisible="{Binding !IsEditingDescription}"/>
             </Panel>
           </Button>
 
-          <!-- Col 4: Card toggle icon -->
-          <Button Grid.Column="4"
-                  Classes="icon-btn"
-                  Command="{Binding ToggleCardViewCommand}"
-                  ToolTip.Tip="Switch Description / Steps">
-            <Panel>
-              <!-- In Description view: show steps/list glyph -->
-              <PathIcon Data="{StaticResource Icon.MoreHorizontal}"
-                        Width="11" Height="11"
-                        IsVisible="{Binding IsDescriptionView}"/>
-              <!-- In Steps view: show text/document glyph -->
-              <PathIcon Data="{StaticResource Icon.Text}"
-                        Width="11" Height="11"
-                        IsVisible="{Binding IsStepsView}"/>
-            </Panel>
-          </Button>
-
         </Grid>
       </Border>
 
       <!-- Body -->
-      <StackPanel Margin="14" Spacing="6">
+      <StackPanel Margin="14" Spacing="10">
 
-        <!-- Description view -->
-        <Panel IsVisible="{Binding IsDescriptionView}">
+        <!-- Description (always visible) -->
+        <Panel>
           <!-- Edit mode: raw TextBox -->
           <TextBox Text="{Binding EditableDescription, Mode=TwoWay}"
                    AcceptsReturn="True"
@@ -77,7 +54,7 @@
                    Padding="8"
                    FontFamily="{DynamicResource MonoFont}"
                    FontSize="{StaticResource FontSizeBody}"
-                   Background="{DynamicResource Surface2Brush}"
+                   Background="{DynamicResource Surface3Brush}"
                    BorderBrush="{DynamicResource LineBrush}"
                    BorderThickness="1"
                    CornerRadius="8"
@@ -87,23 +64,46 @@
                             IsVisible="{Binding !IsEditingDescription}"/>
         </Panel>
 
-        <!-- Steps view -->
-        <StackPanel IsVisible="{Binding IsStepsView}" Spacing="6">
-          <!-- Add-step input -->
-          <TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
-                   PlaceholderText="Add step…"
-                   Padding="8"
-                   Background="{DynamicResource Surface2Brush}"
-                   BorderBrush="{DynamicResource LineBrush}"
-                   BorderThickness="1"
-                   CornerRadius="8">
-            <TextBox.KeyBindings>
-              <KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
-            </TextBox.KeyBindings>
-          </TextBox>
+        <!-- Steps: always-visible summary strip; expand to manage -->
+        <Border BorderBrush="{DynamicResource LineBrush}"
+                BorderThickness="0,1,0,0"
+                Padding="0,8,0,0">
+          <StackPanel Spacing="6">
 
-          <!-- Subtask rows -->
-          <ItemsControl ItemsSource="{Binding Subtasks}">
+            <!-- Summary header (click to expand/collapse) -->
+            <Button Classes="flat" Cursor="Hand"
+                    HorizontalAlignment="Stretch"
+                    HorizontalContentAlignment="Stretch"
+                    Command="{Binding ToggleStepsExpandedCommand}">
+              <Grid ColumnDefinitions="Auto,Auto,*,Auto">
+                <Panel Grid.Column="0" Width="12" Margin="0,0,6,0" VerticalAlignment="Center">
+                  <TextBlock Classes="meta" Text="▸" IsVisible="{Binding !IsStepsExpanded}"/>
+                  <TextBlock Classes="meta" Text="▾" IsVisible="{Binding IsStepsExpanded}"/>
+                </Panel>
+                <TextBlock Grid.Column="1" Classes="section-label" Text="STEPS"
+                           VerticalAlignment="Center"/>
+                <TextBlock Grid.Column="3" Classes="meta" Text="{Binding StepsSummary}"
+                           Foreground="{DynamicResource TextMuteBrush}"
+                           VerticalAlignment="Center"/>
+              </Grid>
+            </Button>
+
+            <!-- Expanded: add-step input + step rows -->
+            <StackPanel IsVisible="{Binding IsStepsExpanded}" Spacing="6">
+              <TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
+                       PlaceholderText="Add step…"
+                       Padding="8"
+                       Background="{DynamicResource Surface3Brush}"
+                       BorderBrush="{DynamicResource LineBrush}"
+                       BorderThickness="1"
+                       CornerRadius="8">
+                <TextBox.KeyBindings>
+                  <KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
+                </TextBox.KeyBindings>
+              </TextBox>
+
+              <!-- Subtask rows -->
+              <ItemsControl ItemsSource="{Binding Subtasks}">
             <ItemsControl.ItemTemplate>
               <DataTemplate DataType="vm:SubtaskRowViewModel">
                 <Border Classes="subtask-row" Classes.done="{Binding Done}">
@@ -153,8 +153,10 @@
                 </Border>
               </DataTemplate>
             </ItemsControl.ItemTemplate>
-          </ItemsControl>
-        </StackPanel>
+              </ItemsControl>
+            </StackPanel>
+          </StackPanel>
+        </Border>
 
       </StackPanel>
     </DockPanel>