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

feat(details): segmented Description/Steps/Files header

Browse Source 
Replace the static DETAILS label and its dead space with a segment switcher; the card body now shows one section at a time. Step/file counts sit in the tab labels, the edit/preview toggle is scoped to Description, and drag-and-drop or add jumps to the Files tab. Tab labels localized (en/de).
This commit is contained in:
Mika Kuns
2026-06-23 08:34:03 +02:00
parent 637886f33a
commit 9301bbc81a
4 changed files with 171 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/ClaudeDo.Localization/locales/de.json
View File

@@ -192,6 +192,11 @@
"overLimitError": "Konnte {0} nicht hinzufügen: {1}",
"invalidNameError": "Konnte {0} nicht hinzufügen: {1}",
"selectIdleTask": "Zuerst eine inaktive Aufgabe auswählen"
},
"sections": {
"description": "Beschreibung",
"steps": "Schritte",
"files": "Dateien"
}
},
"agent": {

5
src/ClaudeDo.Localization/locales/en.json
View File

@@ -192,6 +192,11 @@
"overLimitError": "Could not add {0}: {1}",
"invalidNameError": "Could not add {0}: {1}",
"selectIdleTask": "Select an idle task first"
},
"sections": {
"description": "Description",
"steps": "Steps",
"files": "Files"
}
},
"agent": {

27
src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
View File

@@ -117,23 +117,30 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase, IDisposable
[RelayCommand]
private void ToggleDescriptionExpanded() => IsDescriptionExpanded = !IsDescriptionExpanded;
[ObservableProperty] private bool _isStepsExpanded;
// Which section of the details card is shown (header acts as a segment switcher).
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(IsDescriptionSection))]
[NotifyPropertyChangedFor(nameof(IsStepsSection))]
[NotifyPropertyChangedFor(nameof(IsFilesSection))]
private string _detailSection = "description";
public bool IsDescriptionSection => DetailSection == "description";
public bool IsStepsSection => DetailSection == "steps";
public bool IsFilesSection => DetailSection == "files";
[RelayCommand]
private void ToggleStepsExpanded() => IsStepsExpanded = !IsStepsExpanded;
private void SelectDetailSection(string? section) => DetailSection = section ?? "description";
public int TotalStepCount => Subtasks.Count;
public int OpenStepCount => Subtasks.Count(s => !s.Done);
public string StepsSummary =>
TotalStepCount == 0 ? "no steps yet"
: OpenStepCount == 0 ? $"all done · {TotalStepCount} total"
: $"{OpenStepCount} open · {TotalStepCount} total";
public int DoneStepCount => Subtasks.Count(s => s.Done);
public string StepsBadge => TotalStepCount > 0 ? $"{DoneStepCount}/{TotalStepCount}" : "";
public string FilesBadge => Attachments.Count > 0 ? Attachments.Count.ToString() : "";
private void NotifyStepsChanged()
{
OnPropertyChanged(nameof(TotalStepCount));
OnPropertyChanged(nameof(OpenStepCount));
OnPropertyChanged(nameof(StepsSummary));
OnPropertyChanged(nameof(DoneStepCount));
OnPropertyChanged(nameof(StepsBadge));
OnPropertyChanged(nameof(ComposedPreview));
}
@@ -425,6 +432,7 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase, IDisposable
Notes = new NotesEditorViewModel(_notesApi);
Subtasks.CollectionChanged += (_, _) => NotifyStepsChanged();
Subtasks.CollectionChanged += (_, _) => Merge.SyncChildOutcomes(HasChildOutcomes, Subtasks.Count);
Attachments.CollectionChanged += (_, _) => OnPropertyChanged(nameof(FilesBadge));
AgentSettings.PropertyChanged += (_, e) =>
{
@@ -1233,6 +1241,7 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase, IDisposable
public async System.Threading.Tasks.Task AddFilesAsync(IReadOnlyList<(string FileName, Stream Content)> files)
{
DetailSection = "files";
if (Task is null || Task.IsRunning)
{
DropStatus = Loc.T("details.attachments.selectIdleTask");

264
src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml
View File

@@ -6,17 +6,70 @@
x:Class="ClaudeDo.Ui.Views.Islands.Detail.DescriptionStepsCard"
x:DataType="vm:DetailsIslandViewModel">
<UserControl.Styles>
<!-- Segment switcher in the card header (mirrors the WorkConsole tab look) -->
<Style Selector="Button.seg-btn">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="8,3" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
<Setter Property="Cursor" Value="Hand" />
</Style>
<Style Selector="Button.seg-btn:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<Style Selector="Button.seg-btn.active /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource AccentBrush}" />
</Style>
<Style Selector="TextBlock.seg-count">
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
</Style>
</UserControl.Styles>
<Border Classes="island"
Background="{DynamicResource Surface2Brush}"
BorderBrush="{DynamicResource LineBrush}">
<DockPanel>
<!-- Header: DETAILS · copy · preview/edit -->
<!-- Header: segment switcher (Description · Steps · Files) + copy + edit -->
<Border DockPanel.Dock="Top" Classes="island-header">
<Grid ColumnDefinitions="Auto,*,Auto,Auto" VerticalAlignment="Center">
<TextBlock Grid.Column="0" Classes="section-label" Text="DETAILS"
VerticalAlignment="Center"/>
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="2">
<Button Classes="seg-btn"
Classes.active="{Binding IsDescriptionSection}"
Command="{Binding SelectDetailSectionCommand}"
CommandParameter="description"
Content="{loc:Tr details.sections.description}"/>
<Button Classes="seg-btn"
Classes.active="{Binding IsStepsSection}"
Command="{Binding SelectDetailSectionCommand}"
CommandParameter="steps">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock Text="{loc:Tr details.sections.steps}" VerticalAlignment="Center"/>
<TextBlock Classes="seg-count" Text="{Binding StepsBadge}"
VerticalAlignment="Center"
IsVisible="{Binding StepsBadge, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
</StackPanel>
</Button>
<Button Classes="seg-btn"
Classes.active="{Binding IsFilesSection}"
Command="{Binding SelectDetailSectionCommand}"
CommandParameter="files">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock Text="{loc:Tr details.sections.files}" VerticalAlignment="Center"/>
<TextBlock Classes="seg-count" Text="{Binding FilesBadge}"
VerticalAlignment="Center"
IsVisible="{Binding FilesBadge, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
</StackPanel>
</Button>
</StackPanel>
<!-- Copy formatted -->
<Button Grid.Column="2"
@@ -27,10 +80,11 @@
<PathIcon Data="{StaticResource Icon.Copy}" Width="11" Height="11"/>
</Button>
<!-- Preview/Edit toggle -->
<!-- Preview/Edit toggle (Description section only) -->
<Button Grid.Column="3"
Classes="btn"
Padding="8,3"
IsVisible="{Binding IsDescriptionSection}"
ToolTip.Tip="{loc:Tr details.toggleEditPreviewTip}"
Command="{Binding ToggleEditDescriptionCommand}">
<Panel>
@@ -42,132 +96,101 @@
</Grid>
</Border>
<!-- Body (scrolls inside the card so the card fills its row to the divider) -->
<!-- Body: only the active section is shown -->
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Margin="14" Spacing="10">
<Panel Margin="14">
<!-- Description (always visible) -->
<Panel>
<!-- Edit mode: raw TextBox -->
<TextBox Text="{Binding EditableDescription, Mode=TwoWay}"
AcceptsReturn="True"
TextWrapping="Wrap"
MinHeight="80"
MaxHeight="320"
Padding="8"
FontFamily="{DynamicResource MonoFont}"
FontSize="{StaticResource FontSizeBody}"
Background="{DynamicResource Surface3Brush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1"
CornerRadius="8"
IsVisible="{Binding IsEditingDescription}"/>
<!-- Preview mode: rendered composed text (title + description + open steps) -->
<ctl:MarkdownView Markdown="{Binding ComposedPreview}"
IsVisible="{Binding !IsEditingDescription}"/>
</Panel>
<!-- Description -->
<Panel IsVisible="{Binding IsDescriptionSection}">
<!-- Edit mode: raw TextBox -->
<TextBox Text="{Binding EditableDescription, Mode=TwoWay}"
AcceptsReturn="True"
TextWrapping="Wrap"
MinHeight="80"
MaxHeight="320"
Padding="8"
FontFamily="{DynamicResource MonoFont}"
FontSize="{StaticResource FontSizeBody}"
Background="{DynamicResource Surface3Brush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1"
CornerRadius="8"
IsVisible="{Binding IsEditingDescription}"/>
<!-- Preview mode: rendered composed text (title + description + open steps) -->
<ctl:MarkdownView Markdown="{Binding ComposedPreview}"
IsVisible="{Binding !IsEditingDescription}"/>
</Panel>
<!-- Steps: always-visible summary strip; expand to manage -->
<Border BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,1,0,0"
Padding="0,8,0,0">
<StackPanel Spacing="6">
<!-- Steps -->
<StackPanel IsVisible="{Binding IsStepsSection}" Spacing="6">
<TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
PlaceholderText="Add step…"
Padding="8"
Background="{DynamicResource Surface3Brush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1"
CornerRadius="8">
<TextBox.KeyBindings>
<KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
</TextBox.KeyBindings>
</TextBox>
<!-- Summary header (click to expand/collapse) -->
<Button Classes="flat" Cursor="Hand"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Command="{Binding ToggleStepsExpandedCommand}">
<Grid ColumnDefinitions="Auto,Auto,*,Auto">
<Panel Grid.Column="0" Width="12" Margin="0,0,6,0" VerticalAlignment="Center">
<TextBlock Classes="meta" Text="▸" IsVisible="{Binding !IsStepsExpanded}"/>
<TextBlock Classes="meta" Text="▾" IsVisible="{Binding IsStepsExpanded}"/>
</Panel>
<TextBlock Grid.Column="1" Classes="section-label" Text="STEPS"
VerticalAlignment="Center"/>
<TextBlock Grid.Column="3" Classes="meta" Text="{Binding StepsSummary}"
Foreground="{DynamicResource TextMuteBrush}"
VerticalAlignment="Center"/>
</Grid>
</Button>
<!-- Subtask rows -->
<ItemsControl ItemsSource="{Binding Subtasks}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="vm:SubtaskRowViewModel">
<Border Classes="subtask-row" Classes.done="{Binding Done}">
<Grid ColumnDefinitions="Auto,*">
<!-- Expanded: add-step input + step rows -->
<StackPanel IsVisible="{Binding IsStepsExpanded}" Spacing="6">
<TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
PlaceholderText="Add step…"
Padding="8"
Background="{DynamicResource Surface3Brush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1"
CornerRadius="8">
<TextBox.KeyBindings>
<KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
</TextBox.KeyBindings>
</TextBox>
<!-- Check circle -->
<Button Grid.Column="0"
Classes="flat"
Padding="0"
Margin="0,0,8,0"
VerticalAlignment="Center"
Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).ToggleSubtaskDoneCommand}"
CommandParameter="{Binding}">
<Ellipse Classes="task-check"
Classes.done="{Binding Done}"
Width="16" Height="16"
Cursor="Hand"/>
</Button>
<!-- Subtask rows -->
<ItemsControl ItemsSource="{Binding Subtasks}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="vm:SubtaskRowViewModel">
<Border Classes="subtask-row" Classes.done="{Binding Done}">
<Grid ColumnDefinitions="Auto,*">
<!-- Check circle -->
<Button Grid.Column="0"
Classes="flat"
Padding="0"
Margin="0,0,8,0"
VerticalAlignment="Center"
Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).ToggleSubtaskDoneCommand}"
CommandParameter="{Binding}">
<Ellipse Classes="task-check"
Classes.done="{Binding Done}"
Width="16" Height="16"
Cursor="Hand"/>
</Button>
<!-- Title / edit -->
<Panel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Classes="subtask-title"
Text="{Binding Title}"
IsVisible="{Binding !IsEditing}"
<!-- Title / edit -->
<Panel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Classes="subtask-title"
Text="{Binding Title}"
IsVisible="{Binding !IsEditing}"
FontSize="{StaticResource FontSizeBody}"
Foreground="{DynamicResource TextDimBrush}"
VerticalAlignment="Center"
TextWrapping="Wrap"
Cursor="Ibeam"
Tapped="OnSubtaskTitleTapped"/>
<TextBox Classes="subtask-edit"
Text="{Binding Title, Mode=TwoWay}"
IsVisible="{Binding IsEditing}"
FontSize="{StaticResource FontSizeBody}"
Foreground="{DynamicResource TextDimBrush}"
VerticalAlignment="Center"
AcceptsReturn="False"
TextWrapping="Wrap"
Cursor="Ibeam"
Tapped="OnSubtaskTitleTapped"/>
<TextBox Classes="subtask-edit"
Text="{Binding Title, Mode=TwoWay}"
IsVisible="{Binding IsEditing}"
FontSize="{StaticResource FontSizeBody}"
AcceptsReturn="False"
TextWrapping="Wrap"
LostFocus="OnSubtaskEditLostFocus">
<TextBox.KeyBindings>
<KeyBinding Gesture="Enter"
Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).CommitSubtaskEditCommand}"
CommandParameter="{Binding}"/>
</TextBox.KeyBindings>
</TextBox>
</Panel>
LostFocus="OnSubtaskEditLostFocus">
<TextBox.KeyBindings>
<KeyBinding Gesture="Enter"
Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).CommitSubtaskEditCommand}"
CommandParameter="{Binding}"/>
</TextBox.KeyBindings>
</TextBox>
</Panel>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
<!-- Attachments section -->
<Border BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,1,0,0"
Padding="0,8,0,0">
<StackPanel Spacing="6">
<TextBlock Classes="section-label" Text="{loc:Tr details.attachments.sectionLabel}"/>
<!-- Files -->
<StackPanel IsVisible="{Binding IsFilesSection}" Spacing="6">
<!-- Attachment rows -->
<ItemsControl ItemsSource="{Binding Attachments}">
<ItemsControl.ItemTemplate>
@@ -211,9 +234,8 @@
Foreground="{DynamicResource TextMuteBrush}"
TextWrapping="Wrap"/>
</StackPanel>
</Border>
</StackPanel>
</Panel>
</ScrollViewer>
</DockPanel>
</Border>