refactor(ui): redesign list settings and merge modals with custom chrome

Both modals now use SystemDecorations=None with a draggable title bar,
sectioned layout matching the rest of the island shell, Escape-to-cancel,
and themed brushes instead of hard-coded colours. ListSettings adds a
Browse... button that reads agent frontmatter from arbitrary .md files.
This commit is contained in:
mika kuns
2026-04-23 13:08:09 +02:00
parent 1344beba56
commit 5ced1b97a6
4 changed files with 339 additions and 115 deletions

View File

@@ -4,77 +4,177 @@
x:Class="ClaudeDo.Ui.Views.Modals.ListSettingsModalView" x:Class="ClaudeDo.Ui.Views.Modals.ListSettingsModalView"
x:DataType="vm:ListSettingsModalViewModel" x:DataType="vm:ListSettingsModalViewModel"
Title="List settings" Title="List settings"
Width="520" Height="600" Width="520" Height="720"
CanResize="True"
MinWidth="460" MinHeight="520"
SystemDecorations="None"
ExtendClientAreaToDecorationsHint="True"
WindowStartupLocation="CenterOwner" WindowStartupLocation="CenterOwner"
CanResize="False"> Background="{DynamicResource SurfaceBrush}">
<DockPanel Margin="16">
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Right" Spacing="8" Margin="0,16,0,0">
<Button Content="Cancel" Command="{Binding CancelCommand}" />
<Button Content="Save" Command="{Binding SaveCommand}" Classes="accent" />
</StackPanel>
<ScrollViewer> <Window.KeyBindings>
<StackPanel Spacing="16"> <KeyBinding Gesture="Escape" Command="{Binding CancelCommand}"/>
<TextBlock Text="General" FontSize="16" FontWeight="SemiBold" /> </Window.KeyBindings>
<Window.Styles>
<Style Selector="TextBlock.section-label">
<Setter Property="FontFamily" Value="{DynamicResource MonoFont}"/>
<Setter Property="FontSize" Value="10"/>
<Setter Property="LetterSpacing" Value="1.4"/>
<Setter Property="Foreground" Value="{DynamicResource TextFaintBrush}"/>
<Setter Property="Margin" Value="4,0,0,6"/>
</Style>
<Style Selector="TextBlock.field-label">
<Setter Property="FontSize" Value="11"/>
<Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
<Setter Property="Margin" Value="0,0,0,4"/>
</Style>
<Style Selector="Border.section">
<Setter Property="BorderBrush" Value="{DynamicResource LineBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="6"/>
<Setter Property="Padding" Value="14"/>
<Setter Property="Background" Value="{DynamicResource DeepBrush}"/>
</Style>
<Style Selector="Button.primary">
<Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource DeepBrush}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
</Window.Styles>
<Border Background="{DynamicResource SurfaceBrush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1">
<Grid RowDefinitions="36,*,52">
<!-- Title bar -->
<Border Grid.Row="0"
x:Name="TitleBar"
Background="{DynamicResource DeepBrush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,0,0,1"
PointerPressed="TitleBar_PointerPressed">
<Grid ColumnDefinitions="*,Auto" Margin="14,0">
<TextBlock Text="LIST SETTINGS"
FontFamily="{DynamicResource MonoFont}"
FontSize="11"
LetterSpacing="1.4"
Foreground="{DynamicResource TextBrush}"
VerticalAlignment="Center"/>
<Button Grid.Column="1"
Classes="icon-btn"
Content="✕"
FontSize="12"
Command="{Binding CancelCommand}"
VerticalAlignment="Center"/>
</Grid>
</Border>
<!-- Body -->
<ScrollViewer Grid.Row="1" Padding="20,16">
<StackPanel Spacing="18">
<!-- GENERAL -->
<StackPanel Spacing="0">
<TextBlock Classes="section-label" Text="GENERAL"/>
<Border Classes="section">
<StackPanel Spacing="12">
<StackPanel Spacing="4"> <StackPanel Spacing="4">
<TextBlock Text="Name" /> <TextBlock Classes="field-label" Text="Name"/>
<TextBox Text="{Binding Name}" /> <TextBox Text="{Binding Name}" />
</StackPanel> </StackPanel>
<StackPanel Spacing="4"> <StackPanel Spacing="4">
<TextBlock Text="Working directory" /> <TextBlock Classes="field-label" Text="Working directory"/>
<Grid ColumnDefinitions="*,Auto"> <Grid ColumnDefinitions="*,Auto">
<TextBox Grid.Column="0" Text="{Binding WorkingDir}" PlaceholderText="(none)" /> <TextBox Grid.Column="0" Text="{Binding WorkingDir}" Watermark="(none)" />
<Button Grid.Column="1" Content="Browse..." Margin="8,0,0,0" Click="BrowseClicked" /> <Button Grid.Column="1" Content="Browse..." Margin="8,0,0,0" Click="BrowseClicked" />
</Grid> </Grid>
</StackPanel> </StackPanel>
<StackPanel Spacing="4"> <StackPanel Spacing="4">
<TextBlock Text="Default commit type" /> <TextBlock Classes="field-label" Text="Default commit type"/>
<ComboBox ItemsSource="{Binding CommitTypeOptions}" <ComboBox ItemsSource="{Binding CommitTypeOptions}"
SelectedItem="{Binding DefaultCommitType, Mode=TwoWay}" SelectedItem="{Binding DefaultCommitType, Mode=TwoWay}"
HorizontalAlignment="Left" MinWidth="160" /> HorizontalAlignment="Left" MinWidth="160" />
</StackPanel> </StackPanel>
</StackPanel>
</Border>
</StackPanel>
<Separator Margin="0,8,0,8" /> <!-- AGENT -->
<StackPanel Spacing="0">
<Grid ColumnDefinitions="*,Auto"> <Grid ColumnDefinitions="*,Auto" Margin="4,0,0,6">
<TextBlock Grid.Column="0" Text="Agent" FontSize="16" FontWeight="SemiBold" /> <TextBlock Classes="section-label" Text="AGENT" Margin="0"/>
<Button Grid.Column="1" Content="Reset agent settings" <Button Grid.Column="1" Content="Reset agent settings"
Command="{Binding ResetAgentSettingsCommand}" /> Command="{Binding ResetAgentSettingsCommand}" />
</Grid> </Grid>
<Border Classes="section">
<StackPanel Spacing="12">
<StackPanel Spacing="4"> <StackPanel Spacing="4">
<TextBlock Text="Model" /> <TextBlock Classes="field-label" Text="Model"/>
<ComboBox ItemsSource="{Binding ModelOptions}" <ComboBox ItemsSource="{Binding ModelOptions}"
SelectedItem="{Binding SelectedModel, Mode=TwoWay}" SelectedItem="{Binding SelectedModel, Mode=TwoWay}"
HorizontalAlignment="Left" MinWidth="160" /> HorizontalAlignment="Left" MinWidth="160" />
</StackPanel> </StackPanel>
<StackPanel Spacing="4"> <StackPanel Spacing="4">
<TextBlock Text="System prompt (appended)" /> <TextBlock Classes="field-label" Text="System prompt (appended)"/>
<TextBox Text="{Binding SystemPrompt, Mode=TwoWay}" <TextBox Text="{Binding SystemPrompt, Mode=TwoWay}"
AcceptsReturn="True" TextWrapping="Wrap" AcceptsReturn="True" TextWrapping="Wrap"
MinHeight="80" /> MinHeight="80" />
</StackPanel> </StackPanel>
<StackPanel Spacing="4"> <StackPanel Spacing="4">
<TextBlock Text="Agent file" /> <TextBlock Classes="field-label" Text="Agent file"/>
<ComboBox ItemsSource="{Binding Agents}" <Grid ColumnDefinitions="*,Auto">
<ComboBox Grid.Column="0"
ItemsSource="{Binding Agents}"
SelectedItem="{Binding SelectedAgent, Mode=TwoWay}" SelectedItem="{Binding SelectedAgent, Mode=TwoWay}"
HorizontalAlignment="Left" MinWidth="240"> HorizontalAlignment="Stretch">
<ComboBox.ItemTemplate> <ComboBox.ItemTemplate>
<DataTemplate> <DataTemplate>
<StackPanel> <StackPanel>
<TextBlock Text="{Binding Name}" /> <TextBlock Text="{Binding Name}"
<TextBlock Text="{Binding Description}" Opacity="0.6" FontSize="11" /> Foreground="{DynamicResource TextBrush}"/>
</StackPanel> <TextBlock Text="{Binding Description}"
</DataTemplate> Foreground="{DynamicResource TextMuteBrush}"
</ComboBox.ItemTemplate> FontSize="11" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox> </ComboBox>
<Button Grid.Column="1" Content="Browse..."
Margin="8,0,0,0" Click="BrowseAgentClicked" />
</Grid>
<TextBlock Text="{Binding SelectedAgent.Path}"
FontFamily="{DynamicResource MonoFont}"
FontSize="11"
Foreground="{DynamicResource TextFaintBrush}"
TextTrimming="PrefixCharacterEllipsis"
IsVisible="{Binding SelectedAgent.Path, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </Border>
</DockPanel> </StackPanel>
</StackPanel>
</ScrollViewer>
<!-- Footer -->
<Border Grid.Row="2"
Background="{DynamicResource DeepBrush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,1,0,0">
<StackPanel Orientation="Horizontal" Spacing="8"
HorizontalAlignment="Right" VerticalAlignment="Center"
Margin="16,0">
<Button Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
<Button Content="Save" Classes="primary" Command="{Binding SaveCommand}" MinWidth="90"/>
</StackPanel>
</Border>
</Grid>
</Border>
</Window> </Window>

View File

@@ -1,6 +1,8 @@
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Interactivity; using Avalonia.Interactivity;
using Avalonia.Platform.Storage; using Avalonia.Platform.Storage;
using ClaudeDo.Data.Models;
using ClaudeDo.Ui.ViewModels.Modals; using ClaudeDo.Ui.ViewModels.Modals;
namespace ClaudeDo.Ui.Views.Modals; namespace ClaudeDo.Ui.Views.Modals;
@@ -12,6 +14,63 @@ public partial class ListSettingsModalView : Window
InitializeComponent(); InitializeComponent();
} }
private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
{
if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
BeginMoveDrag(e);
}
private async void BrowseAgentClicked(object? sender, RoutedEventArgs e)
{
if (DataContext is not ListSettingsModalViewModel vm) return;
var top = TopLevel.GetTopLevel(this);
if (top is null) return;
var files = await top.StorageProvider.OpenFilePickerAsync(new FilePickerOpenOptions
{
Title = "Choose agent file",
AllowMultiple = false,
FileTypeFilter = new[]
{
new FilePickerFileType("Agent files (*.md)") { Patterns = new[] { "*.md" } },
new FilePickerFileType("All files") { Patterns = new[] { "*" } },
},
});
if (files.Count == 0) return;
var path = files[0].Path.LocalPath;
var existing = vm.Agents.FirstOrDefault(a => string.Equals(a.Path, path, StringComparison.OrdinalIgnoreCase));
if (existing is not null)
{
vm.SelectedAgent = existing;
return;
}
var (name, description) = ReadFrontmatter(path);
var agent = new AgentInfo(name, description, path);
vm.Agents.Add(agent);
vm.SelectedAgent = agent;
}
private static (string name, string description) ReadFrontmatter(string filePath)
{
var fallback = System.IO.Path.GetFileNameWithoutExtension(filePath);
try
{
using var reader = new System.IO.StreamReader(filePath);
if (reader.ReadLine()?.Trim() != "---") return (fallback, "");
string name = fallback, description = "";
while (reader.ReadLine() is { } line)
{
if (line.Trim() == "---") break;
if (line.StartsWith("name:")) name = line["name:".Length..].Trim();
else if (line.StartsWith("description:")) description = line["description:".Length..].Trim();
}
return (name, description);
}
catch { return (fallback, ""); }
}
private async void BrowseClicked(object? sender, RoutedEventArgs e) private async void BrowseClicked(object? sender, RoutedEventArgs e)
{ {
if (DataContext is not ListSettingsModalViewModel vm) return; if (DataContext is not ListSettingsModalViewModel vm) return;

View File

@@ -4,77 +4,135 @@
x:Class="ClaudeDo.Ui.Views.Modals.MergeModalView" x:Class="ClaudeDo.Ui.Views.Modals.MergeModalView"
x:DataType="vm:MergeModalViewModel" x:DataType="vm:MergeModalViewModel"
Title="Merge worktree" Title="Merge worktree"
Width="560" Height="420" Width="560" Height="460"
CanResize="False" CanResize="False"
WindowStartupLocation="CenterOwner"> SystemDecorations="None"
<Grid Margin="20" RowDefinitions="Auto,Auto,Auto,Auto,Auto,*,Auto"> ExtendClientAreaToDecorationsHint="True"
WindowStartupLocation="CenterOwner"
Background="{DynamicResource SurfaceBrush}">
<TextBlock Grid.Row="0" <Window.KeyBindings>
Text="{Binding TaskTitle, StringFormat='Merging: {0}'}" <KeyBinding Gesture="Escape" Command="{Binding CancelCommand}"/>
FontWeight="SemiBold" Margin="0,0,0,12" /> </Window.KeyBindings>
<StackPanel Grid.Row="1" Orientation="Vertical" Margin="0,0,0,8"> <Window.Styles>
<TextBlock Text="Target branch" Margin="0,0,0,4" /> <Style Selector="TextBlock.field-label">
<ComboBox ItemsSource="{Binding Branches}" <Setter Property="FontSize" Value="11"/>
SelectedItem="{Binding SelectedBranch}" <Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
HorizontalAlignment="Stretch" <Setter Property="Margin" Value="0,0,0,4"/>
IsEnabled="{Binding !IsBusy}" /> </Style>
</StackPanel> <Style Selector="Button.primary">
<Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource DeepBrush}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
</Window.Styles>
<CheckBox Grid.Row="2" <Border Background="{DynamicResource SurfaceBrush}"
Content="Remove worktree after merge" BorderBrush="{DynamicResource LineBrush}"
IsChecked="{Binding RemoveWorktree}" BorderThickness="1">
IsEnabled="{Binding !IsBusy}" <Grid RowDefinitions="36,*,52">
Margin="0,0,0,8" />
<StackPanel Grid.Row="3" Orientation="Vertical" Margin="0,0,0,8"> <!-- Title bar -->
<TextBlock Text="Commit message" Margin="0,0,0,4" /> <Border Grid.Row="0"
<TextBox Text="{Binding CommitMessage}" x:Name="TitleBar"
AcceptsReturn="True" Background="{DynamicResource DeepBrush}"
TextWrapping="Wrap" BorderBrush="{DynamicResource LineBrush}"
Height="70" BorderThickness="0,0,0,1"
IsEnabled="{Binding !IsBusy}" /> PointerPressed="TitleBar_PointerPressed">
</StackPanel> <Grid ColumnDefinitions="*,Auto" Margin="14,0">
<TextBlock Text="MERGE WORKTREE"
FontFamily="{DynamicResource MonoFont}"
FontSize="11"
LetterSpacing="1.4"
Foreground="{DynamicResource TextBrush}"
VerticalAlignment="Center"/>
<Button Grid.Column="1"
Classes="icon-btn"
Content="✕"
FontSize="12"
Command="{Binding CancelCommand}"
VerticalAlignment="Center"/>
</Grid>
</Border>
<TextBlock Grid.Row="4" <!-- Body -->
Text="{Binding ErrorMessage}" <ScrollViewer Grid.Row="1" Padding="20,16">
Foreground="IndianRed" <StackPanel Spacing="12">
TextWrapping="Wrap"
IsVisible="{Binding ErrorMessage, Converter={x:Static ObjectConverters.IsNotNull}}"
Margin="0,0,0,8" />
<Border Grid.Row="5" <TextBlock Text="{Binding TaskTitle, StringFormat='Merging: {0}'}"
BorderBrush="IndianRed" FontWeight="SemiBold"
BorderThickness="1" Foreground="{DynamicResource TextBrush}" />
Padding="8"
IsVisible="{Binding HasConflict}">
<StackPanel>
<TextBlock Text="Conflicted files:" FontWeight="SemiBold" Margin="0,0,0,4" />
<ItemsControl ItemsSource="{Binding ConflictFiles}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
<StackPanel Grid.Row="6" Orientation="Horizontal" <StackPanel Spacing="4">
HorizontalAlignment="Right" Margin="0,12,0,0"> <TextBlock Classes="field-label" Text="Target branch"/>
<TextBlock Text="{Binding SuccessMessage}" <ComboBox ItemsSource="{Binding Branches}"
Foreground="SeaGreen" SelectedItem="{Binding SelectedBranch}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Margin="0,0,12,0" IsEnabled="{Binding !IsBusy}" />
IsVisible="{Binding SuccessMessage, Converter={x:Static ObjectConverters.IsNotNull}}" /> </StackPanel>
<Button Content="Cancel"
Command="{Binding CancelCommand}"
Margin="0,0,8,0" />
<Button Content="Merge"
Command="{Binding SubmitCommand}"
IsDefault="True"
Classes="accent" />
</StackPanel>
</Grid> <CheckBox Content="Remove worktree after merge"
IsChecked="{Binding RemoveWorktree}"
IsEnabled="{Binding !IsBusy}" />
<StackPanel Spacing="4">
<TextBlock Classes="field-label" Text="Commit message"/>
<TextBox Text="{Binding CommitMessage}"
AcceptsReturn="True"
TextWrapping="Wrap"
Height="70"
IsEnabled="{Binding !IsBusy}" />
</StackPanel>
<TextBlock Text="{Binding ErrorMessage}"
Foreground="{DynamicResource BloodBrush}"
TextWrapping="Wrap"
IsVisible="{Binding ErrorMessage, Converter={x:Static ObjectConverters.IsNotNull}}" />
<Border BorderBrush="{DynamicResource BloodBrush}"
BorderThickness="1"
CornerRadius="6"
Padding="12,10"
IsVisible="{Binding HasConflict}">
<StackPanel Spacing="4">
<TextBlock Text="Conflicted files:"
FontWeight="SemiBold"
Foreground="{DynamicResource TextBrush}" />
<ItemsControl ItemsSource="{Binding ConflictFiles}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
FontFamily="{DynamicResource MonoFont}"
FontSize="11"
Foreground="{DynamicResource TextDimBrush}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
<TextBlock Text="{Binding SuccessMessage}"
Foreground="{DynamicResource MossBrightBrush}"
IsVisible="{Binding SuccessMessage, Converter={x:Static ObjectConverters.IsNotNull}}" />
</StackPanel>
</ScrollViewer>
<!-- Footer -->
<Border Grid.Row="2"
Background="{DynamicResource DeepBrush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,1,0,0">
<StackPanel Orientation="Horizontal" Spacing="8"
HorizontalAlignment="Right" VerticalAlignment="Center"
Margin="16,0">
<Button Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
<Button Content="Merge" Classes="primary"
Command="{Binding SubmitCommand}"
IsDefault="True" MinWidth="90"/>
</StackPanel>
</Border>
</Grid>
</Border>
</Window> </Window>

View File

@@ -1,4 +1,5 @@
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Input;
using ClaudeDo.Ui.ViewModels.Modals; using ClaudeDo.Ui.ViewModels.Modals;
namespace ClaudeDo.Ui.Views.Modals; namespace ClaudeDo.Ui.Views.Modals;
@@ -16,4 +17,10 @@ public partial class MergeModalView : Window
} }
}; };
} }
private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
{
if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
BeginMoveDrag(e);
}
} }