From 18ad61265e4bff51851050afc4c9b4b025c7c2a5 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 15 May 2026 23:13:42 -0400
Subject: [PATCH] feat(ui): IR-style gradient-fade TopNav (brand, centered
 links, health)

---
 frontend/src/components/TopNav.vue | 125 +++++++++++++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 frontend/src/components/TopNav.vue

diff --git a/frontend/src/components/TopNav.vue b/frontend/src/components/TopNav.vue
new file mode 100644
index 0000000..60fd0e8
--- /dev/null
+++ b/frontend/src/components/TopNav.vue
@@ -0,0 +1,125 @@
+<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>
+
+    <nav class="fc-links">
+      <RouterLink
+        v-for="r in navRoutes"
+        :key="r.name"
+        :to="{ name: r.name }"
+        class="fc-link"
+      >{{ 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>
+  </header>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import router, { FRONT_DOOR } from '../router.js'
+import { useSystemStore } from '../stores/system.js'
+
+const system = useSystemStore()
+onMounted(() => system.refreshHealth())
+
+// Same mechanism the old sidebar used: every route with a meta.title is a
+// nav entry, in router declaration order. Auto-tracks future routes.
+const navRoutes = computed(() =>
+  router.getRoutes().filter(r => r.meta?.title)
+)
+
+const health = computed(() => {
+  if (system.healthy === null) {
+    return { icon: 'mdi-circle-outline', color: 'on-surface', label: 'checking…' }
+  }
+  if (system.healthy === true) {
+    return { icon: 'mdi-circle', color: 'success', label: 'healthy' }
+  }
+  return { icon: 'mdi-alert-circle', color: 'error', label: 'unreachable' }
+})
+</script>
+
+<style scoped>
+.fc-topnav {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  /* Obsidian (#14171A = 20,23,26) gradient fade — content scrolls under it. */
+  background: linear-gradient(
+    to bottom,
+    rgba(20, 23, 26, 0.92) 0%,
+    rgba(20, 23, 26, 0.65) 60%,
+    rgba(20, 23, 26, 0) 100%
+  );
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.fc-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  flex-shrink: 0;
+}
+.fc-brand__glyph { display: block; }
+.fc-brand__text {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: rgb(var(--v-theme-accent));
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.fc-links {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.25rem;
+}
+.fc-link {
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  color: rgb(var(--v-theme-on-surface));
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1rem;
+  border-bottom: 2px solid transparent;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  transition: background 0.2s ease, transform 0.1s ease;
+}
+.fc-link:hover {
+  background: rgba(232, 228, 216, 0.12);
+  transform: translateY(-1px);
+}
+/* Active route: accent text + thin accent underline (FabledDesignSystem:
+   accent for nav-active, never on action buttons). */
+.fc-link.router-link-exact-active {
+  color: rgb(var(--v-theme-accent));
+  border-bottom-color: rgb(var(--v-theme-accent));
+}
+
+.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));
+}
+</style>