From f94bb35db7b3341e19bfd5eb2fa7061b2a4beb7e Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Mon, 20 Apr 2026 10:24:36 +0200
Subject: [PATCH] feat(ui): tasks island with rows, chips, add-task, selection

TaskRowView with status chip (EqStatus converter + parameter),
StrikeIfTrue, NotNullToBool converters. TasksIslandView with header,
add-task TextBox (Enter=AddCommand), ItemsControl + flat Button for
selection. Converters registered in App.axaml.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/ClaudeDo.App/App.axaml                    |  6 ++
 .../Converters/EqStatusConverter.cs           | 26 +++++++++
 .../Converters/NotNullToBoolConverter.cs      | 15 +++++
 .../Converters/StrikeIfTrueConverter.cs       | 16 ++++++
 .../Views/Islands/TaskRowView.axaml           | 57 +++++++++++++++++++
 .../Views/Islands/TaskRowView.axaml.cs        |  8 +++
 .../Views/Islands/TasksIslandView.axaml       | 43 +++++++++++++-
 7 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 src/ClaudeDo.Ui/Converters/EqStatusConverter.cs
 create mode 100644 src/ClaudeDo.Ui/Converters/NotNullToBoolConverter.cs
 create mode 100644 src/ClaudeDo.Ui/Converters/StrikeIfTrueConverter.cs
 create mode 100644 src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
 create mode 100644 src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml.cs

diff --git a/src/ClaudeDo.App/App.axaml b/src/ClaudeDo.App/App.axaml
index c5ca83e..0f53616 100644
--- a/src/ClaudeDo.App/App.axaml
+++ b/src/ClaudeDo.App/App.axaml
@@ -2,6 +2,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ClaudeDo.App.App"
              xmlns:local="using:ClaudeDo.App"
+             xmlns:converters="using:ClaudeDo.Ui.Converters"
              RequestedThemeVariant="Dark">
 
     <Application.Resources>
@@ -10,6 +11,11 @@
                 <ResourceInclude Source="avares://ClaudeDo.Ui/Design/Tokens.axaml" />
             </ResourceDictionary.MergedDictionaries>
 
+            <!-- Converters -->
+            <converters:NotNullToBoolConverter x:Key="NotNullToBool"/>
+            <converters:StrikeIfTrueConverter  x:Key="StrikeIfTrue"/>
+            <converters:EqStatusConverter      x:Key="EqStatus"/>
+
             <!-- Accent: Forest Teal -->
             <SolidColorBrush x:Key="AccentBrush" Color="#3d9474"/>
             <SolidColorBrush x:Key="AccentLightBrush" Color="#6bb89e"/>
diff --git a/src/ClaudeDo.Ui/Converters/EqStatusConverter.cs b/src/ClaudeDo.Ui/Converters/EqStatusConverter.cs
new file mode 100644
index 0000000..0ba7ec7
--- /dev/null
+++ b/src/ClaudeDo.Ui/Converters/EqStatusConverter.cs
@@ -0,0 +1,26 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+using ClaudeDo.Data.Models;
+using TaskStatus = ClaudeDo.Data.Models.TaskStatus;
+
+namespace ClaudeDo.Ui.Converters;
+
+/// <summary>
+/// Returns true when the bound TaskStatus equals the ConverterParameter string.
+/// Usage: Classes.running="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Running}"
+/// </summary>
+public class EqStatusConverter : IValueConverter
+{
+    public static EqStatusConverter Instance { get; } = new();
+
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is TaskStatus status && parameter is string name &&
+            Enum.TryParse<TaskStatus>(name, ignoreCase: true, out var target))
+            return status == target;
+        return false;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/src/ClaudeDo.Ui/Converters/NotNullToBoolConverter.cs b/src/ClaudeDo.Ui/Converters/NotNullToBoolConverter.cs
new file mode 100644
index 0000000..fd4604b
--- /dev/null
+++ b/src/ClaudeDo.Ui/Converters/NotNullToBoolConverter.cs
@@ -0,0 +1,15 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace ClaudeDo.Ui.Converters;
+
+public class NotNullToBoolConverter : IValueConverter
+{
+    public static NotNullToBoolConverter Instance { get; } = new();
+
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+        => value is not null;
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/src/ClaudeDo.Ui/Converters/StrikeIfTrueConverter.cs b/src/ClaudeDo.Ui/Converters/StrikeIfTrueConverter.cs
new file mode 100644
index 0000000..c67a396
--- /dev/null
+++ b/src/ClaudeDo.Ui/Converters/StrikeIfTrueConverter.cs
@@ -0,0 +1,16 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace ClaudeDo.Ui.Converters;
+
+public class StrikeIfTrueConverter : IValueConverter
+{
+    public static StrikeIfTrueConverter Instance { get; } = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+        => value is true ? TextDecorations.Strikethrough : null;
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
new file mode 100644
index 0000000..9f8242d
--- /dev/null
+++ b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
@@ -0,0 +1,57 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
+             x:Class="ClaudeDo.Ui.Views.Islands.TaskRowView"
+             x:DataType="vm:TaskRowViewModel">
+  <Border Classes="task-row" Classes.selected="{Binding IsSelected}">
+    <Grid ColumnDefinitions="36,*,32" Margin="10,10">
+      <!-- Done toggle -->
+      <Button Grid.Column="0" Classes="check-btn" VerticalAlignment="Center"
+              Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).ToggleDoneCommand}"
+              CommandParameter="{Binding}">
+        <Ellipse Width="18" Height="18" Classes="task-check"
+                 Classes.done="{Binding Done}"/>
+      </Button>
+
+      <!-- Title + chip row + live tail -->
+      <StackPanel Grid.Column="1" Spacing="6" VerticalAlignment="Center">
+        <TextBlock Text="{Binding Title}" FontSize="14"
+                   Foreground="{DynamicResource TextBrush}"
+                   TextDecorations="{Binding Done, Converter={StaticResource StrikeIfTrue}}"/>
+        <StackPanel Orientation="Horizontal" Spacing="6">
+          <Border Classes="chip"
+                  Classes.running="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Running}"
+                  Classes.review="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Done}"
+                  Classes.error="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Failed}"
+                  Classes.queued="{Binding Status, Converter={StaticResource EqStatus}, ConverterParameter=Queued}">
+            <TextBlock Text="{Binding Status}" FontSize="10"
+                       FontFamily="{DynamicResource MonoFamily}" Margin="6,2"/>
+          </Border>
+          <Border Classes="chip">
+            <TextBlock Text="{Binding ListName}" FontSize="10" Margin="6,2"
+                       Foreground="{DynamicResource TextDimBrush}"/>
+          </Border>
+          <Border Classes="chip" IsVisible="{Binding Branch, Converter={StaticResource NotNullToBool}}">
+            <TextBlock Text="{Binding Branch}" FontFamily="{DynamicResource MonoFamily}"
+                       FontSize="10" Margin="6,2"/>
+          </Border>
+          <Border Classes="chip" IsVisible="{Binding DiffStat, Converter={StaticResource NotNullToBool}}">
+            <TextBlock Text="{Binding DiffStat}" FontFamily="{DynamicResource MonoFamily}"
+                       FontSize="10" Margin="6,2"/>
+          </Border>
+        </StackPanel>
+        <TextBlock Text="{Binding LiveTail}" FontFamily="{DynamicResource MonoFamily}"
+                   FontSize="11" Foreground="{DynamicResource TextMuteBrush}"
+                   TextTrimming="CharacterEllipsis" MaxLines="1"
+                   IsVisible="{Binding LiveTail, Converter={StaticResource NotNullToBool}}"/>
+      </StackPanel>
+
+      <!-- Star toggle -->
+      <Button Grid.Column="2" Classes="icon-btn" VerticalAlignment="Center"
+              Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).ToggleStarCommand}"
+              CommandParameter="{Binding}">
+        <PathIcon Width="14" Height="14"/>
+      </Button>
+    </Grid>
+  </Border>
+</UserControl>
diff --git a/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml.cs b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml.cs
new file mode 100644
index 0000000..f853cca
--- /dev/null
+++ b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml.cs
@@ -0,0 +1,8 @@
+using Avalonia.Controls;
+
+namespace ClaudeDo.Ui.Views.Islands;
+
+public partial class TaskRowView : UserControl
+{
+    public TaskRowView() { InitializeComponent(); }
+}
diff --git a/src/ClaudeDo.Ui/Views/Islands/TasksIslandView.axaml b/src/ClaudeDo.Ui/Views/Islands/TasksIslandView.axaml
index d0d86bb..d7e8b2c 100644
--- a/src/ClaudeDo.Ui/Views/Islands/TasksIslandView.axaml
+++ b/src/ClaudeDo.Ui/Views/Islands/TasksIslandView.axaml
@@ -1,8 +1,47 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
+             xmlns:islands="using:ClaudeDo.Ui.Views.Islands"
              x:Class="ClaudeDo.Ui.Views.Islands.TasksIslandView"
              x:DataType="vm:TasksIslandViewModel">
-  <TextBlock Margin="14" Text="Tasks (placeholder)"
-             Foreground="{DynamicResource TextDimBrush}"/>
+  <DockPanel LastChildFill="True">
+
+    <!-- Header -->
+    <Border DockPanel.Dock="Top" Classes="island-header">
+      <StackPanel Margin="18,14" Spacing="4">
+        <TextBlock Classes="eyebrow" Text="{Binding HeaderEyebrow}"/>
+        <TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="24"
+                   FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
+                   Text="{Binding HeaderTitle}"/>
+        <TextBlock FontFamily="{DynamicResource MonoFamily}" FontSize="11"
+                   Foreground="{DynamicResource TextMuteBrush}" Text="{Binding Subtitle}"/>
+      </StackPanel>
+    </Border>
+
+    <!-- Add-task row -->
+    <Border DockPanel.Dock="Top" Margin="18,8,18,4">
+      <TextBox Watermark="Add a task…" Text="{Binding NewTaskTitle, Mode=TwoWay}">
+        <TextBox.KeyBindings>
+          <KeyBinding Gesture="Enter" Command="{Binding AddCommand}"/>
+        </TextBox.KeyBindings>
+      </TextBox>
+    </Border>
+
+    <!-- Task list -->
+    <ScrollViewer>
+      <ItemsControl ItemsSource="{Binding Items}" Margin="10,4">
+        <ItemsControl.ItemTemplate>
+          <DataTemplate DataType="vm:TaskRowViewModel">
+            <Button Classes="flat" HorizontalAlignment="Stretch"
+                    HorizontalContentAlignment="Stretch"
+                    Command="{Binding $parent[ItemsControl].DataContext.SelectCommand}"
+                    CommandParameter="{Binding}">
+              <islands:TaskRowView/>
+            </Button>
+          </DataTemplate>
+        </ItemsControl.ItemTemplate>
+      </ItemsControl>
+    </ScrollViewer>
+
+  </DockPanel>
 </UserControl>