feat(web/m7-364): mount QueueDrawer + esc handler + restore on bootstrap

web/src/routes/+layout.svelte

@@ -6,12 +6,14 @@
   import { queryClient } from '$lib/query/client';
   import { user } from '$lib/auth/store.svelte';
   import Shell from '$lib/components/Shell.svelte';
+  import QueueDrawer from '$lib/components/QueueDrawer.svelte';
   import {
     registerAudioEl,
     reportTimeUpdate,
     reportDuration,
     reportStateFromAudio,
-    player
+    player,
+    closeQueueDrawer
   } from '$lib/player/store.svelte';
   import { useMediaSession } from '$lib/player/mediaSession.svelte';
   import { useEventsDispatcher } from '$lib/player/events.svelte';
@@ -65,6 +67,16 @@
     }
   });
 
+  $effect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && player.queueDrawerOpen) {
+        closeQueueDrawer();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  });
+
   useMediaSession();
   useEventsDispatcher();
   applyMetaThemeColor();
@@ -82,6 +94,8 @@
   onerror={() => reportStateFromAudio('error', audioEl?.error?.message)}
 ></audio>
 
+<QueueDrawer />
+
 <QueryClientProvider client={queryClient}>
   {#if user.value !== null && page.url.pathname !== '/login'}
     <Shell>{@render children()}</Shell>

web/src/routes/+layout.ts

@@ -1,10 +1,13 @@
 import type { LayoutLoad } from './$types';
-import { bootstrap } from '$lib/auth/store.svelte';
+import { bootstrap, user } from '$lib/auth/store.svelte';
+import { restoreQueue } from '$lib/player/store.svelte';
 
 export const ssr = false; // adapter-static fallback; we're SPA-only
 export const prerender = false;
 
 export const load: LayoutLoad = async () => {
   await bootstrap();
+  const userId = user.value?.id;
+  if (userId) restoreQueue(userId);
   return {};
 };