Move the app shell and its data loading into the (app) route group layout

2026-09-24 13:57:02 +02:00
parent 3126cb6dd6
commit e7c2fd5571
6 changed files with 133 additions and 118 deletions
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { LayoutData } from './$types';
+	import PlayerDock from '$lib/components/player/PlayerDock.svelte';
+	import Queue from '$lib/components/player/Queue.svelte';
+	import Sidebar from '$lib/components/layout/Sidebar.svelte';
+	import TopBar from '$lib/components/layout/TopBar.svelte';
+	import MobileHeader from '$lib/components/layout/MobileHeader.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
+	import { player } from '$lib/player/player.svelte';
+	import { queuePanel } from '$lib/state/panels.svelte';
+	import { liked } from '$lib/player/liked.svelte';
+	import { createPlaylistModal } from '$lib/state/panels.svelte';
+	import { trackNavigation } from '$lib/state/history.svelte';
+	import { restoreScroll } from '$lib/state/scroll';
+	import { page } from '$app/state';
+
+	interface Props {
+		children: Snippet;
+		data: LayoutData;
+	}
+
+	let { children, data }: Props = $props();
+
+	let scroller = $state<HTMLElement>();
+
+	trackNavigation();
+	restoreScroll(() => scroller);
+
+	$effect(() => {
+		if (data.likedTracks?.length) liked.hydrate(data.likedTracks);
+	});
+
+	$effect(() => {
+		if (data.lastPlayedTrack) player.hydrate(data.lastPlayedTrack);
+	});
+
+	let queueAutoOpened = false;
+	$effect(() => {
+		if (!player.playing || queueAutoOpened) return;
+		queueAutoOpened = true;
+		queuePanel.show();
+	});
+
+	function isTypingTarget(target: EventTarget | null): boolean {
+		if (!(target instanceof HTMLElement)) return false;
+		if (target.isContentEditable) return true;
+		return ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'].includes(target.tagName);
+	}
+
+	function onWindowKeydown(event: KeyboardEvent) {
+		if (event.code !== 'Space' || isTypingTarget(event.target)) return;
+		event.preventDefault();
+		player.toggle();
+	}
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+<div class="relative flex h-dvh overflow-hidden text-fg antialiased">
+	<div class="app-backdrop"></div>
+	<div class="app-vignette"></div>
+
+	<Sidebar
+		user={data.user}
+		playlists={data.userPlaylists ?? []}
+		playlistCount={data.userPlaylistsTotal ?? 0}
+	/>
+
+	<div class="flex min-w-0 flex-1 flex-col">
+		<div class="flex min-h-0 flex-1">
+			<div bind:this={scroller} class="flex min-w-0 flex-1 app-scroll flex-col">
+				<MobileHeader user={data.user} accountUrl={data.accountUrl} />
+				<TopBar user={data.user} accountUrl={data.accountUrl} />
+				<main class="flex-1">
+					{#key page.url.pathname}
+						<div class="animate-fade">{@render children()}</div>
+					{/key}
+				</main>
+			</div>
+
+			<Queue />
+		</div>
+
+		<PlayerDock user={data.user} />
+	</div>
+
+	<Modal
+		open={createPlaylistModal.open}
+		onClose={() => createPlaylistModal.close()}
+		title="Crear nueva playlist"
+	>
+		<PlaylistForm
+			action="/playlists?/create"
+			formMessage={page.form?.message}
+			submitLabel="Crear"
+			submittingLabel="Creando…"
+			helperText="Podrás añadir canciones más tarde."
+			onCancel={() => createPlaylistModal.close()}
+			onSuccess={() => createPlaylistModal.close()}
+		/>
+	</Modal>
+</div>