Big changes

frontend/src/components/layout/AppHeader.vue

@@ -2,9 +2,8 @@
 import { computed } from "vue";
 
 import AppButton from "@/components/ui/AppButton.vue";
-import AppSelect from "@/components/ui/AppSelect.vue";
-import { useThemeStore } from "@/stores/theme";
-import type { ThemePresetId } from "@/theme/presets";
+import AppBrandMark from "@/components/ui/AppBrandMark.vue";
+import AppThemePicker from "@/components/ui/AppThemePicker.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -20,25 +19,9 @@ const emit = defineEmits<{
   (e: "toggle-menu"): void;
 }>();
 
-const theme = useThemeStore();
-
-const isDarkTheme = computed(() => theme.active === "dark");
-const toggleThemeLabel = computed(() =>
-  isDarkTheme.value ? "Switch to light theme" : "Switch to dark theme",
-);
 const menuButtonLabel = computed(() =>
   props.menuOpen ? "Close navigation menu" : "Open navigation menu",
 );
-const selectedPreset = computed<ThemePresetId>({
-  get: () => theme.preset,
-  set: (value) => theme.setPreset(value),
-});
-const presetOptions = computed(() => theme.availablePresets);
-const themePresetLabel = computed(() => theme.presetLabel);
-
-function onToggleTheme(): void {
-  theme.setPreference(isDarkTheme.value ? "light" : "dark");
-}
 
 function onToggleMenu(): void {
   emit("toggle-menu");
@@ -75,64 +58,14 @@ function onToggleMenu(): void {
         </AppButton>
         <RouterLink
           to="/dashboard"
-          class="rounded-sm font-display text-lg tracking-tight text-ink-primary transition hover:text-ink-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset"
+          class="inline-flex items-center gap-2.5 rounded-sm font-display text-xl tracking-tight text-ink-primary transition hover:text-ink-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset"
         >
-          scholarr
+          <AppBrandMark size="lg" />
+          <span>scholarr</span>
         </RouterLink>
       </div>
 
-      <div class="flex items-center justify-end gap-2">
-        <div class="w-36 sm:w-44">
-          <label for="theme-preset-select" class="sr-only">Theme preset</label>
-          <AppSelect
-            id="theme-preset-select"
-            v-model="selectedPreset"
-            :disabled="presetOptions.length <= 1"
-            :title="`Theme preset: ${themePresetLabel}`"
-            class="py-1.5"
-          >
-            <option v-for="preset in presetOptions" :key="preset.id" :value="preset.id">
-              {{ preset.label }}
-            </option>
-          </AppSelect>
-        </div>
-        <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>
+      <AppThemePicker id-prefix="header-theme" />
     </div>
   </header>
 </template>

frontend/src/components/layout/AppNav.vue

@@ -19,22 +19,12 @@ const emit = defineEmits<{
 }>();
 
 const links = computed(() => {
-  const base = [
-    { id: "dashboard", to: "/dashboard", label: "Dashboard", adminOnly: false },
-    { id: "scholars", to: "/scholars", label: "Scholars", adminOnly: false },
-    { id: "publications", to: "/publications", label: "Publications", adminOnly: false },
-    { id: "settings", to: "/settings", label: "Settings", adminOnly: false },
-    { id: "style-guide", to: "/admin/style-guide", label: "Style Guide", adminOnly: true },
-    { id: "runs", to: "/admin/runs", label: "Runs", adminOnly: true },
-    { id: "users", to: "/admin/users", label: "Users", adminOnly: true },
+  return [
+    { id: "dashboard", to: "/dashboard", label: "Dashboard" },
+    { id: "scholars", to: "/scholars", label: "Scholars" },
+    { id: "publications", to: "/publications", label: "Publications" },
+    { id: "settings", to: "/settings", label: "Settings" },
   ];
-
-  return base.filter((item) => {
-    if (item.adminOnly && !auth.isAdmin) {
-      return false;
-    }
-    return userSettings.isPageVisible(item.id);
-  });
 });
 const navSafetyText = computed(() => {
   if (!userSettings.manualRunAllowed) {