From bff9af1478082b6e9d4b5a1241f76c458bff5d67 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 16 May 2026 18:04:29 -0400
Subject: [PATCH] feat(bulk): GalleryItem select-mode click +
 checkbox/order-badge overlay

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/gallery/GalleryItem.vue    | 61 ++++++++++++++++---
 1 file changed, 51 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryItem.vue b/frontend/src/components/gallery/GalleryItem.vue
index a532285..9d3d1c0 100644
--- a/frontend/src/components/gallery/GalleryItem.vue
+++ b/frontend/src/components/gallery/GalleryItem.vue
@@ -1,9 +1,11 @@
 <template>
   <v-card
-    class="fc-gallery-item" elevation="0" @click="$emit('open', image.id)"
-    :aria-label="`Open image ${image.id}`" tabindex="0"
-    @keydown.enter="$emit('open', image.id)"
-    @keydown.space.prevent="$emit('open', image.id)"
+    class="fc-gallery-item" elevation="0"
+    :class="{ 'fc-gallery-item--selected': selected }"
+    @click="onClick"
+    :aria-label="`Image ${image.id}`" tabindex="0"
+    @keydown.enter="onClick"
+    @keydown.space.prevent="onClick"
   >
     <div class="fc-gallery-item__media">
       <img
@@ -17,21 +19,35 @@
       <div v-if="thumbError" class="fc-gallery-item__placeholder">
         <v-icon size="32" icon="mdi-image-broken-variant" />
       </div>
+      <template v-if="sel.isSelectMode">
+        <div class="fc-gallery-item__checkbox" :class="{ on: selected }">
+          <v-icon v-if="selected" size="16" icon="mdi-check" />
+        </div>
+        <div v-if="selected" class="fc-gallery-item__order">{{ orderNum }}</div>
+      </template>
     </div>
   </v-card>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue'
+import { useGallerySelectionStore } from '../../stores/gallerySelection.js'
 
-const props = defineProps({
-  image: { type: Object, required: true }
-})
-defineEmits(['open'])
+const props = defineProps({ image: { type: Object, required: true } })
+const emit = defineEmits(['open'])
 
+const sel = useGallerySelectionStore()
 const thumbError = ref(false)
-const isVideo = computed(() => props.image.mime && props.image.mime.startsWith('video/'))
+const isVideo = computed(
+  () => props.image.mime && props.image.mime.startsWith('video/')
+)
+const selected = computed(() => sel.isSelected(props.image.id))
+const orderNum = computed(() => sel.order.indexOf(props.image.id) + 1)
 
+function onClick() {
+  if (sel.isSelectMode) sel.toggle(props.image.id)
+  else emit('open', props.image.id)
+}
 function onThumbError() { thumbError.value = true }
 </script>
 
@@ -46,6 +62,10 @@ function onThumbError() { thumbError.value = true }
   transform: translateY(-1px);
   outline: 2px solid rgb(var(--v-theme-accent));
 }
+.fc-gallery-item--selected {
+  outline: 3px solid rgb(var(--v-theme-accent));
+  outline-offset: -3px;
+}
 .fc-gallery-item__media {
   position: relative;
   aspect-ratio: 1;
@@ -58,7 +78,7 @@ function onThumbError() { thumbError.value = true }
 .fc-gallery-item__video-thumb { position: relative; height: 100%; }
 .fc-gallery-item__video-badge {
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-  color: rgba(232, 228, 216, 0.85); /* parchment with alpha */
+  color: rgba(232, 228, 216, 0.85);
   font-size: 36px;
   pointer-events: none;
 }
@@ -66,4 +86,25 @@ function onThumbError() { thumbError.value = true }
   position: absolute; inset: 0; display: grid; place-items: center;
   background: rgb(var(--v-theme-surface-light));
 }
+.fc-gallery-item__checkbox {
+  position: absolute; top: 8px; left: 8px;
+  width: 22px; height: 22px; border-radius: 4px;
+  border: 2px solid rgba(232, 228, 216, 0.8);
+  background: rgba(20, 23, 26, 0.45);
+  display: grid; place-items: center;
+  color: #14171A; z-index: 11;
+}
+.fc-gallery-item__checkbox.on {
+  background: rgb(var(--v-theme-accent));
+  border-color: rgb(var(--v-theme-accent));
+}
+.fc-gallery-item__order {
+  position: absolute; top: 6px; right: 6px;
+  min-width: 22px; height: 22px; padding: 0 5px;
+  border-radius: 11px;
+  background: rgb(var(--v-theme-accent));
+  color: #14171A; font-size: 12px; font-weight: 700;
+  display: grid; place-items: center; z-index: 11;
+  pointer-events: none;
+}
 </style>