feat(ui): collapsible folders for the list sidebar
Folders render above the top-level lists, each with its own collapsible children; tapping a folder header folds it instead of selecting it. Lists move in by dragging onto a folder header (or onto a row inside it) and out by dropping between top-level rows or via the context menu. Creating a folder is a toggle in the New-list modal, not a third sidebar button: it reduces the modal to name + icon and writes a folder row instead of the list row the create flow pre-created.
This commit is contained in:
@@ -5,6 +5,91 @@
|
||||
xmlns:loc="using:ClaudeDo.Ui.Localization"
|
||||
x:Class="ClaudeDo.Ui.Views.Islands.ListsIslandView"
|
||||
x:DataType="vm:ListsIslandViewModel">
|
||||
<UserControl.Resources>
|
||||
<!-- One user-list row. Shared by the top-level list and by each folder's children, so the
|
||||
row (context menu, drag handlers, drop indicators) exists once. -->
|
||||
<DataTemplate x:Key="UserListRow" DataType="vm:ListNavItemViewModel">
|
||||
<Grid RowDefinitions="Auto,Auto,Auto">
|
||||
|
||||
<!-- Above-row drop indicator -->
|
||||
<Border Grid.Row="0" Height="2" VerticalAlignment="Center" Margin="4,0"
|
||||
Background="{DynamicResource MossBrush}" CornerRadius="1"
|
||||
IsVisible="{Binding DropHintAbove}"/>
|
||||
|
||||
<Border Grid.Row="1" Classes="list-item" Classes.active="{Binding IsActive}"
|
||||
Classes.drop-target="{Binding IsTaskDropTarget}"
|
||||
Tapped="OnItemTapped"
|
||||
DragDrop.AllowDrop="True"
|
||||
DragDrop.DragOver="OnListDragOver"
|
||||
DragDrop.Drop="OnListDrop">
|
||||
<Border.ContextMenu>
|
||||
<ContextMenu>
|
||||
<MenuItem Header="{loc:Tr lists.contextWorktrees}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenWorktreesOverviewCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<Separator IsVisible="{Binding WorkingDir, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextOpenExplorer}"
|
||||
IsVisible="{Binding WorkingDir, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenInExplorerCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextOpenFindings}"
|
||||
IsVisible="{Binding WorkingDir, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenFindingsCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextOpenTerminal}"
|
||||
IsVisible="{Binding WorkingDir, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenInTerminalCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextImportTickets}"
|
||||
IsVisible="{Binding HasTicketProject}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).ImportTicketsCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<Separator/>
|
||||
<MenuItem Header="{loc:Tr lists.contextRemoveFromFolder}"
|
||||
IsVisible="{Binding FolderId, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).RemoveFromFolderCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextSettings}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenListSettingsCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
</ContextMenu>
|
||||
</Border.ContextMenu>
|
||||
<Grid ColumnDefinitions="20,*,Auto">
|
||||
<!-- Left accent bar for active state -->
|
||||
<Border Grid.Column="0" Grid.ColumnSpan="3"
|
||||
Background="Transparent"
|
||||
CornerRadius="8" IsHitTestVisible="False"
|
||||
IsVisible="{Binding IsActive}">
|
||||
<Border Width="2" Height="16"
|
||||
Background="{DynamicResource AccentBrush}"
|
||||
CornerRadius="1"
|
||||
HorizontalAlignment="Left" VerticalAlignment="Center"
|
||||
Margin="-8,0,0,0"/>
|
||||
</Border>
|
||||
<!-- Icon (list-settings → Icon tab; "Folder" when unset) -->
|
||||
<PathIcon Grid.Column="0" 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}"
|
||||
VerticalAlignment="Center" Margin="8,0"
|
||||
Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
|
||||
<!-- Count -->
|
||||
<TextBlock Grid.Column="2" Classes="list-count"
|
||||
Text="{Binding Count}"/>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- Below-row drop indicator (last item only) -->
|
||||
<Border Grid.Row="2" Height="2" VerticalAlignment="Center" Margin="4,0"
|
||||
Background="{DynamicResource MossBrush}" CornerRadius="1"
|
||||
IsVisible="{Binding DropHintBelow}"/>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</UserControl.Resources>
|
||||
|
||||
<DockPanel LastChildFill="True">
|
||||
|
||||
<!-- ── Header ── -->
|
||||
@@ -133,87 +218,61 @@
|
||||
<PathIcon Data="{StaticResource Icon.Folder}" Width="14" Height="14"/>
|
||||
</Button>
|
||||
</Grid>
|
||||
<ItemsControl ItemsSource="{Binding UserLists}">
|
||||
<!-- Folders first, each with its own (collapsible) child lists, then the top-level lists.
|
||||
Folders are never selectable — tapping the header folds it. -->
|
||||
<ItemsControl ItemsSource="{Binding Folders}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:ListNavItemViewModel">
|
||||
<Grid RowDefinitions="Auto,Auto,Auto">
|
||||
<DataTemplate DataType="vm:ListFolderNavItemViewModel">
|
||||
<StackPanel>
|
||||
<Border Classes="list-item"
|
||||
Classes.drop-target="{Binding IsDropTarget}"
|
||||
Tapped="OnFolderTapped"
|
||||
DragDrop.AllowDrop="True"
|
||||
DragDrop.DragOver="OnFolderDragOver"
|
||||
DragDrop.Drop="OnFolderDrop">
|
||||
<Border.ContextMenu>
|
||||
<ContextMenu>
|
||||
<MenuItem Header="{loc:Tr lists.contextFolderSettings}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenFolderSettingsCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
</ContextMenu>
|
||||
</Border.ContextMenu>
|
||||
<Grid ColumnDefinitions="12,20,*,Auto">
|
||||
<PathIcon Grid.Column="0" Classes="list-icon"
|
||||
Width="9" Height="9"
|
||||
Data="{StaticResource Icon.ChevronRight}"
|
||||
IsVisible="{Binding IsCollapsed}"
|
||||
HorizontalAlignment="Left" VerticalAlignment="Center"/>
|
||||
<PathIcon Grid.Column="0" Classes="list-icon"
|
||||
Width="9" Height="9"
|
||||
Data="{StaticResource Icon.ChevronDown}"
|
||||
IsVisible="{Binding !IsCollapsed}"
|
||||
HorizontalAlignment="Left" VerticalAlignment="Center"/>
|
||||
<PathIcon Grid.Column="1" Classes="list-icon"
|
||||
Width="14" Height="14"
|
||||
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"
|
||||
Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
|
||||
<TextBlock Grid.Column="3" Classes="list-count"
|
||||
Text="{Binding Count}"/>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- Above-row drop indicator -->
|
||||
<Border Grid.Row="0" Height="2" VerticalAlignment="Center" Margin="4,0"
|
||||
Background="{DynamicResource MossBrush}" CornerRadius="1"
|
||||
IsVisible="{Binding DropHintAbove}"/>
|
||||
|
||||
<Border Grid.Row="1" Classes="list-item" Classes.active="{Binding IsActive}"
|
||||
Classes.drop-target="{Binding IsTaskDropTarget}"
|
||||
Tapped="OnItemTapped"
|
||||
DragDrop.AllowDrop="True"
|
||||
DragDrop.DragOver="OnListDragOver"
|
||||
DragDrop.Drop="OnListDrop">
|
||||
<Border.ContextMenu>
|
||||
<ContextMenu>
|
||||
<MenuItem Header="{loc:Tr lists.contextWorktrees}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenWorktreesOverviewCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<Separator IsVisible="{Binding WorkingDir, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextOpenExplorer}"
|
||||
IsVisible="{Binding WorkingDir, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenInExplorerCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextOpenFindings}"
|
||||
IsVisible="{Binding WorkingDir, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenFindingsCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextOpenTerminal}"
|
||||
IsVisible="{Binding WorkingDir, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenInTerminalCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<MenuItem Header="{loc:Tr lists.contextImportTickets}"
|
||||
IsVisible="{Binding HasTicketProject}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).ImportTicketsCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
<Separator/>
|
||||
<MenuItem Header="{loc:Tr lists.contextSettings}"
|
||||
Command="{Binding $parent[UserControl].((vm:ListsIslandViewModel)DataContext).OpenListSettingsCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
</ContextMenu>
|
||||
</Border.ContextMenu>
|
||||
<Grid ColumnDefinitions="20,*,Auto">
|
||||
<!-- Left accent bar for active state -->
|
||||
<Border Grid.Column="0" Grid.ColumnSpan="3"
|
||||
Background="Transparent"
|
||||
CornerRadius="8" IsHitTestVisible="False"
|
||||
IsVisible="{Binding IsActive}">
|
||||
<Border Width="2" Height="16"
|
||||
Background="{DynamicResource AccentBrush}"
|
||||
CornerRadius="1"
|
||||
HorizontalAlignment="Left" VerticalAlignment="Center"
|
||||
Margin="-8,0,0,0"/>
|
||||
</Border>
|
||||
<!-- Icon (list-settings → Icon tab; "Folder" when unset) -->
|
||||
<PathIcon Grid.Column="0" 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}"
|
||||
VerticalAlignment="Center" Margin="8,0"
|
||||
Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
|
||||
<!-- Count -->
|
||||
<TextBlock Grid.Column="2" Classes="list-count"
|
||||
Text="{Binding Count}"/>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- Below-row drop indicator (last item only) -->
|
||||
<Border Grid.Row="2" Height="2" VerticalAlignment="Center" Margin="4,0"
|
||||
Background="{DynamicResource MossBrush}" CornerRadius="1"
|
||||
IsVisible="{Binding DropHintBelow}"/>
|
||||
</Grid>
|
||||
<ItemsControl ItemsSource="{Binding Lists}"
|
||||
IsVisible="{Binding !IsCollapsed}"
|
||||
Margin="14,0,0,0"
|
||||
ItemTemplate="{StaticResource UserListRow}"/>
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
|
||||
<ItemsControl ItemsSource="{Binding RootLists}"
|
||||
ItemTemplate="{StaticResource UserListRow}"/>
|
||||
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</DockPanel>
|
||||
|
||||
@@ -69,6 +69,60 @@ public partial class ListsIslandView : UserControl
|
||||
}
|
||||
}
|
||||
|
||||
private void OnFolderTapped(object? sender, RoutedEventArgs e)
|
||||
{
|
||||
if (sender is Border { DataContext: ListFolderNavItemViewModel folder }
|
||||
&& DataContext is ListsIslandViewModel vm)
|
||||
vm.ToggleFolderCommand.Execute(folder);
|
||||
}
|
||||
|
||||
// Dropping onto the folder *header* appends the list to that folder — the only route into a
|
||||
// collapsed or empty folder, where there's no child row to drop next to.
|
||||
private void OnFolderDragOver(object? sender, DragEventArgs e)
|
||||
{
|
||||
if (DataContext is not ListsIslandViewModel vm) { e.DragEffects = DragDropEffects.None; return; }
|
||||
if ((!e.DataTransfer?.Contains(ListRowFormat) ?? true)
|
||||
|| sender is not Border { DataContext: ListFolderNavItemViewModel folder })
|
||||
{
|
||||
e.DragEffects = DragDropEffects.None;
|
||||
vm.ClearDropHints();
|
||||
return;
|
||||
}
|
||||
|
||||
var sourceId = e.DataTransfer?.TryGetValue(ListRowFormat);
|
||||
var source = sourceId is null ? null : vm.UserLists.FirstOrDefault(r => r.Id == sourceId);
|
||||
if (source is null || source.FolderId == folder.Id)
|
||||
{
|
||||
e.DragEffects = DragDropEffects.None;
|
||||
vm.ClearDropHints();
|
||||
return;
|
||||
}
|
||||
|
||||
vm.SetFolderDropTarget(folder);
|
||||
e.DragEffects = DragDropEffects.Move;
|
||||
}
|
||||
|
||||
private async void OnFolderDrop(object? sender, DragEventArgs e)
|
||||
{
|
||||
if (DataContext is not ListsIslandViewModel vm) return;
|
||||
try
|
||||
{
|
||||
if (sender is not Border { DataContext: ListFolderNavItemViewModel folder }) return;
|
||||
|
||||
var sourceId = e.DataTransfer?.TryGetValue(ListRowFormat);
|
||||
var source = sourceId is null ? null : vm.UserLists.FirstOrDefault(r => r.Id == sourceId);
|
||||
if (source is null) return;
|
||||
|
||||
vm.ClearDropHints();
|
||||
await vm.MoveToFolderAsync(source, folder);
|
||||
}
|
||||
catch
|
||||
{
|
||||
vm.ClearDropHints();
|
||||
throw;
|
||||
}
|
||||
}
|
||||
|
||||
private void OnListDragOver(object? sender, DragEventArgs e)
|
||||
{
|
||||
if (DataContext is not ListsIslandViewModel vm) { e.DragEffects = DragDropEffects.None; return; }
|
||||
@@ -150,11 +204,14 @@ public partial class ListsIslandView : UserControl
|
||||
return null;
|
||||
}
|
||||
|
||||
// Next row *within the same container* — the row below the last list of a folder belongs to
|
||||
// another folder (or to the top level), so it is not a "drop above" candidate here.
|
||||
private static ListNavItemViewModel? FindNextUserList(ListsIslandViewModel vm, ListNavItemViewModel row)
|
||||
{
|
||||
var idx = vm.UserLists.IndexOf(row);
|
||||
var container = vm.ContainerOf(row);
|
||||
var idx = container.IndexOf(row);
|
||||
if (idx < 0) return null;
|
||||
return idx + 1 < vm.UserLists.Count ? vm.UserLists[idx + 1] : null;
|
||||
return idx + 1 < container.Count ? container[idx + 1] : null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user