116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
import { useState, type ReactNode } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Bug, Sparkles } from "lucide-react";
|
|
import { loadReleaseNotes, notesLang, visibleNotes } from "../lib/releaseNotes";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { formatDate } from "../lib/format";
|
|
import { Button } from "./ui/Button";
|
|
import Modal from "./ui/Modal";
|
|
import { LoadingState, StateMessage } from "./ui/QueryState";
|
|
|
|
// The release date in the UI language — `toLocaleDateString(undefined, …)` formats in the BROWSER's
|
|
// locale, which put Hungarian-shaped dates in an English release-notes list. Unparseable input falls
|
|
// back to the raw string (a hand-written note could carry anything).
|
|
function fmtDate(d: string, lang: string): string {
|
|
return isNaN(new Date(d).getTime()) ? d : formatDate(d, lang);
|
|
}
|
|
|
|
// The newest releases are what a user opens this for; the whole history (150+ versions) rendered on
|
|
// every open was what made the dialog slow to appear. The rest are one click away.
|
|
const RECENT = 10;
|
|
|
|
// Public release notes in the UI language. `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, i18n } = useTranslation();
|
|
const lang = notesLang(i18n.language);
|
|
const q = useQuery({
|
|
queryKey: qk.releaseNotes(lang),
|
|
queryFn: () => loadReleaseNotes(lang),
|
|
staleTime: Infinity,
|
|
});
|
|
const [showAll, setShowAll] = useState(false);
|
|
const notes = visibleNotes(q.data ?? []);
|
|
// Ring the newest note if `highlight` isn't one of the listed versions — e.g. a Vite dev build
|
|
// where the caller's FRONTEND_VERSION is "dev", or a VERSION bump whose note hasn't landed yet —
|
|
// so the banner always rings *something* current instead of nothing.
|
|
const at = notes.findIndex((r) => r.version === highlight);
|
|
const active = at >= 0 ? highlight : notes[0]?.version;
|
|
const shown = showAll || at >= RECENT ? notes : notes.slice(0, RECENT);
|
|
return (
|
|
<Modal title={t("about.releaseNotes")} onClose={onClose} maxWidth="max-w-2xl">
|
|
{q.isError ? (
|
|
<StateMessage tone="error" onRetry={() => q.refetch()}>
|
|
{t("about.notesError")}
|
|
</StateMessage>
|
|
) : !q.data ? (
|
|
<LoadingState />
|
|
) : (
|
|
<div className="flex flex-col gap-5">
|
|
{shown.map((r) => (
|
|
<section
|
|
key={r.version}
|
|
className={active === r.version ? "rounded-xl ring-1 ring-accent/40 p-3 -m-3" : ""}
|
|
>
|
|
<div className="flex items-baseline gap-2">
|
|
<h3 className="text-base font-semibold">v{r.version}</h3>
|
|
<span className="text-xs text-muted">{fmtDate(r.date, i18n.language)}</span>
|
|
</div>
|
|
<Items icon={<Sparkles className="w-3.5 h-3.5" />} title={t("about.new")} accent>
|
|
{r.new}
|
|
</Items>
|
|
<Items icon={<Bug className="w-3.5 h-3.5" />} title={t("about.fixes")}>
|
|
{r.fixed}
|
|
</Items>
|
|
</section>
|
|
))}
|
|
{shown.length < notes.length && (
|
|
<Button variant="outline" className="self-center" onClick={() => setShowAll(true)}>
|
|
{t("about.olderVersions", { count: notes.length - shown.length })}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
function Items({
|
|
icon,
|
|
title,
|
|
accent,
|
|
children,
|
|
}: {
|
|
icon: ReactNode;
|
|
title: string;
|
|
accent?: boolean;
|
|
children: string[];
|
|
}) {
|
|
if (children.length === 0) return null;
|
|
const tone = accent ? "text-accent" : "text-muted";
|
|
return (
|
|
<div className="mt-2.5">
|
|
<div
|
|
className={`flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide ${tone}`}
|
|
>
|
|
{icon} {title}
|
|
</div>
|
|
<ul className="mt-1 space-y-1 text-sm">
|
|
{children.map((line, i) => (
|
|
<li key={i} className="flex gap-2">
|
|
<span className={tone}>•</span>
|
|
<span>{line}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|