peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(i18n): translate login and app chrome (HU/EN/DE)

Browse source 
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.
This commit is contained in:
npeter83 2026-06-15 00:30:34 +02:00
parent 7aa068061d
commit 941fb7d756
18 changed files with 279 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/components/About.tsx
View file

@ -1,4 +1,5 @@
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";
@ -19,23 +20,24 @@ export default function About({
onClose: () => void;
onOpenReleaseNotes: () => void;
}) {
const { t } = useTranslation();
const { data } = useQuery({ queryKey: ["version"], queryFn: api.version, staleTime: 5 * 60_000 });
const rows: [string, string][] = [
["Frontend", FRONTEND_VERSION + (FRONTEND_SHA !== "unknown" ? ` · ${FRONTEND_SHA}` : "")],
[t("about.frontend"), FRONTEND_VERSION + (FRONTEND_SHA !== "unknown" ? ` · ${FRONTEND_SHA}` : "")],
[
"Backend",
t("about.backend"),
data ? data.app_version + (data.git_sha !== "unknown" ? ` · ${data.git_sha}` : "") : "…",
],
["Database", data?.db_revision ?? "…"],
["Build date", fmtDate(data?.build_date ?? FRONTEND_BUILD_DATE)],
[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" /> About
<Info className="w-5 h-5 text-accent" /> {t("about.title")}
</span>
}
onClose={onClose}
@ -46,9 +48,7 @@ export default function About({
</div>
<div className="text-sm text-muted">v{FRONTEND_VERSION}</div>
</div>
<p className="text-sm text-muted mt-2">
Self-hosted, multi-user reader for your own YouTube subscriptions.
</p>
<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) => (
@ -66,7 +66,7 @@ export default function About({
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" /> What's new
<Sparkles className="w-4 h-4" /> {t("about.whatsNew")}
</button>
</Modal>
);