test

frontend/src/components/layout/AppHeader.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import AppButton from "@/components/ui/AppButton.vue";
+import { useThemeStore } from "@/stores/theme";
+
+const theme = useThemeStore();
+
+const isDarkTheme = computed(() => theme.active === "dark");
+const toggleThemeLabel = computed(() =>
+  isDarkTheme.value ? "Switch to light theme" : "Switch to dark theme",
+);
+
+function onToggleTheme(): void {
+  theme.setPreference(isDarkTheme.value ? "light" : "dark");
+}
+</script>
+
+<template>
+  <header class="sticky top-0 z-30 border-b border-zinc-200/70 bg-white/90 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/90">
+    <div class="flex min-h-[4.5rem] w-full items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+      <div class="flex min-w-0 items-center gap-2">
+        <RouterLink
+          to="/dashboard"
+          class="rounded-sm font-display text-lg tracking-tight text-zinc-900 transition hover:text-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:text-zinc-100 dark:hover:text-zinc-300 dark:focus-visible:ring-brand-400 dark:focus-visible:ring-offset-zinc-950"
+        >
+          scholarr
+        </RouterLink>
+      </div>
+
+      <div class="flex items-center justify-end">
+        <AppButton
+          variant="ghost"
+          class="h-10 w-10 rounded-full p-0"
+          :aria-label="toggleThemeLabel"
+          :title="toggleThemeLabel"
+          @click="onToggleTheme"
+        >
+          <span class="sr-only">{{ toggleThemeLabel }}</span>
+          <svg
+            v-if="isDarkTheme"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            class="h-5 w-5"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="4" />
+            <path
+              d="M12 2v2.5M12 19.5V22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M2 12h2.5M19.5 12H22M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8"
+            />
+          </svg>
+          <svg
+            v-else
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            class="h-5 w-5"
+            aria-hidden="true"
+          >
+            <path d="M21 14.5A8.5 8.5 0 1 1 9.5 3 7 7 0 0 0 21 14.5z" />
+          </svg>
+        </AppButton>
+      </div>
+    </div>
+  </header>
+</template>

frontend/src/components/layout/AppNav.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+
+import AppButton from "@/components/ui/AppButton.vue";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const router = useRouter();
+
+const links = computed(() => {
+  const base = [
+    { to: "/dashboard", label: "Dashboard" },
+    { to: "/scholars", label: "Scholars" },
+    { to: "/publications", label: "Publications" },
+    { to: "/settings", label: "Settings" },
+  ];
+
+  if (auth.isAdmin) {
+    base.push({ to: "/admin/runs", label: "Runs" });
+    base.push({ to: "/admin/users", label: "Users" });
+  }
+
+  return base;
+});
+
+async function onLogout(): Promise<void> {
+  await auth.logout();
+  await router.replace({ name: "login" });
+}
+</script>
+
+<template>
+  <aside
+    class="min-w-0 border-b border-zinc-200 bg-white/70 px-4 py-4 dark:border-zinc-800 dark:bg-zinc-900/70 lg:h-full lg:min-h-0 lg:overflow-y-auto lg:border-b-0 lg:border-r lg:px-5 lg:py-6"
+  >
+    <div class="flex h-full min-h-0 flex-col gap-4">
+      <nav class="grid grid-cols-2 content-start gap-2 sm:grid-cols-3 lg:grid-cols-1" aria-label="Primary">
+        <RouterLink
+          v-for="link in links"
+          :key="link.to"
+          :to="link.to"
+          class="inline-flex min-h-10 min-w-0 items-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-zinc-600 transition hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:text-zinc-300 dark:hover:border-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-100 dark:focus-visible:ring-brand-400 dark:focus-visible:ring-offset-zinc-950"
+          active-class="border-zinc-900 bg-zinc-900 text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white dark:border-brand-400 dark:bg-brand-400 dark:text-zinc-950 dark:hover:border-brand-300 dark:hover:bg-brand-300"
+        >
+          {{ link.label }}
+        </RouterLink>
+      </nav>
+
+      <div class="mt-auto grid gap-2 border-t border-zinc-200 pt-3 dark:border-zinc-800">
+        <p class="truncate text-xs text-zinc-500 dark:text-zinc-400">{{ auth.user?.email }}</p>
+        <AppButton variant="ghost" class="w-full justify-start" @click="onLogout">Logout</AppButton>
+      </div>
+    </div>
+  </aside>
+</template>

frontend/src/components/layout/AppPage.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  subtitle?: string;
+}>();
+</script>
+
+<template>
+  <section class="page-stack min-w-0">
+    <header class="space-y-2">
+      <h1 class="page-title">{{ title }}</h1>
+      <p v-if="subtitle" class="page-subtitle">{{ subtitle }}</p>
+    </header>
+    <slot />
+  </section>
+</template>