From c75e834b89b58f19fba0021e423ef5d7fe8ae827 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Mon, 22 Jun 2026 09:09:46 +0200
Subject: [PATCH] fix(accounts): fire drag haptic on first tap, not after
 dragging (#576)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

On mobile, reordering accounts (dashboard + accounts page) triggered the
selection haptic only **after** the drag actually started — i.e. after
the `PointerSensor`'s 8px activation distance was met. This felt like
you had to long-press/drag before the vibration kicked in.

This moves the haptic to the drag handle's `pointerdown`, so it fires
the moment the handle is touched. dnd-kit's own `onPointerDown` is
chained afterwards so dragging keeps working.

## Changes

- `SortableGrid`: drop `onDragStart` haptic on `DndContext`.
- `SortableItem`: accept an `onActivate` callback and fire it on the
handle's `onPointerDown`, then delegate to dnd-kit's listener.

## Testing

Haptics rely on `web-haptics` (`navigator.vibrate`), which doesn't run
in jsdom, so this needs a manual check on a real mobile device: tapping
the drag handle should vibrate immediately.
---
 resources/js/components/sortable-grid.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/sortable-grid.tsx b/resources/js/components/sortable-grid.tsx
index cdb25f5f..383e3075 100644
--- a/resources/js/components/sortable-grid.tsx
+++ b/resources/js/components/sortable-grid.tsx
@@ -76,13 +76,16 @@ export function SortableGrid<T>({
         <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
-            onDragStart={() => trigger('selection')}
             onDragEnd={handleDragEnd}
         >
             <SortableContext items={ids} strategy={rectSortingStrategy}>
                 <div className={className}>
                     {items.map((item) => (
-                        <SortableItem key={getId(item)} id={getId(item)}>
+                        <SortableItem
+                            key={getId(item)}
+                            id={getId(item)}
+                            onActivate={() => trigger('selection')}
+                        >
                             {(dragHandle) => renderItem(item, dragHandle)}
                         </SortableItem>
                     ))}
@@ -95,9 +98,11 @@ export function SortableGrid<T>({
 
 function SortableItem({
     id,
+    onActivate,
     children,
 }: {
     id: string;
+    onActivate: () => void;
     children: (dragHandle: ReactNode) => ReactNode;
 }) {
     const {
@@ -118,6 +123,10 @@ function SortableItem({
             className="cursor-grab touch-none text-muted-foreground transition-colors hover:text-foreground active:cursor-grabbing"
             {...attributes}
             {...listeners}
+            onPointerDown={(event) => {
+                onActivate();
+                listeners?.onPointerDown?.(event);
+            }}
         >
             <GripVertical className="size-5" />
         </button>