Merge pull request 'fix(tag-eval): example thumbnail opens the view modal instead of Explore' (#138) from dev into main

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