From c3fed45481484c00ae9f7e2bf83ffb9cf5cd4407 Mon Sep 17 00:00:00 2001
From: Mika Kuns <mika.kuns@fb-tuning.de>
Date: Tue, 14 Apr 2026 10:52:52 +0200
Subject: [PATCH] style(ui): island layout with Warm Charcoal theme
 (Rider-style)

Replace flat columns with rounded island panels on a dark base.
Remove GridSplitters, add gap-based spacing between islands.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/ClaudeDo.App/App.axaml             |   8 +-
 src/ClaudeDo.Ui/Views/MainWindow.axaml | 151 +++++++++++++------------
 2 files changed, 83 insertions(+), 76 deletions(-)

diff --git a/src/ClaudeDo.App/App.axaml b/src/ClaudeDo.App/App.axaml
index 480c689..80c796e 100644
--- a/src/ClaudeDo.App/App.axaml
+++ b/src/ClaudeDo.App/App.axaml
@@ -18,9 +18,11 @@
         <SolidColorBrush x:Key="TextDimBrush" Color="#475569"/>
 
         <!-- Borders & Backgrounds -->
-        <SolidColorBrush x:Key="BorderSubtleBrush" Color="#3a4560"/>
-        <SolidColorBrush x:Key="SidebarBgBrush" Color="#1a1a2e"/>
-        <SolidColorBrush x:Key="ContentBgBrush" Color="#16162a"/>
+        <SolidColorBrush x:Key="BorderSubtleBrush" Color="#3a3f46"/>
+        <SolidColorBrush x:Key="WindowBgBrush" Color="#1c1e21"/>
+        <SolidColorBrush x:Key="IslandBgBrush" Color="#272a2e"/>
+        <SolidColorBrush x:Key="SidebarBgBrush" Color="#272a2e"/>
+        <SolidColorBrush x:Key="ContentBgBrush" Color="#272a2e"/>
 
         <!-- Status colors (for checkboxes) -->
         <SolidColorBrush x:Key="StatusGrayBrush" Color="#475569"/>
diff --git a/src/ClaudeDo.Ui/Views/MainWindow.axaml b/src/ClaudeDo.Ui/Views/MainWindow.axaml
index 0fd43b8..fef54ce 100644
--- a/src/ClaudeDo.Ui/Views/MainWindow.axaml
+++ b/src/ClaudeDo.Ui/Views/MainWindow.axaml
@@ -11,88 +11,93 @@
         MinWidth="800" MinHeight="500"
         KeyDown="OnGlobalKeyDown">
 
-    <DockPanel>
+    <DockPanel Background="{StaticResource WindowBgBrush}">
         <v:StatusBarView DockPanel.Dock="Bottom" DataContext="{Binding StatusBar}" />
 
-        <Grid ColumnDefinitions="1*,Auto,2*,Auto,1.5*">
+        <Grid ColumnDefinitions="1*,2*,1.5*" Margin="8,8,8,0">
 
-            <DockPanel Grid.Column="0" MinWidth="180" MaxWidth="320"
-                       Background="{StaticResource SidebarBgBrush}">
+            <!-- Lists island -->
+            <Border Grid.Column="0" CornerRadius="12" Background="{StaticResource IslandBgBrush}"
+                    MinWidth="180" MaxWidth="320" Margin="0,0,4,8" ClipToBounds="True">
+                <DockPanel>
+                    <TextBlock DockPanel.Dock="Top"
+                               Text="Lists" FontWeight="SemiBold" FontSize="13"
+                               Foreground="{StaticResource TextSecondaryBrush}"
+                               Margin="16,14,16,10"/>
 
-                <TextBlock DockPanel.Dock="Top"
-                           Text="Lists" FontWeight="SemiBold" FontSize="13"
-                           Foreground="{StaticResource TextSecondaryBrush}"
-                           Margin="16,14,16,10"/>
+                    <Border DockPanel.Dock="Bottom" Padding="8,8"
+                            BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderSubtleBrush}">
+                        <Button Content="+ New List"
+                                Command="{Binding AddListCommand}"
+                                Background="Transparent"
+                                Foreground="{StaticResource AccentBrush}"
+                                BorderThickness="0"
+                                Padding="12,8"
+                                HorizontalAlignment="Stretch"
+                                HorizontalContentAlignment="Left"
+                                FontSize="13"
+                                Cursor="Hand"/>
+                    </Border>
 
-                <Border DockPanel.Dock="Bottom" Padding="8,8"
-                        BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderSubtleBrush}">
-                    <Button Content="+ New List"
-                            Command="{Binding AddListCommand}"
-                            Background="Transparent"
-                            Foreground="{StaticResource AccentBrush}"
-                            BorderThickness="0"
-                            Padding="12,8"
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Left"
-                            FontSize="13"
-                            Cursor="Hand"/>
-                </Border>
+                    <ListBox x:Name="ListsBox"
+                             ItemsSource="{Binding Lists}"
+                             SelectedItem="{Binding SelectedList}"
+                             Background="Transparent"
+                             Margin="4,0">
+                        <ListBox.ItemTemplate>
+                            <DataTemplate x:DataType="vm:ListItemViewModel">
+                                <Grid ColumnDefinitions="Auto,*" Margin="8,6"
+                                      Background="Transparent"
+                                      DoubleTapped="OnListItemDoubleTapped"
+                                      PointerPressed="OnListItemPointerPressed">
+                                    <Grid.ContextFlyout>
+                                        <MenuFlyout>
+                                            <MenuItem Header="Edit"
+                                                      Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).EditListCommand}"/>
+                                            <MenuItem Header="Delete"
+                                                      Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).DeleteListCommand}"/>
+                                            <Separator/>
+                                            <MenuItem Header="New Task"
+                                                      Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).TaskList.AddTaskCommand}"/>
+                                        </MenuFlyout>
+                                    </Grid.ContextFlyout>
 
-                <ListBox x:Name="ListsBox"
-                         ItemsSource="{Binding Lists}"
-                         SelectedItem="{Binding SelectedList}"
-                         Background="Transparent"
-                         Margin="4,0">
-                    <ListBox.ItemTemplate>
-                        <DataTemplate x:DataType="vm:ListItemViewModel">
-                            <Grid ColumnDefinitions="Auto,*" Margin="8,6"
-                                  Background="Transparent"
-                                  DoubleTapped="OnListItemDoubleTapped"
-                                  PointerPressed="OnListItemPointerPressed">
-                                <Grid.ContextFlyout>
-                                    <MenuFlyout>
-                                        <MenuItem Header="Edit"
-                                                  Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).EditListCommand}"/>
-                                        <MenuItem Header="Delete"
-                                                  Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).DeleteListCommand}"/>
-                                        <Separator/>
-                                        <MenuItem Header="New Task"
-                                                  Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).TaskList.AddTaskCommand}"/>
-                                    </MenuFlyout>
-                                </Grid.ContextFlyout>
+                                    <Ellipse Grid.Column="0" Width="8" Height="8"
+                                             Fill="{Binding DotBrush}"
+                                             VerticalAlignment="Center" Margin="0,0,10,0"/>
 
-                                <Ellipse Grid.Column="0" Width="8" Height="8"
-                                         Fill="{Binding DotBrush}"
-                                         VerticalAlignment="Center" Margin="0,0,10,0"/>
+                                    <StackPanel Grid.Column="1">
+                                        <TextBlock Text="{Binding Name}" FontWeight="Medium"
+                                                   Foreground="{StaticResource TextSecondaryBrush}"/>
+                                        <TextBlock Text="{Binding WorkingDir}" FontSize="10"
+                                                   Foreground="{StaticResource TextDimBrush}"
+                                                   IsVisible="{Binding WorkingDir, Converter={x:Static ObjectConverters.IsNotNull}}"/>
+                                    </StackPanel>
+                                </Grid>
+                            </DataTemplate>
+                        </ListBox.ItemTemplate>
+                    </ListBox>
+                </DockPanel>
+            </Border>
 
-                                <StackPanel Grid.Column="1">
-                                    <TextBlock Text="{Binding Name}" FontWeight="Medium"
-                                               Foreground="{StaticResource TextSecondaryBrush}"/>
-                                    <TextBlock Text="{Binding WorkingDir}" FontSize="10"
-                                               Foreground="{StaticResource TextDimBrush}"
-                                               IsVisible="{Binding WorkingDir, Converter={x:Static ObjectConverters.IsNotNull}}"/>
-                                </StackPanel>
-                            </Grid>
-                        </DataTemplate>
-                    </ListBox.ItemTemplate>
-                </ListBox>
-            </DockPanel>
+            <!-- Tasks island -->
+            <Border Grid.Column="1" CornerRadius="12" Background="{StaticResource IslandBgBrush}"
+                    Margin="4,0,4,8" ClipToBounds="True">
+                <DockPanel>
+                    <TextBlock DockPanel.Dock="Top"
+                               Text="{Binding TaskList.ListName, FallbackValue='Tasks'}"
+                               FontWeight="SemiBold" FontSize="16"
+                               Foreground="{StaticResource TextPrimaryBrush}"
+                               Margin="16,14,16,10"/>
+                    <v:TaskListView DataContext="{Binding TaskList}" />
+                </DockPanel>
+            </Border>
 
-            <GridSplitter Grid.Column="1" Width="4" ResizeDirection="Columns"/>
-
-            <DockPanel Grid.Column="2" Background="{StaticResource ContentBgBrush}">
-                <TextBlock DockPanel.Dock="Top"
-                           Text="{Binding TaskList.ListName, FallbackValue='Tasks'}"
-                           FontWeight="SemiBold" FontSize="16"
-                           Foreground="{StaticResource TextPrimaryBrush}"
-                           Margin="16,14,16,10"/>
-                <v:TaskListView DataContext="{Binding TaskList}" />
-            </DockPanel>
-
-            <GridSplitter Grid.Column="3" Width="4" ResizeDirection="Columns"/>
-
-            <v:TaskDetailView Grid.Column="4" DataContext="{Binding TaskDetail}"
-                              MinWidth="280" MaxWidth="500" />
+            <!-- Detail island -->
+            <Border Grid.Column="2" CornerRadius="12" Background="{StaticResource IslandBgBrush}"
+                    MinWidth="280" MaxWidth="500" Margin="4,0,0,8" ClipToBounds="True">
+                <v:TaskDetailView DataContext="{Binding TaskDetail}" />
+            </Border>
         </Grid>
     </DockPanel>
 </Window>