From 6c5dbfe4a074961caf59456d3a4b7188938b76a0 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 7 Jun 2026 10:42:05 -0400
Subject: [PATCH 1/2] feat(modal): large centered loading spinner

The old size-36 v-progress-circular sat tiny in the top-left because
.fc-viewer__media doesn't center its children (the canvas centers itself).
Replace it with a 108px dual counter-rotating accent-ring spinner as a centered,
non-interactive overlay over the modal (operator-flagged 2026-06-07).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/modal/ImageViewer.vue | 41 +++++++++++++++++--
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/modal/ImageViewer.vue b/frontend/src/components/modal/ImageViewer.vue
index 89aff9e..b766665 100644
--- a/frontend/src/components/modal/ImageViewer.vue
+++ b/frontend/src/components/modal/ImageViewer.vue
@@ -47,12 +47,17 @@
         <v-icon size="32">mdi-chevron-right</v-icon>
       </button>
 
+      <!-- Large centered loading spinner (operator-flagged 2026-06-07: the old
+           size-36 one sat tiny in the top-left). Dual counter-rotating accent
+           rings, centered over the whole modal. pointer-events:none so the
+           close/nav controls underneath stay clickable. -->
+      <div v-if="modal.loading" class="fc-viewer__loading">
+        <div class="fc-viewer__spinner" />
+      </div>
+
       <div class="fc-viewer__body">
         <div class="fc-viewer__media">
-          <v-progress-circular
-            v-if="modal.loading" indeterminate color="accent" size="36"
-          />
-          <template v-else-if="modal.current">
+          <template v-if="modal.current">
             <ImageCanvas
               v-if="!isVideo" :src="modal.current.image_url" :alt="`Image ${modal.current.id}`"
               @close-request="$emit('close')"
@@ -259,6 +264,34 @@ function nextFrame() {
   right: calc(var(--fc-side-w) + 16px);
   transform: translateY(-50%);
 }
+/* Centered loading overlay — sits over the media band; non-interactive so the
+   close/nav controls underneath keep working. */
+.fc-viewer__loading {
+  position: absolute; inset: 0; z-index: 2;
+  display: flex; align-items: center; justify-content: center;
+  pointer-events: none;
+}
+/* Two concentric accent rings counter-rotating, each lit on a different arc —
+   reads as one orbiting object. ~108px so it's unmistakably the focal point. */
+.fc-viewer__spinner {
+  width: 108px; height: 108px; border-radius: 50%;
+  border: 5px solid rgb(var(--v-theme-accent), 0.16);
+  border-top-color: rgb(var(--v-theme-accent));
+  animation: fc-viewer-spin 0.95s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
+  position: relative;
+  box-shadow: 0 0 24px rgb(var(--v-theme-accent), 0.18);
+}
+.fc-viewer__spinner::after {
+  content: ''; position: absolute; inset: 14px; border-radius: 50%;
+  border: 5px solid rgb(var(--v-theme-accent), 0.10);
+  border-bottom-color: rgb(var(--v-theme-accent));
+  animation: fc-viewer-spin 1.5s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite reverse;
+}
+@keyframes fc-viewer-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .fc-viewer__spinner, .fc-viewer__spinner::after { animation-duration: 3s; }
+}
+
 .fc-viewer__body {
   flex: 1; display: flex; min-height: 0;
 }

From 1226d3b23a361ccc1a023d22644fee7e2182a5cc Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 7 Jun 2026 10:52:48 -0400
Subject: [PATCH 2/2] =?UTF-8?q?fix(modal):=20kebab=20menus=20render=20BEHI?=
 =?UTF-8?q?ND=20the=20modal=20=E2=80=94=20bump=20z-index=20above=20it?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

THE actual root cause of the "dead" tag-chip kebab (operator inspected it
2026-06-07: the menu was ghosted, blurred, behind the sidebar). The teleported
v-menu landed below .fc-viewer (z-index 2000) and the modal's
backdrop-filter: blur(8px) smeared it — so it opened the whole time, just
underneath. Every prior "fix" (un-nesting the button, the explicit activator
pattern) was chasing a click/activation problem that never existed.

Set :z-index="2400" on the tag-chip and suggestion kebab menus so they paint
above the modal. (Dialogs already render on top — only the anchored menus tied
with the modal's z-index and lost.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/modal/SuggestionItem.vue | 1 +
 frontend/src/components/modal/TagChip.vue        | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/modal/SuggestionItem.vue b/frontend/src/components/modal/SuggestionItem.vue
index 16e55cc..55464fd 100644
--- a/frontend/src/components/modal/SuggestionItem.vue
+++ b/frontend/src/components/modal/SuggestionItem.vue
@@ -37,6 +37,7 @@
       />
       <v-menu
         v-model="menuOpen" activator="parent" :open-on-click="false"
+        :z-index="2400"
       >
         <v-list density="compact">
           <v-list-item @click="$emit('alias', suggestion)">
diff --git a/frontend/src/components/modal/TagChip.vue b/frontend/src/components/modal/TagChip.vue
index f06c18a..e93710d 100644
--- a/frontend/src/components/modal/TagChip.vue
+++ b/frontend/src/components/modal/TagChip.vue
@@ -21,7 +21,11 @@
         :aria-label="`More actions for ${tag.name}`"
         @click.stop="menuOpen = !menuOpen"
       />
-      <v-menu v-model="menuOpen" activator="parent" :open-on-click="false">
+      <!-- :z-index above the modal's 2000 — the teleported menu otherwise lands
+           BEHIND .fc-viewer and gets blurred by its backdrop-filter (operator
+           saw it ghosted behind the sidebar, 2026-06-07). THIS is what made the
+           kebab look dead the whole time: it opened, just underneath. -->
+      <v-menu v-model="menuOpen" activator="parent" :open-on-click="false" :z-index="2400">
         <v-list density="compact">
           <v-list-item @click="$emit('rename', tag)">
             <v-list-item-title>Rename…</v-list-item-title>