From c86c591d07d4fb6ed67a31a592a324724387e6e3 Mon Sep 17 00:00:00 2001
From: N48LL <58626061+thisisvv@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:59:28 +0200
Subject: [PATCH 1/3] fix: drag-and-drop for mobile

---
 app/components/board/BoardSection.vue       |  6 ++++++
 app/components/board/BoardView.vue          |  3 +++
 app/components/editor/EditorContextMenu.vue | 20 +++++++++++++-------
 app/components/widgets/WidgetWrapper.vue    |  2 +-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/components/board/BoardSection.vue b/app/components/board/BoardSection.vue
index 1e70b2f..58442c7 100644
--- a/app/components/board/BoardSection.vue
+++ b/app/components/board/BoardSection.vue
@@ -104,6 +104,12 @@ function toggleCollapse() {
         group="widgets"
         :animation="150"
         ghost-class="opacity-30"
+        :force-fallback="true"
+        :fallback-on-body="true"
+        :fallback-tolerance="3"
+        :delay="200"
+        :delay-on-touch-only="true"
+        :touch-start-threshold="5"
         class="grid gap-4"
         :class="gridClass"
         @change="onDragChange"
diff --git a/app/components/board/BoardView.vue b/app/components/board/BoardView.vue
index 81ead8a..8bda944 100644
--- a/app/components/board/BoardView.vue
+++ b/app/components/board/BoardView.vue
@@ -14,6 +14,9 @@ const { isEditing, markDirty } = useEditMode()
       handle=".section-handle"
       :animation="150"
       ghost-class="opacity-30"
+      :force-fallback="true"
+      :fallback-on-body="true"
+      :fallback-tolerance="3"
       class="flex flex-col gap-6"
       @change="markDirty"
     >
diff --git a/app/components/editor/EditorContextMenu.vue b/app/components/editor/EditorContextMenu.vue
index 9944782..9da6cb3 100644
--- a/app/components/editor/EditorContextMenu.vue
+++ b/app/components/editor/EditorContextMenu.vue
@@ -11,6 +11,13 @@ const store = useBoardStore()
 const { markDirty } = useEditMode()
 
 const showSettings = ref(false)
+const menuOpen = ref(false)
+
+function onContextMenu(e: MouseEvent) {
+  if (props.disabled) return
+  e.preventDefault()
+  menuOpen.value = true
+}
 
 const items = computed(() => {
   if (props.disabled) return []
@@ -112,19 +119,18 @@ const items = computed(() => {
 </script>
 
 <template>
-  <div class="relative">
-    <UContextMenu
-      :items="items"
-      :disabled="disabled"
-    >
-      <slot />
-    </UContextMenu>
+  <div
+    class="relative"
+    @contextmenu="onContextMenu"
+  >
+    <slot />
 
     <div
       v-if="!disabled"
       class="absolute top-1.5 right-1.5 z-10"
     >
       <UDropdownMenu
+        v-model:open="menuOpen"
         :items="items"
         :content="{ align: 'end' }"
       >
diff --git a/app/components/widgets/WidgetWrapper.vue b/app/components/widgets/WidgetWrapper.vue
index d19f3f3..72518c5 100644
--- a/app/components/widgets/WidgetWrapper.vue
+++ b/app/components/widgets/WidgetWrapper.vue
@@ -41,7 +41,7 @@ function pluginsAt(position: string) {
       :color="cardColor"
       class="relative h-full transition-all duration-200"
       :class="{
-        'ring-2 ring-primary/30 hover:ring-primary/50': isEditing,
+        'ring-2 ring-primary/30 hover:ring-primary/50 select-none': isEditing,
         'ring-2 ring-primary/30': isAccent && !isEditing,
         'hover:ring-1 hover:ring-accented cursor-pointer': isLinkable && !isEditing
       }"

From a93019e5f2aab77aeeecf78f97fa732e6a02bf37 Mon Sep 17 00:00:00 2001
From: N48LL <58626061+thisisvv@users.noreply.github.com>
Date: Mon, 13 Apr 2026 16:01:51 +0200
Subject: [PATCH 2/3] feat: add widget picker toggle on new section

---
 app/components/board/BoardSection.vue | 9 +++++----
 app/components/board/BoardToolbar.vue | 4 +---
 app/composables/useEditMode.ts        | 2 ++
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/components/board/BoardSection.vue b/app/components/board/BoardSection.vue
index 58442c7..5e595be 100644
--- a/app/components/board/BoardSection.vue
+++ b/app/components/board/BoardSection.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
   section: BoardSection
 }>()
 
-const { isEditing, markDirty } = useEditMode()
+const { isEditing, showWidgetPicker, markDirty } = useEditMode()
 const store = useBoardStore()
 
 const showSettings = ref(false)
@@ -124,9 +124,10 @@ function toggleCollapse() {
       </VueDraggable>
       <!-- eslint-enable vue/no-mutating-props -->
 
-      <div
+      <button
         v-if="section.widgets.length === 0 && isEditing"
-        class="border-2 border-dashed border-default rounded-lg p-8 text-center text-dimmed"
+        class="w-full border-2 border-dashed border-default rounded-lg p-8 text-center text-dimmed hover:border-primary hover:text-muted transition-colors cursor-pointer"
+        @click="showWidgetPicker = true"
       >
         <UIcon
           name="i-lucide-plus"
@@ -135,7 +136,7 @@ function toggleCollapse() {
         <p class="text-sm">
           Drag widgets here or add from the widget picker
         </p>
-      </div>
+      </button>
     </div>
 
     <EditorSectionSettings
diff --git a/app/components/board/BoardToolbar.vue b/app/components/board/BoardToolbar.vue
index 8d77264..42e9682 100644
--- a/app/components/board/BoardToolbar.vue
+++ b/app/components/board/BoardToolbar.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 const store = useBoardStore()
-const { isEditing, hasUnsavedChanges, enterEditMode, exitEditMode, markDirty } = useEditMode()
-
-const showWidgetPicker = ref(false)
+const { isEditing, hasUnsavedChanges, showWidgetPicker, enterEditMode, exitEditMode, markDirty } = useEditMode()
 const showBoardSettings = ref(false)
 
 const toast = useToast()
diff --git a/app/composables/useEditMode.ts b/app/composables/useEditMode.ts
index 0934987..099920f 100644
--- a/app/composables/useEditMode.ts
+++ b/app/composables/useEditMode.ts
@@ -1,6 +1,7 @@
 export function useEditMode() {
   const isEditing = useState('editMode', () => false)
   const hasUnsavedChanges = useState('unsavedChanges', () => false)
+  const showWidgetPicker = useState('showWidgetPicker', () => false)
 
   function enterEditMode() {
     isEditing.value = true
@@ -20,6 +21,7 @@ export function useEditMode() {
   return {
     isEditing,
     hasUnsavedChanges,
+    showWidgetPicker,
     enterEditMode,
     exitEditMode,
     markDirty

From 76067c998ce7a31e2dfba00d1062588861c0ea1d Mon Sep 17 00:00:00 2001
From: N48LL <58626061+thisisvv@users.noreply.github.com>
Date: Mon, 13 Apr 2026 16:50:34 +0200
Subject: [PATCH 3/3] fix: update drag-and-drop behavior and context menu
 integration for improved UX

---
 app/components/board/BoardSection.vue       |  5 ++---
 app/components/editor/EditorContextMenu.vue | 13 ++-----------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/app/components/board/BoardSection.vue b/app/components/board/BoardSection.vue
index 5e595be..b51856f 100644
--- a/app/components/board/BoardSection.vue
+++ b/app/components/board/BoardSection.vue
@@ -107,9 +107,8 @@ function toggleCollapse() {
         :force-fallback="true"
         :fallback-on-body="true"
         :fallback-tolerance="3"
-        :delay="200"
-        :delay-on-touch-only="true"
-        :touch-start-threshold="5"
+        filter=".no-drag"
+        :prevent-on-filter="false"
         class="grid gap-4"
         :class="gridClass"
         @change="onDragChange"
diff --git a/app/components/editor/EditorContextMenu.vue b/app/components/editor/EditorContextMenu.vue
index 9da6cb3..2721bee 100644
--- a/app/components/editor/EditorContextMenu.vue
+++ b/app/components/editor/EditorContextMenu.vue
@@ -13,12 +13,6 @@ const { markDirty } = useEditMode()
 const showSettings = ref(false)
 const menuOpen = ref(false)
 
-function onContextMenu(e: MouseEvent) {
-  if (props.disabled) return
-  e.preventDefault()
-  menuOpen.value = true
-}
-
 const items = computed(() => {
   if (props.disabled) return []
 
@@ -119,15 +113,12 @@ const items = computed(() => {
 </script>
 
 <template>
-  <div
-    class="relative"
-    @contextmenu="onContextMenu"
-  >
+  <div class="relative">
     <slot />
 
     <div
       v-if="!disabled"
-      class="absolute top-1.5 right-1.5 z-10"
+      class="no-drag absolute top-1.5 right-1.5 z-10"
     >
       <UDropdownMenu
         v-model:open="menuOpen"