From 852231ae011609dfa00e2e9d33481d5ddbc3d1e2 Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Sun, 29 Mar 2026 16:34:30 +0200
Subject: [PATCH] fix(ui): ArrangementDialog drag whole box, persist changes
 across switch, hover highlight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove drag handle restriction — entire pill box is now draggable
- Keep local copy of arrangements so edits survive switching between
  arrangements (was reading stale props after switch-back)
- Highlight corresponding left pill when hovering right lyric preview
---
 resources/js/Components/ArrangementDialog.vue | 56 +++++++++++++------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/resources/js/Components/ArrangementDialog.vue b/resources/js/Components/ArrangementDialog.vue
index 514febb..80af850 100644
--- a/resources/js/Components/ArrangementDialog.vue
+++ b/resources/js/Components/ArrangementDialog.vue
@@ -89,20 +89,40 @@ async function assignSong() {
 
 /* ── State ── */
 
+// Local copy of arrangements so changes survive switching between arrangements
+const localArrangements = ref(JSON.parse(JSON.stringify(props.arrangements)))
+
+watch(
+    () => props.arrangements,
+    (newArr) => {
+        // Merge server updates (e.g. after create/clone/delete) but keep local edits for existing arrangements
+        const localById = Object.fromEntries(localArrangements.value.map((a) => [a.id, a]))
+        localArrangements.value = newArr.map((a) => localById[a.id] ?? JSON.parse(JSON.stringify(a)))
+        // Add any new arrangements not in local
+        for (const a of newArr) {
+            if (!localById[a.id]) {
+                localArrangements.value.push(JSON.parse(JSON.stringify(a)))
+            }
+        }
+    },
+    { deep: true },
+)
+
 const currentArrangementId = ref(
     props.selectedArrangementId ?? props.arrangements.find((a) => a.is_default)?.id ?? props.arrangements[0]?.id ?? null,
 )
 
 const currentArrangement = computed(() =>
-    props.arrangements.find((a) => a.id === Number(currentArrangementId.value)) ?? null,
+    localArrangements.value.find((a) => a.id === Number(currentArrangementId.value)) ?? null,
 )
 
 const arrangementGroups = ref([])
+const hoveredIndex = ref(null)
 
 watch(
     currentArrangementId,
     (id) => {
-        const arr = props.arrangements.find((a) => a.id === Number(id))
+        const arr = localArrangements.value.find((a) => a.id === Number(id))
         if (arr?.groups?.length) {
             arrangementGroups.value = arr.groups.map((g, i) => ({ ...g, _uid: `${g.id}-${i}-${Date.now()}` }))
         } else {
@@ -212,6 +232,16 @@ function deleteArrangement() {
 
 function saveArrangement() {
     if (!currentArrangement.value) return
+
+    // Update local arrangements copy so changes survive switching
+    const localArr = localArrangements.value.find((a) => a.id === currentArrangement.value.id)
+    if (localArr) {
+        localArr.groups = arrangementGroups.value.map((g, i) => ({
+            ...g,
+            order: i + 1,
+        }))
+    }
+
     router.put(
         `/arrangements/${currentArrangement.value.id}`,
         {
@@ -454,7 +484,6 @@ function closeOnBackdrop(e) {
                                 ghost-class="drag-ghost"
                                 chosen-class="drag-chosen"
                                 drag-class="drag-active"
-                                handle=".drag-handle"
                                 class="flex flex-col gap-2"
                                 @end="saveArrangement"
                             >
@@ -462,23 +491,13 @@ function closeOnBackdrop(e) {
                                     v-for="(element, index) in arrangementGroups"
                                     :key="element._uid"
                                     data-testid="arrangement-pill"
-                                    class="flex items-center gap-2 rounded-lg border-2 px-3 py-2"
+                                    class="flex cursor-grab items-center gap-2 rounded-lg border-2 px-3 py-2"
+                                    :class="{ 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index }"
                                     :style="{
                                         borderColor: element.color ?? '#6b7280',
                                         backgroundColor: (element.color ?? '#6b7280') + '20',
                                     }"
                                 >
-                                    <!-- Drag handle -->
-                                    <span class="drag-handle cursor-grab text-gray-400 hover:text-gray-600">
-                                        <svg
-                                            class="h-4 w-4"
-                                            fill="currentColor"
-                                            viewBox="0 0 20 20"
-                                        >
-                                            <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>
-                                    </span>
-
                                     <!-- Group name -->
                                     <span class="flex-1 text-sm font-medium">
                                         {{ element.name }}
@@ -562,10 +581,13 @@ function closeOnBackdrop(e) {
                             </h4>
 
                             <div
-                                v-for="element in arrangementGroups"
+                                v-for="(element, index) in arrangementGroups"
                                 :key="element._uid"
-                                class="rounded-r-lg border-l-4 bg-white p-3 shadow-sm"
+                                class="rounded-r-lg border-l-4 bg-white p-3 shadow-sm transition-shadow"
+                                :class="{ 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index }"
                                 :style="{ borderColor: element.color ?? '#6b7280' }"
+                                @mouseenter="hoveredIndex = index"
+                                @mouseleave="hoveredIndex = null"
                             >
                                 <!-- Group name pill -->
                                 <span