refactor(ui): migrate DiffModal to ModalShell and use dynamic resources

Replace manual titlebar/drag handler with ModalShell, move Merge button to footer, convert StaticResource token attrs to DynamicResource, snap font sizes to tokens, use MonoFont DynamicResource, and fold tint color literals to RunningTintBrush/ErrorTintBrush.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mika kuns
2026-05-30 16:50:32 +02:00
parent a444033aa9
commit 229f865e7e
2 changed files with 109 additions and 137 deletions

View File

@@ -1,6 +1,7 @@
<Window xmlns="https://github.com/avaloniaui" <Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Modals" xmlns:vm="using:ClaudeDo.Ui.ViewModels.Modals"
xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
x:Class="ClaudeDo.Ui.Views.Modals.DiffModalView" x:Class="ClaudeDo.Ui.Views.Modals.DiffModalView"
x:DataType="vm:DiffModalViewModel" x:DataType="vm:DiffModalViewModel"
Title="Diff" Title="Diff"
@@ -8,7 +9,7 @@
WindowDecorations="None" WindowDecorations="None"
ExtendClientAreaToDecorationsHint="True" ExtendClientAreaToDecorationsHint="True"
WindowStartupLocation="CenterOwner" WindowStartupLocation="CenterOwner"
Background="{StaticResource SurfaceBrush}"> Background="{DynamicResource SurfaceBrush}">
<Window.KeyBindings> <Window.KeyBindings>
<KeyBinding Gesture="Escape" Command="{Binding CloseCommand}"/> <KeyBinding Gesture="Escape" Command="{Binding CloseCommand}"/>
@@ -17,10 +18,10 @@
<Window.Styles> <Window.Styles>
<!-- diff line row tints via Tag selector (compiled-binding-friendly) --> <!-- diff line row tints via Tag selector (compiled-binding-friendly) -->
<Style Selector="Border.diff-line[Tag=add]"> <Style Selector="Border.diff-line[Tag=add]">
<Setter Property="Background" Value="#1A4A6B4A"/> <Setter Property="Background" Value="{StaticResource RunningTintBrush}"/>
</Style> </Style>
<Style Selector="Border.diff-line[Tag=del]"> <Style Selector="Border.diff-line[Tag=del]">
<Setter Property="Background" Value="#1AC87060"/> <Setter Property="Background" Value="{StaticResource ErrorTintBrush}"/>
</Style> </Style>
<Style Selector="Border.diff-line[Tag=ctx]"> <Style Selector="Border.diff-line[Tag=ctx]">
<Setter Property="Background" Value="Transparent"/> <Setter Property="Background" Value="Transparent"/>
@@ -45,44 +46,23 @@
</Style> </Style>
</Window.Styles> </Window.Styles>
<!-- Outer container — rectangular so the OS window rectangle stays filled (no black corners) --> <ctl:ModalShell Title="DIFF" CloseCommand="{Binding CloseCommand}">
<Border Background="{StaticResource SurfaceBrush}" <ctl:ModalShell.Footer>
BorderBrush="{StaticResource LineBrush}" <StackPanel Orientation="Horizontal" Spacing="8"
BorderThickness="1"> HorizontalAlignment="Right" VerticalAlignment="Center"
<Grid RowDefinitions="36,*"> Margin="16,0">
<Button Content="Merge…" Command="{Binding MergeCommand}"/>
<!-- Title bar / drag handle -->
<Border Grid.Row="0"
x:Name="TitleBar"
Background="{StaticResource Surface2Brush}"
BorderBrush="{StaticResource LineBrush}"
BorderThickness="0,0,0,1"
PointerPressed="TitleBar_PointerPressed">
<Grid ColumnDefinitions="*,Auto" Margin="14,0">
<TextBlock Text="Diff" VerticalAlignment="Center"
FontFamily="{StaticResource MonoFamily}"
FontSize="12"
Foreground="{StaticResource TextDimBrush}"/>
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="4" VerticalAlignment="Center">
<Button Content="Merge…"
Command="{Binding MergeCommand}"
Margin="0,0,4,0" />
<Button Classes="icon-btn"
Content="✕"
FontSize="12"
Command="{Binding CloseCommand}" />
</StackPanel> </StackPanel>
</Grid> </ctl:ModalShell.Footer>
</Border>
<!-- Body: sidebar + diff content --> <!-- Body: sidebar + diff content -->
<Grid Grid.Row="1" ColumnDefinitions="240,*"> <Grid ColumnDefinitions="240,*">
<!-- File sidebar --> <!-- File sidebar -->
<Border Grid.Column="0" <Border Grid.Column="0"
BorderBrush="{StaticResource LineBrush}" BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,0,1,0" BorderThickness="0,0,1,0"
Background="{StaticResource DeepBrush}"> Background="{DynamicResource DeepBrush}">
<ListBox ItemsSource="{Binding Files}" <ListBox ItemsSource="{Binding Files}"
SelectedItem="{Binding SelectedFile, Mode=TwoWay}" SelectedItem="{Binding SelectedFile, Mode=TwoWay}"
Background="Transparent" Background="Transparent"
@@ -93,22 +73,22 @@
<Border Padding="10,8" Background="Transparent"> <Border Padding="10,8" Background="Transparent">
<StackPanel Spacing="4"> <StackPanel Spacing="4">
<TextBlock Text="{Binding Path}" <TextBlock Text="{Binding Path}"
FontFamily="{StaticResource MonoFamily}" FontFamily="{DynamicResource MonoFont}"
FontSize="11" FontSize="{StaticResource FontSizeMono}"
Foreground="{StaticResource TextDimBrush}" Foreground="{DynamicResource TextDimBrush}"
TextTrimming="PrefixCharacterEllipsis"/> TextTrimming="PrefixCharacterEllipsis"/>
<StackPanel Orientation="Horizontal" Spacing="6"> <StackPanel Orientation="Horizontal" Spacing="6">
<Border Classes="chip" Padding="5,2"> <Border Classes="chip" Padding="5,2">
<TextBlock Foreground="{StaticResource MossBrightBrush}" <TextBlock Foreground="{DynamicResource MossBrightBrush}"
FontFamily="{StaticResource MonoFamily}" FontFamily="{DynamicResource MonoFont}"
FontSize="10" FontSize="{StaticResource FontSizeEyebrow}"
Text="{Binding Additions, StringFormat='+{0}'}"/> Text="{Binding Additions, StringFormat='+{0}'}"/>
</Border> </Border>
<Border Classes="chip" Padding="5,2"> <Border Classes="chip" Padding="5,2">
<TextBlock Foreground="{StaticResource BloodBrush}" <TextBlock Foreground="{DynamicResource BloodBrush}"
FontFamily="{StaticResource MonoFamily}" FontFamily="{DynamicResource MonoFont}"
FontSize="10" FontSize="{StaticResource FontSizeEyebrow}"
Text="{Binding Deletions, StringFormat='\u2212{0}'}"/> Text="{Binding Deletions, StringFormat='{0}'}"/>
</Border> </Border>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
@@ -119,14 +99,14 @@
</Border> </Border>
<!-- Diff content --> <!-- Diff content -->
<Grid Grid.Column="1" Background="{StaticResource VoidBrush}"> <Grid Grid.Column="1" Background="{DynamicResource VoidBrush}">
<TextBlock Text="{Binding StatusMessage}" <TextBlock Text="{Binding StatusMessage}"
IsVisible="{Binding StatusMessage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" IsVisible="{Binding StatusMessage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
Foreground="{StaticResource TextDimBrush}" Foreground="{DynamicResource TextDimBrush}"
FontFamily="{StaticResource MonoFamily}" FontFamily="{DynamicResource MonoFont}"
FontSize="12"/> FontSize="{StaticResource FontSizeBody}"/>
<ScrollViewer HorizontalScrollBarVisibility="Auto" <ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"> VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding SelectedFile.Lines}"> <ItemsControl ItemsSource="{Binding SelectedFile.Lines}">
@@ -140,32 +120,32 @@
<TextBlock Grid.Column="0" <TextBlock Grid.Column="0"
Text="{Binding OldNo}" Text="{Binding OldNo}"
Classes="diff-lineno" Classes="diff-lineno"
FontFamily="{StaticResource MonoFamily}" FontFamily="{DynamicResource MonoFont}"
FontSize="11" FontSize="{StaticResource FontSizeMono}"
Foreground="{StaticResource TextFaintBrush}" Foreground="{DynamicResource TextFaintBrush}"
HorizontalAlignment="Right" HorizontalAlignment="Right"
Margin="0,0,8,0"/> Margin="0,0,8,0"/>
<!-- New line number --> <!-- New line number -->
<TextBlock Grid.Column="1" <TextBlock Grid.Column="1"
Text="{Binding NewNo}" Text="{Binding NewNo}"
Classes="diff-lineno" Classes="diff-lineno"
FontFamily="{StaticResource MonoFamily}" FontFamily="{DynamicResource MonoFont}"
FontSize="11" FontSize="{StaticResource FontSizeMono}"
Foreground="{StaticResource TextFaintBrush}" Foreground="{DynamicResource TextFaintBrush}"
HorizontalAlignment="Right" HorizontalAlignment="Right"
Margin="0,0,8,0"/> Margin="0,0,8,0"/>
<!-- Sign --> <!-- Sign -->
<TextBlock Grid.Column="2" <TextBlock Grid.Column="2"
Classes="diff-sign" Classes="diff-sign"
Text="{Binding Sign}" Text="{Binding Sign}"
FontFamily="{StaticResource MonoFamily}" FontFamily="{DynamicResource MonoFont}"
FontSize="11"/> FontSize="{StaticResource FontSizeMono}"/>
<!-- Line text --> <!-- Line text -->
<TextBlock Grid.Column="3" <TextBlock Grid.Column="3"
Classes="diff-text" Classes="diff-text"
Text="{Binding Text}" Text="{Binding Text}"
FontFamily="{StaticResource MonoFamily}" FontFamily="{DynamicResource MonoFont}"
FontSize="11" FontSize="{StaticResource FontSizeMono}"
TextWrapping="NoWrap"/> TextWrapping="NoWrap"/>
</Grid> </Grid>
</Border> </Border>
@@ -175,6 +155,5 @@
</ScrollViewer> </ScrollViewer>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </ctl:ModalShell>
</Border>
</Window> </Window>

View File

@@ -2,7 +2,6 @@ using Avalonia;
using Avalonia.Animation; using Avalonia.Animation;
using Avalonia.Animation.Easings; using Avalonia.Animation.Easings;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Media; using Avalonia.Media;
using Avalonia.Styling; using Avalonia.Styling;
using ClaudeDo.Ui.ViewModels.Modals; using ClaudeDo.Ui.ViewModels.Modals;
@@ -43,10 +42,4 @@ public partial class DiffModalView : Window
Opacity = 1; Opacity = 1;
RenderTransform = new ScaleTransform(1.0, 1.0); RenderTransform = new ScaleTransform(1.0, 1.0);
} }
private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
{
if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
BeginMoveDrag(e);
}
} }