dtourolle
ad48d89dfe
Formatting was configured but never enforced: `bun run format:check` reported 199 unformatted files and ran in no workflow and in no git hook, so .prettierrc (printWidth 100, trailing commas) described an intention rather than the tree. This is the one-time sweep that makes the check gateable. Whitespace and token-reflow only -- no behavioural change: `bun run check` reports 0 errors and all 1053 frontend tests pass before and after. Kept out of every other commit on purpose. A 199-file diff mixed with real changes is unreviewable, and the next commit turns format:check into a hard CI gate so this cannot silently accumulate again.
99 lines
3.2 KiB
Svelte
99 lines
3.2 KiB
Svelte
<!--
|
|
Shared application header. Lifted out of the library layout so the account
|
|
menu (and desktop nav) are available on every authenticated, non-immersive
|
|
screen, not only under /library.
|
|
|
|
The search box is owned here rather than passed in by a layout, so the same
|
|
bar renders on the library routes and on /search — searching from the header
|
|
no longer hands you to a screen with a different input.
|
|
|
|
TRACES: UR-054 | DR-076
|
|
-->
|
|
<script lang="ts">
|
|
import { page } from "$app/stores";
|
|
import AccountMenu from "$lib/components/account/AccountMenu.svelte";
|
|
import HeaderSearch from "$lib/components/search/HeaderSearch.svelte";
|
|
import { showHeaderSearch } from "$lib/utils/layoutShell";
|
|
|
|
const pathname = $derived($page.url.pathname);
|
|
const withSearch = $derived(showHeaderSearch({ pathname }));
|
|
</script>
|
|
|
|
<header
|
|
class="sticky top-0 z-50 bg-[var(--color-background)]/95 backdrop-blur border-b border-gray-800 flex-shrink-0"
|
|
>
|
|
<div class="px-4 py-3 flex items-center gap-4">
|
|
<!-- Logo -->
|
|
<a href="/library" class="text-xl font-bold text-[var(--color-jellyfin)]"> JellyTau </a>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="hidden md:flex items-center gap-1">
|
|
<a
|
|
href="/"
|
|
class="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface)] {pathname ===
|
|
'/'
|
|
? 'text-[var(--color-jellyfin)] bg-[var(--color-surface)]'
|
|
: 'text-gray-400'}"
|
|
>
|
|
Home
|
|
</a>
|
|
<a
|
|
href="/library"
|
|
class="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface)] {pathname.startsWith(
|
|
'/library',
|
|
)
|
|
? 'text-[var(--color-jellyfin)] bg-[var(--color-surface)]'
|
|
: 'text-gray-400'}"
|
|
>
|
|
Library
|
|
</a>
|
|
<a
|
|
href="/downloads"
|
|
class="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface)] {pathname ===
|
|
'/downloads'
|
|
? 'text-[var(--color-jellyfin)] bg-[var(--color-surface)]'
|
|
: 'text-gray-400'}"
|
|
>
|
|
Downloads
|
|
</a>
|
|
<a
|
|
href="/settings"
|
|
class="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface)] {pathname ===
|
|
'/settings'
|
|
? 'text-[var(--color-jellyfin)] bg-[var(--color-surface)]'
|
|
: 'text-gray-400'}"
|
|
>
|
|
Settings
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- In-header search: the single md+ search input (library + /search). -->
|
|
{#if withSearch}
|
|
<div class="flex-1 max-w-md hidden md:block">
|
|
<HeaderSearch />
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Account menu, anchored to the user's identity. -->
|
|
<div class="ml-auto flex items-center gap-3">
|
|
<!-- Desktop: Downloads quick icon (kept per UX spec §1.2). -->
|
|
<a
|
|
href="/downloads"
|
|
class="hidden md:block text-gray-400 hover:text-white transition-colors"
|
|
title="Downloads"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<AccountMenu />
|
|
</div>
|
|
</div>
|
|
</header>
|