From de59b5df829d93246123c884cd2209b611b3a42c Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Sat, 7 Mar 2026 22:17:58 +0100
Subject: [PATCH] fix: note grid drag-and-drop improvements

- Use dragHandleZone with grip icon instead of whole-card dragging,
  so card interactions (checkboxes, pin, archive) still work
- Scope pinned/unpinned grids to separate dnd types to prevent
  cross-zone drag bugs
- Add h-full to flip wrapper and NoteCard for equal card heights

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/NoteCard.svelte |  5 +++--
 src/lib/components/NoteGrid.svelte | 20 +++++++++++++++-----
 src/routes/(app)/+page.svelte      |  3 ++-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/NoteCard.svelte b/src/lib/components/NoteCard.svelte
index f192315..94cb1fe 100644
--- a/src/lib/components/NoteCard.svelte
+++ b/src/lib/components/NoteCard.svelte
@@ -18,9 +18,10 @@
 	interface Props {
 		note: Note;
 		onEdit: (note: Note) => void;
+		fullHeight?: boolean;
 	}
 
-	let { note, onEdit }: Props = $props();
+	let { note, onEdit, fullHeight = false }: Props = $props();
 
 	$effect(() => {
 		const colors = NOTE_COLORS[note.color];
@@ -68,7 +69,7 @@
 </script>
 
 <article
-	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)]"
+	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)] {fullHeight ? 'h-full' : ''}"
 	style={cardStyle}
 	onclick={() => onEdit(note)}
 	onkeydown={(e) => e.key === 'Enter' && onEdit(note)}
diff --git a/src/lib/components/NoteGrid.svelte b/src/lib/components/NoteGrid.svelte
index 0f7e93a..0d5ef2f 100644
--- a/src/lib/components/NoteGrid.svelte
+++ b/src/lib/components/NoteGrid.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import NoteCard from './NoteCard.svelte';
-	import { dndzone, type DndEvent } from 'svelte-dnd-action';
+	import GripVertical from 'lucide-svelte/icons/grip-vertical';
+	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import type { Note } from '$lib/types/index.js';
 
@@ -9,10 +10,11 @@
 		label?: string;
 		onEdit: (note: Note) => void;
 		draggable?: boolean;
+		dndType?: string;
 		onReorder?: (noteIds: string[]) => void;
 	}
 
-	let { notes, label = '', onEdit, draggable = false, onReorder }: Props = $props();
+	let { notes, label = '', onEdit, draggable = false, dndType = 'notes', onReorder }: Props = $props();
 
 	let localItems = $state<Note[]>([]);
 
@@ -42,13 +44,21 @@
 		<div
 			class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
 			data-testid="note-grid"
-			use:dndzone={{ items: localItems, flipDurationMs, type: 'notes', dropTargetStyle: {} }}
+			use:dragHandleZone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {} }}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}
 		>
 			{#each localItems as note (note.id)}
-				<div animate:flip={{ duration: flipDurationMs }}>
-					<NoteCard {note} {onEdit} />
+				<div class="relative h-full" animate:flip={{ duration: flipDurationMs }}>
+					<div
+						use:dragHandle
+						aria-label="drag handle for {note.title || 'note'}"
+						class="absolute top-2 right-2 z-10 cursor-grab rounded-sm p-1 text-[var(--text-muted)] opacity-60 hover:opacity-100 hover:bg-[var(--border-subtle)]/50 transition-opacity duration-150"
+						data-testid="note-drag-handle"
+					>
+						<GripVertical class="h-4 w-4" />
+					</div>
+					<NoteCard {note} {onEdit} fullHeight />
 				</div>
 			{/each}
 		</div>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index c8249dd..f3e8d72 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -79,7 +79,7 @@
 
 {#if $pinnedNotes.length > 0}
 	<div class="mb-6">
-		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable={$sortMode === 'custom'} onReorder={handleReorder} />
+		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable={$sortMode === 'custom'} dndType="pinned-notes" onReorder={handleReorder} />
 	</div>
 {/if}
 
@@ -88,6 +88,7 @@
 	label={$pinnedNotes.length > 0 ? 'Others' : ''}
 	onEdit={openEditor}
 	draggable={$sortMode === 'custom'}
+	dndType="unpinned-notes"
 	onReorder={handleReorder}
 />