feat(ui): add MarkdownView control and editable description in details island

New MarkdownView UserControl renders a markdown preview. Details island gains an editable Description section with edit/preview toggle, collapsible header, copy-to-clipboard, and debounced auto-save (400ms).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mika kuns
2026-04-25 09:37:14 +02:00
parent 8f94dddbc5
commit a6ca1c0108
5 changed files with 373 additions and 0 deletions

View File

@@ -2,6 +2,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
xmlns:islands="using:ClaudeDo.Ui.Views.Islands"
xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
x:Class="ClaudeDo.Ui.Views.Islands.DetailsIslandView"
x:DataType="vm:DetailsIslandViewModel">
<DockPanel>
@@ -214,6 +215,77 @@
</StackPanel>
</Border>
<!-- Details (description) section -->
<Border Padding="18,12,18,12"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,0,0,1">
<StackPanel Spacing="6">
<Grid ColumnDefinitions="Auto,*,Auto,Auto">
<Button Grid.Column="0"
Classes="flat"
Command="{Binding ToggleDescriptionExpandedCommand}"
Padding="0"
Margin="0,0,6,2"
VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" Spacing="6">
<TextBlock Text="▾" FontSize="10"
IsVisible="{Binding IsDescriptionExpanded}"
Foreground="{DynamicResource TextDimBrush}"/>
<TextBlock Text="▸" FontSize="10"
IsVisible="{Binding !IsDescriptionExpanded}"
Foreground="{DynamicResource TextDimBrush}"/>
<TextBlock Classes="section-label" Text="DETAILS"/>
</StackPanel>
</Button>
<Button Grid.Column="2"
Classes="icon-btn"
Padding="6,2"
Margin="0,0,4,0"
ToolTip.Tip="Copy description to clipboard"
IsVisible="{Binding IsDescriptionExpanded}"
Click="OnCopyDescriptionClick">
<PathIcon Data="{StaticResource Icon.Copy}" Width="11" Height="11"/>
</Button>
<Button Grid.Column="3"
Classes="icon-btn"
Command="{Binding ToggleEditDescriptionCommand}"
Padding="6,2"
FontSize="10"
ToolTip.Tip="Toggle edit/preview"
IsVisible="{Binding IsDescriptionEditorVisible}">
<TextBlock Text="Preview"/>
</Button>
<Button Grid.Column="3"
Classes="icon-btn"
Command="{Binding ToggleEditDescriptionCommand}"
Padding="6,2"
FontSize="10"
ToolTip.Tip="Toggle edit/preview"
IsVisible="{Binding IsDescriptionPreviewVisible}">
<TextBlock Text="Edit"/>
</Button>
</Grid>
<TextBox Text="{Binding EditableDescription, Mode=TwoWay}"
AcceptsReturn="True"
TextWrapping="Wrap"
MinHeight="80"
MaxHeight="320"
PlaceholderText="Add task details (markdown supported)..."
Padding="8"
FontFamily="{DynamicResource MonoFont}"
FontSize="12"
Background="{DynamicResource Surface2Brush}"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="1"
CornerRadius="6"
IsVisible="{Binding IsDescriptionEditorVisible}"/>
<ctl:MarkdownView Markdown="{Binding EditableDescription}"
IsVisible="{Binding IsDescriptionPreviewVisible}"/>
</StackPanel>
</Border>
<!-- Session terminal — auto-sizes to output, scrolls internally after MaxHeight -->
<islands:SessionTerminalView MaxHeight="420"/>