feat: small improvements

frontend/src/app/kosmos/KosmosSidebar.tsx

@@ -98,7 +98,7 @@ export function KosmosSidebar() {
               ) : (
                 <SidebarMenuButton asChild size="lg" tooltip="Zoë" className="font-semibold font-serif">
                   <Link to="/recollections">
-                    <span className="flex size-8 min-w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground dark:bg-white dark:text-black">
+                    <span className="flex size-8 min-w-8 items-center justify-center rounded-lg dark:bg-white dark:text-black">
                       <span
                         className="size-6 shrink-0 rounded-[2px] opacity-90"
                         style={{

frontend/src/app/recollections/layout/RecollectionSidebar.tsx

@@ -222,22 +222,21 @@ export function RecollectionSidebar() {
       className="flex h-full w-[var(--sidebar-width)] shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground"
       style={{ '--sidebar-width': '16rem' } as React.CSSProperties}
     >
-      <div className="flex shrink-0 items-center justify-between border-b border-sidebar-border px-2 py-2">
+      <SidebarContent className="flex-1 overflow-y-auto border-0 bg-transparent">
-        <span className="text-xs font-medium text-sidebar-foreground/70">Pages</span>
+        <SidebarGroup>
+          <div className="flex items-center justify-between gap-2 px-2 py-1.5">
+            <SidebarGroupLabel className="py-0">Logos</SidebarGroupLabel>
             <Button
               type="button"
               variant="ghost"
               size="sm"
-          className="h-7 gap-1 px-2 text-xs text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              className="h-6 gap-1 px-1.5 text-xs text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               onClick={addPage}
             >
               <Plus className="size-3.5" />
               New page
             </Button>
           </div>
-      <SidebarContent className="flex-1 overflow-y-auto border-0 bg-transparent">
-        <SidebarGroup>
-          <SidebarGroupLabel>Logos</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               {pages.length === 0 ? (

frontend/src/app/recollections/layout/RecollectionSidebarContext.tsx

@@ -63,7 +63,8 @@ export function RecollectionSidebarProvider({ children }: { children: React.Reac
     [recollectionId]
   )
 
-  // Load page tree and run migration when empty (treat existing single doc as "Main" page).
+  // Load page tree from storage only when recollection changes (not on every searchParams change).
+  // Otherwise adding a new page would trigger searchParams change and this would overwrite tree before persist.
   useEffect(() => {
     if (!recollectionId) return
     let t = getLogosPageTree(recollectionId)
@@ -75,15 +76,20 @@ export function RecollectionSidebarProvider({ children }: { children: React.Reac
       t = [main]
     }
     setTree(t)
+  }, [recollectionId])
+
+  // Sync activePageId from URL when searchParams or tree changes (e.g. after adding a page).
+  useEffect(() => {
+    if (!recollectionId) return
     const pageFromUrl = searchParams.get('page')
-    const validIdFromUrl = pageFromUrl && t.some((p) => p.id === pageFromUrl) ? pageFromUrl : null
     setActivePageId((prev) => {
+      const validIdFromUrl = pageFromUrl && tree.some((p) => p.id === pageFromUrl) ? pageFromUrl : null
       if (validIdFromUrl) return validIdFromUrl
-      const firstId = t[0]?.id ?? null
+      const firstId = tree[0]?.id ?? null
-      if (prev != null && t.some((p) => p.id === prev)) return prev
+      if (prev != null && tree.some((p) => p.id === prev)) return prev
       return firstId
     })
-  }, [recollectionId, searchParams])
+  }, [recollectionId, searchParams, tree])
 
   // Persist tree when sidebar changes it.
   useEffect(() => {