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:
@@ -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"/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user