From af2598451c0449dc8e51455317d09d98d78cf7ae Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 16 May 2026 19:39:36 -0400
Subject: [PATCH] feat(nav): health dot beside wordmark + #fc-nav-actions
 per-view slot

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/TopNav.vue | 36 +++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/TopNav.vue b/frontend/src/components/TopNav.vue
index b8c4648..4493050 100644
--- a/frontend/src/components/TopNav.vue
+++ b/frontend/src/components/TopNav.vue
@@ -1,9 +1,14 @@
 <template>
   <header class="fc-topnav">
-    <RouterLink :to="FRONT_DOOR" class="fc-brand" aria-label="FabledCurator home">
-      <img src="/favicon.svg" alt="" class="fc-brand__glyph" width="22" height="22" />
-      <span class="fc-brand__text">FabledCurator</span>
-    </RouterLink>
+    <div class="fc-nav-left">
+      <RouterLink :to="FRONT_DOOR" class="fc-brand" aria-label="FabledCurator home">
+        <img src="/favicon.svg" alt="" class="fc-brand__glyph" width="22" height="22" />
+        <span class="fc-brand__text">FabledCurator</span>
+      </RouterLink>
+      <span class="fc-health" :title="health.label">
+        <v-icon size="x-small" :color="health.color">{{ health.icon }}</v-icon>
+      </span>
+    </div>
 
     <nav class="fc-links">
       <RouterLink
@@ -14,10 +19,9 @@
       >{{ r.meta.title }}</RouterLink>
     </nav>
 
-    <div class="fc-health" :title="health.label">
-      <v-icon size="x-small" :color="health.color">{{ health.icon }}</v-icon>
-      <span class="fc-health__label">{{ health.label }}</span>
-    </div>
+    <!-- Per-view contextual actions teleport here (Showcase: Shuffle,
+         Gallery: Select). TopNav owns the slot, not its contents. -->
+    <div id="fc-nav-actions" class="fc-nav-actions" />
   </header>
 </template>
 
@@ -109,15 +113,21 @@ const health = computed(() => {
   color: rgb(var(--v-theme-accent));
 }
 
+.fc-nav-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
 .fc-health {
   display: flex;
   align-items: center;
-  gap: 6px;
   flex-shrink: 0;
-  opacity: 0.8;
 }
-.fc-health__label {
-  font-size: 0.75rem;
-  color: rgb(var(--v-theme-on-surface));
+.fc-nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
 }
 </style>