feat: active heap card in left sidebar with subtle toasts

- New ActiveHeapCard pinned just below the Library header in the left
  sidebar. Renders null when no heap is active. When one is, shows the
  heap name + member count + a fan of the last 5 member thumbnails
  (newest front-and-center, older members rotated ±6°/±18px outward).
  Clicking the header navigates to the heap via the same
  navigateToSection pattern HeapsPanel uses.
- Stack animates with framer-motion (previously pinned in
  package.json but unused). New picks spring-slide into the front of
  the stack by subscribing to the ['heap-photo-ids', heapId] cache
  that the existing pick mutation already updates optimistically —
  no new event wiring. Unpicks run the exit transition and the
  remaining cards re-fan.
- Toasts are now subtle: glassy bg-surface/80 + backdrop-blur, thin
  2px left accent bar in the type color instead of a full tinted
  fill, smaller icons and text, tighter padding, truncation on
  overflow so they stay a single compact row. The colored alert
  block that was competing with the rest of the UI is gone.
- Card lives at the top of the sidebar specifically so the bottom-left
  toast stack can never occlude it.

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

frontend/src/components/ToastContainer.tsx

@@ -67,37 +67,45 @@ export function ToastContainer() {
     }
   }, [])
 
+  // Subdued icons — smaller and muted so the toast reads as a
+  // background notification rather than a modal. The colored tint
+  // comes from the border-left accent, not a filled background.
   const icons = {
-    success: <CheckCircle className="h-5 w-5 text-pick" />,
-    error: <XCircle className="h-5 w-5 text-reject" />,
-    info: <Info className="h-5 w-5 text-primary" />,
-    warning: <AlertCircle className="h-5 w-5 text-star" />,
+    success: <CheckCircle className="h-3.5 w-3.5 text-pick" />,
+    error: <XCircle className="h-3.5 w-3.5 text-reject" />,
+    info: <Info className="h-3.5 w-3.5 text-primary" />,
+    warning: <AlertCircle className="h-3.5 w-3.5 text-star" />,
   }
 
-  const colors = {
-    success: 'border-pick bg-pick/10',
-    error: 'border-reject bg-reject/10',
-    info: 'border-primary bg-primary/10',
-    warning: 'border-star bg-star/10',
+  // Single thin left accent bar per type instead of a full-border +
+  // tinted fill. Keeps the toast visually quiet — the user can still
+  // glance it but it doesn't compete with the rest of the UI.
+  const accents = {
+    success: 'border-l-pick',
+    error: 'border-l-reject',
+    info: 'border-l-primary',
+    warning: 'border-l-star',
   }
 
   return (
-    <div className="pointer-events-none fixed bottom-4 left-4 z-50 flex flex-col gap-2">
+    <div className="pointer-events-none fixed bottom-4 left-4 z-50 flex flex-col gap-1.5">
       {toasts.map((toast) => (
         <div
           key={toast.id}
           className={clsx(
-            'pointer-events-auto flex items-start gap-3 rounded-lg border p-3 shadow-lg backdrop-blur-sm transition-all duration-300',
+            'pointer-events-auto flex items-start gap-2 rounded-md border border-border border-l-2 bg-surface/80 px-2.5 py-1.5 text-xs shadow-md backdrop-blur-md transition-all duration-300',
             'animate-slide-up',
-            colors[toast.type]
+            accents[toast.type]
           )}
-          style={{ minWidth: '300px', maxWidth: '400px' }}
+          style={{ minWidth: '220px', maxWidth: '320px' }}
         >
-          {icons[toast.type]}
-          <div className="flex-1">
-            <div className="font-medium text-text">{toast.title}</div>
+          <div className="mt-0.5 flex-shrink-0">{icons[toast.type]}</div>
+          <div className="min-w-0 flex-1">
+            <div className="truncate font-medium text-text">{toast.title}</div>
             {toast.message && (
-              <div className="mt-0.5 text-sm text-text-muted">{toast.message}</div>
+              <div className="mt-0.5 truncate text-[11px] text-text-muted">
+                {toast.message}
+              </div>
             )}
           </div>
           {toast.action && (
@@ -106,16 +114,16 @@ export function ToastContainer() {
                 toast.action!.onClick()
                 removeToast(toast.id)
               }}
-              className="pointer-events-auto self-center rounded border border-border bg-surface px-2 py-1 text-xs font-medium text-text hover:bg-surface-2"
+              className="pointer-events-auto self-center rounded border border-border bg-surface px-1.5 py-0.5 text-[11px] font-medium text-text hover:bg-surface-2"
             >
               {toast.action.label}
             </button>
           )}
           <button
             onClick={() => removeToast(toast.id)}
-            className="pointer-events-auto rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text"
+            className="pointer-events-auto rounded p-0.5 text-text-faint hover:bg-surface-offset hover:text-text"
           >
-            <X className="h-4 w-4" />
+            <X className="h-3 w-3" />
           </button>
         </div>
       ))}