siftlode/frontend/src/components/About.tsx

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