bvandeusen
6684907577
Each category section header gets a subtle "Reject rest" action that dismisses every still-unhandled suggestion in it at once (store.dismissRemaining, parallel dispatch). Canonical tags persist a rejection and stay flagged (reversible, one-click un-reject); raw creates-new-tag rows drop client-side. Shows only when the section has unhandled items. No confirm dialog — it's fully reversible. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CDgx8bQS5YrGRK76v8HUnM
90 lines
3.2 KiB
Vue
90 lines
3.2 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)"
|
|
@alias="$emit('alias', $event)"
|
|
@remove-alias="$emit('remove-alias', $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', 'alias', 'remove-alias', '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>
|