feat(ui): chromeless three-island shell

This commit is contained in:
mika kuns
2026-04-20 10:17:20 +02:00
parent 8909119d1b
commit 05404f46f2
9 changed files with 97 additions and 159 deletions

View File

@@ -22,7 +22,7 @@ public partial class App : Application
{
desktop.MainWindow = new MainWindow
{
DataContext = Services.GetRequiredService<MainWindowViewModel>(),
DataContext = Services.GetRequiredService<IslandsShellViewModel>(),
};
}

View File

@@ -0,0 +1,8 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
x:Class="ClaudeDo.Ui.Views.Islands.DetailsIslandView"
x:DataType="vm:DetailsIslandViewModel">
<TextBlock Margin="14" Text="Details (placeholder)"
Foreground="{DynamicResource TextDimBrush}"/>
</UserControl>

View File

@@ -0,0 +1,8 @@
using Avalonia.Controls;
namespace ClaudeDo.Ui.Views.Islands;
public partial class DetailsIslandView : UserControl
{
public DetailsIslandView() { InitializeComponent(); }
}

View File

@@ -0,0 +1,8 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
x:Class="ClaudeDo.Ui.Views.Islands.ListsIslandView"
x:DataType="vm:ListsIslandViewModel">
<TextBlock Margin="14" Text="Lists (placeholder)"
Foreground="{DynamicResource TextDimBrush}"/>
</UserControl>

View File

@@ -0,0 +1,8 @@
using Avalonia.Controls;
namespace ClaudeDo.Ui.Views.Islands;
public partial class ListsIslandView : UserControl
{
public ListsIslandView() { InitializeComponent(); }
}

View File

@@ -0,0 +1,8 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
x:Class="ClaudeDo.Ui.Views.Islands.TasksIslandView"
x:DataType="vm:TasksIslandViewModel">
<TextBlock Margin="14" Text="Tasks (placeholder)"
Foreground="{DynamicResource TextDimBrush}"/>
</UserControl>

View File

@@ -0,0 +1,8 @@
using Avalonia.Controls;
namespace ClaudeDo.Ui.Views.Islands;
public partial class TasksIslandView : UserControl
{
public TasksIslandView() { InitializeComponent(); }
}

View File

@@ -1,104 +1,42 @@
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:ClaudeDo.Ui.ViewModels"
xmlns:v="using:ClaudeDo.Ui.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="700"
xmlns:islands="using:ClaudeDo.Ui.Views.Islands"
x:Class="ClaudeDo.Ui.Views.MainWindow"
x:DataType="vm:MainWindowViewModel"
x:DataType="vm:IslandsShellViewModel"
Title="ClaudeDo"
Icon="avares://ClaudeDo.App/Assets/ClaudeTask.ico"
MinWidth="800" MinHeight="500"
KeyDown="OnGlobalKeyDown">
Width="1280" Height="820" MinWidth="780" MinHeight="600"
Background="{DynamicResource VoidBrush}"
SystemDecorations="None"
ExtendClientAreaToDecorationsHint="True"
ExtendClientAreaTitleBarHeightHint="-1">
<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="✕"/>
</StackPanel>
</Grid>
</Border>
<DockPanel Background="{StaticResource WindowBgBrush}">
<v:StatusBarView DockPanel.Dock="Bottom" DataContext="{Binding StatusBar}" />
<Grid ColumnDefinitions="1*,2*,1.5*" Margin="8,8,8,0">
<!-- Lists island -->
<Border Grid.Column="0" CornerRadius="12" Background="{StaticResource IslandBgBrush}"
MinWidth="180" 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"/>
<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>
<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>
<!-- 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>
<!-- Detail island -->
<Border Grid.Column="2" CornerRadius="12" Background="{StaticResource IslandBgBrush}"
MinWidth="280" Margin="4,0,0,8" ClipToBounds="True">
<v:TaskDetailView DataContext="{Binding TaskDetail}" />
</Border>
</Grid>
</DockPanel>
<!-- Three islands -->
<Grid Grid.Row="1" Margin="7" ColumnDefinitions="260,*,320">
<Border Grid.Column="0" Classes="island" Margin="7">
<islands:ListsIslandView DataContext="{Binding Lists}"/>
</Border>
<Border Grid.Column="1" Classes="island" Margin="7">
<islands:TasksIslandView DataContext="{Binding Tasks}"/>
</Border>
<Border Grid.Column="2" Classes="island" Margin="7"
IsVisible="{Binding ShowDetails}">
<islands:DetailsIslandView DataContext="{Binding Details}"/>
</Border>
</Grid>
</Grid>
</Window>

View File

@@ -1,75 +1,27 @@
using System;
using System.Linq;
using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Interactivity;
using Avalonia.VisualTree;
using ClaudeDo.Ui.ViewModels;
namespace ClaudeDo.Ui.Views;
public partial class MainWindow : Window
{
public MainWindow()
public MainWindow() { InitializeComponent(); }
private void OnTitleBarPressed(object? sender, PointerPressedEventArgs e)
{
InitializeComponent();
if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
BeginMoveDrag(e);
}
private void OnMinimize(object? s, Avalonia.Interactivity.RoutedEventArgs e) =>
WindowState = WindowState.Minimized;
private void OnToggleMax(object? s, Avalonia.Interactivity.RoutedEventArgs e) =>
WindowState = WindowState == WindowState.Maximized ? WindowState.Normal : WindowState.Maximized;
private void OnClose(object? s, Avalonia.Interactivity.RoutedEventArgs e) => Close();
protected override async void OnOpened(EventArgs e)
protected override void OnSizeChanged(SizeChangedEventArgs e)
{
base.OnOpened(e);
if (DataContext is MainWindowViewModel vm)
await vm.InitializeAsync();
}
private void OnGlobalKeyDown(object? sender, KeyEventArgs e)
{
if (DataContext is not MainWindowViewModel vm) return;
var ctrl = e.KeyModifiers.HasFlag(KeyModifiers.Control);
var shift = e.KeyModifiers.HasFlag(KeyModifiers.Shift);
if (ctrl && shift && e.Key == Key.N)
{
vm.AddListCommand.Execute(null);
e.Handled = true;
}
else if (ctrl && e.Key == Key.N)
{
var taskListView = this.GetVisualDescendants().OfType<TaskListView>().FirstOrDefault();
taskListView?.FocusInlineAdd();
e.Handled = true;
}
else if (ctrl && e.Key == Key.L)
{
this.FindControl<ListBox>("ListsBox")?.Focus();
e.Handled = true;
}
else if (ctrl && e.Key == Key.R)
{
if (vm.TaskList.SelectedTask is { } task)
{
task.RunNowCommand.Execute(null);
e.Handled = true;
}
}
}
private void OnListItemDoubleTapped(object? sender, TappedEventArgs e)
{
if (DataContext is MainWindowViewModel vm)
vm.EditListCommand.Execute(null);
}
private void OnListItemPointerPressed(object? sender, PointerPressedEventArgs e)
{
var props = e.GetCurrentPoint(this).Properties;
if (!props.IsRightButtonPressed) return;
if (sender is Grid { DataContext: ListItemViewModel item }
&& DataContext is MainWindowViewModel vm)
{
vm.SelectedList = item;
}
base.OnSizeChanged(e);
if (DataContext is IslandsShellViewModel vm) vm.WindowWidth = Bounds.Width;
}
}