feat(ui): make sidebar folder hierarchy readable

Lists default to the Text icon instead of the folder icon, rows align
across depths with a guide line per open folder, folder names are
semibold, folder counts only show while collapsed and zero counts hide.
This commit is contained in:
mika kuns
2026-09-30 08:21:34 +02:00
parent 05deda8343
commit 75b78cb2c0
6 changed files with 68 additions and 22 deletions
@@ -16,9 +16,16 @@ public sealed partial class ListFolderNavItemViewModel : ViewModelBase
public string? ParentFolderId { get; set; }
[ObservableProperty] private string _name = "";
[ObservableProperty] private string _iconKey = "Folder";
[ObservableProperty] private bool _isCollapsed;
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(ShowCount))]
private bool _isCollapsed;
// Sum of the descendant lists' counts, recursive — a collapsed folder still shows what's inside it.
[ObservableProperty] private int _count;
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(ShowCount))]
private int _count;
/// <summary>Badge only while collapsed — expanded, the children show their own counts.</summary>
public bool ShowCount => IsCollapsed && Count > 0;
// Set while a dragged list row hovers over the middle of this folder header (move-into-folder).
[ObservableProperty] private bool _isDropTarget;
// Insert-position hints for a drop next to the folder instead of into it. Drawn around the
@@ -8,7 +8,12 @@ public sealed partial class ListNavItemViewModel : ViewModelBase
public required string Id { get; init; }
public required ListKind Kind { get; init; }
[ObservableProperty] private string _name = "";
[ObservableProperty] private int _count;
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(HasCount))]
private int _count;
/// <summary>Hides a "0" badge — an empty list reads as noise next to the real counts.</summary>
public bool HasCount => Count > 0;
[ObservableProperty] private bool _isActive;
[ObservableProperty] private string? _workingDir;
[ObservableProperty] private string _defaultCommitType = CommitTypeRegistry.DefaultType;
@@ -30,6 +30,9 @@ public sealed partial class ListsIslandViewModel : ViewModelBase, IDisposable
/// <summary>Icon key a folder falls back to when it has none of its own.</summary>
public const string ListFolderIcon = "Folder";
/// <summary>Icon key a list falls back to — deliberately not the folder icon, so the two stay distinguishable.</summary>
public const string ListIcon = ListSettingsModalViewModel.DefaultIcon;
private readonly IDbContextFactory<ClaudeDoDbContext> _dbFactory;
private readonly IServiceProvider? _services;
private readonly IWorkerClient? _worker;
@@ -368,7 +371,7 @@ public sealed partial class ListsIslandViewModel : ViewModelBase, IDisposable
Id = $"user:{l.Id}",
Name = l.Name,
Kind = ListKind.User,
IconKey = l.Icon ?? "Folder",
IconKey = l.Icon ?? ListIcon,
WorkingDir = l.WorkingDir,
DefaultCommitType = l.DefaultCommitType,
IsManual = l.IsManual,
@@ -473,7 +476,7 @@ public sealed partial class ListsIslandViewModel : ViewModelBase, IDisposable
Id = $"user:{entity.Id}",
Name = entity.Name,
Kind = ListKind.User,
IconKey = "Folder",
IconKey = ListIcon,
WorkingDir = entity.WorkingDir,
DefaultCommitType = entity.DefaultCommitType,
};
@@ -840,7 +843,7 @@ public sealed partial class ListsIslandViewModel : ViewModelBase, IDisposable
row.DefaultCommitType = entity.DefaultCommitType;
row.IsManual = entity.IsManual;
row.FindingsTracked = entity.FindingsTracked;
row.IconKey = entity.Icon ?? "Folder";
row.IconKey = entity.Icon ?? ListIcon;
row.HasTicketProject = hasTicketProject;
RecomputeHasNoLinkedRepo();
}
@@ -886,7 +889,7 @@ public sealed partial class ListsIslandViewModel : ViewModelBase, IDisposable
Id = $"user:{entity.Id}",
Name = entity.Name,
Kind = ListKind.User,
IconKey = entity.Icon ?? "Folder",
IconKey = entity.Icon ?? ListIcon,
WorkingDir = entity.WorkingDir,
DefaultCommitType = entity.DefaultCommitType,
IsManual = entity.IsManual,
@@ -111,7 +111,10 @@ public sealed partial class ListSettingsModalViewModel : ViewModelBase
public ObservableCollection<string> CommitTypeOptions { get; } = new(CommitTypeRegistry.Types);
public const string DefaultIcon = "Folder";
public const string DefaultIcon = "Text";
/// <summary>Default icon for folders, kept apart from <see cref="DefaultIcon"/> so lists never look like folders.</summary>
public const string DefaultFolderIcon = "Folder";
// Curated subset of the Icon.* geometry library in IslandStyles.axaml — window chrome and
// pure stroke icons (PathIcon fills, so those render invisible) are deliberately left out.
@@ -171,7 +174,7 @@ public sealed partial class ListSettingsModalViewModel : ViewModelBase
IsFolder = true;
CanToggleFolder = false;
Name = name;
Icon = IconOptions.Contains(icon) ? icon! : DefaultIcon;
Icon = IconOptions.Contains(icon) ? icon! : DefaultFolderIcon;
}
public async Task LoadAsync(
@@ -261,6 +264,13 @@ public sealed partial class ListSettingsModalViewModel : ViewModelBase
// A manual list without a WorkingDir is untouched (empty is always valid) — this only fires
// for the "picked a folder that turns out not to be a repo" case the audit found: it would
// otherwise only surface as a Failed task the first time the worker tries to use it.
// The create-flow toggle swaps the untouched default so a new folder doesn't get the list icon.
partial void OnIsFolderChanged(bool value)
{
if (Icon == (value ? DefaultIcon : DefaultFolderIcon))
Icon = value ? DefaultFolderIcon : DefaultIcon;
}
partial void OnWorkingDirChanged(string value)
{
if (string.IsNullOrWhiteSpace(value)) { WorkingDirWarning = ""; return; }
@@ -57,9 +57,11 @@
CommandParameter="{Binding}"/>
</ContextMenu>
</Border.ContextMenu>
<Grid ColumnDefinitions="20,*,Auto">
<!-- Empty leading column = the folder header's chevron slot, so list and folder icons
at the same depth line up. -->
<Grid ColumnDefinitions="12,20,*,Auto">
<!-- Left accent bar for active state -->
<Border Grid.Column="0" Grid.ColumnSpan="3"
<Border Grid.Column="0" Grid.ColumnSpan="4"
Background="Transparent"
CornerRadius="8" IsHitTestVisible="False"
IsVisible="{Binding IsActive}">
@@ -70,18 +72,18 @@
Margin="-8,0,0,0"/>
</Border>
<!-- Icon (list-settings → Icon tab; "Folder" when unset) -->
<PathIcon Grid.Column="0" Classes="list-icon"
<PathIcon Grid.Column="1" Classes="list-icon"
Width="14" Height="14"
Data="{Binding IconKey, Converter={StaticResource IconKey}}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!-- Name -->
<TextBlock Grid.Column="1" Classes="list-label"
Text="{Binding Name}"
<TextBlock Grid.Column="2" Classes="list-label"
Text="{Binding Name}" ToolTip.Tip="{Binding Name}"
VerticalAlignment="Center" Margin="8,0"
Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
<!-- Count -->
<TextBlock Grid.Column="2" Classes="list-count"
Text="{Binding Count}"/>
<TextBlock Grid.Column="3" Classes="list-count"
Text="{Binding Count}" IsVisible="{Binding HasCount}"/>
</Grid>
</Border>
@@ -131,17 +133,21 @@
Data="{Binding IconKey, Converter={StaticResource IconKey}}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.Column="2" Classes="list-label"
Text="{Binding Name}"
VerticalAlignment="Center" Margin="8,0"
Text="{Binding Name}" ToolTip.Tip="{Binding Name}"
VerticalAlignment="Center" Margin="8,0" FontWeight="SemiBold"
Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
<TextBlock Grid.Column="3" Classes="list-count"
Text="{Binding Count}"/>
Text="{Binding Count}" IsVisible="{Binding ShowCount}"/>
</Grid>
</Border>
<ItemsControl ItemsSource="{Binding Children}"
IsVisible="{Binding !IsCollapsed}"
Margin="14,0,0,0"/>
<!-- Guide line drops from under the folder icon's centre (padding 10 + chevron 12 + half
of the 20px icon slot); children indent one icon slot past it. -->
<Panel IsVisible="{Binding !IsCollapsed}">
<Border Width="1" HorizontalAlignment="Left" Margin="31,0,0,4"
Background="{DynamicResource LineBrush}" IsHitTestVisible="False"/>
<ItemsControl ItemsSource="{Binding Children}" Margin="20,0,0,0"/>
</Panel>
</StackPanel>
<Border Grid.Row="2" Height="2" VerticalAlignment="Center" Margin="4,0"