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

feat(ui): add DescriptionStepsCard detail component

Browse Source 
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
2026-06-04 19:21:51 +02:00
parent 9f95942dd1
commit c323953f8c
4 changed files with 338 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml Normal file
View 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>