From 9444b94712c899708b6677e3c68121ac5b9143f3 Mon Sep 17 00:00:00 2001
From: Nate Bross <nate@brosstribe.com>
Date: Thu, 14 Aug 2025 17:52:39 -0500
Subject: [PATCH] chore: clean up ui spacing

---
 App.axaml        | 105 ++++++++++++++++++++++++++
 MainWindow.axaml | 190 ++++++++++++++++++++++++++++++++++-------------
 2 files changed, 244 insertions(+), 51 deletions(-)

diff --git a/App.axaml b/App.axaml
index f6f38a2..b1025c1 100644
--- a/App.axaml
+++ b/App.axaml
@@ -7,5 +7,110 @@
     <Application.Styles>
         <FluentTheme />
         <StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" />
+        
+        <!-- Fluent 2 Design System Tokens and Styles -->
+        <Style>
+            <Style.Resources>
+                <!-- Fluent 2 Spacing Tokens -->
+                <x:Double x:Key="Fluent2SpacingXXS">2</x:Double>
+                <x:Double x:Key="Fluent2SpacingXS">4</x:Double>
+                <x:Double x:Key="Fluent2SpacingSM">8</x:Double>
+                <x:Double x:Key="Fluent2SpacingMD">12</x:Double>
+                <x:Double x:Key="Fluent2SpacingLG">16</x:Double>
+                <x:Double x:Key="Fluent2SpacingXL">20</x:Double>
+                <x:Double x:Key="Fluent2SpacingXXL">24</x:Double>
+                <x:Double x:Key="Fluent2SpacingXXXL">32</x:Double>
+                
+                <!-- Fluent 2 Corner Radius Tokens -->
+                <x:Double x:Key="Fluent2CornerRadiusNone">0</x:Double>
+                <x:Double x:Key="Fluent2CornerRadiusXS">2</x:Double>
+                <x:Double x:Key="Fluent2CornerRadiusSM">4</x:Double>
+                <x:Double x:Key="Fluent2CornerRadiusMD">8</x:Double>
+                <x:Double x:Key="Fluent2CornerRadiusLG">12</x:Double>
+                <x:Double x:Key="Fluent2CornerRadiusXL">16</x:Double>
+                <x:Double x:Key="Fluent2CornerRadiusXXL">20</x:Double>
+                
+                <!-- Fluent 2 Typography Tokens -->
+                <x:Double x:Key="Fluent2FontSizeCaption">10</x:Double>
+                <x:Double x:Key="Fluent2FontSizeBody">14</x:Double>
+                <x:Double x:Key="Fluent2FontSizeSubtitle">16</x:Double>
+                <x:Double x:Key="Fluent2FontSizeTitle3">18</x:Double>
+                <x:Double x:Key="Fluent2FontSizeTitle2">20</x:Double>
+                <x:Double x:Key="Fluent2FontSizeTitle1">22</x:Double>
+                
+                <!-- Fluent 2 Shadow Tokens -->
+                <BoxShadows x:Key="Fluent2ShadowElevation2">0 1 2 0 #00000014</BoxShadows>
+                <BoxShadows x:Key="Fluent2ShadowElevation4">0 2 4 0 #00000014</BoxShadows>
+                <BoxShadows x:Key="Fluent2ShadowElevation8">0 4 8 0 #00000014</BoxShadows>
+                <BoxShadows x:Key="Fluent2ShadowElevation16">0 8 16 0 #00000014</BoxShadows>
+            </Style.Resources>
+        </Style>
+
+        <!-- Fluent 2 Component Styles -->
+        <!-- Enhanced Button Style -->
+        <Style Selector="Button.Fluent2Primary">
+            <Setter Property="CornerRadius" Value="4" />
+            <Setter Property="Padding" Value="12,8" />
+            <Setter Property="MinHeight" Value="32" />
+            <Setter Property="FontSize" Value="14" />
+            <Setter Property="FontWeight" Value="Medium" />
+        </Style>
+
+        <!-- Enhanced TextBox Style -->
+        <Style Selector="TextBox.Fluent2">
+            <Setter Property="CornerRadius" Value="4" />
+            <Setter Property="Padding" Value="12,8" />
+            <Setter Property="MinHeight" Value="32" />
+            <Setter Property="FontSize" Value="14" />
+            <Setter Property="BorderThickness" Value="1" />
+        </Style>
+
+        <!-- Enhanced ComboBox Style -->
+        <Style Selector="ComboBox.Fluent2">
+            <Setter Property="CornerRadius" Value="4" />
+            <Setter Property="Padding" Value="12,8" />
+            <Setter Property="MinHeight" Value="32" />
+            <Setter Property="FontSize" Value="14" />
+        </Style>
+
+        <!-- Fluent 2 Surface Styles -->
+        <Style Selector="Border.Fluent2Surface">
+            <Setter Property="CornerRadius" Value="8" />
+            <Setter Property="BoxShadow" Value="0 1 2 0 #00000014" />
+            <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
+        </Style>
+
+        <Style Selector="Border.Fluent2SurfaceElevated">
+            <Setter Property="CornerRadius" Value="8" />
+            <Setter Property="BoxShadow" Value="0 2 4 0 #00000014" />
+            <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumBrush}" />
+        </Style>
+
+        <!-- Enhanced ListBox Item Style -->
+        <Style Selector="ListBox.Fluent2">
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="BorderThickness" Value="0" />
+        </Style>
+
+        <Style Selector="ListBox.Fluent2 ListBoxItem">
+            <Setter Property="CornerRadius" Value="4" />
+            <Setter Property="Padding" Value="12" />
+            <Setter Property="Margin" Value="0,0,0,4" />
+        </Style>
+
+        <!-- Typography Styles -->
+        <Style Selector="TextBlock.Fluent2Caption">
+            <Setter Property="FontSize" Value="10" />
+            <Setter Property="Opacity" Value="0.8" />
+        </Style>
+
+        <Style Selector="TextBlock.Fluent2Body">
+            <Setter Property="FontSize" Value="14" />
+        </Style>
+
+        <Style Selector="TextBlock.Fluent2Subtitle">
+            <Setter Property="FontSize" Value="16" />
+            <Setter Property="FontWeight" Value="Medium" />
+        </Style>
     </Application.Styles>
 </Application>
\ No newline at end of file
diff --git a/MainWindow.axaml b/MainWindow.axaml
index 1e15f9f..c5c4913 100644
--- a/MainWindow.axaml
+++ b/MainWindow.axaml
@@ -40,66 +40,154 @@
         </Menu>
         <Grid>
             <Grid.RowDefinitions>
-                <RowDefinition Height="50" />
+                <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*" />
-            </Grid.ColumnDefinitions>
 
-            <Grid
+            <!-- Header section with Fluent 2 design tokens -->
+            <Border 
                 Grid.Row="0"
-                Margin="8">
+                Classes="Fluent2Surface"
+                Margin="24,16,24,0"
+                Padding="16">
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
+                    <TextBlock 
+                        Grid.Column="0" 
+                        Classes="Fluent2Body"
+                        Margin="0,0,12,0"
+                        VerticalAlignment="Center" 
+                        Text="Clip path:" />
+                    <TextBox 
+                        Grid.Column="1" 
+                        Classes="Fluent2"
+                        Margin="0,0,12,0"
+                        Text="{Binding CurrentPath, Mode=OneWay}" />
+                    <Button 
+                        Grid.Column="2" 
+                        Classes="Fluent2Primary"
+                        Command="{Binding OpenFolderPicker}" 
+                        Content="Browse" />
+                </Grid>
+            </Border>
+
+            <!-- Main content area with Fluent 2 elevation and spacing -->
+            <Grid 
+                Grid.Row="1" 
+                Margin="24,16,24,24">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="75" />
+                    <ColumnDefinition Width="320" />
+                    <ColumnDefinition Width="16" />
                     <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="75"/>
                 </Grid.ColumnDefinitions>
-                <Label Grid.Column="0" HorizontalAlignment="Left" VerticalContentAlignment="Center" Content="Clip path:"></Label>
-                <TextBox Grid.Column="1" Text="{Binding CurrentPath, Mode=OneWay}" />
-                <Button Grid.Column="2" HorizontalAlignment="Right" Command="{Binding OpenFolderPicker}" Content="Browse" />
-            </Grid>
 
-            <DockPanel Grid.Row="1">
-                <StackPanel
-                    Width="225"
-                    DockPanel.Dock="Left">
-                    <TextBox Margin="8" Watermark="Search" Text="{Binding SearchText}" />
-                    <ListBox
-                        ItemsSource="{Binding FilteredClips}"
-                        SelectedItem="{Binding SelectedClip}">
-                        <ListBox.Styles>
-                            <Style Selector="ListBoxItem">
-                                <Setter Property="Padding" Value="0"/>
-                            </Style>
-                        </ListBox.Styles>
-                        <ListBox.ItemTemplate>
-                            <DataTemplate>
-                                <StackPanel Margin="8">
-                                    <TextBox Text="{Binding Name, Mode=TwoWay}" />
-                                    <ComboBox
-                                        DisplayMemberBinding="{Binding DisplayName}"
-                                        ItemsSource="{Binding Clip.ClipTypes}"
-                                        SelectedValue="{Binding ClipType, Mode=TwoWay}"
-                                        SelectedValueBinding="{Binding KeyId}" />
-                                    <TextBlock MaxLines="1" Text="{Binding ClipType}" />
-                                </StackPanel>
-                            </DataTemplate>
-                        </ListBox.ItemTemplate>
-                    </ListBox>
-                </StackPanel>
+                <!-- Left panel: Clips navigation with Fluent 2 surface treatment -->
+                <Border 
+                    Grid.Column="0"
+                    Classes="Fluent2SurfaceElevated">
+                    <ScrollViewer>
+                        <StackPanel Margin="16" Spacing="16">
+                            <!-- Search section -->
+                            <StackPanel Spacing="8">
+                                <TextBlock 
+                                    Classes="Fluent2Subtitle"
+                                    Text="Search Clips" />
+                                <TextBox 
+                                    Classes="Fluent2"
+                                    Watermark="Type to search clips..." 
+                                    Text="{Binding SearchText}" />
+                            </StackPanel>
+
+                            <!-- Clips list section -->
+                            <StackPanel Spacing="8">
+                                <TextBlock 
+                                    Classes="Fluent2Subtitle"
+                                    Text="Available Clips" />
+                                <ListBox
+                                    Classes="Fluent2"
+                                    ItemsSource="{Binding FilteredClips}"
+                                    SelectedItem="{Binding SelectedClip}">
+                                    <ListBox.ItemTemplate>
+                                        <DataTemplate>
+                                            <Border 
+                                                CornerRadius="4"
+                                                Padding="12">
+                                                <StackPanel Spacing="8">
+                                                    <TextBox 
+                                                        Classes="Fluent2"
+                                                        Text="{Binding Name, Mode=TwoWay}" 
+                                                        Watermark="Clip name" />
+                                                    <ComboBox
+                                                        Classes="Fluent2"
+                                                        DisplayMemberBinding="{Binding DisplayName}"
+                                                        ItemsSource="{Binding Clip.ClipTypes}"
+                                                        SelectedValue="{Binding ClipType, Mode=TwoWay}"
+                                                        SelectedValueBinding="{Binding KeyId}" />
+                                                    <TextBlock 
+                                                        Classes="Fluent2Caption"
+                                                        MaxLines="1" 
+                                                        Text="{Binding ClipType}" />
+                                                </StackPanel>
+                                            </Border>
+                                        </DataTemplate>
+                                    </ListBox.ItemTemplate>
+                                </ListBox>
+                            </StackPanel>
+                        </StackPanel>
+                    </ScrollViewer>
+                </Border>
+
+                <!-- Splitter space -->
+                <GridSplitter 
+                    Grid.Column="1" 
+                    Background="Transparent"
+                    ResizeDirection="Columns"
+                    Width="16" />
 
-                <AvaloniaEdit:TextEditor
-                    x:Name="avaloniaEditor"
-                    FontFamily="Cascadia Code,Consolas,Menlo,Monospace"
-                    ShowLineNumbers="True"
-                    SyntaxHighlighting="Xml"
-                    WordWrap="False">
-                    <i:Interaction.Behaviors>
-                        <behaviors:DocumentTextBindingBehavior Text="{Binding SelectedClip.ClipXml, Mode=TwoWay}" />
-                    </i:Interaction.Behaviors>
-                </AvaloniaEdit:TextEditor>
-            </DockPanel>
+                <!-- Right panel: Code editor with Fluent 2 surface treatment -->
+                <Border 
+                    Grid.Column="2"
+                    Classes="Fluent2SurfaceElevated">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+
+                        <!-- Editor header -->
+                        <Border 
+                            Grid.Row="0"
+                            Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}"
+                            CornerRadius="8,8,0,0"
+                            Padding="16,12">
+                            <TextBlock 
+                                Classes="Fluent2Subtitle"
+                                Text="Clip Content" />
+                        </Border>
+
+                        <!-- AvaloniaEdit component (unchanged) -->
+                        <Border 
+                            Grid.Row="1"
+                            CornerRadius="0,0,8,8"
+                            ClipToBounds="True">
+                            <AvaloniaEdit:TextEditor
+                                x:Name="avaloniaEditor"
+                                FontFamily="Cascadia Code,Consolas,Menlo,Monospace"
+                                ShowLineNumbers="True"
+                                SyntaxHighlighting="Xml"
+                                WordWrap="False">
+                                <i:Interaction.Behaviors>
+                                    <behaviors:DocumentTextBindingBehavior Text="{Binding SelectedClip.ClipXml, Mode=TwoWay}" />
+                                </i:Interaction.Behaviors>
+                            </AvaloniaEdit:TextEditor>
+                        </Border>
+                    </Grid>
+                </Border>
+            </Grid>
         </Grid>
     </DockPanel>