From b72aea97476ad50427f5acfe0095e0678509056f Mon Sep 17 00:00:00 2001
From: Tim McCarthy <thoomfish@gmail.com>
Date: Fri, 12 Jun 2026 01:47:56 -0700
Subject: [PATCH] Combine Rules and Admin corner links into one upper-right
 menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the fixed Rules link (upper-left) and the creator-only Admin
link (upper-right) with a single collapsible ☰ Menu in the upper right,
leaving the event log alone in its corner. CornerMenu always lists the
Rules link; pages can contribute context-specific entries through the
extraMenuLinks store, which Dashboard uses for the creator-only Admin
link. This gives future misc sub-pages a home without eating more
screen corners.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/App.svelte                   | 24 +------
 frontend/src/components/CornerMenu.svelte | 87 +++++++++++++++++++++++
 frontend/src/lib/menu.js                  |  6 ++
 frontend/src/pages/Dashboard.svelte       | 33 +++------
 4 files changed, 105 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/components/CornerMenu.svelte
 create mode 100644 frontend/src/lib/menu.js

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 65e5268..5585028 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -4,6 +4,7 @@
     import Join from './pages/Join.svelte';
     import Dashboard from './pages/Dashboard.svelte';
     import Admin from './pages/Admin.svelte';
+    import CornerMenu from './components/CornerMenu.svelte';
 
     const routes = {
         '/': Home,
@@ -15,26 +16,5 @@
 
 <main>
     <Router {routes} />
-    <a class="rules-corner-link" href="/rules" target="_blank" rel="noopener" title="Open the rulebook in a new tab">📖 Rules</a>
+    <CornerMenu />
 </main>
-
-<style>
-    .rules-corner-link {
-        position: fixed;
-        top: 12px;
-        left: 16px;
-        z-index: 1001;
-        padding: 6px 14px;
-        border-radius: 16px;
-        background: rgba(10, 15, 25, 0.9);
-        border: 1px solid var(--glass-border-focus);
-        color: var(--neon-cyan);
-        font-size: 0.85rem;
-        font-weight: 700;
-        text-decoration: none;
-        font-family: var(--font-heading);
-    }
-    .rules-corner-link:hover {
-        background: rgba(0, 242, 254, 0.1);
-    }
-</style>
diff --git a/frontend/src/components/CornerMenu.svelte b/frontend/src/components/CornerMenu.svelte
new file mode 100644
index 0000000..9bcd496
--- /dev/null
+++ b/frontend/src/components/CornerMenu.svelte
@@ -0,0 +1,87 @@
+<script>
+    import { extraMenuLinks } from '../lib/menu';
+
+    let open = false;
+
+    const baseLinks = [
+        { label: '📖 Rules', href: '/rules', external: true, title: 'Open the rulebook in a new tab' },
+    ];
+
+    $: links = [...$extraMenuLinks, ...baseLinks];
+
+    function handleWindowClick(event) {
+        if (open && !event.target.closest('.corner-menu')) {
+            open = false;
+        }
+    }
+</script>
+
+<svelte:window on:click={handleWindowClick} />
+
+<div class="corner-menu">
+    <button class="menu-toggle" class:open on:click={() => (open = !open)} title="Menu">
+        ☰ Menu
+    </button>
+    {#if open}
+        <nav class="menu-dropdown">
+            {#each links as link}
+                <a
+                    href={link.href}
+                    target={link.external ? '_blank' : undefined}
+                    rel={link.external ? 'noopener' : undefined}
+                    title={link.title}
+                    on:click={() => (open = false)}
+                >{link.label}</a>
+            {/each}
+        </nav>
+    {/if}
+</div>
+
+<style>
+    .corner-menu {
+        position: fixed;
+        top: 12px;
+        right: 16px;
+        z-index: 1001;
+        text-align: right;
+    }
+    .menu-toggle {
+        padding: 6px 14px;
+        border-radius: 16px;
+        background: rgba(10, 15, 25, 0.9);
+        border: 1px solid var(--glass-border-focus);
+        color: var(--neon-cyan);
+        font-size: 0.85rem;
+        font-weight: 700;
+        font-family: var(--font-heading);
+        cursor: pointer;
+    }
+    .menu-toggle:hover, .menu-toggle.open {
+        background: rgba(0, 242, 254, 0.1);
+    }
+    .menu-dropdown {
+        margin-top: 6px;
+        display: flex;
+        flex-direction: column;
+        background: rgba(10, 15, 25, 0.95);
+        border: 1px solid var(--glass-border-focus);
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .menu-dropdown a {
+        padding: 8px 16px;
+        color: var(--neon-cyan);
+        font-size: 0.85rem;
+        font-weight: 700;
+        text-decoration: none;
+        font-family: var(--font-heading);
+        text-align: right;
+        white-space: nowrap;
+    }
+    .menu-dropdown a:hover {
+        background: rgba(0, 242, 254, 0.1);
+    }
+    .menu-dropdown a + a {
+        border-top: 1px solid rgba(0, 242, 254, 0.15);
+    }
+</style>
diff --git a/frontend/src/lib/menu.js b/frontend/src/lib/menu.js
new file mode 100644
index 0000000..25fecbd
--- /dev/null
+++ b/frontend/src/lib/menu.js
@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store';
+
+// Extra entries for the corner menu, set by pages that have context-specific
+// links (e.g. Dashboard adds the creator-only Admin link). Each entry is
+// { label, href, external?, title? }.
+export const extraMenuLinks = writable([]);
diff --git a/frontend/src/pages/Dashboard.svelte b/frontend/src/pages/Dashboard.svelte
index 55b5297..bfdc10c 100644
--- a/frontend/src/pages/Dashboard.svelte
+++ b/frontend/src/pages/Dashboard.svelte
@@ -1,7 +1,8 @@
 <script>
     import { onMount, onDestroy } from 'svelte';
     import { apiRequest } from '../lib/api';
-    
+    import { extraMenuLinks } from '../lib/menu';
+
     import LobbyPhase from '../components/LobbyPhase.svelte';
     import CharacterCreationPhase from '../components/CharacterCreationPhase.svelte';
     import SceneSetupPhase from '../components/SceneSetupPhase.svelte';
@@ -34,8 +35,16 @@
         intervalId = setInterval(fetchState, 2000);
     });
 
+    // Surface the creator-only Admin link in the corner menu
+    $: extraMenuLinks.set(
+        state?.player?.is_creator
+            ? [{ label: '🛠️ Admin', href: `#/game/${gameId}/admin`, title: 'Open the Admin Panel' }]
+            : []
+    );
+
     onDestroy(() => {
         if (intervalId) clearInterval(intervalId);
+        extraMenuLinks.set([]);
     });
 </script>
 
@@ -65,10 +74,6 @@
     </div>
 
     <EventLog {state} />
-
-    {#if state.player.is_creator}
-        <a class="admin-corner-link" href="#/game/{gameId}/admin" title="Open the Admin Panel">🛠️ Admin</a>
-    {/if}
 {:else if !error}
     <div class="loading-container">
         <p>Loading game state...</p>
@@ -76,24 +81,6 @@
 {/if}
 
 <style>
-    .admin-corner-link {
-        position: fixed;
-        top: 12px;
-        right: 16px;
-        z-index: 1001;
-        padding: 6px 14px;
-        border-radius: 16px;
-        background: rgba(10, 15, 25, 0.9);
-        border: 1px solid var(--gold, #d4af37);
-        color: var(--gold, #d4af37);
-        font-size: 0.85rem;
-        font-weight: 700;
-        text-decoration: none;
-        font-family: var(--font-heading);
-    }
-    .admin-corner-link:hover {
-        background: rgba(212, 175, 55, 0.15);
-    }
     .loading-container {
         display: flex;
         justify-content: center;