FabledCurator/frontend/src/components/TopNav.vue

<template>
  <header ref="navEl" class="fc-topnav" :class="{ 'fc-topnav--chrome': hasStickyChrome }">
    <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>
      <PipelineStatusChip />
    </div>

    <!-- Desktop: inline links, centered. Hidden on mobile (see media query),
         where they fold into the hamburger menu on the right. -->
    <nav class="fc-links">
      <RouterLink
        v-for="r in contentRoutes"
        :key="r.name"
        :to="{ name: r.name }"
        class="fc-link"
      >{{ r.meta.title }}</RouterLink>
    </nav>

    <div class="fc-nav-right">
      <!-- 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" />

      <!-- 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">
        <template #activator="{ props: menuProps }">
          <v-btn
            v-bind="menuProps"
            icon="mdi-menu" variant="text" size="small"
            class="fc-nav-burger" aria-label="Menu"
          />
        </template>
        <v-list density="compact" min-width="180">
          <v-list-item
            v-for="r in navRoutes"
            :key="r.name"
            :to="{ name: r.name }"
            :title="r.meta.title"
          />
        </v-list>
      </v-menu>
    </div>
  </header>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import router, { FRONT_DOOR } from '../router.js'
import { useSystemStore } from '../stores/system.js'
import PipelineStatusChip from './PipelineStatusChip.vue'

const system = useSystemStore()

// Publish the nav's REAL height as --fc-nav-h so full-height workspaces
// (Explore/Subscriptions) and sticky sub-headers pin to it exactly instead of a
// hardcoded 64px that Vuetify 4's MD3 sizing broke — the Explore breadcrumb was
// tucking under a taller nav (#1481). ResizeObserver keeps it live as the nav
// reflows (per-view teleported actions, mobile breakpoint, chip state changes).
const navEl = ref(null)
let navRO = null
onMounted(() => {
  system.refreshHealth()
  if (navEl.value && 'ResizeObserver' in window) {
    navRO = new ResizeObserver(() => {
      const h = navEl.value?.offsetHeight
      if (h) document.documentElement.style.setProperty('--fc-nav-h', `${h}px`)
    })
    navRO.observe(navEl.value)
  }
})
onBeforeUnmount(() => { navRO?.disconnect() })

// Views that pin a sticky sub-header (filter bar / tabs) directly under the nav
// declare `meta.stickyChrome`. On those, the nav doesn't fade to transparent at
// its bottom — it hands off at the shared seam alpha so the sub-header can
// continue the SAME fade (see .fc-chrome-continues in app.css). One gradient.
const route = useRoute()
const hasStickyChrome = computed(() => !!route.meta?.stickyChrome)

// Every route with a meta.title is a nav entry. Order by meta.navOrder —
// router.getRoutes() does NOT guarantee declaration order, so explicit numbers
// pin the sequence (e.g. Explore after Gallery). Routes without one fall to the
// end. Auto-tracks future routes.
const navRoutes = computed(() =>
  router.getRoutes()
    .filter(r => r.meta?.title)
    .sort((a, b) => (a.meta.navOrder ?? 999) - (b.meta.navOrder ?? 999))
)
// 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) {
    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;
  /* Both side cells use `flex: 1 1 0` — equal flex weight, basis 0 —
     so they grow/shrink at the same rate regardless of which one has
     content (brand vs. teleport-slot action button). The middle cell
     is `flex: 0 0 auto` (content width), and because the side cells
     are symmetric, the middle stays geometrically centered. Earlier
     attempts: `flex: 1` defaults to basis 0%, which made the centered
     links shift when actions appeared; `grid-template-columns: 1fr
     auto 1fr` actually means `minmax(auto, 1fr)` so a wide brand
     pushed the link block off-center on narrow viewports. */
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  /* Obsidian (#14171A) fade — content scrolls under it. Holds high (0.92 →
     0.84) through the top half, then eases to transparent over the bottom
     quarter so it tails off softly instead of a straight line to a hard edge
     (operator 2026-07-13). Shared --fc-chrome-rgb keeps it in sync with the
     sub-header continuation. */
  background: linear-gradient(
    to bottom,
    rgba(var(--fc-chrome-rgb), 0.92) 0%,
    rgba(var(--fc-chrome-rgb), 0.84) 50%,
    rgba(var(--fc-chrome-rgb), 0.55) 75%,
    rgba(var(--fc-chrome-rgb), 0) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* On a view with a sticky sub-header pinned beneath (meta.stickyChrome), the nav
   stops fading at the shared seam alpha instead of going fully transparent — the
   sub-header (.fc-chrome-continues) picks the fade up from there, so the two read
   as one continuous gradient. Compound selector out-specifies .fc-topnav so it
   wins regardless of Vite's production CSS ordering. --fc-chrome-* come from the
   global :root in app.css (custom props inherit into scoped styles). */
.fc-topnav.fc-topnav--chrome {
  background: linear-gradient(
    to bottom,
    rgba(var(--fc-chrome-rgb), 0.92) 0%,
    rgba(var(--fc-chrome-rgb), 0.84) 60%,
    rgba(var(--fc-chrome-rgb), var(--fc-chrome-seam)) 100%
  );
}

.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: 0 0 auto;
  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;
  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 only (FabledDesignSystem: accent for
   nav-active, never on action buttons). No underline. */
.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;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.fc-health {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.fc-nav-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.fc-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* The hamburger only exists on mobile; the inline links carry desktop. */
.fc-nav-burger { display: none; }

@media (max-width: 768px) {
  .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) {
  /* Reclaim width on the smallest phones — the glyph alone still brands. */
  .fc-brand__text { display: none; }
}
</style>