feat: persist sidebar panel sizes across page refreshes

Wire useDefaultLayout to sidebar Group with localStorage storage.
Update reset command to clear both sidebar and detail layout keys.

2 files changed, 15 insertions, 2 deletions

diff --git a/apps/web/app/reader/_components/command-palette.tsx b/apps/web/app/reader/_components/command-palette.tsx
index 551537a..744250f 100644
--- a/apps/web/app/reader/_components/command-palette.tsx
+++ b/apps/web/app/reader/_components/command-palette.tsx
@@ -198,6 +198,9 @@ export function CommandPalette() {
                   localStorage.removeItem(
                     "react-resizable-panels:asa-detail-layout"
                   )
+                  localStorage.removeItem(
+                    "react-resizable-panels:asa-sidebar-layout:sidebar:main-content"
+                  )
                   window.location.reload()
                 })
               }
diff --git a/apps/web/app/reader/_components/reader-layout-shell.tsx b/apps/web/app/reader/_components/reader-layout-shell.tsx
index 4ccf121..8c6db8b 100644
--- a/apps/web/app/reader/_components/reader-layout-shell.tsx
+++ b/apps/web/app/reader/_components/reader-layout-shell.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Suspense, useEffect, useState } from "react"
-import { Group, Panel, Separator } from "react-resizable-panels"
+import { Group, Panel, Separator, useDefaultLayout } from "react-resizable-panels"
 import { useUserInterfaceStore } from "@/lib/stores/user-interface-store"
 import { classNames } from "@/lib/utilities"
 import { useIsMobile } from "@/lib/hooks/use-is-mobile"
@@ -49,6 +49,12 @@ export function ReaderLayoutShell({
   )
   const isMobile = useIsMobile()
 
+  const sidebarLayout = useDefaultLayout({
+    id: "asa-sidebar-layout",
+    panelIds: ["sidebar", "main-content"],
+    storage: typeof window !== "undefined" ? localStorage : { getItem: () => null, setItem: () => {} },
+  })
+
   useKeyboardNavigation()
 
   useEffect(() => {
@@ -194,7 +200,11 @@ export function ReaderLayoutShell({
         </>
       ) : (
         <div className="flex-1 overflow-hidden">
-          <Group orientation="horizontal">
+          <Group
+            orientation="horizontal"
+            defaultLayout={sidebarLayout.defaultLayout}
+            onLayoutChanged={sidebarLayout.onLayoutChanged}
+          >
             {!isSidebarCollapsed && (
               <>
                 <Panel id="sidebar" defaultSize="20%" minSize="15%" maxSize="35%">