jakob48/crumbs
1
0
Fork 0
forked from mirror/crumbs-original
Code Pull Requests Activity

refactor: remove drag handles, use long-press to reorder notes

Browse Source 
Replace drag handle zones with dndzone for whole-card dragging via
long-press on both desktop and mobile. Removes GripHorizontal icon
and dragHandle imports entirely.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-09 21:56:42 +01:00
co-authored by Claude Opus 4.6
parent d1c9c88ab5
commit 20b3e6d3b6
1 changed files with 3 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/NoteGrid.svelte
+3 -12
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import NoteCard from './NoteCard.svelte';
import GripHorizontal from 'lucide-svelte/icons/grip-horizontal';
import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
import { dndzone, type DndEvent } from 'svelte-dnd-action';
import { flip } from 'svelte/animate';
import type { Note } from '$lib/types/index.js';
@@ -44,20 +43,12 @@
<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:dragHandleZone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {} }}
use:dndzone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {} }}
onconsider={handleConsider}
onfinalize={handleFinalize}
>
{#each localItems as note (note.id)}
<div class="relative h-full" animate:flip={{ duration: flipDurationMs }}>
<div
use:dragHandle
aria-label="drag handle for {note.title || 'note'}"
class="absolute top-0 left-1/2 z-10 flex -translate-x-1/2 cursor-grab items-center justify-center px-6 py-0.5 text-[var(--text-muted)] opacity-40 transition-opacity duration-150 hover:opacity-70 active:cursor-grabbing outline-none"
data-testid="note-drag-handle"
>
<GripHorizontal class="h-3.5 w-3.5" />
</div>
<div class="h-full" animate:flip={{ duration: flipDurationMs }}>
<NoteCard {note} {onEdit} fullHeight />
</div>
{/each}