frontend/src/components/TopNav.vue

@@ -15,7 +15,7 @@
          where they fold into the hamburger menu on the right. -->
     <nav class="fc-links">
       <RouterLink
-        v-for="r in navRoutes"
+        v-for="r in contentRoutes"
         :key="r.name"
         :to="{ name: r.name }"
         class="fc-link"
@@ -27,6 +27,19 @@
            Gallery: Select). TopNav owns the slot, not its contents. -->
       <div id="fc-nav-actions" class="fc-nav-actions" />
 
+      <!-- Settings is config, not content — pinned to the right edge,
+           separated from the content nav (desktop). On mobile it lives in
+           the hamburger menu below like every other route. -->
+      <RouterLink
+        v-if="settingsRoute"
+        :to="{ name: settingsRoute.name }"
+        class="fc-link fc-link--settings"
+        :aria-label="settingsRoute.meta.title"
+      >
+        <v-icon size="small">mdi-cog-outline</v-icon>
+        <span class="fc-link--settings__label">{{ settingsRoute.meta.title }}</span>
+      </RouterLink>
+
       <!-- Mobile nav: the link row collides with brand + actions below ~768px
            (7+ links in one flex row), so collapse it into a menu. -->
       <v-menu location="bottom end">
@@ -64,6 +77,14 @@ onMounted(() => system.refreshHealth())
 const navRoutes = computed(() =>
   router.getRoutes().filter(r => r.meta?.title)
 )
+// Content links for the centered desktop row — everything EXCEPT Settings,
+// which is config and gets pinned to the right edge instead.
+const contentRoutes = computed(() =>
+  navRoutes.value.filter(r => r.name !== 'settings')
+)
+const settingsRoute = computed(() =>
+  navRoutes.value.find(r => r.name === 'settings') || null
+)
 
 const health = computed(() => {
   if (system.healthy === null) {
@@ -147,6 +168,13 @@ const health = computed(() => {
 .fc-link.router-link-exact-active {
   color: rgb(var(--v-theme-accent));
 }
+/* Settings: gear + label, pinned right of the content nav. */
+.fc-link--settings {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
 
 .fc-nav-left {
   flex: 1 1 0;
@@ -181,6 +209,8 @@ const health = computed(() => {
   .fc-topnav { gap: 0.5rem; padding: 0.6rem 0.75rem; }
   /* Fold the link row into the hamburger menu. */
   .fc-links { display: none; }
+  /* Settings is in the hamburger menu on mobile (navRoutes includes it). */
+  .fc-link--settings { display: none; }
   .fc-nav-burger { display: inline-flex; }
 }
 @media (max-width: 480px) {