From 480d05975d234881036d24658b25bf39af8dbca4 Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Mon, 20 Apr 2026 11:16:39 +0200
Subject: [PATCH] style(ui): custom title bar with brand and window controls

Replace character-glyph window buttons with PathIcon controls using
Lucide-style StreamGeometry. Add left brand block (check glyph +
CLAUDEDO + separator dot + selected list name) and draggable middle
strip. Close button hover turns BloodBrush.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/ClaudeDo.Ui/Design/IslandStyles.axaml | 34 ++++++++++++
 src/ClaudeDo.Ui/Views/MainWindow.axaml    | 63 +++++++++++++++++++----
 2 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/src/ClaudeDo.Ui/Design/IslandStyles.axaml b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
index 764c2c3..9a39539 100644
--- a/src/ClaudeDo.Ui/Design/IslandStyles.axaml
+++ b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
@@ -14,6 +14,40 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
+  <!-- ============================================================ -->
+  <!-- ICON GEOMETRY RESOURCES                                      -->
+  <!-- ============================================================ -->
+  <Styles.Resources>
+    <!-- Window control icons (from icons.jsx: min, max, close) -->
+    <StreamGeometry x:Key="Icon.WinMin">M5 10h10</StreamGeometry>
+    <StreamGeometry x:Key="Icon.WinMax">M5 5 h10 v10 h-10 z</StreamGeometry>
+    <StreamGeometry x:Key="Icon.WinClose">M5 5l14 14M19 5L5 19</StreamGeometry>
+    <!-- Brand check glyph (checkbox-style tick inside a rounded square) -->
+    <StreamGeometry x:Key="Icon.BrandCheck">M3 3 h18 v18 h-18 z M6 12 l4 4 8-8</StreamGeometry>
+  </Styles.Resources>
+
+  <!-- ============================================================ -->
+  <!-- TITLE BAR CONTROLS                                           -->
+  <!-- ============================================================ -->
+
+  <Style Selector="Button.title-ctrl">
+    <Setter Property="Width"           Value="36" />
+    <Setter Property="Height"          Value="36" />
+    <Setter Property="Padding"         Value="0" />
+    <Setter Property="Background"      Value="Transparent" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="CornerRadius"    Value="0" />
+    <Setter Property="Foreground"      Value="{StaticResource TextMuteBrush}" />
+  </Style>
+  <Style Selector="Button.title-ctrl:pointerover /template/ ContentPresenter">
+    <Setter Property="Background"               Value="{StaticResource Surface2Brush}" />
+    <Setter Property="TextElement.Foreground"   Value="{StaticResource TextBrush}" />
+  </Style>
+  <Style Selector="Button.title-ctrl.close:pointerover /template/ ContentPresenter">
+    <Setter Property="Background"               Value="{StaticResource BloodBrush}" />
+    <Setter Property="TextElement.Foreground"   Value="{StaticResource TextBrush}" />
+  </Style>
+
   <!-- ============================================================ -->
   <!-- ISLAND                                                       -->
   <!-- ============================================================ -->
diff --git a/src/ClaudeDo.Ui/Views/MainWindow.axaml b/src/ClaudeDo.Ui/Views/MainWindow.axaml
index 18a5c26..cde2e6a 100644
--- a/src/ClaudeDo.Ui/Views/MainWindow.axaml
+++ b/src/ClaudeDo.Ui/Views/MainWindow.axaml
@@ -17,16 +17,61 @@
   </Window.KeyBindings>
   <Grid RowDefinitions="36,*">
     <!-- Custom title bar -->
-    <Border Grid.Row="0" Background="{DynamicResource DeepBrush}" PointerPressed="OnTitleBarPressed">
-      <Grid ColumnDefinitions="*,Auto">
-        <TextBlock Grid.Column="0" Margin="14,0" VerticalAlignment="Center"
-                   FontFamily="{DynamicResource SansFamily}" FontSize="12"
-                   Foreground="{DynamicResource TextDimBrush}" Text="ClaudeDo"/>
-        <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="0">
-          <Button Classes="title-btn" Click="OnMinimize" Content="—"/>
-          <Button Classes="title-btn" Click="OnToggleMax" Content="▢"/>
-          <Button Classes="title-btn close" Click="OnClose" Content="✕"/>
+    <Border Grid.Row="0"
+            Background="{DynamicResource DeepBrush}"
+            BorderBrush="{DynamicResource LineBrush}"
+            BorderThickness="0,0,0,1">
+      <Grid ColumnDefinitions="Auto,*,Auto">
+
+        <!-- Left: brand block -->
+        <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="8"
+                    VerticalAlignment="Center" Margin="14,0,0,0">
+          <!-- Green checkbox glyph -->
+          <PathIcon Classes="title-brand-icon"
+                    Data="{StaticResource Icon.BrandCheck}"
+                    Width="14" Height="14"
+                    Foreground="{DynamicResource MossBrush}" />
+          <!-- CLAUDEDO label -->
+          <TextBlock Classes="title-brand-name"
+                     Text="CLAUDEDO"
+                     FontFamily="{DynamicResource MonoFont}"
+                     FontSize="11"
+                     Foreground="{DynamicResource TextBrush}"
+                     LetterSpacing="1.4"
+                     VerticalAlignment="Center"/>
+          <!-- separator dot -->
+          <TextBlock Text="·"
+                     FontFamily="{DynamicResource MonoFont}"
+                     FontSize="11"
+                     Foreground="{DynamicResource TextFaintBrush}"
+                     VerticalAlignment="Center"/>
+          <!-- current list name -->
+          <TextBlock Text="{Binding Lists.SelectedList.Name}"
+                     FontFamily="{DynamicResource MonoFont}"
+                     FontSize="11"
+                     Foreground="{DynamicResource TextDimBrush}"
+                     LetterSpacing="1.4"
+                     VerticalAlignment="Center"/>
         </StackPanel>
+
+        <!-- Middle: draggable strip -->
+        <Border Grid.Column="1" Background="Transparent"
+                PointerPressed="OnTitleBarPressed" />
+
+        <!-- Right: window controls -->
+        <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="0"
+                    VerticalAlignment="Center" Margin="0,0,4,0">
+          <Button Classes="title-ctrl" Click="OnMinimize">
+            <PathIcon Data="{StaticResource Icon.WinMin}" Width="10" Height="10"/>
+          </Button>
+          <Button Classes="title-ctrl" Click="OnToggleMax">
+            <PathIcon Data="{StaticResource Icon.WinMax}" Width="10" Height="10"/>
+          </Button>
+          <Button Classes="title-ctrl close" Click="OnClose">
+            <PathIcon Data="{StaticResource Icon.WinClose}" Width="10" Height="10"/>
+          </Button>
+        </StackPanel>
+
       </Grid>
     </Border>