From 359bb3a43926d37aa0bde996e336e13b8f610abb Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Mon, 10 Aug 2026 13:58:40 +0200
Subject: [PATCH] refactor(ui): clean up task-row drag visuals

Collapse the grabbed row out of layout instead of overlapping neighbors
with scale/opacity/shadow (the ghost window already shows the moving
snapshot). Replace the thin moss drop-hint lines with a dashed
placeholder gap sized like a collapsed row. Suppress the ordinary hover
highlight and transitions on whatever row is currently the drop target
so it doesn't read as "clickable" while dragging.
---
 src/ClaudeDo.Ui/Design/IslandStyles.axaml     | 19 +++++++++++-----
 .../ViewModels/Islands/TaskRowViewModel.cs    |  6 +++++
 .../Views/Islands/TaskRowView.axaml           | 18 ++++++++-------
 .../UiVm/TaskRowViewModelTests.cs             | 22 +++++++++++++++++++
 4 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/src/ClaudeDo.Ui/Design/IslandStyles.axaml b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
index c6870765..9b7d5994 100644
--- a/src/ClaudeDo.Ui/Design/IslandStyles.axaml
+++ b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
@@ -484,12 +484,21 @@
     <Setter Property="BorderBrush"     Value="{StaticResource AccentBrush}" />
     <Setter Property="BorderThickness" Value="1" />
   </Style>
-  <!-- "Grabbed" row: lift + slight scale + lower opacity + shadow while the custom drag runs. -->
+  <!-- "Grabbed" row: collapses out of layout entirely while the custom drag runs — the
+       floating ghost snapshot (TaskDragController) is what the user sees moving. -->
   <Style Selector="Border.task-row.dragging">
-    <Setter Property="Opacity"         Value="0.55" />
-    <Setter Property="RenderTransform" Value="scale(1.03)" />
-    <Setter Property="BoxShadow"       Value="0 10 26 0 #66000000" />
-    <Setter Property="BorderBrush"     Value="{StaticResource AccentBrush}" />
+    <Setter Property="IsVisible"   Value="False" />
+    <Setter Property="Transitions" Value="{x:Null}" />
+  </Style>
+
+  <!-- Row currently hovered while dragging (shows the dashed drop-hint gap): suppress the
+       ordinary hover highlight and transitions so they don't fight the hint. Placed after
+       Border.task-row:pointerover so its extra class also wins on declaration order. -->
+  <Style Selector="Border.task-row.drop-target">
+    <Setter Property="Transitions" Value="{x:Null}" />
+  </Style>
+  <Style Selector="Border.task-row.drop-target:pointerover">
+    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
   </Style>
 
   <!-- Checkbox indicator (the 18px circle that replaces the native CheckBox template) -->
diff --git a/src/ClaudeDo.Ui/ViewModels/Islands/TaskRowViewModel.cs b/src/ClaudeDo.Ui/ViewModels/Islands/TaskRowViewModel.cs
index 3e3f0e66..c0649ebe 100644
--- a/src/ClaudeDo.Ui/ViewModels/Islands/TaskRowViewModel.cs
+++ b/src/ClaudeDo.Ui/ViewModels/Islands/TaskRowViewModel.cs
@@ -45,6 +45,10 @@ public sealed partial class TaskRowViewModel : ViewModelBase
     // Set by the custom drag while this row is being dragged — drives the "grabbed" row style.
     [ObservableProperty] private bool _isDragging;
 
+    // True while a drag is hovering this row (i.e. it would show a drop-hint gap). Used to
+    // suppress the ordinary hover highlight/transitions so they don't fight the hint.
+    public bool IsDropTarget => DropHintAbove || DropHintBelow;
+
     public bool CanRefine => Status == TaskStatus.Idle && PlanningPhase == PlanningPhase.None
                              && !IsRefining && !IsManual;
 
@@ -289,6 +293,8 @@ public sealed partial class TaskRowViewModel : ViewModelBase
     partial void OnDiffAdditionsChanged(int value) { OnPropertyChanged(nameof(HasDiff)); OnPropertyChanged(nameof(DiffAdditionsText)); }
     partial void OnDiffDeletionsChanged(int value) { OnPropertyChanged(nameof(HasDiff)); OnPropertyChanged(nameof(DiffDeletionsText)); }
     partial void OnRoadblockCountChanged(int value) { OnPropertyChanged(nameof(HasRoadblock)); OnPropertyChanged(nameof(RoadblockTooltip)); }
+    partial void OnDropHintAboveChanged(bool value) => OnPropertyChanged(nameof(IsDropTarget));
+    partial void OnDropHintBelowChanged(bool value) => OnPropertyChanged(nameof(IsDropTarget));
 
     public void RefreshLocalized()
     {
diff --git a/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
index dd3f4ee9..cf4bc51e 100644
--- a/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
+++ b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
@@ -7,15 +7,16 @@
              x:DataType="vm:TaskRowViewModel">
   <Grid>
     <Grid.RowDefinitions>
-      <RowDefinition Height="6"/>
+      <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
 
-    <!-- Above-row indicator: lives in the 6px gap between cards -->
-    <Border Grid.Row="0" Height="2" VerticalAlignment="Center" Margin="4,0"
-            Background="{DynamicResource MossBrush}" CornerRadius="1"
-            IsVisible="{Binding DropHintAbove}"/>
+    <!-- Above-row indicator: dashed placeholder gap showing where the dragged row will land -->
+    <Grid Grid.Row="0" Height="52" IsVisible="{Binding DropHintAbove}">
+      <Rectangle Margin="4,3" Stroke="{DynamicResource MossBrush}" StrokeThickness="1.5"
+                 StrokeDashArray="4,3" Fill="Transparent" RadiusX="8" RadiusY="8"/>
+    </Grid>
 
     <!-- Indent wrapper: col 0 = 24px child indent track, col 1 = content -->
     <Grid Grid.Row="1" ColumnDefinitions="Auto,*">
@@ -31,6 +32,7 @@
               Margin="0"
               Classes.selected="{Binding IsSelected}"
               Classes.dragging="{Binding IsDragging}"
+              Classes.drop-target="{Binding IsDropTarget}"
               Classes.done="{Binding Done}"
               ContextRequested="OnRowContextRequested">
         <Grid ColumnDefinitions="0,18,32,*,Auto,Auto,32" Margin="6,8,10,8">
@@ -202,9 +204,9 @@
     </Grid>
 
     <!-- Below-row indicator: only expands when visible (used for the last row of a section) -->
-    <Grid Grid.Row="2" Height="6" IsVisible="{Binding DropHintBelow}">
-      <Border Height="2" VerticalAlignment="Center" Margin="4,0"
-              Background="{DynamicResource MossBrush}" CornerRadius="1"/>
+    <Grid Grid.Row="2" Height="52" IsVisible="{Binding DropHintBelow}">
+      <Rectangle Margin="4,3" Stroke="{DynamicResource MossBrush}" StrokeThickness="1.5"
+                 StrokeDashArray="4,3" Fill="Transparent" RadiusX="8" RadiusY="8"/>
     </Grid>
 
     <!-- Hidden schedule anchor (its Flyout is shown from the context menu) -->
diff --git a/tests/ClaudeDo.Worker.Tests/UiVm/TaskRowViewModelTests.cs b/tests/ClaudeDo.Worker.Tests/UiVm/TaskRowViewModelTests.cs
index 9044eb88..a8a2166d 100644
--- a/tests/ClaudeDo.Worker.Tests/UiVm/TaskRowViewModelTests.cs
+++ b/tests/ClaudeDo.Worker.Tests/UiVm/TaskRowViewModelTests.cs
@@ -1,3 +1,4 @@
+using System.Collections.Generic;
 using ClaudeDo.Data.Models;
 using ClaudeDo.Ui.ViewModels.Islands;
 using Xunit;
@@ -20,4 +21,25 @@ public class TaskRowViewModelTests
         vm.Status = s;
         Assert.Equal(expected, vm.StatusChipClass);
     }
+
+    [Fact]
+    public void IsDropTarget_Follows_Either_DropHint_And_Raises_PropertyChanged()
+    {
+        var vm = new TaskRowViewModel { Id = "t" };
+        var raised = new List<string?>();
+        vm.PropertyChanged += (_, e) => raised.Add(e.PropertyName);
+
+        Assert.False(vm.IsDropTarget);
+
+        vm.DropHintAbove = true;
+        Assert.True(vm.IsDropTarget);
+        Assert.Contains(nameof(TaskRowViewModel.IsDropTarget), raised);
+
+        vm.DropHintAbove = false;
+        vm.DropHintBelow = true;
+        Assert.True(vm.IsDropTarget);
+
+        vm.DropHintBelow = false;
+        Assert.False(vm.IsDropTarget);
+    }
 }