FabledCurator/frontend/src/components/TopNav.vue

<template>
  <header class="fc-topnav">
    <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
        v-for="r in navRoutes"
        :key="r.name"
        :to="{ name: r.name }"
        class="fc-link"
      >{{ r.meta.title }}</RouterLink>
    </nav>

    <!-- 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>

<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;
  /* 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 = 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: 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));
}

.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-actions {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
</style>