Merge pull request 'Modal: large centered spinner + kebab z-index fix' (#81) from dev into main

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;
 }

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)">

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>