feat: surface active heap on photos + sidebar row, drop topbar pill

- PhotoThumbnail: the bottom-right basket badge now expands into a
  name chip when the active heap name is supplied. Truncated to a
  120px max-width so it doesn't eat the thumbnail.
- Timeline: read activeHeap.name from useActiveHeapMembersQuery and
  pipe it down to PhotoThumbnail.
- TopBar: drop the leftover heap pill next to "Mulimago" — the active
  state now lives where the user navigates to it (the heaps row).
- HeapsPanel: the active heap row gets a soft bg-pick/10 wash when
  not also filtered, the basket icon turns text-pick, and a small
  "ACTIVE" pill renders next to the name. Together they make it
  obvious which heap Pick / T target without needing the topbar pill.

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

frontend/src/components/layout/TopBar.tsx

@@ -1,33 +1,17 @@
-import { ShoppingBasket } from 'lucide-react'
-import { useHeapsQuery } from '../../hooks/useHeapsQuery'
 import muliLogo from '../../assets/muli-logo.png'
 
 /**
- * Slim top bar — just the logo and the active-heap pill. The search input
- * lives in the FilterBar now (next to the rest of the filter controls).
+ * Slim top bar — just the logo. The active heap badge moved into the
+ * Heaps panel in the left sidebar (where it actually relates to the
+ * heap rows the user navigates to).
  */
 export function TopBar() {
-  const { data: heapsList = [] } = useHeapsQuery()
-  const activeHeap = heapsList.find((h) => h.is_active)
-
   return (
     <header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4">
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-2">
-          <img src={muliLogo} alt="Mulimago" className="h-7 w-7 object-contain" />
-          <h1 className="text-lg font-semibold text-text">Mulimago</h1>
-        </div>
-        {activeHeap && (
-          <span
-            className="flex items-center gap-1 rounded bg-primary/20 px-2 py-0.5 text-xs text-primary"
-            title="Active heap — press P to add selected photos here"
-          >
-            <ShoppingBasket className="h-3 w-3" />
-            {activeHeap.name}
-          </span>
-        )}
+      <div className="flex items-center gap-2">
+        <img src={muliLogo} alt="Mulimago" className="h-7 w-7 object-contain" />
+        <h1 className="text-lg font-semibold text-text">Mulimago</h1>
       </div>
-
       <div className="flex items-center gap-2" />
     </header>
   )