feat(ui): add DescriptionStepsCard detail component
Standalone UserControl combining Description + Steps into one card with a top-right toggle. Description view shows raw editor or composed MarkdownView (title + description + open steps). Steps view has an add-step input and subtask rows with inline editing and check circles. Adds Icon.Text geometry to IslandStyles for the steps→description toggle. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mika kuns
@@ -85,6 +85,9 @@
|
||||
<!-- Icon.ArrowOut — filled arrow for "open external" button -->
|
||||
<StreamGeometry x:Key="Icon.ArrowOut">M13 4 H20 V11 H18 V7.4 L11.4 14 L10 12.6 L16.6 6 H13 Z M4 6 H10 V8 H6 V18 H16 V14 H18 V20 H4 Z</StreamGeometry>
|
||||
|
||||
<!-- Icon.Text — three filled horizontal bars (paragraph / description icon) -->
|
||||
<StreamGeometry x:Key="Icon.Text">M4 6 H20 V8 H4 Z M4 11 H20 V13 H4 Z M4 16 H14 V18 H4 Z</StreamGeometry>
|
||||
|
||||
<!-- Icon.Warning — filled triangle with exclamation (roadblock badge) -->
|
||||
<StreamGeometry x:Key="Icon.Warning">F0 M12 3 L22 20 H2 Z M11 9 H13 V14 H11 Z M11 16 H13 V18 H11 Z</StreamGeometry>
|
||||
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
using System.Collections.ObjectModel;
|
||||
using System.Collections.Specialized;
|
||||
using System.ComponentModel;
|
||||
using System.Text;
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
using CommunityToolkit.Mvvm.Input;
|
||||
|
||||
namespace ClaudeDo.Ui.ViewModels.Islands.Detail;
|
||||
|
||||
public partial class SubtaskRowSampleViewModel : ObservableObject
|
||||
{
|
||||
[ObservableProperty] string _title = "";
|
||||
[ObservableProperty] bool _done;
|
||||
[ObservableProperty] bool _isEditing;
|
||||
|
||||
[RelayCommand] void ToggleDone() => Done = !Done;
|
||||
[RelayCommand] void BeginEdit() => IsEditing = true;
|
||||
[RelayCommand] void CommitEdit() => IsEditing = false;
|
||||
}
|
||||
|
||||
public partial class DescriptionStepsCardViewModel : ClaudeDo.Ui.ViewModels.ViewModelBase
|
||||
{
|
||||
[ObservableProperty]
|
||||
[NotifyPropertyChangedFor(nameof(IsDescriptionView))]
|
||||
bool _isStepsView;
|
||||
|
||||
public bool IsDescriptionView => !IsStepsView;
|
||||
|
||||
[ObservableProperty]
|
||||
[NotifyPropertyChangedFor(nameof(ComposedPreview))]
|
||||
string _title = "";
|
||||
|
||||
[ObservableProperty]
|
||||
[NotifyPropertyChangedFor(nameof(ComposedPreview))]
|
||||
string _editableDescription = "";
|
||||
|
||||
[ObservableProperty] bool _isEditingDescription;
|
||||
[ObservableProperty] string _newSubtaskTitle = "";
|
||||
|
||||
public ObservableCollection<SubtaskRowSampleViewModel> Subtasks { get; } = new();
|
||||
|
||||
public string ComposedPreview => BuildComposedPreview();
|
||||
|
||||
[RelayCommand] void ToggleCardView() => IsStepsView = !IsStepsView;
|
||||
[RelayCommand] void ToggleEditDescription() => IsEditingDescription = !IsEditingDescription;
|
||||
|
||||
[RelayCommand]
|
||||
void AddSubtask()
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(NewSubtaskTitle)) return;
|
||||
var row = new SubtaskRowSampleViewModel { Title = NewSubtaskTitle.Trim() };
|
||||
row.PropertyChanged += OnRowPropertyChanged;
|
||||
Subtasks.Add(row);
|
||||
NewSubtaskTitle = "";
|
||||
OnPropertyChanged(nameof(ComposedPreview));
|
||||
}
|
||||
|
||||
[RelayCommand]
|
||||
void ToggleSubtaskDone(SubtaskRowSampleViewModel row)
|
||||
{
|
||||
row.Done = !row.Done;
|
||||
}
|
||||
|
||||
[RelayCommand]
|
||||
void CommitSubtaskEdit(SubtaskRowSampleViewModel row)
|
||||
{
|
||||
row.IsEditing = false;
|
||||
}
|
||||
|
||||
private void OnRowPropertyChanged(object? sender, PropertyChangedEventArgs e)
|
||||
{
|
||||
if (e.PropertyName is nameof(SubtaskRowSampleViewModel.Done)
|
||||
or nameof(SubtaskRowSampleViewModel.Title))
|
||||
OnPropertyChanged(nameof(ComposedPreview));
|
||||
}
|
||||
|
||||
private void OnSubtasksChanged(object? sender, NotifyCollectionChangedEventArgs e)
|
||||
{
|
||||
if (e.NewItems is not null)
|
||||
foreach (SubtaskRowSampleViewModel row in e.NewItems)
|
||||
row.PropertyChanged += OnRowPropertyChanged;
|
||||
if (e.OldItems is not null)
|
||||
foreach (SubtaskRowSampleViewModel row in e.OldItems)
|
||||
row.PropertyChanged -= OnRowPropertyChanged;
|
||||
OnPropertyChanged(nameof(ComposedPreview));
|
||||
}
|
||||
|
||||
private string BuildComposedPreview()
|
||||
{
|
||||
var sb = new StringBuilder();
|
||||
sb.AppendLine(Title);
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(EditableDescription))
|
||||
{
|
||||
sb.AppendLine();
|
||||
sb.AppendLine(EditableDescription.TrimEnd());
|
||||
}
|
||||
|
||||
var openSteps = Subtasks.Where(s => !s.Done).ToList();
|
||||
if (openSteps.Count > 0)
|
||||
{
|
||||
sb.AppendLine();
|
||||
sb.AppendLine("## Sub-Tasks");
|
||||
foreach (var step in openSteps)
|
||||
sb.AppendLine($"- [ ] {step.Title}");
|
||||
}
|
||||
|
||||
return sb.ToString().TrimEnd();
|
||||
}
|
||||
|
||||
public DescriptionStepsCardViewModel()
|
||||
{
|
||||
Subtasks.CollectionChanged += OnSubtasksChanged;
|
||||
|
||||
_title = "Refactor diff viewer";
|
||||
_editableDescription =
|
||||
"Split the current monolithic diff renderer into smaller, testable components.\n\n" +
|
||||
"The goal is to improve readability and allow unit testing of each parsing stage independently.";
|
||||
|
||||
var samples = new[]
|
||||
{
|
||||
new SubtaskRowSampleViewModel { Title = "Extract DiffParser into its own class", Done = true },
|
||||
new SubtaskRowSampleViewModel { Title = "Add unit tests for DiffParser", Done = true },
|
||||
new SubtaskRowSampleViewModel { Title = "Wire new parser into DiffViewerViewModel" },
|
||||
new SubtaskRowSampleViewModel { Title = "Update snapshot tests" },
|
||||
};
|
||||
foreach (var row in samples)
|
||||
{
|
||||
row.PropertyChanged += OnRowPropertyChanged;
|
||||
Subtasks.Add(row);
|
||||
}
|
||||
}
|
||||
}
|
||||
167
src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml
Normal file
167
src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml
Normal file
@@ -0,0 +1,167 @@
|
||||
<UserControl xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands.Detail"
|
||||
xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
|
||||
x:Class="ClaudeDo.Ui.Views.Islands.Detail.DescriptionStepsCard"
|
||||
x:DataType="vm:DescriptionStepsCardViewModel">
|
||||
|
||||
<Design.DataContext>
|
||||
<vm:DescriptionStepsCardViewModel/>
|
||||
</Design.DataContext>
|
||||
|
||||
<Border Classes="island">
|
||||
<DockPanel>
|
||||
|
||||
<!-- Header -->
|
||||
<Border DockPanel.Dock="Top" Classes="island-header">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto" VerticalAlignment="Center">
|
||||
|
||||
<!-- Col 0: section label -->
|
||||
<Panel Grid.Column="0" VerticalAlignment="Center">
|
||||
<TextBlock Classes="section-label" Text="DETAILS" IsVisible="{Binding IsDescriptionView}"/>
|
||||
<TextBlock Classes="section-label" Text="STEPS" IsVisible="{Binding IsStepsView}"/>
|
||||
</Panel>
|
||||
|
||||
<!-- Col 1: spacer (auto from *) -->
|
||||
|
||||
<!-- Col 2: Copy button — Description view only -->
|
||||
<Button Grid.Column="2"
|
||||
Classes="icon-btn"
|
||||
Margin="0,0,4,0"
|
||||
ToolTip.Tip="Copy formatted (title + description + open steps)"
|
||||
IsVisible="{Binding IsDescriptionView}"
|
||||
Click="OnCopyClick">
|
||||
<PathIcon Data="{StaticResource Icon.Copy}" Width="11" Height="11"/>
|
||||
</Button>
|
||||
|
||||
<!-- Col 3: Preview/Edit toggle — Description view only -->
|
||||
<Button Grid.Column="3"
|
||||
Classes="btn"
|
||||
Padding="8,3"
|
||||
Margin="0,0,4,0"
|
||||
Command="{Binding ToggleEditDescriptionCommand}"
|
||||
IsVisible="{Binding IsDescriptionView}">
|
||||
<Panel>
|
||||
<TextBlock Text="Preview" IsVisible="{Binding IsEditingDescription}"/>
|
||||
<TextBlock Text="Edit" IsVisible="{Binding !IsEditingDescription}"/>
|
||||
</Panel>
|
||||
</Button>
|
||||
|
||||
<!-- Col 4: Card toggle icon -->
|
||||
<Button Grid.Column="4"
|
||||
Classes="icon-btn"
|
||||
Command="{Binding ToggleCardViewCommand}"
|
||||
ToolTip.Tip="Switch Description / Steps">
|
||||
<Panel>
|
||||
<!-- In Description view: show steps/list glyph -->
|
||||
<PathIcon Data="{StaticResource Icon.MoreHorizontal}"
|
||||
Width="11" Height="11"
|
||||
IsVisible="{Binding IsDescriptionView}"/>
|
||||
<!-- In Steps view: show text/document glyph -->
|
||||
<PathIcon Data="{StaticResource Icon.Text}"
|
||||
Width="11" Height="11"
|
||||
IsVisible="{Binding IsStepsView}"/>
|
||||
</Panel>
|
||||
</Button>
|
||||
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- Body -->
|
||||
<StackPanel Margin="14" Spacing="6">
|
||||
|
||||
<!-- Description view -->
|
||||
<Panel IsVisible="{Binding IsDescriptionView}">
|
||||
<!-- 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 Surface2Brush}"
|
||||
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 view -->
|
||||
<StackPanel IsVisible="{Binding IsStepsView}" Spacing="6">
|
||||
<!-- Add-step input -->
|
||||
<TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
|
||||
PlaceholderText="Add step…"
|
||||
Padding="8"
|
||||
Background="{DynamicResource Surface2Brush}"
|
||||
BorderBrush="{DynamicResource LineBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8">
|
||||
<TextBox.KeyBindings>
|
||||
<KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
|
||||
</TextBox.KeyBindings>
|
||||
</TextBox>
|
||||
|
||||
<!-- Subtask rows -->
|
||||
<ItemsControl ItemsSource="{Binding Subtasks}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:SubtaskRowSampleViewModel">
|
||||
<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:DescriptionStepsCardViewModel)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}"
|
||||
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}"
|
||||
AcceptsReturn="False"
|
||||
TextWrapping="Wrap"
|
||||
LostFocus="OnSubtaskEditLostFocus">
|
||||
<TextBox.KeyBindings>
|
||||
<KeyBinding Gesture="Enter"
|
||||
Command="{Binding $parent[ItemsControl].((vm:DescriptionStepsCardViewModel)DataContext).CommitSubtaskEditCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
</TextBox.KeyBindings>
|
||||
</TextBox>
|
||||
</Panel>
|
||||
|
||||
</Grid>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
|
||||
</StackPanel>
|
||||
</DockPanel>
|
||||
</Border>
|
||||
|
||||
</UserControl>
|
||||
@@ -0,0 +1,35 @@
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Input;
|
||||
using Avalonia.Input.Platform;
|
||||
using Avalonia.Interactivity;
|
||||
using ClaudeDo.Ui.ViewModels.Islands.Detail;
|
||||
|
||||
namespace ClaudeDo.Ui.Views.Islands.Detail;
|
||||
|
||||
public partial class DescriptionStepsCard : UserControl
|
||||
{
|
||||
public DescriptionStepsCard()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
|
||||
private async void OnCopyClick(object? sender, RoutedEventArgs e)
|
||||
{
|
||||
if (DataContext is not DescriptionStepsCardViewModel vm) return;
|
||||
var clipboard = TopLevel.GetTopLevel(this)?.Clipboard;
|
||||
if (clipboard is null) return;
|
||||
await clipboard.SetTextAsync(vm.ComposedPreview);
|
||||
}
|
||||
|
||||
private void OnSubtaskTitleTapped(object? sender, TappedEventArgs e)
|
||||
{
|
||||
if (sender is TextBlock { DataContext: SubtaskRowSampleViewModel row })
|
||||
row.IsEditing = true;
|
||||
}
|
||||
|
||||
private void OnSubtaskEditLostFocus(object? sender, RoutedEventArgs e)
|
||||
{
|
||||
if (sender is TextBox { DataContext: SubtaskRowSampleViewModel row })
|
||||
row.IsEditing = false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user