FabledCurator/frontend/src/components/modal/SuggestionItem.vue

<template>
  <!-- Chip-card row: visible border + hover/focus state unifies the
       name, score, and action buttons as one "object" (operator-asked
       2026-06-01). The row itself is informational; the green ✓ / red ✗
       verdict pair + 3-dot alias menu are the action affordances. -->
  <div
    class="fc-suggestion" :class="{ 'fc-suggestion--rejected': suggestion.rejected }"
    @mouseenter="onEnter" @mouseleave="onLeave"
  >
    <span class="fc-suggestion__name">
      {{ suggestion.display_name }}
      <span v-if="suggestion.rejected" class="fc-suggestion__rejected-tag"
        title="You rejected this for this image — un-reject to recover">rejected</span>
    </span>
    <span class="fc-suggestion__score">{{ scorePct }}</span>
    <!-- Green ✓ / red ✗ pair (operator-asked 2026-06-28) mirrors the eval
         card's verdict buttons: ✓ accepts the tag (positive), ✗ dismisses it
         for this image (records a TagSuggestionRejection — a hard negative the
         heads train on). Together they occupy ~the footprint of the old single
         Accept pill, so rejecting is now a one-click peer of accepting rather
         than buried in the kebab. When the row is already rejected the ✗ swaps
         to an undo (↶) so the rejection is reversible in place. -->
    <div class="fc-suggestion__acts">
      <button
        class="fc-act fc-act--yes" type="button"
        :aria-label="`Accept ${suggestion.display_name}`"
        :title="`Yes — tag ${suggestion.display_name}`"
        @click="$emit('accept', suggestion)"
      ><v-icon size="16">mdi-check</v-icon></button>
      <button
        v-if="suggestion.rejected"
        class="fc-act fc-act--undo" type="button"
        :aria-label="`Un-reject ${suggestion.display_name}`"
        :title="`Undo — restore ${suggestion.display_name} as a suggestion`"
        @click="$emit('undismiss', suggestion)"
      ><v-icon size="16">mdi-undo-variant</v-icon></button>
      <button
        v-else
        class="fc-act fc-act--no" type="button"
        :aria-label="`Reject ${suggestion.display_name}`"
        :title="`No — not ${suggestion.display_name}`"
        @click="$emit('dismiss', suggestion)"
      ><v-icon size="16">mdi-close</v-icon></button>
    </div>
  </div>
</template>

<script setup>
import { computed, inject } from 'vue'

const props = defineProps({ suggestion: { type: Object, required: true } })
defineEmits(['accept', 'dismiss', 'undismiss'])

// #1206: on hover, tell the image viewer which crop produced this suggestion so
// it highlights that region. Provided by ImageViewer/Explore; a no-op elsewhere.
const hover = inject('fcSuggestionHover', null)
function onEnter () {
  if (hover) hover.value = { g: props.suggestion.grounding ?? null, tag: props.suggestion.display_name }
}
function onLeave () {
  if (hover) hover.value = null
}

const scorePct = computed(() => `${Math.round(props.suggestion.score * 100)}%`)
</script>

<style scoped>
.fc-suggestion {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-bottom: 4px;
  background: rgb(var(--v-theme-surface));
  border: 1px solid rgb(var(--v-theme-surface-light));
  border-radius: 6px;
  transition: background 120ms ease, border-color 120ms ease;
}
.fc-suggestion:hover {
  background: rgb(var(--v-theme-surface-light));
  border-color: rgb(var(--v-theme-accent), 0.4);
}
.fc-suggestion__name {
  flex: 1; min-width: 0;
  font-size: 14px;
  color: rgb(var(--v-theme-on-surface));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-suggestion__score {
  flex: 0 0 auto; min-width: 38px; text-align: right;
  font-size: 11px;
  color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface)));
  font-family: 'JetBrains Mono', monospace;
}
/* Green ✓ / red ✗ verdict pair — circular buttons so accept/reject read
   identically across surfaces. */
.fc-suggestion__acts {
  flex: 0 0 auto; display: flex; gap: 4px;
}
.fc-act {
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  opacity: 0.9; transition: transform 0.1s, opacity 0.1s;
}
.fc-act:hover { opacity: 1; transform: scale(1.1); }
.fc-act:focus-visible {
  outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 1px;
}
.fc-act--yes { background: rgb(var(--v-theme-success)); }
.fc-act--no { background: rgb(var(--v-theme-error)); }
/* Undo reads as neutral-secondary, not a verdict: outlined, not filled. */
.fc-act--undo {
  background: transparent; color: rgb(var(--v-theme-on-surface-variant));
  border: 1px solid rgb(var(--v-theme-on-surface-variant), 0.5);
}
/* Rejected state: the row stays put (recovery), dimmed + red-edged so it
   reads as "handled, negative" without shouting over live suggestions. */
.fc-suggestion--rejected {
  border-color: rgb(var(--v-theme-error), 0.4);
  background: rgb(var(--v-theme-error), 0.06);
}
.fc-suggestion--rejected .fc-suggestion__name {
  color: rgb(var(--v-theme-on-surface-variant));
  text-decoration: line-through;
  text-decoration-color: rgb(var(--v-theme-error), 0.6);
}
.fc-suggestion__rejected-tag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  color: rgb(var(--v-theme-error));
  background: rgb(var(--v-theme-error), 0.12);
  border: 1px solid rgb(var(--v-theme-error), 0.4);
  padding: 1px 6px; border-radius: 999px;
  margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none;
}
</style>