From 49c8e5959ebffd7f9873a5a949a5851ae8196571 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 21:53:36 -0400
Subject: [PATCH] feat(web/m7-364): mount QueueDrawer + esc handler + restore
 on bootstrap

---
 web/src/routes/+layout.svelte | 16 +++++++++++++++-
 web/src/routes/+layout.ts     |  5 ++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 83be0358..43ca6524 100644
--- a/web/src/routes/+layout.svelte
+++ b/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>
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
index ea7719a7..82e10c06 100644
--- a/web/src/routes/+layout.ts
+++ b/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 {};
 };