releases/ClaudeDo
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

style(ui): polish islands and remove terminal traffic-light dots

Browse Source
This commit is contained in:
Mika Kuns
2026-04-21 15:56:07 +02:00
parent e6b37624a1
commit 0406d35b61
12 changed files with 330 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/ClaudeDo.Ui/Views/Islands/AgentStripView.axaml
View File

@@ -42,6 +42,15 @@
<PathIcon Data="{StaticResource Icon.X}" Width="12" Height="12"
Foreground="{DynamicResource BloodBrush}"/>
</Button>
<!-- Hand off button — only when idle -->
<Button Grid.Column="3"
Classes="btn accent"
Content="Hand off"
Command="{Binding RunNowCommand}"
IsVisible="{Binding !IsRunning}"
ToolTip.Tip="Hand task off to Claude"
VerticalAlignment="Center"
Padding="10,4"/>
</Grid>
<!-- Row 2: WORKTREE label + path + copy button -->
@@ -123,13 +132,14 @@
<!-- Action buttons -->
<StackPanel Orientation="Horizontal" Spacing="6" Margin="0,4,0,0">
<Button Classes="btn" Content="Open diff" Command="{Binding OpenDiffCommand}"/>
<Button Classes="btn" Content="Worktree" Command="{Binding OpenWorktreeCommand}"/>
<Button Classes="btn" ToolTip.Tip="Open in file explorer"
Command="{Binding OpenInExplorerCommand}"
Padding="8,6">
<PathIcon Data="{StaticResource Icon.ArrowOut}"
Width="12" Height="12"
Foreground="{DynamicResource TextDimBrush}"/>
<Button Classes="btn" Command="{Binding OpenWorktreeCommand}"
ToolTip.Tip="Open worktree in file explorer">
<StackPanel Orientation="Horizontal" Spacing="6" VerticalAlignment="Center">
<PathIcon Data="{StaticResource Icon.ArrowOut}"
Width="11" Height="11"
Foreground="{DynamicResource TextDimBrush}"/>
<TextBlock Text="Worktree" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</StackPanel>

114
src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml
View File

@@ -88,66 +88,70 @@
</Grid>
</Border>
<!-- ── Scrollable body ── -->
<ScrollViewer>
<StackPanel Spacing="0">
<!-- ── Main body: agent strip (auto) · terminal (flex) · steps+notes (auto/capped) ── -->
<Grid RowDefinitions="Auto,*,Auto">
<!-- Agent strip -->
<islands:AgentStripView/>
<!-- Agent strip -->
<islands:AgentStripView Grid.Row="0"/>
<!-- Session terminal -->
<islands:SessionTerminalView Height="260" Margin="0"/>
<!-- Session terminal — fills remaining vertical space -->
<islands:SessionTerminalView Grid.Row="1" MinHeight="220" Margin="0,0,0,0"/>
<!-- Subtasks section -->
<StackPanel Margin="18,12,18,0"
IsVisible="{Binding Subtasks.Count}">
<TextBlock Classes="section-label" Text="STEPS"
Margin="0,0,0,6"/>
<ItemsControl ItemsSource="{Binding Subtasks}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="vm:SubtaskRowViewModel">
<Border Classes="subtask-row"
Classes.done="{Binding Done}">
<Grid ColumnDefinitions="Auto,*">
<!-- Ellipse checkbox -->
<Ellipse Grid.Column="0"
Classes="task-check"
Classes.done="{Binding Done}"
Width="16" Height="16"
VerticalAlignment="Center"
Cursor="Hand"
Margin="0,0,8,0"/>
<TextBlock Grid.Column="1"
Classes="subtask-title"
Text="{Binding Title}"
FontSize="13"
Foreground="{DynamicResource TextDimBrush}"
<!-- Steps + Notes in a capped scroller so they never squeeze the terminal -->
<ScrollViewer Grid.Row="2" MaxHeight="240"
VerticalScrollBarVisibility="Auto">
<StackPanel Spacing="0">
<!-- Subtasks section -->
<StackPanel Margin="18,12,18,0"
IsVisible="{Binding Subtasks.Count}">
<TextBlock Classes="section-label" Text="STEPS"
Margin="0,0,0,6"/>
<ItemsControl ItemsSource="{Binding Subtasks}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="vm:SubtaskRowViewModel">
<Border Classes="subtask-row"
Classes.done="{Binding Done}">
<Grid ColumnDefinitions="Auto,*">
<Ellipse Grid.Column="0"
Classes="task-check"
Classes.done="{Binding Done}"
Width="16" Height="16"
VerticalAlignment="Center"
TextWrapping="Wrap"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Cursor="Hand"
Margin="0,0,8,0"/>
<TextBlock Grid.Column="1"
Classes="subtask-title"
Text="{Binding Title}"
FontSize="13"
Foreground="{DynamicResource TextDimBrush}"
VerticalAlignment="Center"
TextWrapping="Wrap"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!-- Notes section -->
<StackPanel Margin="18,12,18,12">
<TextBlock Classes="section-label" Text="NOTES" Margin="0,0,0,6"/>
<TextBox Text="{Binding Notes, Mode=TwoWay}"
AcceptsReturn="True"
TextWrapping="Wrap"
MinHeight="80"
Padding="12"
PlaceholderText="Notes..."
Background="{DynamicResource Surface2Brush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1"
CornerRadius="8"
LostFocus="NotesLostFocus"/>
</StackPanel>
<!-- Notes section -->
<StackPanel Margin="18,12,18,12">
<TextBlock Classes="section-label" Text="NOTES" Margin="0,0,0,6"/>
<TextBox Text="{Binding Notes, Mode=TwoWay}"
AcceptsReturn="True"
TextWrapping="Wrap"
MinHeight="80"
Padding="12"
PlaceholderText="Notes..."
Background="{DynamicResource Surface2Brush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1"
CornerRadius="8"
LostFocus="NotesLostFocus"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</StackPanel>
</ScrollViewer>
</Grid>
</DockPanel>
</UserControl>

8
src/ClaudeDo.Ui/Views/Islands/ListsIslandView.axaml
View File

@@ -15,10 +15,6 @@
<!-- ── Header ── -->
<Border DockPanel.Dock="Top" Classes="island-header">
<StackPanel Margin="14,12,14,0" Spacing="4">
<TextBlock Classes="eyebrow"
Text="NAVIGATOR"
FontFamily="{DynamicResource MonoFont}" FontSize="9"
Foreground="{DynamicResource TextFaintBrush}" LetterSpacing="1.2"/>
<TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="18"
FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
Text="Lists"/>
@@ -69,7 +65,9 @@
</TextBlock>
</StackPanel>
<!-- More button -->
<Button Grid.Column="2" Classes="icon-btn" VerticalAlignment="Center">
<Button Grid.Column="2" Classes="icon-btn" VerticalAlignment="Center"
Command="{Binding OpenSettingsCommand}"
ToolTip.Tip="Settings">
<PathIcon Data="{StaticResource Icon.MoreHorizontal}"
Width="14" Height="14"
Foreground="{DynamicResource TextMuteBrush}"/>

13
src/ClaudeDo.Ui/Views/Islands/ListsIslandView.axaml.cs
View File

@@ -1,6 +1,8 @@
using Avalonia.Controls;
using Avalonia.Interactivity;
using ClaudeDo.Ui.ViewModels.Islands;
using ClaudeDo.Ui.ViewModels.Modals;
using ClaudeDo.Ui.Views.Modals;
namespace ClaudeDo.Ui.Views.Islands;
@@ -12,7 +14,10 @@ public partial class ListsIslandView : UserControl
DataContextChanged += (_, _) =>
{
if (DataContext is ListsIslandViewModel vm)
{
vm.FocusSearchRequested += (_, _) => SearchBox.Focus();
vm.ShowSettingsModal = ShowSettingsAsync;
}
};
}
@@ -22,4 +27,12 @@ public partial class ListsIslandView : UserControl
&& DataContext is ListsIslandViewModel vm)
vm.SelectCommand.Execute(item);
}
private async System.Threading.Tasks.Task ShowSettingsAsync(SettingsModalViewModel settingsVm)
{
var owner = TopLevel.GetTopLevel(this) as Window;
if (owner == null) return;
var modal = new SettingsModalView { DataContext = settingsVm };
await modal.ShowDialog(owner);
}
}

65
src/ClaudeDo.Ui/Views/Islands/SessionTerminalView.axaml
View File

@@ -10,13 +10,6 @@
<Grid DockPanel.Dock="Top" ColumnDefinitions="Auto,*,Auto"
Background="{DynamicResource Surface2Brush}"
Height="28">
<!-- Traffic-light dots -->
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4"
VerticalAlignment="Center" Margin="10,0,0,0">
<Ellipse Classes="dot-red"/>
<Ellipse Classes="dot-yellow"/>
<Ellipse Classes="dot-green"/>
</StackPanel>
<!-- Session label -->
<TextBlock Grid.Column="1"
Text="{Binding BranchLine, StringFormat='claude-session · {0}'}"
@@ -26,36 +19,34 @@
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<!-- LIVE chip -->
<Border Grid.Column="2" Classes="live-chip"
Classes.pulsing="{Binding IsRunning}"
<Border Grid.Column="2" Classes="live-chip pulsing"
IsVisible="{Binding IsRunning}"
Margin="0,0,8,0" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center">
<Ellipse VerticalAlignment="Center"/>
<TextBlock Text="LIVE" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</Grid>
<!-- ── Prompt input (docked bottom) ── -->
<Grid DockPanel.Dock="Bottom" ColumnDefinitions="Auto,*"
Margin="0,0,0,0"
Background="{DynamicResource Surface2Brush}">
<Border Grid.ColumnSpan="2"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,1,0,0"/>
<TextBlock Grid.Column="0" Text="›"
FontFamily="{DynamicResource MonoFont}"
FontSize="11" Foreground="{DynamicResource MossBrush}"
VerticalAlignment="Center" Margin="10,0,8,0"/>
<TextBox Grid.Column="1"
Text="{Binding PromptInput, Mode=TwoWay}"
FontFamily="{DynamicResource MonoFont}" FontSize="11"
Background="Transparent" BorderThickness="0"
Padding="0,6">
<TextBox.KeyBindings>
<KeyBinding Gesture="Enter" Command="{Binding SendPromptCommand}"/>
</TextBox.KeyBindings>
</TextBox>
<!-- DONE chip -->
<Border Grid.Column="2" Classes="live-chip done"
IsVisible="{Binding IsDone}"
Margin="0,0,8,0" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center">
<Ellipse VerticalAlignment="Center" Fill="{DynamicResource MossBrush}"/>
<TextBlock Text="DONE" VerticalAlignment="Center"
Foreground="{DynamicResource MossBrush}"/>
</StackPanel>
</Border>
<!-- FAILED chip -->
<Border Grid.Column="2" Classes="live-chip failed"
IsVisible="{Binding IsFailed}"
Margin="0,0,8,0" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center">
<Ellipse VerticalAlignment="Center" Fill="{DynamicResource BloodBrush}"/>
<TextBlock Text="FAILED" VerticalAlignment="Center"
Foreground="{DynamicResource BloodBrush}"/>
</StackPanel>
</Border>
</Grid>
<!-- ── Log output ── -->
@@ -74,12 +65,12 @@
Classes="log-kind"
Tag="{Binding ClassName}"
Text="{Binding KindMarker}"/>
<!-- Message text — inherits terminal TextBlock color from parent selector -->
<TextBlock Grid.Column="2"
Text="{Binding Text}" Tag="{Binding ClassName}"
FontFamily="{DynamicResource MonoFont}" FontSize="11"
Foreground="{DynamicResource TextDimBrush}"
TextWrapping="Wrap"/>
<!-- Message text — selectable so the user can copy raw output -->
<SelectableTextBlock Grid.Column="2"
Text="{Binding Text}" Tag="{Binding ClassName}"
FontFamily="{DynamicResource MonoFont}" FontSize="11"
Foreground="{DynamicResource TextDimBrush}"
TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>

2
src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
View File

@@ -13,7 +13,7 @@
IsVisible="{Binding IsSelected}"/>
<!-- Done toggle -->
<Button Grid.Column="1" Classes="check-btn" VerticalAlignment="Top"
<Button Grid.Column="1" Classes="flat" VerticalAlignment="Top"
Margin="0,2,0,0"
Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).ToggleDoneCommand}"
CommandParameter="{Binding}">

12
src/ClaudeDo.Ui/Views/Modals/DiffModalView.axaml
View File

@@ -8,8 +8,7 @@
SystemDecorations="None"
ExtendClientAreaToDecorationsHint="True"
WindowStartupLocation="CenterOwner"
Background="Transparent"
TransparencyLevelHint="AcrylicBlur">
Background="{StaticResource SurfaceBrush}">
<Window.KeyBindings>
<KeyBinding Gesture="Escape" Command="{Binding CloseCommand}"/>
@@ -46,13 +45,10 @@
</Style>
</Window.Styles>
<!-- Outer container -->
<Border CornerRadius="{StaticResource ModalCornerRadius}"
BoxShadow="{StaticResource ModalShadow}"
Background="{StaticResource SurfaceBrush}"
<!-- Outer container — rectangular so the OS window rectangle stays filled (no black corners) -->
<Border Background="{StaticResource SurfaceBrush}"
BorderBrush="{StaticResource LineBrush}"
BorderThickness="1"
ClipToBounds="True">
BorderThickness="1">
<Grid RowDefinitions="36,*">
<!-- Title bar / drag handle -->