make the catchup card collapsable
Some checks failed
CI / test (push) Has been cancelled

This commit is contained in:
2026-06-26 09:45:10 +01:00
parent 3b37368e7d
commit e3bb654cbc

View File

@@ -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>
);
}