feat(fc2b): suggestions store + modal panel components
Store: load per-image suggestions, accept (creates the tag first for raw/creates_new_tag suggestions, then accepts by id), aliasAccept, dismiss (client-side hide for raw tags), success toasts folded in. Panel: people/sources groups always open, General collapsed by default; alias picker dialog wired; shimmer skeleton while loading. SuggestionItem shows score %, +new badge for raw tags, kebab menu. AliasPickerDialog referenced (lands in Task 15). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
<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)"
|
||||
@dismiss="$emit('dismiss', $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', 'dismiss'])
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user