initial 2

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

@@ -0,0 +1,42 @@
+"use client";
+
+import { formatDisplayDate } from "@/lib/dates-client";
+
+type Gap = { date: string; reason: string };
+
+interface CatchUpCardProps {
+  gaps: Gap[];
+  onSelectDate: (date: string) => void;
+}
+
+const REASON_LABEL: Record<string, string> = {
+  empty: "No adventure logged",
+  incomplete: "Adventure started but empty",
+  no_reflection: "Reflection missing",
+};
+
+export function CatchUpCard({ gaps, onSelectDate }: CatchUpCardProps) {
+  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>
+    </div>
+  );
+}