peter
34297b696f
Extend lib/queryKeys.ts to the remaining ~34 key roots and migrate every remaining literal (queryKey: [...] AND the positional useLiveQuery keys) in 36 files. All ~200 React Query keys across the app now route through the factory; zero raw key literals remain outside queryKeys.ts. The heterogeneous composite plex keys (plex-library/facets/collections/ playlists carry a filters object, a ratingKeys array, or a union/group discriminator) take a variadic pass-through — the factory centralizes the ROOT string; single-id keys stay precisely typed. Nullable keys (thread, playlist, ytSearch) accept null so a null segment is preserved. Pure substitution — byte-identical key arrays, so TanStack prefix matching is unchanged. Gate green: typecheck (app+node+e2e), eslint (0 err), prettier, 68 vitest. Runtime-verified on a fresh dev server: Feed + Plex modules load, feed/facets/tags/my-status/plex-library/plex-facets/ plex-collections/plex-playlists all 200, full UI renders.
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { qk } from "../lib/queryKeys";
|
|
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: qk.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>
|
|
);
|
|
}
|