941fb7d756
Login screen (with a language picker), header, account menu, sync status, About and Release Notes dialogs, and the version banner are now fully translated in Hungarian, English and German.
73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Info, Sparkles } from "lucide-react";
|
|
import { api } from "../lib/api";
|
|
import { FRONTEND_VERSION, FRONTEND_SHA, FRONTEND_BUILD_DATE } from "../lib/version";
|
|
import Modal from "./Modal";
|
|
|
|
function fmtDate(d?: string | null): string {
|
|
if (!d) return "—";
|
|
const t = new Date(d);
|
|
return isNaN(t.getTime()) ? d : t.toLocaleString();
|
|
}
|
|
|
|
// About dialog: app + build + schema versions (frontend/backend/database), plus a
|
|
// shortcut into the release notes.
|
|
export default function About({
|
|
onClose,
|
|
onOpenReleaseNotes,
|
|
}: {
|
|
onClose: () => void;
|
|
onOpenReleaseNotes: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { data } = useQuery({ queryKey: ["version"], queryFn: api.version, staleTime: 5 * 60_000 });
|
|
|
|
const rows: [string, string][] = [
|
|
[t("about.frontend"), FRONTEND_VERSION + (FRONTEND_SHA !== "unknown" ? ` · ${FRONTEND_SHA}` : "")],
|
|
[
|
|
t("about.backend"),
|
|
data ? data.app_version + (data.git_sha !== "unknown" ? ` · ${data.git_sha}` : "") : "…",
|
|
],
|
|
[t("about.database"), data?.db_revision ?? "…"],
|
|
[t("about.buildDate"), fmtDate(data?.build_date ?? FRONTEND_BUILD_DATE)],
|
|
];
|
|
|
|
return (
|
|
<Modal
|
|
title={
|
|
<span className="flex items-center gap-2">
|
|
<Info className="w-5 h-5 text-accent" /> {t("about.title")}
|
|
</span>
|
|
}
|
|
onClose={onClose}
|
|
>
|
|
<div className="flex items-baseline gap-2">
|
|
<div className="text-2xl font-bold tracking-tight">
|
|
Sift<span className="text-accent">lode</span>
|
|
</div>
|
|
<div className="text-sm text-muted">v{FRONTEND_VERSION}</div>
|
|
</div>
|
|
<p className="text-sm text-muted mt-2">{t("about.tagline")}</p>
|
|
|
|
<div className="mt-4 rounded-xl border border-border overflow-hidden text-sm">
|
|
{rows.map(([k, v], i) => (
|
|
<div
|
|
key={k}
|
|
className={`flex justify-between gap-4 px-3 py-2 ${i % 2 ? "bg-surface/40" : ""}`}
|
|
>
|
|
<span className="text-muted">{k}</span>
|
|
<span className="font-medium text-right break-all">{v}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={onOpenReleaseNotes}
|
|
className="mt-4 w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
|
|
>
|
|
<Sparkles className="w-4 h-4" /> {t("about.whatsNew")}
|
|
</button>
|
|
</Modal>
|
|
);
|
|
}
|