From fc64f130b83829867849fe38acb358f645666e48 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 28 Jun 2026 00:07:38 -0400
Subject: [PATCH] fix(tag-eval): thumbnail click opens the view modal, not
 Explore
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking an example in the maintenance card navigated to /explore/<id> —
heavier than wanted (operator: just want a bigger look). Open the existing
app-wide ImageViewer modal via modal.open(id) instead: bigger image + tags
in place, no navigation away from Settings. The ✓/✗ actions are unaffected
(separate overlay buttons).

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

diff --git a/frontend/src/components/settings/TagEvalCard.vue b/frontend/src/components/settings/TagEvalCard.vue
index 0a59b79..e427012 100644
--- a/frontend/src/components/settings/TagEvalCard.vue
+++ b/frontend/src/components/settings/TagEvalCard.vue
@@ -101,12 +101,12 @@
                   class="fc-ex__item"
                   :class="actedLabel(c, grp.dir, it) ? 'fc-ex__item--acted' : ''"
                 >
-                  <a
-                    class="fc-ex__thumb" :href="`/explore/${it.id}`" target="_blank"
-                    rel="noopener" :title="`#${it.id} — open in Explore`"
+                  <button
+                    type="button" class="fc-ex__thumb"
+                    :title="`#${it.id} — click to enlarge`" @click="modal.open(it.id)"
                   >
                     <img :src="it.thumbnail_url" loading="lazy" />
-                  </a>
+                  </button>
                   <div v-if="actedLabel(c, grp.dir, it)" class="fc-ex__badge">
                     {{ actedLabel(c, grp.dir, it) }}
                   </div>
@@ -136,11 +136,13 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import MaintenanceTile from '../common/MaintenanceTile.vue'
 import { useTagEvalStore } from '../../stores/tagEval.js'
+import { useModalStore } from '../../stores/modal.js'
 
 const DEFAULT_CONCEPTS =
   'glasses, cat, dog, horse, goblin, cum, lactation, fellatio, xray, stomach bulge'
 
 const store = useTagEvalStore()
+const modal = useModalStore()
 const run = ref(null)
 const conceptsText = ref(DEFAULT_CONCEPTS)
 const busy = ref(false)
@@ -251,6 +253,7 @@ async function act(c, it, dir, verdict) {
   display: block; width: 100%; height: 100%; border-radius: 6px;
   overflow: hidden; background: rgb(var(--v-theme-surface-light));
   outline: 1px solid transparent; transition: outline-color 0.12s;
+  border: none; padding: 0; cursor: pointer;
 }
 .fc-ex__thumb:hover { outline-color: rgb(var(--v-theme-accent)); }
 .fc-ex__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }