style(ui): auto-tag Keep button matches the suggestion accept button
CI / lint (push) Successful in 3s
CI / frontend-build (push) Successful in 22s
CI / backend-lint-and-test (push) Successful in 45s
CI / integration (push) Successful in 3m48s

The ✓ Keep on a provisional auto-tag chip was a smaller tinted-outline variant;
make it the SAME filled green circle (white ✓, 26px, opacity 0.9→1 + scale on
hover, accent focus ring) as the suggestion accept button (.fc-act--yes in
SuggestionItem) so "accept this tag" reads identically across surfaces
(operator-asked).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CDgx8bQS5YrGRK76v8HUnM
This commit is contained in:
2026-07-06 21:36:19 -04:00
parent 18bb25f140
commit 04d5d62cfe
+9 -7
View File
@@ -29,7 +29,7 @@
:title="`Keep “${tag.name}” — confirm this auto-tag so it trains the model and won't be retracted`"
:aria-label="`Confirm ${tag.name}`"
@click.stop="$emit('confirm', tag)"
><v-icon size="14">mdi-check</v-icon></button>
><v-icon size="16">mdi-check</v-icon></button>
<!-- Modal-safe kebab is baked into KebabMenu (this chip lives in the
teleported image modal #711). System tags hide it entirely: rename
is refused server-side (the hygiene machinery keys on the row) and
@@ -152,16 +152,18 @@ function iconFor (k) { return KIND_ICONS[k] || 'mdi-tag' }
border: 1px solid rgb(var(--v-theme-on-surface-variant), 0.3);
padding: 0 4px; border-radius: 999px;
}
/* Keep/confirm — a success-tinted check next to a provisional auto-tag. */
/* Keep/confirm — the SAME filled green ✓ circle as the suggestion accept button
(.fc-act--yes in SuggestionItem), so "accept this tag" reads identically
wherever it appears (operator-asked 2026-07-06). */
.fc-tag-chip__confirm {
flex: 0 0 auto;
width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
border: none; background: transparent; cursor: pointer;
color: rgb(var(--v-theme-success));
color: #fff; background: rgb(var(--v-theme-success));
opacity: 0.9; transition: transform 0.1s, opacity 0.1s;
}
.fc-tag-chip__confirm:hover { background: rgb(var(--v-theme-success), 0.14); }
.fc-tag-chip__confirm:hover { opacity: 1; transform: scale(1.1); }
.fc-tag-chip__confirm:focus-visible {
outline: 2px solid rgb(var(--v-theme-success)); outline-offset: 1px;
outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 1px;
}
</style>