bvandeusen
1226d3b23a
THE actual root cause of the "dead" tag-chip kebab (operator inspected it 2026-06-07: the menu was ghosted, blurred, behind the sidebar). The teleported v-menu landed below .fc-viewer (z-index 2000) and the modal's backdrop-filter: blur(8px) smeared it — so it opened the whole time, just underneath. Every prior "fix" (un-nesting the button, the explicit activator pattern) was chasing a click/activation problem that never existed. Set :z-index="2400" on the tag-chip and suggestion kebab menus so they paint above the modal. (Dialogs already render on top — only the anchored menus tied with the modal's z-index and lost.) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
114 lines
4.0 KiB
Vue
114 lines
4.0 KiB
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 explicit
|
|
Accept button + 3-dot menu are the action affordances. -->
|
|
<div class="fc-suggestion">
|
|
<span class="fc-suggestion__name">
|
|
{{ suggestion.display_name }}
|
|
<span v-if="suggestion.creates_new_tag" class="fc-suggestion__new"
|
|
title="No matching tag yet — accepting creates it">+ new</span>
|
|
</span>
|
|
<span class="fc-suggestion__score">{{ scorePct }}</span>
|
|
<v-btn
|
|
class="fc-suggestion__accept"
|
|
size="small" variant="tonal" color="accent"
|
|
density="compact" rounded="pill"
|
|
:aria-label="`Accept ${suggestion.display_name}`"
|
|
@click="$emit('accept', suggestion)"
|
|
>
|
|
Accept
|
|
</v-btn>
|
|
<!-- Operator-flagged 2026-06-04: the kebab still wasn't opening. The
|
|
prior `#activator` + `v-bind="props"` path never toggled the menu
|
|
inside this teleported modal, while v-model-driven overlays (the
|
|
dialogs in this modal) work fine. So drive the menu explicitly:
|
|
the button toggles `menuOpen` with @click.stop (also shields any
|
|
parent), and `activator="parent"` anchors the menu for positioning
|
|
only — `:open-on-click="false"` keeps Vuetify's activator-click out
|
|
of it, so there's a single, reliable opener. -->
|
|
<span class="fc-suggestion__menu-wrap">
|
|
<v-btn
|
|
class="fc-suggestion__menu"
|
|
icon="mdi-dots-vertical" size="small"
|
|
variant="outlined" density="compact"
|
|
:aria-label="`More actions for ${suggestion.display_name}`"
|
|
@click.stop="menuOpen = !menuOpen"
|
|
/>
|
|
<v-menu
|
|
v-model="menuOpen" activator="parent" :open-on-click="false"
|
|
:z-index="2400"
|
|
>
|
|
<v-list density="compact">
|
|
<v-list-item @click="$emit('alias', suggestion)">
|
|
<v-list-item-title>Treat as alias for…</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="$emit('dismiss', suggestion)">
|
|
<v-list-item-title>Dismiss for this image</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
|
|
const props = defineProps({ suggestion: { type: Object, required: true } })
|
|
defineEmits(['accept', 'alias', 'dismiss'])
|
|
|
|
const menuOpen = ref(false)
|
|
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__new {
|
|
display: inline-block;
|
|
font-size: 10px; font-weight: 600;
|
|
color: rgb(var(--v-theme-accent));
|
|
background: rgba(var(--v-theme-accent), 0.12);
|
|
border: 1px solid rgb(var(--v-theme-accent), 0.4);
|
|
padding: 1px 6px; border-radius: 999px;
|
|
margin-left: 6px;
|
|
text-transform: uppercase; letter-spacing: 0.04em;
|
|
}
|
|
.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;
|
|
}
|
|
/* Vuetify's compact density doesn't shrink the tonal button enough
|
|
for a tight row; clamp the min-width so Accept stays compact. */
|
|
.fc-suggestion__accept :deep(.v-btn__content) {
|
|
font-size: 12px; letter-spacing: 0.02em;
|
|
}
|
|
.fc-suggestion__menu-wrap {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.fc-suggestion__menu {
|
|
flex: 0 0 auto;
|
|
}
|
|
</style>
|