feat: persistent metadata panel, symmetric sidebar toggles, keyboard nav scroll

- Right sidebar stays open by default and shows an empty state when
  nothing is selected, instead of auto-hiding on deselect.
- Both sidebars now have a collapse button in their header and an
  expand button in the TopBar that only appears when collapsed, so
  each panel has a discoverable affordance in either state.
- Arrow-key navigation auto-scrolls the destination row into view
  with a ~35% peek margin, cueing the user that there's more content
  in the scroll direction.
- Fix: the width sentinel's measurement effect never installed its
  ResizeObserver when Timeline first rendered the loading state (ref
  was null, empty-dep effect didn't re-run), so containerWidth stuck
  at 0 and the grid fell back to 4 columns × 200px forever. Switched
  to a callback ref that attaches the observer the moment the
  sentinel actually mounts.
- KeyboardHints surface the Tab (library) and I (info) shortcuts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/layout/LeftSidebar.tsx

@@ -14,6 +14,7 @@ import {
   Layers2,
   MoreHorizontal,
   Pencil,
+  PanelLeftClose,
 } from 'lucide-react'
 import clsx from 'clsx'
 import { sourceFolders, library, photos as photosApi, type FolderTreeNode } from '../../services/api'
@@ -41,7 +42,11 @@ interface TreeItem {
   type?: 'folder' | 'heap' | 'special'
 }
 
-export function LeftSidebar() {
+interface LeftSidebarProps {
+  onCollapse: () => void
+}
+
+export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(['library', 'folders', 'heaps']))
   const [isScanning, setIsScanning] = useState(false)
   // Inline rename state for source-root rows. Stores the id being edited
@@ -674,6 +679,19 @@ export function LeftSidebar() {
 
   return (
     <div className="flex h-full flex-col bg-surface">
+      {/* Header with collapse button. Matches the right sidebar header
+       *  so both panels have symmetric affordances. */}
+      <div className="flex h-11 flex-shrink-0 items-center justify-between border-b border-border px-4">
+        <h2 className="text-sm font-semibold text-text">Library</h2>
+        <button
+          onClick={onCollapse}
+          className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
+          title="Collapse panel (Tab)"
+          aria-label="Collapse panel"
+        >
+          <PanelLeftClose className="h-4 w-4" />
+        </button>
+      </div>
       {/* Tree View */}
       <div className="flex-1 overflow-y-auto py-2">
         {libraryTree.map((item) => renderTreeItem(item))}