From 06f98acf3e25e303fa9590d7ebe5fdbbc7050c29 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 7 Jul 2026 23:17:18 -0400
Subject: [PATCH] feat(tagging): bolder auto-tag accept/reject + larger tag
 chips in the rail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The in-pill ✓/✗ on unconfirmed auto-tags read muted — a faint colored icon on a
tonal chip (worst on character tags, kind=info) that only lit up on hover. Make
them solid green/red circles with a white glyph (22px, icon 15), mirroring the
Suggestions rail's verdict buttons so accept/reject read identically. Also bump
the applied-tag chips from size=small to default and the leading kind icon to
match — bigger, clearer tags throughout the rail.

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

diff --git a/frontend/src/components/modal/TagChip.vue b/frontend/src/components/modal/TagChip.vue
index bc82dbe..0e1b6dc 100644
--- a/frontend/src/components/modal/TagChip.vue
+++ b/frontend/src/components/modal/TagChip.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="fc-tag-chip" @mouseenter="onEnter" @mouseleave="onLeave">
     <v-chip
-      size="small" :closable="!unconfirmedAuto"
+      size="default" :closable="!unconfirmedAuto"
       :color="store.colorFor(tag.kind)" variant="tonal"
       class="fc-tag-chip__nav"
       role="link"
@@ -9,7 +9,7 @@
       @click="$emit('navigate', tag)"
       @click:close="$emit('remove', tag.id)"
     >
-      <v-icon start size="x-small">{{ iconFor(tag.kind) }}</v-icon>
+      <v-icon start size="small">{{ iconFor(tag.kind) }}</v-icon>
       <span class="fc-tag-chip__name">{{ tag.name }}</span><v-icon
         v-if="tag.is_system" end size="x-small" class="fc-tag-chip__system"
         title="System tag — tagged items are excluded from training other concepts"
@@ -27,13 +27,13 @@
           :title="`Yes — keep “${tag.name}” (trains the model, won't be retracted)`"
           :aria-label="`Confirm ${tag.name}`"
           @click.stop="$emit('confirm', tag)"
-        ><v-icon size="13">mdi-check</v-icon></button>
+        ><v-icon size="15">mdi-check</v-icon></button>
         <button
           type="button" class="fc-tag-chip__no"
           :title="`No — remove “${tag.name}”`"
           :aria-label="`Reject ${tag.name}`"
           @click.stop="$emit('remove', tag.id)"
-        ><v-icon size="13">mdi-close</v-icon></button>
+        ><v-icon size="15">mdi-close</v-icon></button>
       </span>
     </v-chip>
     <!-- Modal-safe kebab is baked into KebabMenu (this chip lives in the
@@ -159,23 +159,27 @@ function iconFor (k) { return KIND_ICONS[k] || 'mdi-tag' }
 .fc-tag-chip__kebab { opacity: 0.7; }
 .fc-tag-chip:hover .fc-tag-chip__kebab { opacity: 1; }
 .fc-tag-chip__fandom { opacity: 0.7; font-size: 0.85em; }
-/* Provisional auto-tag: a compact green ✓ / red ✗ pair in place of the ✕. The
-   yes/no is obvious enough on its own, so there's no "auto" label (operator-asked
+/* Provisional auto-tag: a green ✓ / red ✗ pair in place of the ✕. The yes/no is
+   obvious enough on its own, so there's no "auto" label (operator-asked
    2026-07-07). flex:0 0 auto keeps it visible while the name ellipsis-truncates. */
 .fc-tag-chip__verdict {
-  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px;
-  margin-left: 3px;
+  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
+  margin-left: 5px;
 }
+/* Solid-filled (white glyph on a full success/error circle) so accept/reject
+   stay well-defined even on a muted tonal chip — e.g. character (info) — instead
+   of a faint icon that only lit up on hover. Mirrors the Suggestions rail's
+   verdict buttons so the affordance reads identically (operator-asked 2026-07-08). */
 .fc-tag-chip__yes, .fc-tag-chip__no {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%;
-  background: transparent; cursor: pointer; transition: background 0.1s;
+  width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%;
+  color: #fff; cursor: pointer; opacity: 0.92;
+  transition: transform 0.1s, opacity 0.1s;
 }
-.fc-tag-chip__yes { color: rgb(var(--v-theme-success)); }
-.fc-tag-chip__no { color: rgb(var(--v-theme-error)); }
-.fc-tag-chip__yes:hover { background: rgb(var(--v-theme-success), 0.16); }
-.fc-tag-chip__no:hover { background: rgb(var(--v-theme-error), 0.16); }
+.fc-tag-chip__yes { background: rgb(var(--v-theme-success)); }
+.fc-tag-chip__no { background: rgb(var(--v-theme-error)); }
+.fc-tag-chip__yes:hover, .fc-tag-chip__no:hover { opacity: 1; transform: scale(1.1); }
 .fc-tag-chip__yes:focus-visible, .fc-tag-chip__no:focus-visible {
-  outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 1px;
+  outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 2px;
 }
 </style>