From 545b19f978dc28a42f40421e6fa4db466326b3eb Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 21 Jul 2025 11:19:14 +0300
Subject: [PATCH] fix(views/board): drop indicator remaining stuck

---
 .../board_view/differential_renderer.ts       |  3 ++
 .../view_widgets/board_view/drag_handler.ts   | 40 ++++++++++++++-----
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts b/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts
index 66e91d128..149574e1f 100644
--- a/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts
+++ b/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts
@@ -56,6 +56,9 @@ export class DifferentialBoardRenderer {
     }
 
     private async performUpdate(): Promise<void> {
+        // Clean up any stray drag indicators before updating
+        this.dragHandler.cleanup();
+        
         const currentState = this.getCurrentState();
 
         if (!this.lastState) {
diff --git a/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts b/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts
index 9de3b977f..c11a68b8a 100644
--- a/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts
+++ b/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts
@@ -39,6 +39,22 @@ export class BoardDragHandler {
         this.api = newApi;
     }
 
+    private cleanupAllDropIndicators() {
+        // Remove all drop indicators from the DOM to prevent layout issues
+        this.$container.find(".board-drop-indicator").remove();
+    }
+
+    private cleanupColumnDropIndicators($columnEl: JQuery<HTMLElement>) {
+        // Remove drop indicators from a specific column
+        $columnEl.find(".board-drop-indicator").remove();
+    }
+
+    // Public method to clean up any stray indicators - can be called externally
+    cleanup() {
+        this.cleanupAllDropIndicators();
+        this.$container.find('.board-column').removeClass('drag-over');
+    }
+
     private setupMouseDrag($noteEl: JQuery<HTMLElement>, note: any, branch: any) {
         $noteEl.on("dragstart", (e) => {
             this.context.draggedNote = note;
@@ -60,8 +76,8 @@ export class BoardDragHandler {
             this.context.draggedBranch = null;
             this.context.draggedNoteElement = null;
 
-            // Remove all drop indicators
-            this.$container.find(".board-drop-indicator").removeClass("show");
+            // Clean up all drop indicators properly
+            this.cleanupAllDropIndicators();
         });
     }
 
@@ -120,7 +136,7 @@ export class BoardDragHandler {
                     } else {
                         // Remove all drag indicators if not over a column
                         this.$container.find('.board-column').removeClass('drag-over');
-                        this.$container.find(".board-drop-indicator").removeClass("show");
+                        this.cleanupAllDropIndicators();
                     }
                 }
             }
@@ -147,7 +163,7 @@ export class BoardDragHandler {
                 this.context.draggedBranch = null;
                 this.context.draggedNoteElement = null;
                 this.$container.find('.board-column').removeClass('drag-over');
-                this.$container.find(".board-drop-indicator").removeClass("show");
+                this.cleanupAllDropIndicators();
 
                 // Remove drag preview
                 if ($dragPreview) {
@@ -182,7 +198,7 @@ export class BoardDragHandler {
 
             if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
                 $columnEl.removeClass("drag-over");
-                $columnEl.find(".board-drop-indicator").removeClass("show");
+                this.cleanupColumnDropIndicators($columnEl);
             }
         });
 
@@ -228,12 +244,11 @@ export class BoardDragHandler {
         const columnRect = $columnEl[0].getBoundingClientRect();
         const relativeY = y - columnRect.top;
 
-        // Find existing drop indicator or create one
-        let $dropIndicator = $columnEl.find(".board-drop-indicator");
-        if ($dropIndicator.length === 0) {
-            $dropIndicator = $("<div>").addClass("board-drop-indicator");
-            $columnEl.append($dropIndicator);
-        }
+        // Clean up any existing drop indicators in this column first
+        this.cleanupColumnDropIndicators($columnEl);
+
+        // Create a new drop indicator
+        const $dropIndicator = $("<div>").addClass("board-drop-indicator");
 
         // Find the best position to insert the note
         const $notes = this.context.draggedNoteElement ?
@@ -316,6 +331,9 @@ export class BoardDragHandler {
                 await this.onBoardRefresh();
             } catch (error) {
                 console.error("Failed to update note position:", error);
+            } finally {
+                // Always clean up drop indicators after drop operation
+                this.cleanupAllDropIndicators();
             }
         }
     }