From 88ab58e56dbbcaf737b72df717c143b4e9ac3903 Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Sun, 14 Jun 2026 23:03:34 +0800
Subject: [PATCH] fix: People context menu match WordPress design

---
 src/views/PeopleView.vue | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/views/PeopleView.vue b/src/views/PeopleView.vue
index 0995bea..f7352e5 100644
--- a/src/views/PeopleView.vue
+++ b/src/views/PeopleView.vue
@@ -104,13 +104,12 @@
       </div>
     </div>
 
-    <div v-if="ctxMenu.show" class="ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }">
-      <div class="ctx-item" @click="ctxAction('star')">{{ ctxMenu.person?.starred ? '☆ Unstar' : '★ Star' }}</div>
-      <div class="ctx-item" @click="ctxAction('ignore')">{{ ctxMenu.person?.ignored ? '↺ Unignore' : '⊘ Ignore' }}</div>
-      <div class="ctx-item" @click="ctxAction('rename')">✎ Rename</div>
-      <div class="ctx-item" @click="ctxAction('merge')">⇄ Merge</div>
-      <div class="ctx-divider"></div>
-      <div class="ctx-item danger" @click="ctxAction('delete')">✕ Delete</div>
+    <div v-if="ctxMenu.show" class="ms-ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }">
+      <button class="ms-ctx-item" @click="ctxAction('star')">{{ ctxMenu.person?.starred ? '☆ 取消重要人物' : '★ 標為重要人物' }}</button>
+      <hr class="ms-ctx-menu-divider">
+      <button class="ms-ctx-item" @click="ctxAction('rename')">✎ 編輯名稱</button>
+      <button class="ms-ctx-item" @click="ctxAction('merge')">⇄ 已有此人物</button>
+      <button class="ms-ctx-item ms-ctx-danger" @click="ctxAction('ignore')">✕ 略過此人物</button>
     </div>
 
     <VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :title="currentVideo.title" @close="playing = false" />
@@ -328,9 +327,11 @@ h1 { margin: 0; }
 .ms-modal-actions { display: flex; justify-content: flex-end; }
 h2 { margin: 0 0 16px; font-size: 1rem; }
 .ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; max-height: 50vh; overflow-y: auto; }
-.ctx-menu { position: fixed; z-index: 9999; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 6px; min-width: 140px; }
-.ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 8px; font-size: 0.85rem; color: #222; }
-.ctx-item:hover { background: #f3f4f6; }
-.ctx-item.danger { color: #d93025; }
-.ctx-divider { height: 1px; background: #eee; margin: 4px 8px; }
+.ms-ctx-menu { display: none; position: fixed; z-index: 99999; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 6px; min-width: 160px; font-size: 13px; color: #222; }
+.ms-ctx-menu.show { display: block; }
+.ms-ctx-menu-item, .ms-ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 8px; border: none; background: transparent; width: 100%; text-align: left; font-size: 13px; color: #222; font-family: inherit; }
+.ms-ctx-menu-item:hover, .ms-ctx-item:hover { background: #f3f4f6; }
+.ms-ctx-menu-item.danger, .ms-ctx-item.ms-ctx-danger { color: #d93025; }
+.ms-ctx-menu-item.danger:hover, .ms-ctx-item.ms-ctx-danger:hover { background: #fce8e6; }
+.ms-ctx-menu-divider { height: 1px; background: #eee; margin: 4px 8px; }
 </style>