From 287e098c3afa9958e85719583bccabe86e9d37b7 Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Mon, 20 Apr 2026 11:22:41 +0200
Subject: [PATCH] style(ui): lists search icon, kbd hint, footer actions

Rewrites ListsIslandView: NAVIGATOR eyebrow, search bar with PathIcon+borderless TextBox+kbd chip,
two ItemsControls for SmartLists/UserLists with icon/dot + active left-bar,
+ New list button, and footer profile row (avatar initials, username, machine/local, MoreHorizontal button).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Views/Islands/ListsIslandView.axaml       | 193 ++++++++++++++++--
 1 file changed, 171 insertions(+), 22 deletions(-)

diff --git a/src/ClaudeDo.Ui/Views/Islands/ListsIslandView.axaml b/src/ClaudeDo.Ui/Views/Islands/ListsIslandView.axaml
index 79aff3b..2ff2a0c 100644
--- a/src/ClaudeDo.Ui/Views/Islands/ListsIslandView.axaml
+++ b/src/ClaudeDo.Ui/Views/Islands/ListsIslandView.axaml
@@ -1,38 +1,187 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
+             xmlns:converters="using:ClaudeDo.Ui.Converters"
              x:Class="ClaudeDo.Ui.Views.Islands.ListsIslandView"
              x:DataType="vm:ListsIslandViewModel">
+  <UserControl.Resources>
+    <converters:UpperCaseConverter x:Key="UpperCase"/>
+    <converters:IconKeyConverter   x:Key="IconKey"/>
+    <converters:DotBrushConverter  x:Key="DotBrush"/>
+  </UserControl.Resources>
+
   <DockPanel LastChildFill="True">
+
+    <!-- ── Header ── -->
     <Border DockPanel.Dock="Top" Classes="island-header">
-      <StackPanel Spacing="6" Margin="14,12">
-        <TextBlock Classes="eyebrow" Text="WORKSPACE"/>
+      <StackPanel Margin="14,12,14,0" Spacing="4">
+        <TextBlock Classes="eyebrow"
+                   Text="{Binding Converter={StaticResource UpperCase}, ConverterParameter=Navigator, FallbackValue=NAVIGATOR}"
+                   FontFamily="{DynamicResource MonoFont}" FontSize="9"
+                   Foreground="{DynamicResource TextFaintBrush}" LetterSpacing="1.2">
+          <TextBlock.Text>NAVIGATOR</TextBlock.Text>
+        </TextBlock>
         <TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="18"
                    FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
                    Text="Lists"/>
-        <TextBox x:Name="SearchBox" Classes="search" Margin="0,8,0,0" PlaceholderText="Search…"
-                 Text="{Binding SearchText, Mode=TwoWay}"/>
+
+        <!-- Search row -->
+        <Border Classes="search-wrap" Margin="0,8,0,12">
+          <Grid ColumnDefinitions="Auto,*,Auto" VerticalAlignment="Center">
+            <PathIcon Grid.Column="0" Width="14" Height="14"
+                      Data="{StaticResource Icon.Search}"
+                      Foreground="{DynamicResource TextFaintBrush}"
+                      Margin="2,0,0,0"/>
+            <TextBox  Grid.Column="1" x:Name="SearchBox" Classes="search-inner"
+                      PlaceholderText="Search tasks…"
+                      Text="{Binding SearchText, Mode=TwoWay}"/>
+            <Border Grid.Column="2" Classes="kbd" Margin="0,0,2,0">
+              <TextBlock Text="Ctrl K"/>
+            </Border>
+          </Grid>
+        </Border>
       </StackPanel>
     </Border>
+
+    <!-- ── Footer ── -->
+    <Border DockPanel.Dock="Bottom"
+            BorderBrush="{DynamicResource LineBrush}" BorderThickness="0,1,0,0"
+            Padding="12,10">
+      <Grid ColumnDefinitions="Auto,*,Auto" VerticalAlignment="Center">
+        <!-- Avatar circle -->
+        <Border Grid.Column="0" Classes="avatar-circle"
+                VerticalAlignment="Center">
+          <TextBlock Text="{Binding UserInitials}"
+                     FontFamily="{DynamicResource MonoFont}" FontSize="10"
+                     FontWeight="SemiBold"
+                     Foreground="{DynamicResource DeepBrush}"
+                     HorizontalAlignment="Center" VerticalAlignment="Center"/>
+        </Border>
+        <!-- Name + machine -->
+        <StackPanel Grid.Column="1" Margin="8,0" Spacing="1" VerticalAlignment="Center">
+          <TextBlock Text="{Binding UserName}"
+                     FontSize="12" Foreground="{DynamicResource TextBrush}"/>
+          <TextBlock FontFamily="{DynamicResource MonoFont}" FontSize="10"
+                     Foreground="{DynamicResource TextFaintBrush}">
+            <TextBlock.Text>
+              <MultiBinding StringFormat="{}{0} / local">
+                <Binding Path="MachineName"/>
+              </MultiBinding>
+            </TextBlock.Text>
+          </TextBlock>
+        </StackPanel>
+        <!-- More button -->
+        <Button Grid.Column="2" Classes="icon-btn" VerticalAlignment="Center">
+          <PathIcon Data="{StaticResource Icon.MoreHorizontal}"
+                    Width="14" Height="14"
+                    Foreground="{DynamicResource TextMuteBrush}"/>
+        </Button>
+      </Grid>
+    </Border>
+
+    <!-- ── Scrollable body ── -->
     <ScrollViewer>
-      <ItemsControl ItemsSource="{Binding Items}" Margin="6">
-        <ItemsControl.ItemTemplate>
-          <DataTemplate DataType="vm:ListNavItemViewModel">
-            <Border Classes="list-item" Classes.active="{Binding IsActive}"
-                    Tapped="OnItemTapped">
-              <Grid ColumnDefinitions="20,*,Auto" Margin="10,8">
-                <PathIcon Grid.Column="0" Width="14" Height="14"/>
-                <TextBlock Grid.Column="1" Text="{Binding Name}"
-                           VerticalAlignment="Center" Margin="8,0"
-                           Foreground="{DynamicResource TextBrush}" FontSize="13"/>
-                <TextBlock Grid.Column="2" Text="{Binding Count}"
-                           FontFamily="{DynamicResource MonoFamily}" FontSize="10"
-                           Foreground="{DynamicResource TextFaintBrush}"/>
-              </Grid>
-            </Border>
-          </DataTemplate>
-        </ItemsControl.ItemTemplate>
-      </ItemsControl>
+      <StackPanel Margin="6,0,6,4">
+
+        <!-- SMART LISTS section -->
+        <TextBlock Classes="list-section-label" Text="SMART LISTS"/>
+        <ItemsControl ItemsSource="{Binding SmartLists}">
+          <ItemsControl.ItemTemplate>
+            <DataTemplate DataType="vm:ListNavItemViewModel">
+              <Border Classes="list-item" Classes.active="{Binding IsActive}"
+                      Tapped="OnItemTapped">
+                <Grid ColumnDefinitions="20,*,Auto">
+                  <!-- Left accent bar for active state -->
+                  <Border Grid.Column="0" Grid.ColumnSpan="3"
+                          Background="Transparent"
+                          CornerRadius="8" IsHitTestVisible="False">
+                    <Border.IsVisible>
+                      <Binding Path="IsActive"/>
+                    </Border.IsVisible>
+                    <Border Width="2" Height="16"
+                            Background="{DynamicResource AccentBrush}"
+                            CornerRadius="1"
+                            HorizontalAlignment="Left" VerticalAlignment="Center"
+                            Margin="-8,0,0,0"/>
+                  </Border>
+                  <!-- Icon -->
+                  <PathIcon Grid.Column="0" Classes="list-icon"
+                            Width="14" Height="14"
+                            Data="{Binding IconKey, Converter={StaticResource IconKey}}"
+                            Foreground="{DynamicResource TextMuteBrush}"
+                            HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                  <!-- Name -->
+                  <TextBlock Grid.Column="1" Classes="list-label"
+                             Text="{Binding Name}"
+                             VerticalAlignment="Center" Margin="8,0"
+                             Foreground="{DynamicResource TextDimBrush}" FontSize="13"/>
+                  <!-- Count -->
+                  <TextBlock Grid.Column="2"
+                             Text="{Binding Count}"
+                             FontFamily="{DynamicResource MonoFamily}" FontSize="10"
+                             Foreground="{DynamicResource TextFaintBrush}"
+                             VerticalAlignment="Center"/>
+                </Grid>
+              </Border>
+            </DataTemplate>
+          </ItemsControl.ItemTemplate>
+        </ItemsControl>
+
+        <!-- MY LISTS section -->
+        <TextBlock Classes="list-section-label" Text="MY LISTS"/>
+        <ItemsControl ItemsSource="{Binding UserLists}">
+          <ItemsControl.ItemTemplate>
+            <DataTemplate DataType="vm:ListNavItemViewModel">
+              <Border Classes="list-item" Classes.active="{Binding IsActive}"
+                      Tapped="OnItemTapped">
+                <Grid ColumnDefinitions="20,*,Auto">
+                  <!-- Left accent bar for active state -->
+                  <Border Grid.Column="0" Grid.ColumnSpan="3"
+                          Background="Transparent"
+                          CornerRadius="8" IsHitTestVisible="False"
+                          IsVisible="{Binding IsActive}">
+                    <Border Width="2" Height="16"
+                            Background="{DynamicResource AccentBrush}"
+                            CornerRadius="1"
+                            HorizontalAlignment="Left" VerticalAlignment="Center"
+                            Margin="-8,0,0,0"/>
+                  </Border>
+                  <!-- Color dot (6px circle, color from DotColorKey) -->
+                  <Ellipse Grid.Column="0"
+                           Width="6" Height="6"
+                           Fill="{Binding DotColorKey, Converter={StaticResource DotBrush}}"
+                           HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                  <!-- Name -->
+                  <TextBlock Grid.Column="1" Classes="list-label"
+                             Text="{Binding Name}"
+                             VerticalAlignment="Center" Margin="8,0"
+                             Foreground="{DynamicResource TextDimBrush}" FontSize="13"/>
+                  <!-- Count -->
+                  <TextBlock Grid.Column="2"
+                             Text="{Binding Count}"
+                             FontFamily="{DynamicResource MonoFamily}" FontSize="10"
+                             Foreground="{DynamicResource TextFaintBrush}"
+                             VerticalAlignment="Center"/>
+                </Grid>
+              </Border>
+            </DataTemplate>
+          </ItemsControl.ItemTemplate>
+        </ItemsControl>
+
+        <!-- + New list button -->
+        <Button Classes="new-list-btn" Margin="0,4,0,0">
+          <StackPanel Orientation="Horizontal" Spacing="6">
+            <PathIcon Data="{StaticResource Icon.Plus}"
+                      Width="13" Height="13"
+                      Foreground="{DynamicResource TextMuteBrush}"
+                      VerticalAlignment="Center"/>
+            <TextBlock Text="New list" FontSize="12"
+                       Foreground="{DynamicResource TextMuteBrush}"
+                       VerticalAlignment="Center"/>
+          </StackPanel>
+        </Button>
+
+      </StackPanel>
     </ScrollViewer>
   </DockPanel>
 </UserControl>