feat: support reordering photos/notes on mobile

Author: chenasraf

src/components/Notes/NoteCard.vue

@@ -3,6 +3,7 @@
     class="note-card"
     :class="{ 'note-card--dragging': isDragging }"
     :style="cardStyle"
+    :data-drag-id="note.id"
     draggable="true"
     @dragstart="onDragStart"
     @dragend="onDragEnd"

src/components/Photos/FolderStack.vue

@@ -2,6 +2,7 @@
   <div
     class="folder-stack"
     :class="{ 'folder-stack--drag-over': isDragOver }"
+    :data-drag-id="'folder-' + folder.id"
     draggable="true"
     @dragstart="onDragStart"
     @dragend="onDragEnd"

src/components/Photos/PhotoCard.vue

@@ -2,6 +2,7 @@
   <div
     class="photo-card"
     :class="{ 'photo-card--dragging': isDragging }"
+    :data-drag-id="photo.id"
     draggable="true"
     @dragstart="onDragStart"
     @dragend="onDragEnd"

src/composables/useTouchReorder.ts

@@ -0,0 +1,209 @@
+import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
+
+export interface TouchReorderCallbacks {
+  onDragStart: (_id: number) => void
+  onReorderOver: (_hoveredId: number, _clientX: number, _clientY: number) => void
+  onDrop: () => void
+  onCancel: () => void
+}
+
+const LONG_PRESS_MS = 300
+const MOVE_THRESHOLD = 8
+const SCROLL_EDGE = 40
+const SCROLL_SPEED = 8
+
+/**
+ * Adds touch-based drag-and-drop reorder to a container.
+ *
+ * Children must have `[data-drag-id]` attributes to be considered draggable.
+ * The composable creates a floating ghost clone during drag and calls the same
+ * callbacks the existing HTML5 DnD system uses.
+ */
+export function useTouchReorder(
+  containerRef: Ref<HTMLElement | null>,
+  callbacks: TouchReorderCallbacks,
+) {
+  const isTouchDragging = ref(false)
+
+  let longPressTimer: ReturnType<typeof setTimeout> | null = null
+  let scrollTimer: ReturnType<typeof setInterval> | null = null
+  let ghost: HTMLElement | null = null
+  let dragId: number | null = null
+  let startX = 0
+  let startY = 0
+
+  function findDraggable(el: HTMLElement): HTMLElement | null {
+    return el.closest<HTMLElement>('[data-drag-id]')
+  }
+
+  function getDragId(el: HTMLElement): number | null {
+    const val = el.dataset.dragId
+    return val != null ? Number(val) : null
+  }
+
+  function createGhost(source: HTMLElement, x: number, y: number) {
+    const rect = source.getBoundingClientRect()
+    ghost = source.cloneNode(true) as HTMLElement
+    ghost.style.position = 'fixed'
+    ghost.style.width = rect.width + 'px'
+    ghost.style.height = rect.height + 'px'
+    ghost.style.left = x - rect.width / 2 + 'px'
+    ghost.style.top = y - rect.height / 2 + 'px'
+    ghost.style.zIndex = '999999'
+    ghost.style.opacity = '0.85'
+    ghost.style.pointerEvents = 'none'
+    ghost.style.transition = 'none'
+    ghost.style.transform = 'scale(1.05)'
+    ghost.style.boxShadow = '0 8px 24px rgba(0,0,0,0.3)'
+    document.body.appendChild(ghost)
+  }
+
+  function moveGhost(x: number, y: number) {
+    if (!ghost) return
+    const w = ghost.offsetWidth
+    const h = ghost.offsetHeight
+    ghost.style.left = x - w / 2 + 'px'
+    ghost.style.top = y - h / 2 + 'px'
+  }
+
+  function removeGhost() {
+    if (ghost) {
+      ghost.remove()
+      ghost = null
+    }
+  }
+
+  function autoScroll(clientY: number) {
+    if (scrollTimer) {
+      clearInterval(scrollTimer)
+      scrollTimer = null
+    }
+
+    const vh = window.innerHeight
+    if (clientY < SCROLL_EDGE) {
+      scrollTimer = setInterval(() => window.scrollBy(0, -SCROLL_SPEED), 16)
+    } else if (clientY > vh - SCROLL_EDGE) {
+      scrollTimer = setInterval(() => window.scrollBy(0, SCROLL_SPEED), 16)
+    }
+  }
+
+  function stopAutoScroll() {
+    if (scrollTimer) {
+      clearInterval(scrollTimer)
+      scrollTimer = null
+    }
+  }
+
+  function hitTest(x: number, y: number): HTMLElement | null {
+    if (ghost) ghost.style.display = 'none'
+    const el = document.elementFromPoint(x, y) as HTMLElement | null
+    if (ghost) ghost.style.display = ''
+    return el ? findDraggable(el) : null
+  }
+
+  function clearLongPress() {
+    if (longPressTimer) {
+      clearTimeout(longPressTimer)
+      longPressTimer = null
+    }
+  }
+
+  function cancelDrag() {
+    clearLongPress()
+    stopAutoScroll()
+    removeGhost()
+    if (isTouchDragging.value) {
+      isTouchDragging.value = false
+      callbacks.onCancel()
+    }
+    dragId = null
+  }
+
+  function onTouchStart(e: TouchEvent) {
+    const touch = e.touches[0]
+    if (!touch) return
+
+    const target = e.target as HTMLElement
+    if (target.closest('button, a, input, textarea, select, .nc-actions')) return
+
+    const draggable = findDraggable(target)
+    if (!draggable) return
+
+    const id = getDragId(draggable)
+    if (id === null) return
+
+    startX = touch.clientX
+    startY = touch.clientY
+    dragId = id
+
+    longPressTimer = setTimeout(() => {
+      longPressTimer = null
+      isTouchDragging.value = true
+      callbacks.onDragStart(id)
+      createGhost(draggable, startX, startY)
+    }, LONG_PRESS_MS)
+  }
+
+  function onTouchMove(e: TouchEvent) {
+    const touch = e.touches[0]
+    if (!touch) return
+
+    const dx = touch.clientX - startX
+    const dy = touch.clientY - startY
+
+    // If moved before long press triggers, cancel — user is scrolling
+    if (!isTouchDragging.value) {
+      if (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD) {
+        clearLongPress()
+      }
+      return
+    }
+
+    // We're dragging — prevent scroll
+    e.preventDefault()
+
+    moveGhost(touch.clientX, touch.clientY)
+    autoScroll(touch.clientY)
+
+    const hovered = hitTest(touch.clientX, touch.clientY)
+    if (hovered) {
+      const hoveredId = getDragId(hovered)
+      if (hoveredId !== null && hoveredId !== dragId) {
+        callbacks.onReorderOver(hoveredId, touch.clientX, touch.clientY)
+      }
+    }
+  }
+
+  function onTouchEnd() {
+    clearLongPress()
+    stopAutoScroll()
+    removeGhost()
+
+    if (isTouchDragging.value) {
+      isTouchDragging.value = false
+      callbacks.onDrop()
+    }
+    dragId = null
+  }
+
+  onMounted(() => {
+    const el = containerRef.value
+    if (!el) return
+    el.addEventListener('touchstart', onTouchStart, { passive: false })
+    el.addEventListener('touchmove', onTouchMove, { passive: false })
+    el.addEventListener('touchend', onTouchEnd)
+    el.addEventListener('touchcancel', cancelDrag)
+  })
+
+  onBeforeUnmount(() => {
+    cancelDrag()
+    const el = containerRef.value
+    if (!el) return
+    el.removeEventListener('touchstart', onTouchStart)
+    el.removeEventListener('touchmove', onTouchMove)
+    el.removeEventListener('touchend', onTouchEnd)
+    el.removeEventListener('touchcancel', cancelDrag)
+  })
+
+  return { isTouchDragging }
+}

src/views/NotesView.vue

@@ -88,6 +88,7 @@ import PlusIcon from '@icons/Plus.vue'
 import NoteIcon from '@icons/Note.vue'
 import type { Note } from '@/api/types'
 import { useNotes } from '@/composables/useNotes'
+import { useTouchReorder } from '@/composables/useTouchReorder'
 
 const props = defineProps<{ houseId: string }>()
 
@@ -132,24 +133,27 @@ function onDragStart(noteId: number) {
   dropIndex.value = null
 }
 
-function onReorderOver(hoveredNoteId: number, e: MouseEvent) {
+function computeDropIndex(hoveredNoteId: number, clientX: number, target: HTMLElement | null) {
   const dragId = draggingNoteId.value
   if (!dragId || dragId === hoveredNoteId) return
 
   const without = notes.value.filter((n) => n.id !== dragId)
   const idx = without.findIndex((n) => n.id === hoveredNoteId)
   if (idx === -1) return
 
-  const target = e.currentTarget as HTMLElement | null
   if (target) {
     const rect = target.getBoundingClientRect()
-    const past = e.clientX > rect.left + rect.width / 2
+    const past = clientX > rect.left + rect.width / 2
     dropIndex.value = past ? idx + 1 : idx
   } else {
     dropIndex.value = idx
   }
 }
 
+function onReorderOver(hoveredNoteId: number, e: MouseEvent) {
+  computeDropIndex(hoveredNoteId, e.clientX, e.currentTarget as HTMLElement | null)
+}
+
 function onPlaceholderDrop() {
   commitReorder()
 }
@@ -191,6 +195,20 @@ onBeforeUnmount(() => {
   wallRef.value?.removeEventListener('dragend', onDragEndCapture, true)
 })
 
+// ----- Touch reorder -----
+useTouchReorder(wallRef, {
+  onDragStart: onDragStart,
+  onReorderOver(hoveredId, clientX) {
+    const el = wallRef.value?.querySelector<HTMLElement>(`[data-drag-id="${hoveredId}"]`)
+    computeDropIndex(hoveredId, clientX, el)
+  },
+  onDrop: commitReorder,
+  onCancel() {
+    draggingNoteId.value = null
+    dropIndex.value = null
+  },
+})
+
 // ----- Create / Edit -----
 
 const showDialog = ref(false)

src/views/PhotosView.vue

@@ -251,6 +251,7 @@ import ArrowLeftIcon from '@icons/ArrowLeft.vue'
 import FolderPlusIcon from '@icons/FolderPlus.vue'
 import type { Photo, PhotoFolder } from '@/api/types'
 import { usePhotos, type UploadEntry } from '@/composables/usePhotos'
+import { useTouchReorder } from '@/composables/useTouchReorder'
 
 const props = defineProps<{ houseId: string; folderId?: string }>()
 const router = useRouter()
@@ -358,25 +359,32 @@ function onPhotoDragStart(photoId: number) {
   dropIndex.value = null
 }
 
-function onReorderOver(hoveredPhotoId: number, source: Photo[], e: MouseEvent) {
+function computePhotoDropIndex(
+  hoveredPhotoId: number,
+  source: Photo[],
+  clientX: number,
+  target: HTMLElement | null,
+) {
   const dragId = draggingPhotoId.value
   if (!dragId || dragId === hoveredPhotoId) return
 
   const without = source.filter((p) => p.id !== dragId)
   const idx = without.findIndex((p) => p.id === hoveredPhotoId)
   if (idx === -1) return
 
-  // Determine if cursor is in the left or right half of the hovered card
-  const target = e.currentTarget as HTMLElement | null
   if (target) {
     const rect = target.getBoundingClientRect()
-    const past = e.clientX > rect.left + rect.width / 2
+    const past = clientX > rect.left + rect.width / 2
     dropIndex.value = past ? idx + 1 : idx
   } else {
     dropIndex.value = idx
   }
 }
 
+function onReorderOver(hoveredPhotoId: number, source: Photo[], e: MouseEvent) {
+  computePhotoDropIndex(hoveredPhotoId, source, e.clientX, e.currentTarget as HTMLElement | null)
+}
+
 function onPlaceholderDrop() {
   commitReorder()
 }
@@ -425,6 +433,21 @@ onBeforeUnmount(() => {
   boardRef.value?.removeEventListener('dragend', onDragEndCapture, true)
 })
 
+// ----- Touch reorder -----
+useTouchReorder(boardRef, {
+  onDragStart: onPhotoDragStart,
+  onReorderOver(hoveredId, clientX) {
+    const source = activeFolderId.value ? activeFolderPhotos.value : rootPhotos.value
+    const el = boardRef.value?.querySelector<HTMLElement>(`[data-drag-id="${hoveredId}"]`)
+    computePhotoDropIndex(hoveredId, source, clientX, el)
+  },
+  onDrop: commitReorder,
+  onCancel() {
+    draggingPhotoId.value = null
+    dropIndex.value = null
+  },
+})
+
 // Folder dialog
 const showFolderDialog = ref(false)
 const renamingFolder = ref<PhotoFolder | null>(null)