From 606c1b0652c27705615a50dc2427c8a4deaaef81 Mon Sep 17 00:00:00 2001
From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com>
Date: Thu, 26 Feb 2026 07:45:58 -0500
Subject: [PATCH] Add drag handle icon to column headers

Shows a grip dots icon in the column header when the user can edit,
making it visually clear that columns are draggable. Also adds
cursor-grab/grabbing styles to the header.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/routes/boards/[boardId]/+page.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/routes/boards/[boardId]/+page.svelte b/src/routes/boards/[boardId]/+page.svelte
index 9ee3fcf..5259811 100644
--- a/src/routes/boards/[boardId]/+page.svelte
+++ b/src/routes/boards/[boardId]/+page.svelte
@@ -472,7 +472,14 @@
 					animate:flip={{ duration: flipDurationMs }}
 				>
 					<!-- Column header -->
-					<div class="flex items-center justify-between px-3 py-2.5">
+					<div class="flex items-center justify-between px-3 py-2.5 cursor-grab active:cursor-grabbing">
+						{#if data.canEdit && editingColumnId !== column.id}
+							<div class="flex-shrink-0 text-gray-300 dark:text-gray-600 mr-1" aria-hidden="true">
+								<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+									<path d="M7 2a2 2 0 10.001 4.001A2 2 0 007 2zm0 6a2 2 0 10.001 4.001A2 2 0 007 8zm0 6a2 2 0 10.001 4.001A2 2 0 007 14zm6-8a2 2 0 10-.001-4.001A2 2 0 0013 6zm0 2a2 2 0 10.001 4.001A2 2 0 0013 8zm0 6a2 2 0 10.001 4.001A2 2 0 0013 14z" />
+								</svg>
+							</div>
+						{/if}
 						{#if editingColumnId === column.id}
 							<form
 								onsubmit={(e) => { e.preventDefault(); renameColumn(column.id); }}
@@ -504,7 +511,7 @@
 								onclick={() => deleteColumn(column.id)}
 								class="text-gray-400 dark:text-gray-500 hover:text-[var(--color-danger)] transition p-1"
 								title="Delete column"
-							aria-label="Delete column"
+								aria-label="Delete column"
 							>
 								<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
 									<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />