bvandeusen
4ba544e2af
CI & Build / Python lint (push) Successful in 3s
CI & Build / Plugin hooks (push) Successful in 7s
CI & Build / integration (push) Successful in 17s
CI & Build / TypeScript typecheck (push) Successful in 34s
CI & Build / Python tests (push) Successful in 48s
CI & Build / Build & push image (push) Successful in 37s
#2533. theme.css claimed "removing this block is a rename sweep across the
components, tracked separately" — written in 67a529a, never filed, which made
the comment itself an instance of the survey's presence-without-reference
pattern. This is that sweep.
73 alias declarations deleted; 69 files rewritten; every --color-*-style name
now references its --fs-* token directly. Mechanical by construction: the map
IS the alias block, applied longest-name-first with a boundary guard so
--color-text never matched inside --color-text-muted. Zero survivors outside
theme.css, verified by grep rather than assumed.
One deliberate survivor: --color-shadow stays DECLARED, because it was never
an alias — it is a literal value the design system has no token for. Marked
in place as a recorded gap: promote it to an --fs-* token when a second app
needs it, don't copy the line.
Nothing is lost mode-wise: the aliases' resolve-at-use-time trick (which
absorbed 48 dark-mode overrides) lives one layer down in the --fs-* tokens'
own derivations, which is why the sweep is a pure rename. Both CSS checkers
green.
Why now rather than never: check_snippets_against_design_system reports every
--color-* reference as "unknown — renders as NOTHING", and nine recipe
snippets recorded from components.css carried the deprecated names, making
them prior art pointing the wrong way. With the sweep in, the checker's
report over re-recorded snippets should be EMPTY — the acceptance test that
proves the checker was right all along (#2517's correction).
Refs #2533
409 lines
12 KiB
Vue
409 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useTheme } from "@/composables/useTheme";
|
|
import { useShortcuts } from "@/composables/useShortcuts";
|
|
import { useAuthStore } from "@/stores/auth";
|
|
import AppLogo from "@/components/AppLogo.vue";
|
|
import NotificationBell from "@/components/NotificationBell.vue";
|
|
import { Sun, Moon, Settings, Trash2 } from "lucide-vue-next";
|
|
|
|
const { theme, toggleTheme } = useTheme();
|
|
const { toggleShortcuts } = useShortcuts();
|
|
const authStore = useAuthStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const isKnowledgeActive = computed(() => route.path === "/knowledge");
|
|
|
|
const mobileMenuOpen = ref(false);
|
|
|
|
function toggleMobileMenu() {
|
|
mobileMenuOpen.value = !mobileMenuOpen.value;
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await authStore.logout();
|
|
mobileMenuOpen.value = false;
|
|
router.push("/login");
|
|
}
|
|
|
|
router.afterEach(() => {
|
|
mobileMenuOpen.value = false;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<header class="app-header">
|
|
<nav class="nav">
|
|
<!-- Left: brand -->
|
|
<router-link to="/" class="nav-brand">
|
|
<AppLogo :size="34" />
|
|
<span class="brand-text">Scribe</span>
|
|
</router-link>
|
|
|
|
<!-- Center: primary navigation (desktop) -->
|
|
<div class="nav-center">
|
|
<div class="nav-pill-bar">
|
|
<router-link to="/dashboard" class="nav-link">Dashboard</router-link>
|
|
<router-link to="/knowledge" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Browse</router-link>
|
|
<router-link to="/projects" class="nav-link">Projects</router-link>
|
|
<router-link to="/snippets" class="nav-link">Snippets</router-link>
|
|
<router-link to="/rules" class="nav-link">Rulebooks</router-link>
|
|
<!-- A design system is a RECORD you author, not a setting. It sat in
|
|
the utility cluster with Trash and Settings while /design was a
|
|
read-only gallery, and stayed there after it became a record type
|
|
with its own table, sharing and MCP tools. Content, by the same
|
|
rule that puts Snippets and Rulebooks here. -->
|
|
<router-link to="/design-systems" class="nav-link">Design</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: utilities + gear + user -->
|
|
<div class="nav-right">
|
|
<NotificationBell />
|
|
|
|
<button class="btn-icon" @click="toggleShortcuts" title="Keyboard shortcuts (?)">?</button>
|
|
|
|
<button class="btn-icon" @click="toggleTheme" :title="`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`">
|
|
<Sun v-if="theme === 'dark'" :size="16" />
|
|
<Moon v-else :size="16" />
|
|
</button>
|
|
|
|
<!-- Trash link -->
|
|
<router-link to="/trash" class="btn-icon" aria-label="Trash" title="Trash">
|
|
<Trash2 :size="16" />
|
|
</router-link>
|
|
|
|
<!-- Settings link -->
|
|
<router-link to="/settings" class="btn-icon" aria-label="Settings" title="Settings">
|
|
<Settings :size="16" />
|
|
</router-link>
|
|
|
|
<div class="user-info">
|
|
<span class="username">{{ authStore.user?.username }}</span>
|
|
<span v-if="authStore.isAdmin" class="admin-badge">admin</span>
|
|
<button class="btn-logout" @click="handleLogout" title="Sign out">Sign out</button>
|
|
</div>
|
|
|
|
<!-- Hamburger (mobile only) -->
|
|
<button class="hamburger" @click="toggleMobileMenu" aria-label="Toggle menu">
|
|
<span class="hamburger-line"></span>
|
|
<span class="hamburger-line"></span>
|
|
<span class="hamburger-line"></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile dropdown -->
|
|
<div v-if="mobileMenuOpen" class="mobile-menu">
|
|
<router-link to="/dashboard" class="nav-link">Dashboard</router-link>
|
|
<router-link to="/knowledge" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Browse</router-link>
|
|
<router-link to="/projects" class="nav-link">Projects</router-link>
|
|
<router-link to="/snippets" class="nav-link">Snippets</router-link>
|
|
<router-link to="/rules" class="nav-link">Rulebooks</router-link>
|
|
<router-link to="/design-systems" class="nav-link">Design</router-link>
|
|
<router-link to="/shared" class="nav-link">Shared</router-link>
|
|
<div class="mobile-divider"></div>
|
|
<router-link to="/trash" class="nav-link">Trash</router-link>
|
|
<router-link to="/settings" class="nav-link">Settings</router-link>
|
|
<div class="mobile-divider"></div>
|
|
<div class="mobile-actions">
|
|
<button class="btn-icon" @click="toggleShortcuts">?</button>
|
|
<button class="btn-icon" @click="toggleTheme"><Sun v-if="theme === 'dark'" :size="16" />
|
|
<Moon v-else :size="16" /></button>
|
|
</div>
|
|
<div class="mobile-user">
|
|
<span class="username">{{ authStore.user?.username }}</span>
|
|
<span v-if="authStore.isAdmin" class="admin-badge">admin</span>
|
|
<button class="btn-logout" @click="handleLogout">Sign out</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-header {
|
|
background: linear-gradient(180deg, var(--fs-surface-hover), var(--fs-surface-page));
|
|
border-bottom: 1px solid color-mix(in srgb, var(--fs-accent) 18%, transparent);
|
|
position: relative;
|
|
}
|
|
/* Three tracks, not a flex row with an absolutely-centred overlay.
|
|
*
|
|
* The pill bar used to be `position: absolute; left: 50%`, which meant it did
|
|
* not participate in layout: when the header ran out of room it OVERLAPPED the
|
|
* brand and the utility cluster rather than pushing them, and nothing wrapped
|
|
* or scrolled to signal it. A sixth link reached that point at ~1270px, which
|
|
* is an ordinary window on any monitor.
|
|
*
|
|
* `1fr auto 1fr` fixes it structurally. A `1fr` track has an AUTO minimum, so
|
|
* neither side can be squeezed below its content, and the two side tracks stay
|
|
* equal to each other — which is what keeps the bar centred in the viewport
|
|
* rather than merely centred in the leftover space. Overflow becomes the
|
|
* header growing, not two things sharing pixels. */
|
|
.nav {
|
|
padding: 0.6rem 1.5rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
position: relative;
|
|
}
|
|
|
|
/* Left — brand */
|
|
.nav-brand {
|
|
justify-self: start;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
text-decoration: none;
|
|
flex-shrink: 0;
|
|
}
|
|
.brand-text {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-optical-sizing: auto;
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
letter-spacing: -0.01em;
|
|
color: #c4b0f0;
|
|
}
|
|
|
|
/* Center — pill bar */
|
|
.nav-center {
|
|
justify-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.nav-pill-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
background: var(--fs-accent-faint);
|
|
border-radius: 10px;
|
|
padding: 3px;
|
|
}
|
|
|
|
/* Right */
|
|
.nav-right {
|
|
justify-self: end;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--fs-text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.82rem;
|
|
padding: 0.3rem 0.75rem;
|
|
border-radius: 8px;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.nav-link:hover {
|
|
color: var(--fs-text-primary);
|
|
background: var(--fs-accent-soft);
|
|
}
|
|
.nav-link.router-link-active {
|
|
color: var(--fs-accent);
|
|
font-weight: 500;
|
|
background: color-mix(in srgb, var(--fs-accent) 25%, transparent);
|
|
box-shadow: 0 0 16px color-mix(in srgb, var(--fs-accent) 30%, transparent);
|
|
}
|
|
|
|
/* Status indicator */
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
cursor: default;
|
|
padding: 0 0.25rem;
|
|
}
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.status-text {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--fs-text-tertiary);
|
|
}
|
|
/* Status dots are indicator lights, not semantic-palette buttons —
|
|
they want to read as vital (Moss/Warning/Error are too muted for
|
|
a "ready" indicator). Hardcoded bright values; the rest of the
|
|
system still uses the semantic tokens. */
|
|
.status-green .status-dot { background: #4ade80; animation: status-pulse 2.5s ease-in-out infinite; }
|
|
.status-yellow .status-dot { background: #facc15; animation: pulse-dot 2s infinite; }
|
|
.status-orange .status-dot { background: #f97316; }
|
|
.status-red .status-dot { background: #ef4444; }
|
|
.status-gray .status-dot { background: var(--fs-text-tertiary); animation: pulse-dot 2s infinite; }
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
@keyframes status-pulse {
|
|
0%, 100% { box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); }
|
|
50% { box-shadow: 0 0 10px rgba(74, 222, 128, 0.6); }
|
|
}
|
|
|
|
/* Icon buttons (?, theme, gear) */
|
|
.btn-icon {
|
|
background: none;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
padding: 0.25rem 0.45rem;
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
color: var(--fs-text-tertiary);
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn-icon:hover,
|
|
.btn-icon.active {
|
|
background: var(--fs-surface-raised);
|
|
color: var(--fs-text-primary);
|
|
border-color: var(--fs-accent);
|
|
}
|
|
|
|
/* User info */
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
margin-left: 0.25rem;
|
|
padding-left: 0.5rem;
|
|
border-left: 1px solid var(--fs-border-color);
|
|
}
|
|
.username {
|
|
font-size: 0.85rem;
|
|
color: var(--fs-text-secondary);
|
|
font-weight: 500;
|
|
/* The widest thing on the right and the only one that can give: a long
|
|
username shouldn't be what decides where the nav bar sits. */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 12ch;
|
|
}
|
|
.admin-badge {
|
|
font-size: 0.65rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--fs-accent);
|
|
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: var(--fs-radius-sm);
|
|
}
|
|
.btn-logout {
|
|
background: none;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
padding: 0.2rem 0.5rem;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
color: var(--fs-text-secondary);
|
|
font-family: inherit;
|
|
}
|
|
.btn-logout:hover {
|
|
color: var(--fs-error);
|
|
border-color: var(--fs-error);
|
|
}
|
|
|
|
/* Hamburger — mobile only */
|
|
.hamburger {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-left: 0.25rem;
|
|
}
|
|
.hamburger-line {
|
|
display: block;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: var(--fs-text-primary);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* Mobile menu */
|
|
.mobile-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.5rem 1rem 0.75rem;
|
|
border-top: 1px solid var(--fs-border-color);
|
|
background: var(--fs-surface-raised);
|
|
gap: 0.1rem;
|
|
}
|
|
.mobile-divider {
|
|
height: 1px;
|
|
background: var(--fs-border-color);
|
|
margin: 0.4rem 0;
|
|
}
|
|
.mobile-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0;
|
|
}
|
|
.mobile-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding-top: 0.4rem;
|
|
border-top: 1px solid var(--fs-border-color);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* The grid above means running out of room can no longer cause a collision —
|
|
but it can still make the header wider than the window, and a horizontally
|
|
scrolling header is its own defect. So shed width before that happens. The
|
|
wordmark goes first: the logo beside it says the same thing and is still the
|
|
link home. */
|
|
@media (max-width: 1280px) {
|
|
.brand-text {
|
|
display: none;
|
|
}
|
|
.nav-link {
|
|
padding: 0.3rem 0.5rem;
|
|
font-size: 0.78rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-center {
|
|
display: none;
|
|
}
|
|
.status-indicator,
|
|
.btn-icon,
|
|
.user-info {
|
|
display: none;
|
|
}
|
|
.hamburger {
|
|
display: flex;
|
|
}
|
|
.mobile-menu .nav-link {
|
|
padding: 0.5rem 0.75rem;
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
}
|
|
.mobile-menu .nav-link.router-link-active {
|
|
background: var(--fs-accent-wash);
|
|
box-shadow: none;
|
|
}
|
|
.mobile-user .btn-logout {
|
|
min-height: 36px;
|
|
}
|
|
}
|
|
</style>
|