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.
82 lines
3.0 KiB
Svelte
82 lines
3.0 KiB
Svelte
<!-- TRACES: UR-039 | DR-045 -->
|
|
<script lang="ts">
|
|
import { page } from "$app/stores";
|
|
import { goto } from "$app/navigation";
|
|
import { library } from "$lib/stores/library";
|
|
|
|
// When a className is supplied the parent positions this bar (e.g. inside a
|
|
// measured in-flow stack); otherwise it self-positions as a fixed bottom bar.
|
|
let { className = "fixed bottom-0 left-0 right-0 z-40" }: { className?: string } = $props();
|
|
|
|
// Determine if a route is active
|
|
function isActive(path: string): boolean {
|
|
const pathname = $page.url.pathname;
|
|
if (path === "/") {
|
|
// Home is active only when exactly on / or /home, not /library or /search
|
|
return (
|
|
pathname === "/" ||
|
|
(pathname.startsWith("/home") &&
|
|
!pathname.startsWith("/library") &&
|
|
!pathname.startsWith("/search"))
|
|
);
|
|
}
|
|
return pathname.startsWith(path);
|
|
}
|
|
</script>
|
|
|
|
<!-- Navigation bar visible on all platforms -->
|
|
<nav class="{className} bg-[var(--color-surface)] border-t border-gray-800">
|
|
<div class="flex items-center justify-around px-4 py-2">
|
|
<!-- Home Button -->
|
|
<button
|
|
onclick={() => goto("/")}
|
|
class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/') &&
|
|
!isActive('/library') &&
|
|
!isActive('/search')
|
|
? 'text-[var(--color-jellyfin)]'
|
|
: 'text-gray-400 hover:text-white'}"
|
|
aria-label="Home"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
|
</svg>
|
|
<span class="text-xs">Home</span>
|
|
</button>
|
|
|
|
<!-- Search Button -->
|
|
<button
|
|
onclick={() => goto("/search")}
|
|
class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/search')
|
|
? 'text-[var(--color-jellyfin)]'
|
|
: 'text-gray-400 hover:text-white'}"
|
|
aria-label="Search"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
|
/>
|
|
</svg>
|
|
<span class="text-xs">Search</span>
|
|
</button>
|
|
|
|
<!-- Library Button -->
|
|
<button
|
|
onclick={() => {
|
|
library.setCurrentLibrary(null);
|
|
goto("/library");
|
|
}}
|
|
class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/library')
|
|
? 'text-[var(--color-jellyfin)]'
|
|
: 'text-gray-400 hover:text-white'}"
|
|
aria-label="Library"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"
|
|
/>
|
|
</svg>
|
|
<span class="text-xs">Library</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|