From 3a0cca5aca9a2654754b80b0a6eacdb25f2b4d21 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 4 Jun 2026 22:50:19 -0400
Subject: [PATCH 1/2] fix(tags): allow creating a character with no fandom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Not all characters belong to a fandom (original characters, unsorted).
The create flow forced every new character through FandomPicker, whose
only outcomes were 'Use this fandom' (disabled until one is picked) or
Cancel (which aborts the whole creation) — there was no way to confirm a
character with no fandom.

- FandomPicker: add a 'No fandom' action that emits confirm(null).
- TagAutocomplete.onFandomChosen: pass fandom_id: null when null is
  emitted.

Backend already supported this end to end (Tag.fandom_id nullable, the
CHECK only forbids fandom_id on non-character kinds, tag_service
find_or_create defaults fandom_id=None, API reads body.get). A fandom can
still be assigned later from the chip kebab's 'Set fandom…'.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/modal/FandomPicker.vue    | 9 +++++++++
 frontend/src/components/modal/TagAutocomplete.vue | 6 +++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/modal/FandomPicker.vue b/frontend/src/components/modal/FandomPicker.vue
index 31189ab..e9ed4a8 100644
--- a/frontend/src/components/modal/FandomPicker.vue
+++ b/frontend/src/components/modal/FandomPicker.vue
@@ -17,6 +17,10 @@
       </div>
     </v-card-text>
     <v-card-actions>
+      <!-- Not every character belongs to a fandom (original characters,
+           unsorted, etc.). "No fandom" creates the character unassigned;
+           a fandom can still be set later from the chip's kebab menu. -->
+      <v-btn variant="text" @click="onNoFandom">No fandom</v-btn>
       <v-spacer />
       <v-btn @click="$emit('cancel')">Cancel</v-btn>
       <v-btn :disabled="!selectedId" color="primary" rounded="pill" @click="onConfirm">Use this fandom</v-btn>
@@ -45,4 +49,9 @@ function onConfirm() {
   const f = store.fandomCache.find(x => x.id === selectedId.value)
   if (f) emit('confirm', f)
 }
+// Create the character with no fandom. Emits null so the caller knows this
+// was a deliberate "unassigned", not a cancel.
+function onNoFandom() {
+  emit('confirm', null)
+}
 </script>
diff --git a/frontend/src/components/modal/TagAutocomplete.vue b/frontend/src/components/modal/TagAutocomplete.vue
index 9767af2..5131688 100644
--- a/frontend/src/components/modal/TagAutocomplete.vue
+++ b/frontend/src/components/modal/TagAutocomplete.vue
@@ -147,10 +147,14 @@ function onCreate () {
   reset()
 }
 
+// fandom is null when the user picked "No fandom" — characters don't all
+// belong to a fandom. The backend already accepts fandom_id: null for the
+// character kind (tag.kind check + nullable fandom_id), and a fandom can be
+// assigned later from the chip kebab's "Set fandom…".
 function onFandomChosen (fandom) {
   fandomDialog.value = false
   emit('pick-new', {
-    name: pendingNewName, kind: 'character', fandom_id: fandom.id,
+    name: pendingNewName, kind: 'character', fandom_id: fandom ? fandom.id : null,
   })
   pendingNewName = null
   reset()

From 86efbf7f2cb0b9d63c617ee744492167a7102efe Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 4 Jun 2026 23:01:55 -0400
Subject: [PATCH 2/2] fix(modal): kebab menus open via explicit v-model, not
 activator click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Operator-confirmed on a fresh build: both the tag-chip and suggestion
kebabs still never opened. The prior 8326e54 'fix' only wrapped them in a
<span @click.stop> — inert for SuggestionItem (no parent capture) — and
never addressed why the `#activator`/`v-bind="props"` click failed to
toggle the menu inside the teleported ImageViewer modal. The dialogs in
that same modal open via v-model and work, so drive the menus the same way:

- The activator (v-btn / v-icon) toggles a reactive flag with @click.stop
  (which also shields the chip's close button / any parent).
- The v-menu binds that flag (v-model / :model-value) and uses
  activator="parent" with :open-on-click="false" purely for positioning,
  so opening no longer depends on Vuetify's activator-click path.
- TagPanel tracks a single openTagId (one chip menu open at a time).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/modal/SuggestionItem.vue   | 40 ++++++++++---------
 frontend/src/components/modal/TagPanel.vue    | 36 ++++++++++-------
 2 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/modal/SuggestionItem.vue b/frontend/src/components/modal/SuggestionItem.vue
index 1a0c541..16e55cc 100644
--- a/frontend/src/components/modal/SuggestionItem.vue
+++ b/frontend/src/components/modal/SuggestionItem.vue
@@ -19,24 +19,25 @@
     >
       Accept
     </v-btn>
-    <!-- Operator-flagged 2026-06-02: the kebab menu wasn't opening.
-         Wrapping in a <span @click.stop> matches the TagPanel chip
-         fix — even though there's no parent click capture here today,
-         the wrap is harmless and keeps both kebabs on the same
-         pattern. Click bubbles from the v-btn → opens menu via
-         activator props → bubble continues to span → stopPropagation
-         halts it. -->
-    <span class="fc-suggestion__menu-wrap" @click.stop>
-      <v-menu>
-        <template #activator="{ props }">
-          <v-btn
-            class="fc-suggestion__menu"
-            icon="mdi-dots-vertical" size="small"
-            variant="outlined" density="compact"
-            :aria-label="`More actions for ${suggestion.display_name}`"
-            v-bind="props"
-          />
-        </template>
+    <!-- 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"
+      >
         <v-list density="compact">
           <v-list-item @click="$emit('alias', suggestion)">
             <v-list-item-title>Treat as alias for…</v-list-item-title>
@@ -51,11 +52,12 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+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>
 
diff --git a/frontend/src/components/modal/TagPanel.vue b/frontend/src/components/modal/TagPanel.vue
index f1f83dd..319b0b9 100644
--- a/frontend/src/components/modal/TagPanel.vue
+++ b/frontend/src/components/modal/TagPanel.vue
@@ -10,20 +10,24 @@
       >
         <v-icon start size="x-small">{{ iconFor(tag.kind) }}</v-icon>
         {{ tag.name }}<span v-if="tag.fandom_id">→</span>
-        <!-- Operator-flagged 2026-06-02: the previous activator had
-             `@click.stop` directly on the v-icon, which silently
-             overrode Vuetify's onClick from `v-bind="mp"` — the menu
-             never opened. Now the v-icon receives the activator
-             onClick cleanly, and the wrapping span absorbs the
-             bubbled click so the chip's close button isn't tripped. -->
-        <span class="kebab-wrap" @click.stop>
-          <v-menu>
-            <template #activator="{ props: mp }">
-              <v-icon
-                v-bind="mp" size="x-small" class="ml-1"
-                icon="mdi-dots-vertical"
-              />
-            </template>
+        <!-- Operator-flagged 2026-06-04: the `#activator` + `v-bind` menu
+             never opened inside this teleported modal. Drive it explicitly
+             instead (same mechanism as the dialogs below, which work): the
+             icon toggles `openTagId` with @click.stop (shielding the chip's
+             close button), and `activator="parent"` + `:open-on-click=false`
+             anchors the menu for positioning only. One tag's menu open at a
+             time, so a single id is enough. -->
+        <span class="kebab-wrap">
+          <v-icon
+            size="x-small" class="ml-1 kebab-icon"
+            icon="mdi-dots-vertical"
+            @click.stop="openTagId = openTagId === tag.id ? null : tag.id"
+          />
+          <v-menu
+            :model-value="openTagId === tag.id"
+            activator="parent" :open-on-click="false"
+            @update:model-value="v => { if (!v) openTagId = null }"
+          >
             <v-list density="compact">
               <v-list-item @click="openRename(tag)">
                 <v-list-item-title>Rename…</v-list-item-title>
@@ -84,6 +88,9 @@ import FandomSetDialog from './FandomSetDialog.vue'
 const modal = useModalStore()
 const store = useTagStore()
 const errorMsg = ref(null)
+// Which tag chip's kebab menu is open (only one at a time). Drives each
+// chip menu's v-model so opening never depends on Vuetify's activator click.
+const openTagId = ref(null)
 
 const KIND_ICONS = {
   general: 'mdi-tag', character: 'mdi-account-circle',
@@ -147,4 +154,5 @@ async function onFandomUpdated() {
 }
 .fc-tag-panel__chips { display: flex; flex-wrap: wrap; gap: 6px; }
 .kebab-wrap { display: inline-flex; align-items: center; }
+.kebab-icon { cursor: pointer; }
 </style>