From e3bb654cbc081db2b0900269ac8e6f1ad55eaad4 Mon Sep 17 00:00:00 2001
From: Zaine <zaineulabideen@outlook.com>
Date: Fri, 26 Jun 2026 09:45:10 +0100
Subject: [PATCH] make the catchup card collapsable

---
 .../src/components/features/catch-up-card.tsx | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/features/catch-up-card.tsx b/apps/web/src/components/features/catch-up-card.tsx
index 99c2912..202fc6c 100644
--- a/apps/web/src/components/features/catch-up-card.tsx
+++ b/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>
-      <div className="p-3 space-y-2">
-        <p className="text-xs text-[var(--warm-grey)]">
-          A few recent days could use a note — no pressure, just pick one if you like.
-        </p>
-        {gaps.map((g) => (
-          <button
-            key={g.date}
-            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>
+      <button
+        type="button"
+        className="retro-titlebar w-full text-left"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+      >
+        Catch up ({gaps.length}) {open ? "▼" : "▶"}
+      </button>
+      {open && (
+        <div className="p-3 space-y-2">
+          <p className="text-xs text-[var(--warm-grey)]">
+            A few recent days could use a note — no pressure, just pick one if you like.
+          </p>
+          {gaps.map((g) => (
+            <button
+              key={g.date}
+              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>
   );
 }