From a8b1c89c62b31fd5daba84443e171ea991f468be Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Thu, 5 Mar 2026 10:10:48 -0800
Subject: [PATCH] feat(avocet): replace HTML5 drag events on LabelBucketGrid
 with hoveredBucket prop

---
 web/src/components/LabelBucketGrid.test.ts | 18 +++++++++++++++++
 web/src/components/LabelBucketGrid.vue     | 23 ++++++++--------------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/web/src/components/LabelBucketGrid.test.ts b/web/src/components/LabelBucketGrid.test.ts
index d1d6e27..fb09e8c 100644
--- a/web/src/components/LabelBucketGrid.test.ts
+++ b/web/src/components/LabelBucketGrid.test.ts
@@ -31,4 +31,22 @@ describe('LabelBucketGrid', () => {
     expect(btn.text()).toContain('1')
     expect(btn.text()).toContain('🗓️')
   })
+
+  it('marks button as drop-target when hoveredBucket matches label name', () => {
+    const w = mount(LabelBucketGrid, {
+      props: { labels, isBucketMode: true, hoveredBucket: 'interview_scheduled' },
+    })
+    const btns = w.findAll('[data-testid="label-btn"]')
+    expect(btns[0].classes()).toContain('is-drop-target')
+    expect(btns[1].classes()).not.toContain('is-drop-target')
+  })
+
+  it('no button marked as drop-target when hoveredBucket is null', () => {
+    const w = mount(LabelBucketGrid, {
+      props: { labels, isBucketMode: false, hoveredBucket: null },
+    })
+    w.findAll('[data-testid="label-btn"]').forEach(btn => {
+      expect(btn.classes()).not.toContain('is-drop-target')
+    })
+  })
 })
diff --git a/web/src/components/LabelBucketGrid.vue b/web/src/components/LabelBucketGrid.vue
index dfa67f3..f1102c2 100644
--- a/web/src/components/LabelBucketGrid.vue
+++ b/web/src/components/LabelBucketGrid.vue
@@ -4,14 +4,12 @@
       v-for="label in labels"
       :key="label.key"
       data-testid="label-btn"
+      :data-label-key="label.name"
       class="label-btn"
-      :class="{ 'is-drop-target': dragOverLabel === label.name }"
+      :class="{ 'is-drop-target': props.hoveredBucket === label.name }"
       :style="{ '--label-color': label.color }"
       :aria-label="`Label as ${label.name.replace(/_/g, ' ')} (key: ${label.key})`"
       @click="$emit('label', label.name)"
-      @dragover.prevent="dragOverLabel = label.name"
-      @dragleave="dragOverLabel = null"
-      @drop.prevent="onDrop(label.name)"
     >
       <span class="key-hint" aria-hidden="true">{{ label.key }}</span>
       <span class="emoji" aria-hidden="true">{{ label.emoji }}</span>
@@ -21,19 +19,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-
 interface Label { name: string; emoji: string; color: string; key: string }
 
-const props = defineProps<{ labels: Label[]; isBucketMode: boolean }>()
-const emit  = defineEmits<{ label: [name: string] }>()
-
-const dragOverLabel = ref<string | null>(null)
-
-function onDrop(name: string) {
-  dragOverLabel.value = null
-  emit('label', name)
-}
+const props = defineProps<{
+  labels: Label[]
+  isBucketMode: boolean
+  hoveredBucket?: string | null
+}>()
+const emit = defineEmits<{ label: [name: string] }>()
 </script>
 
 <style scoped>