Files
FabledCurator/frontend/src/components/modal/SuggestionsCategoryGroup.vue
T
bvandeusenandClaude Opus 4.8 a444cf82d1
CI / lint (push) Successful in 3s
CI / frontend-build (push) Successful in 20s
CI / backend-lint-and-test (push) Successful in 36s
CI / integration (push) Successful in 3m45s
refactor(tags): unify suggestion source — one canonical DB-tag dropdown, drop dead raw/alias machinery (#154)
Every tag suggestion is a canonical DB tag now (tagging-v2 #114: heads + CCIP
score EXISTING concept tags). The pre-heads apparatus for model-predicted tags
that didn't exist in the DB — creates_new_tag / raw_name / via_alias, the
/suggestions/alias endpoint + add_alias_and_accept, AliasPickerDialog, and the
store's aliasAccept/removeAlias — was dead and is removed.

The type-to-add dropdown was TWO row sources (server autocomplete + the image's
ML suggestions) merged with a dedup that dropped the %-bearing suggestion row
when the debounced server hit landed — the operator's "confidence % flickers
then vanishes". Now it's ONE list of DB-tag matches, each annotated with the
model's confidence (join by canonical_tag_id) when the tag was scored for this
image. No dedup, no flicker; picking a suggested tag still records acceptance
via TagPanel.findPending.

Single per-image fetch: score_image now reports above_threshold per row
(computed vs the head's own suggest cut, separate from the inclusion floor), so
the rail makes ONE min=0 request and derives the panel (above_threshold) and the
dropdown (all, text-filtered) client-side — the two /suggestions calls collapse
to one. Manual "Create 'X' as <kind>" (novel typed names) is unchanged; the
alias table + tag-side alias admin + auto-apply alias matching are untouched.

Tests: gate/serializer assertions updated (above_threshold; dropped dead-field
+ alias-endpoint checks); frontend spec seeds via the single load and covers the
byCategory/aboveByCategory split.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CgZP9v2otxVJymiYsnVuMy
2026-07-10 15:22:51 -04:00

88 lines
3.1 KiB
Vue

<template>
<div class="fc-sgroup">
<div class="fc-sgroup__header-row">
<button
v-if="collapsible"
class="fc-sgroup__header fc-sgroup__header--btn"
@click="open = !open"
>
<v-icon size="small">{{ open ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
{{ label }} ({{ items.length }})
</button>
<div v-else class="fc-sgroup__header">{{ label }}</div>
<!-- "Confirm what's right, reject the rest": clears every still-unhandled
suggestion in this section at once. Reversible (each stays flagged
rejected with one-click un-reject), so no confirm dialog. -->
<button
v-if="rejectableCount > 0"
class="fc-sgroup__reject-rest" type="button"
:title="`Reject the ${rejectableCount} remaining ${label} suggestion${rejectableCount === 1 ? '' : 's'}`"
@click="$emit('reject-all')"
>Reject rest</button>
</div>
<div v-show="open" class="fc-sgroup__items">
<SuggestionItem
v-for="(s, i) in items" :key="`${s.display_name}-${i}`"
:suggestion="s"
@accept="$emit('accept', $event)"
@dismiss="$emit('dismiss', $event)"
@undismiss="$emit('undismiss', $event)"
/>
</div>
</div>
</template>
<script setup>
import { computed, ref } from 'vue'
import SuggestionItem from './SuggestionItem.vue'
const props = defineProps({
label: { type: String, required: true },
items: { type: Array, required: true },
collapsible: { type: Boolean, default: false },
defaultOpen: { type: Boolean, default: true }
})
defineEmits(['accept', 'dismiss', 'undismiss', 'reject-all'])
// Still-unhandled suggestions (not yet rejected) — how many "Reject rest" clears.
const rejectableCount = computed(() => props.items.filter((s) => !s.rejected).length)
const open = ref(props.collapsible ? props.defaultOpen : true)
</script>
<style scoped>
.fc-sgroup { margin-bottom: 10px; }
.fc-sgroup__header-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 4px;
}
.fc-sgroup__header {
flex: 1 1 auto; min-width: 0;
font-family: 'Inter', sans-serif;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface)));
}
.fc-sgroup__header--btn {
display: flex; align-items: center; gap: 4px;
background: none; border: none; cursor: pointer;
padding: 0; text-align: left;
font: inherit; text-transform: uppercase; letter-spacing: 0.06em;
}
/* Section-level "reject the remaining" — subtle until hovered so it doesn't
compete with the per-row verdicts. */
.fc-sgroup__reject-rest {
flex: 0 0 auto;
background: none; border: none; cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: rgb(var(--v-theme-error));
padding: 2px 5px; border-radius: 4px;
}
.fc-sgroup__reject-rest:hover { background: rgb(var(--v-theme-error), 0.1); }
.fc-sgroup__reject-rest:focus-visible {
outline: 2px solid rgb(var(--v-theme-error)); outline-offset: 1px;
}
</style>