siftlode/frontend/src/components/ReleaseNotes.tsx

import { useTranslation } from "react-i18next";
import { Bug, Sparkles } from "lucide-react";
import { RELEASE_NOTES } from "../lib/releaseNotes";
import Modal from "./Modal";

function fmtDate(d: string): string {
  const t = new Date(d);
  return isNaN(t.getTime())
    ? d
    : t.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
}

// Public release notes (chores are intentionally omitted here). `highlight` rings the
// version the user just updated to when opened from the new-version banner.
export default function ReleaseNotes({
  onClose,
  highlight,
}: {
  onClose: () => void;
  highlight?: string;
}) {
  const { t } = useTranslation();
  return (
    <Modal title={t("about.releaseNotes")} onClose={onClose} maxWidth="max-w-2xl">
      <div className="flex flex-col gap-6">
        {RELEASE_NOTES.map((r) => (
          <section
            key={r.version}
            className={highlight === r.version ? "rounded-xl ring-1 ring-accent/40 p-3 -m-3" : ""}
          >
            <div className="flex items-baseline gap-2 flex-wrap">
              <h3 className="text-base font-semibold">v{r.version}</h3>
              <span className="text-xs text-muted">{fmtDate(r.date)}</span>
              {r.sha && (
                <span className="text-[11px] font-mono text-muted bg-surface px-1.5 py-0.5 rounded">
                  {r.sha}
                </span>
              )}
            </div>
            {r.summary && <p className="text-sm text-muted mt-1">{r.summary}</p>}

            {r.features?.length ? (
              <div className="mt-3">
                <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-accent">
                  <Sparkles className="w-3.5 h-3.5" /> {t("about.new")}
                </div>
                <ul className="mt-1.5 space-y-1.5 text-sm">
                  {r.features.map((f, i) => (
                    <li key={i} className="flex gap-2">
                      <span className="text-accent">•</span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}

            {r.fixes?.length ? (
              <div className="mt-3">
                <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted">
                  <Bug className="w-3.5 h-3.5" /> {t("about.fixes")}
                </div>
                <ul className="mt-1.5 space-y-1.5 text-sm">
                  {r.fixes.map((f, i) => (
                    <li key={i} className="flex gap-2">
                      <span className="text-muted">•</span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}
          </section>
        ))}
      </div>
    </Modal>
  );
}