Files
FabledCurator/frontend/src/components/modal/SuggestionsCategoryGroup.vue
T
bvandeusen 179c1a9dcc
CI / lint (push) Successful in 2s
CI / frontend-build (push) Successful in 18s
CI / backend-lint-and-test (push) Successful in 26s
CI / integration (push) Failing after 3m19s
feat(suggestions): visible, reversible rejection in the modal rail
A red-✗ dismissal no longer makes the suggestion vanish. The rejected tag
stays in the rail — dimmed, struck-through, with a "rejected" pill and a
one-click undo (↶) in place of the ✗ — so a misclick is recoverable and the
operator can see what they've said no to (operator-asked 2026-06-27).

Backend: SuggestionService.for_image now KEEPS rejected tags, flagged
rejected=True, sorted to the bottom of their category, instead of dropping
them. New AllowlistService.undismiss + POST /suggestions/undismiss clears the
TagSuggestionRejection. Rejected items are still excluded from bulk consensus
(for_selection) and the type-to-add dropdown, whose jobs are unchanged.

Frontend: store.dismiss flags in place (canonical tags) rather than dropping;
new store.undismiss reverts. SuggestionItem renders the rejected state and
swaps ✗→↶; ✓ still accepts (which clears the rejection server-side).

Tests: rejected-surfaced-flagged-then-reversible (service) + undismiss
endpoint idempotency (API).

Completes #1134's reversible-rejection half. Heads-as-suggestion-source is
the remaining piece.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ttrj5P7upUTueSfoJcxEqa
2026-06-28 09:49:05 -04:00

58 lines
1.8 KiB
Vue

<template>
<div class="fc-sgroup">
<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>
<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)"
@alias="$emit('alias', $event)"
@remove-alias="$emit('remove-alias', $event)"
@dismiss="$emit('dismiss', $event)"
@undismiss="$emit('undismiss', $event)"
/>
</div>
</div>
</template>
<script setup>
import { 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', 'alias', 'remove-alias', 'dismiss', 'undismiss'])
const open = ref(props.collapsible ? props.defaultOpen : true)
</script>
<style scoped>
.fc-sgroup { margin-bottom: 10px; }
.fc-sgroup__header {
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)));
margin-bottom: 4px;
}
.fc-sgroup__header--btn {
display: flex; align-items: center; gap: 4px;
background: none; border: none; cursor: pointer;
padding: 0; width: 100%; text-align: left;
font: inherit; text-transform: uppercase; letter-spacing: 0.06em;
}
</style>