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

@@ -1,9 +1,14 @@
 <template>
   <header class="fc-topnav">
-    <RouterLink :to="FRONT_DOOR" class="fc-brand" aria-label="FabledCurator home">
+    <div class="fc-nav-left">
-      <img src="/favicon.svg" alt="" class="fc-brand__glyph" width="22" height="22" />
+      <RouterLink :to="FRONT_DOOR" class="fc-brand" aria-label="FabledCurator home">
-      <span class="fc-brand__text">FabledCurator</span>
+        <img src="/favicon.svg" alt="" class="fc-brand__glyph" width="22" height="22" />
-    </RouterLink>
+        <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">
+    <!-- Per-view contextual actions teleport here (Showcase: Shuffle,
-      <v-icon size="x-small" :color="health.color">{{ health.icon }}</v-icon>
+         Gallery: Select). TopNav owns the slot, not its contents. -->
-      <span class="fc-health__label">{{ health.label }}</span>
+    <div id="fc-nav-actions" class="fc-nav-actions" />
-    </div>
   </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 {
+.fc-nav-actions {
-  font-size: 0.75rem;
+  display: flex;
-  color: rgb(var(--v-theme-on-surface));
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
 }
 </style>