make the catchup card collapsable

apps/web/src/components/features/catch-up-card.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { formatDisplayDate } from "@/lib/dates-client";
 
 type Gap = { date: string; reason: string };
@@ -16,27 +17,38 @@ const REASON_LABEL: Record<string, string> = {
 };
 
 export function CatchUpCard({ gaps, onSelectDate }: CatchUpCardProps) {
+  const [open, setOpen] = useState(false);
+
   if (gaps.length === 0) return null;
 
   return (
     <div className="retro-window mb-4">
-      <div className="retro-titlebar">Catch up gently</div>
+      <button
-      <div className="p-3 space-y-2">
+        type="button"
-        <p className="text-xs text-[var(--warm-grey)]">
+        className="retro-titlebar w-full text-left"
-          A few recent days could use a note — no pressure, just pick one if you like.
+        aria-expanded={open}
-        </p>
+        onClick={() => setOpen(!open)}
-        {gaps.map((g) => (
+      >
-          <button
+        Catch up ({gaps.length}) {open ? "▼" : "▶"}
-            key={g.date}
+      </button>
-            type="button"
+      {open && (
-            className="retro-btn text-xs w-full text-left flex justify-between"
+        <div className="p-3 space-y-2">
-            onClick={() => onSelectDate(g.date)}
+          <p className="text-xs text-[var(--warm-grey)]">
-          >
+            A few recent days could use a note — no pressure, just pick one if you like.
-            <span>{formatDisplayDate(g.date)}</span>
+          </p>
-            <span className="opacity-70">{REASON_LABEL[g.reason] ?? g.reason}</span>
+          {gaps.map((g) => (
-          </button>
+            <button
-        ))}
+              key={g.date}
-      </div>
+              type="button"
+              className="retro-btn text-xs w-full text-left flex justify-between"
+              onClick={() => onSelectDate(g.date)}
+            >
+              <span>{formatDisplayDate(g.date)}</span>
+              <span className="opacity-70">{REASON_LABEL[g.reason] ?? g.reason}</span>
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   );
 }