feat(ui,api): strip board redesign - island, rail by day, context view, server search, vault graph

2026-09-02 03:48:26 +02:00
parent 6b7de6f03d
commit 256b2a68d6
60 changed files with 5071 additions and 2347 deletions
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import LogOutIcon from "@lucide/svelte/icons/log-out";
+  import MoonIcon from "@lucide/svelte/icons/moon";
+  import SunIcon from "@lucide/svelte/icons/sun";
+  import { mode, toggleMode } from "mode-watcher";
+  import { goto } from "$app/navigation";
+  import { base } from "$app/paths";
+  import { page } from "$app/state";
+  import { isSectionActive, SECTIONS, SYSTEM } from "$lib/nav";
+  import { session } from "$lib/session.svelte";
+  import { cn } from "$lib/utils";
+  import Island from "./island.svelte";
+
+  async function signOut() {
+    await session.logout();
+    await goto(`${base}/login`);
+  }
+</script>
+
+<header
+  class="relative z-30 grid h-12 shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-3 border-b bg-rack/85 px-3 backdrop-blur-md sm:px-5"
+>
+  <nav aria-label="Sections" class="flex min-w-0 items-center gap-4">
+    <a
+      aria-label="Beaver"
+      class="flex size-6 shrink-0 items-center justify-center"
+      href="{base}/"
+    >
+      <span class="size-2.5 rounded-[3px] bg-primary"></span>
+    </a>
+    <div class="hidden items-center gap-4 sm:flex">
+      {#each SECTIONS as item (item.href)}
+        {@const active = isSectionActive(page.url.pathname, base, item.href)}
+        <a
+          aria-current={active ? "page" : undefined}
+          class={cn("rule-word", active && "text-foreground")}
+          href="{base}{item.href}"
+          title="{item.label} ({item.key})"
+        >
+          {item.label}
+        </a>
+      {/each}
+    </div>
+  </nav>
+  <Island />
+  <div class="flex min-w-0 items-center justify-end gap-3">
+    <a
+      aria-current={isSectionActive(page.url.pathname, base, SYSTEM.href)
+        ? "page"
+        : undefined}
+      class="rule-word hidden sm:inline"
+      href="{base}{SYSTEM.href}"
+      title="{SYSTEM.label} ({SYSTEM.key})"
+    >
+      {SYSTEM.label}
+    </a>
+    <button
+      aria-label="Toggle theme"
+      class="rule-word inline-flex size-7 items-center justify-center rounded-md"
+      onclick={toggleMode}
+      title="Toggle theme"
+      type="button"
+    >
+      {#if mode.current === "dark"}
+        <SunIcon class="size-4" />
+      {:else}
+        <MoonIcon class="size-4" />
+      {/if}
+    </button>
+    <button
+      aria-label="Sign out"
+      class="rule-word hidden size-7 items-center justify-center rounded-md sm:inline-flex"
+      onclick={signOut}
+      title="Sign out"
+      type="button"
+    >
+      <LogOutIcon class="size-4" />
+    </button>
+  </div>
+</header>