feat(ui): add site context menu

Co-authored-by: multica-agent <github@multica.ai>

apps/web/components/AppShell.vue

@@ -1,6 +1,17 @@
 <script setup lang="ts">
 defineProps<{ section?: string }>()
+const emit = defineEmits<{
+  campaignAction: [payload: { action: 'rename' | 'delete'; campaignId: string }]
+}>()
 const { session, restore } = useDngAuth()
+const route = useRoute()
+const router = useRouter()
+const contextMenu = ref<HTMLElement | null>(null)
+const contextOpen = ref(false)
+const contextX = ref(0)
+const contextY = ref(0)
+const contextCampaignId = ref('')
+const contextCampaignTitle = ref('')
 onMounted(() => void restore())
 
 const initials = computed(() => {
@@ -12,10 +23,73 @@ const avatarUrl = computed(() => {
   const value = session.value?.user.user_metadata?.avatar_url
   return typeof value === 'string' && value ? value : ''
 })
+
+function closeContextMenu() {
+  contextOpen.value = false
+  contextCampaignId.value = ''
+  contextCampaignTitle.value = ''
+}
+
+async function openContextMenu(event: MouseEvent) {
+  event.preventDefault()
+  const campaign = event.target instanceof Element
+    ? event.target.closest<HTMLElement>('[data-context-campaign]')
+    : null
+  contextCampaignId.value = campaign?.dataset.contextCampaign ?? ''
+  contextCampaignTitle.value = campaign?.dataset.contextLabel ?? ''
+  contextX.value = event.clientX
+  contextY.value = event.clientY
+  contextOpen.value = true
+
+  await nextTick()
+  const bounds = contextMenu.value?.getBoundingClientRect()
+  if (!bounds) return
+  contextX.value = Math.max(12, Math.min(contextX.value, window.innerWidth - bounds.width - 12))
+  contextY.value = Math.max(12, Math.min(contextY.value, window.innerHeight - bounds.height - 12))
+}
+
+function runCampaignAction(action: 'rename' | 'delete') {
+  const campaignId = contextCampaignId.value
+  closeContextMenu()
+  if (campaignId) emit('campaignAction', { action, campaignId })
+}
+
+async function openAccountSection(section: 'identity' | 'settings') {
+  closeContextMenu()
+  await navigateTo({ path: '/profile', hash: `#${section}` })
+}
+
+function goBack() {
+  closeContextMenu()
+  if (window.history.length > 1) router.back()
+  else void navigateTo('/dashboard')
+}
+
+function closeFromPointer(event: PointerEvent) {
+  if (contextOpen.value && event.target instanceof Node && !contextMenu.value?.contains(event.target)) closeContextMenu()
+}
+
+function closeFromKeyboard(event: KeyboardEvent) {
+  if (event.key === 'Escape') closeContextMenu()
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', closeFromPointer)
+  document.addEventListener('keydown', closeFromKeyboard)
+  window.addEventListener('resize', closeContextMenu)
+  window.addEventListener('scroll', closeContextMenu, true)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', closeFromPointer)
+  document.removeEventListener('keydown', closeFromKeyboard)
+  window.removeEventListener('resize', closeContextMenu)
+  window.removeEventListener('scroll', closeContextMenu, true)
+})
+watch(() => route.fullPath, closeContextMenu)
 </script>
 
 <template>
-  <div class="shell">
+  <div class="shell" @contextmenu="openContextMenu">
     <header class="topbar">
       <AppMark />
       <div class="topbar-center"><span class="status-dot" /> PRIVATE ALPHA <b v-if="section">/ {{ section }}</b></div>
@@ -28,9 +102,35 @@ const avatarUrl = computed(() => {
       </div>
     </header>
     <main><slot /></main>
+    <Teleport to="body">
+      <nav
+        v-if="contextOpen"
+        ref="contextMenu"
+        class="context-menu"
+        :style="{ left: `${contextX}px`, top: `${contextY}px` }"
+        aria-label="Site actions"
+        role="menu"
+        @contextmenu.prevent
+      >
+        <header>
+          <small>{{ contextCampaignId ? 'UNIVERSE CONTROL' : 'D&G COMMANDS' }}</small>
+          <strong>{{ contextCampaignTitle || 'QUICK ACCESS' }}</strong>
+        </header>
+        <div v-if="contextCampaignId" class="context-group">
+          <button role="menuitem" @click="runCampaignAction('rename')"><span>✎</span> RENAME UNIVERSE</button>
+          <button class="danger" role="menuitem" @click="runCampaignAction('delete')"><span>×</span> DELETE UNIVERSE</button>
+        </div>
+        <div class="context-group">
+          <button role="menuitem" @click="openAccountSection('identity')"><span>◎</span> EDIT PROFILE</button>
+          <button role="menuitem" @click="goBack"><span>←</span> PREVIOUS PAGE</button>
+          <button role="menuitem" @click="openAccountSection('settings')"><span>⚙</span> SETTINGS</button>
+        </div>
+        <footer><i /> PRIVATE ALPHA / SECURE</footer>
+      </nav>
+    </Teleport>
   </div>
 </template>
 
 <style scoped>
-.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:20;height:76px;padding:0 clamp(18px,4vw,64px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:rgba(10,10,10,.9);backdrop-filter:blur(18px)}.topbar-center{font:500 10px/1 var(--mono);color:var(--muted);letter-spacing:.18em}.topbar-center b{color:var(--ink);font-weight:500}.status-dot{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid)}.topbar-actions{justify-self:end;display:flex;align-items:center;gap:14px}.icon-link{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);color:var(--muted);text-decoration:none}.avatar{position:relative;overflow:hidden;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--acid);color:#0a0a0a;text-decoration:none;font:700 10px var(--mono)}.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.avatar span{position:relative}@media(max-width:700px){.topbar{grid-template-columns:1fr auto}.topbar-center{display:none}}
+.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:20;height:76px;padding:0 clamp(18px,4vw,64px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:rgba(10,10,10,.9);backdrop-filter:blur(18px)}.topbar-center{font:500 10px/1 var(--mono);color:var(--muted);letter-spacing:.18em}.topbar-center b{color:var(--ink);font-weight:500}.status-dot{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid)}.topbar-actions{justify-self:end;display:flex;align-items:center;gap:14px}.icon-link{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);color:var(--muted);text-decoration:none}.avatar{position:relative;overflow:hidden;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--acid);color:#0a0a0a;text-decoration:none;font:700 10px var(--mono)}.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.avatar span{position:relative}.context-menu{position:fixed;z-index:2000;width:min(286px,calc(100vw - 24px));border:1px solid #3c3c37;background:rgba(10,10,9,.98);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.68);backdrop-filter:blur(18px)}.context-menu header{display:grid;gap:7px;padding:17px 18px 15px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,rgba(217,247,95,.08),transparent 70%)}.context-menu header small{color:var(--acid);font:600 7px var(--mono);letter-spacing:.17em}.context-menu header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px var(--display);letter-spacing:-.02em}.context-group{padding:6px;border-bottom:1px solid var(--line)}.context-group button{width:100%;min-height:40px;display:grid;grid-template-columns:28px 1fr;align-items:center;padding:0 10px;border:0;background:transparent;color:#c4c4bd;text-align:left;font:600 8px var(--mono);letter-spacing:.11em}.context-group button span{color:var(--acid);font:500 15px var(--mono)}.context-group button:hover,.context-group button:focus-visible{background:#171715;color:var(--ink);filter:none}.context-group button.danger{color:#e5aaa0}.context-group button.danger span{color:#ff8875}.context-menu footer{padding:11px 15px;color:#6e6e68;font:500 6px var(--mono);letter-spacing:.14em}.context-menu footer i{display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid)}@media(max-width:700px){.topbar{grid-template-columns:1fr auto}.topbar-center{display:none}}
 </style>

apps/web/pages/dashboard.vue

@@ -21,7 +21,6 @@ const campaigns = ref<CampaignRow[]>([])
 const drafts = ref<DraftSession[]>([])
 const loading = ref(true)
 const error = ref('')
-const editingCampaignId = ref<string | null>(null)
 const renamingCampaignId = ref<string | null>(null)
 const newName = ref('')
 
@@ -44,19 +43,18 @@ function draftSummary(draft: DraftSession) {
     || 'Continue your conversation with the coauthor.'
 }
 
-function toggleEdit(campaign: CampaignRow) {
-  if (editingCampaignId.value === campaign.id) {
-    editingCampaignId.value = null
-  } else {
-    editingCampaignId.value = campaign.id
-  }
-}
-
 function openRename(campaign: CampaignRow) {
   renamingCampaignId.value = campaign.id
   newName.value = campaign.title
 }
 
+function handleCampaignAction(payload: { action: 'rename' | 'delete'; campaignId: string }) {
+  const campaign = campaigns.value.find(item => item.id === payload.campaignId)
+  if (!campaign) return
+  if (payload.action === 'rename') openRename(campaign)
+  else void requestDelete(campaign)
+}
+
 async function confirmRename() {
   if (!renamingCampaignId.value || !newName.value.trim()) return
   try {
@@ -92,7 +90,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <AppShell section="COMMAND DECK">
+  <AppShell section="COMMAND DECK" @campaign-action="handleCampaignAction">
     <div class="dash-wrap noise">
       <section class="dash-head">
         <div><p class="kicker">WELCOME BACK, {{ displayName.toUpperCase() }}</p><h1>YOUR UNIVERSES<span>.</span></h1><p>Every world remembers where you left it.</p></div>
@@ -107,17 +105,16 @@ onMounted(async () => {
       <section class="world-grid">
         <p v-if="loading" class="load-state">RECEIVING PRIVATE CAMPAIGNS…</p>
         <p v-else-if="error" class="load-state error">{{ error }} <NuxtLink to="/auth/sign-in">SIGN IN AGAIN</NuxtLink></p>
-        <NuxtLink v-for="campaign in visibleCampaigns" :key="campaign.id" :to="`/campaign/${campaign.id}`" class="world-card active-world">
+        <NuxtLink
+          v-for="campaign in visibleCampaigns"
+          :key="campaign.id"
+          :to="`/campaign/${campaign.id}`"
+          class="world-card active-world"
+          :data-context-campaign="campaign.id"
+          :data-context-label="campaign.title"
+        >
           <div class="world-art"><div class="eclipse" /><span>{{ campaign.status.toUpperCase() }} CAMPAIGN</span></div>
           <div class="world-info"><small>PRIVATE MULTIPLAYER</small><h2>{{ campaign.title }}</h2><p>{{ campaign.current_scene }}</p><div><b>CONTINUE STORY</b><span>{{ new Date(campaign.updated_at).toLocaleDateString() }}</span></div></div>
-          <div class="card-actions" :class="{active: editingCampaignId === campaign.id}">
-            <template v-if="editingCampaignId === campaign.id">
-              <button @click.stop="openRename(campaign)" title="Rename this universe">✎</button>
-              <button @click.stop="requestDelete(campaign)" title="Delete this universe">✕</button>
-              <button @click.stop="toggleEdit(campaign)" class="ghost-action" title="Done editing">DONE</button>
-            </template>
-            <button v-else @click.stop="toggleEdit(campaign)" title="Edit this universe">EDIT</button>
-          </div>
         </NuxtLink>
         <NuxtLink v-for="draft in visibleDrafts" :key="draft.id" :to="`/worlds/new?session=${draft.id}`" class="world-card active-world draft-world">
           <div class="world-art"><div class="eclipse" /><span>{{ draft.status.toUpperCase() }} DRAFT</span></div>
@@ -183,12 +180,6 @@ onMounted(async () => {
 .system-strip{margin-top:32px;padding:18px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font:500 8px var(--mono);letter-spacing:.12em;color:var(--muted)}
 .system-strip i{display:inline-block;width:6px;height:6px;background:var(--acid);border-radius:50%;margin-right:8px}
 .system-strip b{color:var(--acid)}
-.card-actions{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:2;opacity:0;pointer-events:none;transition:opacity .2s ease}
-.card-actions.active{opacity:1;pointer-events:auto}
-.card-actions button{height:34px;border:1px solid var(--line);background:rgba(10,10,10,.75);color:var(--muted);font:600 8px var(--mono);letter-spacing:.1em;line-height:1;display:grid;place-items:center;padding:0 12px;transition:all .2s ease;cursor:pointer}
-.card-actions button.icon-btn{width:34px;font-size:14px}
-.card-actions button:hover,.card-actions button.active-item{border-color:var(--acid);color:var(--acid);background:rgba(217,247,95,.08)}
-.card-actions button.ghost-action{border-color:transparent;color:var(--muted)}
 .rename-dialog{position:fixed;inset:0;margin:auto;z-index:1000;width:min(440px,calc(100vw - 40px));padding:0;border:1px solid var(--line);background:#0a0a0a;color:var(--ink);box-shadow:0 60px 120px rgba(0,0,0,.7);font-family:inherit;display:grid}
 .rename-dialog::backdrop{background:rgba(0,0,0,.55)}
 .rename-panel{padding:32px;display:grid;gap:18px}

apps/web/pages/profile/index.vue

@@ -204,14 +204,14 @@ onBeforeUnmount(clearPreview)
         </aside>
 
         <div class="profile-forms">
-          <form class="profile-panel" @submit.prevent="saveProfile">
+          <form id="identity" class="profile-panel" @submit.prevent="saveProfile">
             <header><span>01</span><div><small>PUBLIC IDENTITY</small><h2>NAME & DESCRIPTION</h2></div></header>
             <label>DISPLAY NAME<input v-model="displayName" required minlength="1" maxlength="80" autocomplete="name" placeholder="How your party knows you"></label>
             <label>PROFILE DESCRIPTION<textarea v-model="description" maxlength="500" rows="7" placeholder="Tell your party who you are, what you enjoy playing, or what kind of stories you seek." /><span>{{ description.length }} / 500</span></label>
             <button class="acid-button" :disabled="saving || !displayName.trim()">{{ saving ? 'SAVING PROFILE…' : avatarFile ? 'SAVE PROFILE & PICTURE →' : 'SAVE PROFILE →' }}</button>
           </form>
 
-          <form class="profile-panel" @submit.prevent="changePassword">
+          <form id="settings" class="profile-panel" @submit.prevent="changePassword">
             <header><span>02</span><div><small>SECURITY</small><h2>PASSWORD MANAGER</h2></div></header>
             <p class="panel-copy">Choose a new password for this account. Your current signed-in session authorizes the change.</p>
             <div class="password-grid"><label>NEW PASSWORD<input v-model="password" type="password" minlength="8" autocomplete="new-password" placeholder="At least 8 characters"></label><label>CONFIRM PASSWORD<input v-model="passwordConfirmation" type="password" minlength="8" autocomplete="new-password" placeholder="Repeat new password"></label></div>