From 941fb7d756be2082279e5847088862ec4a686745 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Mon, 15 Jun 2026 00:30:34 +0200
Subject: [PATCH] feat(i18n): translate login and app chrome (HU/EN/DE)

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.
---
 frontend/src/components/About.tsx         | 18 +++++-----
 frontend/src/components/Header.tsx        | 29 +++++++++------
 frontend/src/components/Login.tsx         | 44 ++++++++++++-----------
 frontend/src/components/ReleaseNotes.tsx  |  8 +++--
 frontend/src/components/SyncStatus.tsx    | 23 +++++++-----
 frontend/src/components/VersionBanner.tsx | 10 +++---
 frontend/src/i18n/locales/de/about.json   | 12 +++++++
 frontend/src/i18n/locales/de/common.json  | 12 +++++++
 frontend/src/i18n/locales/de/header.json  | 32 +++++++++++++++++
 frontend/src/i18n/locales/de/login.json   | 12 +++++++
 frontend/src/i18n/locales/en/about.json   | 12 +++++++
 frontend/src/i18n/locales/en/common.json  | 12 +++++++
 frontend/src/i18n/locales/en/header.json  | 32 +++++++++++++++++
 frontend/src/i18n/locales/en/login.json   | 12 +++++++
 frontend/src/i18n/locales/hu/about.json   | 12 +++++++
 frontend/src/i18n/locales/hu/common.json  | 12 +++++++
 frontend/src/i18n/locales/hu/header.json  | 32 +++++++++++++++++
 frontend/src/i18n/locales/hu/login.json   | 12 +++++++
 18 files changed, 279 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/i18n/locales/de/about.json
 create mode 100644 frontend/src/i18n/locales/de/common.json
 create mode 100644 frontend/src/i18n/locales/de/header.json
 create mode 100644 frontend/src/i18n/locales/de/login.json
 create mode 100644 frontend/src/i18n/locales/en/about.json
 create mode 100644 frontend/src/i18n/locales/en/common.json
 create mode 100644 frontend/src/i18n/locales/en/header.json
 create mode 100644 frontend/src/i18n/locales/en/login.json
 create mode 100644 frontend/src/i18n/locales/hu/about.json
 create mode 100644 frontend/src/i18n/locales/hu/common.json
 create mode 100644 frontend/src/i18n/locales/hu/header.json
 create mode 100644 frontend/src/i18n/locales/hu/login.json

diff --git a/frontend/src/components/About.tsx b/frontend/src/components/About.tsx
index 2e0a379..6310ae8 100644
--- a/frontend/src/components/About.tsx
+++ b/frontend/src/components/About.tsx
@@ -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>
   );
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index cdcb060..7474091 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,9 +1,12 @@
 import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { BarChart3, Home, Info, LogOut, Search, Settings, Shield, Tv } from "lucide-react";
 import type { FeedFilters, Me } from "../lib/api";
 import type { Page } from "../lib/urlState";
+import { type LangCode } from "../i18n";
 import SyncStatus from "./SyncStatus";
 import NotificationCenter from "./NotificationCenter";
+import LanguageSwitcher from "./LanguageSwitcher";
 import AvatarImg from "./Avatar";
 
 export default function Header({
@@ -14,6 +17,7 @@ export default function Header({
   setPage,
   onOpenSettings,
   onOpenAbout,
+  onChangeLanguage,
   onGoToFullHistory,
 }: {
   me: Me;
@@ -23,8 +27,11 @@ export default function Header({
   setPage: (p: Page) => void;
   onOpenSettings: () => void;
   onOpenAbout: () => void;
+  onChangeLanguage: (code: LangCode) => void;
   onGoToFullHistory: () => void;
 }) {
+  const { t, i18n } = useTranslation();
+
   async function logout() {
     await fetch("/auth/logout", { method: "POST", credentials: "include" });
     location.reload();
@@ -35,7 +42,7 @@ export default function Header({
       <button
         onClick={() => setPage("feed")}
         className="text-xl font-bold tracking-tight select-none"
-        title="Feed"
+        title={t("header.feed")}
       >
         Sift<span className="text-accent">lode</span>
       </button>
@@ -48,17 +55,18 @@ export default function Header({
           <input
             value={filters.q}
             onChange={(e) => setFilters({ ...filters, q: e.target.value })}
-            placeholder="Search your subscriptions…"
+            placeholder={t("header.searchPlaceholder")}
             className="w-full bg-card border border-border rounded-full pl-9 pr-4 py-2 text-sm outline-none focus:border-accent"
           />
         </div>
       ) : (
         <div className="flex-1 text-center text-sm font-semibold">
-          {page === "stats" ? "Usage & stats" : "Channel manager"}
+          {page === "stats" ? t("header.usageStats") : t("header.channelManager")}
         </div>
       )}
 
       <div className="flex items-center gap-1">
+        <LanguageSwitcher value={i18n.language as LangCode} onChange={onChangeLanguage} />
         <NotificationCenter filters={filters} setFilters={setFilters} />
         <div className="pl-1">
           <AccountMenu
@@ -100,6 +108,7 @@ function AccountMenu({
   onOpenSettings: () => void;
   onOpenAbout: () => void;
 }) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -139,7 +148,7 @@ function AccountMenu({
           {me.role === "admin" && (
             <div className="flex items-center gap-1.5 mt-2 text-[11px] font-medium text-accent">
               <Shield className="w-3.5 h-3.5" />
-              Admin
+              {t("header.account.admin")}
             </div>
           )}
 
@@ -147,32 +156,32 @@ function AccountMenu({
             {page !== "feed" && (
               <button onClick={() => { setPage("feed"); setOpen(false); }} className={itemClass}>
                 <Home className="w-4 h-4" />
-                Feed
+                {t("header.account.feed")}
               </button>
             )}
             {page !== "channels" && (
               <button onClick={() => { setPage("channels"); setOpen(false); }} className={itemClass}>
                 <Tv className="w-4 h-4" />
-                Channels
+                {t("header.account.channels")}
               </button>
             )}
             {me.role === "admin" && page !== "stats" && (
               <button onClick={() => { setPage("stats"); setOpen(false); }} className={itemClass}>
                 <BarChart3 className="w-4 h-4" />
-                Stats
+                {t("header.account.stats")}
               </button>
             )}
             <button onClick={() => { onOpenSettings(); setOpen(false); }} className={itemClass}>
               <Settings className="w-4 h-4" />
-              Settings
+              {t("header.account.settings")}
             </button>
             <button onClick={() => { onOpenAbout(); setOpen(false); }} className={itemClass}>
               <Info className="w-4 h-4" />
-              About
+              {t("header.account.about")}
             </button>
             <button onClick={logout} className={itemClass}>
               <LogOut className="w-4 h-4" />
-              Sign out
+              {t("header.account.signOut")}
             </button>
           </div>
         </div>
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index 98604d7..71bee93 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -1,9 +1,14 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { api } from "../lib/api";
+import { setLanguage, type LangCode } from "../i18n";
+import LanguageSwitcher from "./LanguageSwitcher";
 
 type Phase = "idle" | "sending" | "requested" | "approved" | "error";
 
 export default function Login() {
+  const { t, i18n } = useTranslation();
+
   // A denied Google login bounces back here with ?access=requested (we recorded it) or
   // ?access=denied (no usable email). Surface that so the user isn't left on a raw error.
   const params = new URLSearchParams(window.location.search);
@@ -21,7 +26,7 @@ export default function Login() {
       const r = await api.requestAccess(email.trim());
       setPhase(r.status === "approved" ? "approved" : "requested");
     } catch {
-      setError("Couldn't submit — check the address and try again.");
+      setError(t("login.submitError"));
       setPhase("error");
     }
   }
@@ -30,40 +35,33 @@ export default function Login() {
 
   return (
     <div className="min-h-screen grid place-items-center bg-bg text-fg">
+      <div className="absolute top-4 right-4">
+        <LanguageSwitcher value={i18n.language as LangCode} onChange={setLanguage} />
+      </div>
       <div className="glass w-[min(92vw,420px)] rounded-2xl p-10 text-center">
         <div className="text-3xl font-bold tracking-tight">
           Sift<span className="text-accent">lode</span>
         </div>
-        <p className="text-muted my-5 leading-relaxed">
-          A self-hosted, filterable feed of your YouTube subscriptions — sort, tag, and
-          tune out the noise. Sign in with Google to get started; YouTube access is an
-          optional, separate step you control.
-        </p>
+        <p className="text-muted my-5 leading-relaxed">{t("login.tagline")}</p>
         <a
           href="/auth/login"
           className="inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
         >
-          Sign in with Google
+          {t("login.signIn")}
         </a>
 
         <div className="mt-7 pt-6 border-t border-border text-left">
           {phase === "approved" ? (
-            <p className="text-sm text-fg/80">
-              You're already approved — just sign in with Google above.
-            </p>
+            <p className="text-sm text-fg/80">{t("login.approved")}</p>
           ) : done ? (
-            <p className="text-sm text-fg/80">
-              Thanks — your request is in. We'll email you when it's approved.
-            </p>
+            <p className="text-sm text-fg/80">{t("login.requested")}</p>
           ) : (
             <>
               <div className="text-xs uppercase tracking-wide text-muted mb-2">
-                No access yet?
+                {t("login.noAccessYet")}
               </div>
               {bounced === "denied" && (
-                <p className="text-xs text-muted mb-2">
-                  That Google account isn't approved. Request access below.
-                </p>
+                <p className="text-xs text-muted mb-2">{t("login.denied")}</p>
               )}
               <form onSubmit={submit} className="flex items-center gap-2">
                 <input
@@ -71,7 +69,7 @@ export default function Login() {
                   required
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
-                  placeholder="you@gmail.com"
+                  placeholder={t("login.emailPlaceholder")}
                   className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent"
                 />
                 <button
@@ -79,7 +77,7 @@ export default function Login() {
                   disabled={phase === "sending"}
                   className="shrink-0 px-3 py-2 rounded-xl text-sm font-semibold bg-card border border-border hover:border-accent disabled:opacity-50 transition"
                 >
-                  {phase === "sending" ? "Sending…" : "Request access"}
+                  {phase === "sending" ? t("login.sending") : t("login.requestAccess")}
                 </button>
               </form>
               {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
@@ -88,8 +86,12 @@ export default function Login() {
         </div>
       </div>
       <footer className="mt-5 flex gap-4 text-xs text-muted">
-        <a href="/privacy" className="hover:text-fg transition">Privacy Policy</a>
-        <a href="/terms" className="hover:text-fg transition">Terms of Service</a>
+        <a href="/privacy" className="hover:text-fg transition">
+          {t("common.privacyPolicy")}
+        </a>
+        <a href="/terms" className="hover:text-fg transition">
+          {t("common.termsOfService")}
+        </a>
       </footer>
     </div>
   );
diff --git a/frontend/src/components/ReleaseNotes.tsx b/frontend/src/components/ReleaseNotes.tsx
index 2e50063..0934dda 100644
--- a/frontend/src/components/ReleaseNotes.tsx
+++ b/frontend/src/components/ReleaseNotes.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Bug, Sparkles } from "lucide-react";
 import { RELEASE_NOTES } from "../lib/releaseNotes";
 import Modal from "./Modal";
@@ -18,8 +19,9 @@ export default function ReleaseNotes({
   onClose: () => void;
   highlight?: string;
 }) {
+  const { t } = useTranslation();
   return (
-    <Modal title="Release notes" onClose={onClose} maxWidth="max-w-2xl">
+    <Modal title={t("about.releaseNotes")} onClose={onClose} maxWidth="max-w-2xl">
       <div className="flex flex-col gap-6">
         {RELEASE_NOTES.map((r) => (
           <section
@@ -40,7 +42,7 @@ export default function ReleaseNotes({
             {r.features?.length ? (
               <div className="mt-3">
                 <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-accent">
-                  <Sparkles className="w-3.5 h-3.5" /> New
+                  <Sparkles className="w-3.5 h-3.5" /> {t("about.new")}
                 </div>
                 <ul className="mt-1.5 space-y-1.5 text-sm">
                   {r.features.map((f, i) => (
@@ -56,7 +58,7 @@ export default function ReleaseNotes({
             {r.fixes?.length ? (
               <div className="mt-3">
                 <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted">
-                  <Bug className="w-3.5 h-3.5" /> Fixes
+                  <Bug className="w-3.5 h-3.5" /> {t("about.fixes")}
                 </div>
                 <ul className="mt-1.5 space-y-1.5 text-sm">
                   {r.fixes.map((f, i) => (
diff --git a/frontend/src/components/SyncStatus.tsx b/frontend/src/components/SyncStatus.tsx
index 5e463b6..447238e 100644
--- a/frontend/src/components/SyncStatus.tsx
+++ b/frontend/src/components/SyncStatus.tsx
@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { Database, History, Loader2, Pause, Play } from "lucide-react";
 import { api } from "../lib/api";
 import { formatViews } from "../lib/format";
@@ -14,6 +15,7 @@ export default function SyncStatus({
   isAdmin: boolean;
   onGoToFullHistory: () => void;
 }) {
+  const { t } = useTranslation();
   const qc = useQueryClient();
   const { data } = useQuery({
     queryKey: ["my-status"],
@@ -34,37 +36,40 @@ export default function SyncStatus({
 
   return (
     <div className="hidden lg:flex items-center gap-2 text-xs text-muted">
-      <Tooltip hint="Videos from your subscriptions, against the total in the shared catalog that every user's subscriptions have pulled in.">
+      <Tooltip hint={t("header.sync.countTooltip")}>
         <span className="flex items-center gap-1.5 cursor-default">
           <Database className="w-3.5 h-3.5" />
           <span>
-            <span className="text-fg font-medium">{formatViews(data.my_videos)}</span> yours
+            <span className="text-fg font-medium">{formatViews(data.my_videos)}</span>{" "}
+            {t("header.sync.yours")}
           </span>
           <span className="opacity-40">/</span>
-          <span>{formatViews(data.total_videos)} total</span>
+          <span>
+            {formatViews(data.total_videos)} {t("header.sync.total")}
+          </span>
         </span>
       </Tooltip>
       <span className="opacity-40">·</span>
       {data.paused ? (
-        <span className="text-accent font-medium">paused</span>
+        <span className="text-accent font-medium">{t("header.sync.paused")}</span>
       ) : syncing > 0 ? (
         <span className="flex items-center gap-1">
           <Loader2 className="w-3.5 h-3.5 animate-spin" />
-          {syncing} syncing
+          {t("header.sync.syncing", { count: syncing })}
         </span>
       ) : (
-        <span>all synced</span>
+        <span>{t("header.sync.allSynced")}</span>
       )}
       {notFull > 0 && (
         <>
           <span className="opacity-40">·</span>
-          <Tooltip hint="Some of your channels only have their recent uploads. Click to open the channel manager (filtered to these) and request their full back-catalog.">
+          <Tooltip hint={t("header.sync.fullHistoryTooltip")}>
             <button
               onClick={onGoToFullHistory}
               className="flex items-center gap-1 hover:text-fg underline decoration-dotted decoration-muted/40 underline-offset-4 transition cursor-pointer"
             >
               <History className="w-3.5 h-3.5" />
-              {notFull} without full history
+              {t("header.sync.withoutFullHistory", { count: notFull })}
             </button>
           </Tooltip>
         </>
@@ -75,7 +80,7 @@ export default function SyncStatus({
         <button
           onClick={() => toggle.mutate()}
           disabled={toggle.isPending}
-          title={data.paused ? "Resume background sync" : "Pause background sync"}
+          title={data.paused ? t("header.sync.resume") : t("header.sync.pause")}
           className="ml-1 p-1 rounded-md hover:bg-card hover:text-fg transition"
         >
           {data.paused ? <Play className="w-3.5 h-3.5" /> : <Pause className="w-3.5 h-3.5" />}
diff --git a/frontend/src/components/VersionBanner.tsx b/frontend/src/components/VersionBanner.tsx
index a0cd22f..720854e 100644
--- a/frontend/src/components/VersionBanner.tsx
+++ b/frontend/src/components/VersionBanner.tsx
@@ -1,10 +1,12 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Sparkles, X } from "lucide-react";
 import { FRONTEND_VERSION, SEEN_VERSION_KEY } from "../lib/version";
 
 // Eye-catching, dismissible bar shown once after the running build's version changes
 // (compares the baked frontend version to the last one the user acknowledged).
 export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
+  const { t } = useTranslation();
   const [dismissed, setDismissed] = useState(false);
   const seen = localStorage.getItem(SEEN_VERSION_KEY);
   // Don't nag in un-stamped dev builds, or once this version has been seen.
@@ -19,9 +21,7 @@ export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
   return (
     <div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-accent/15 border-b border-accent/30 text-fg">
       <Sparkles className="w-4 h-4 text-accent shrink-0" />
-      <span className="min-w-0">
-        Updated to <span className="font-semibold">v{FRONTEND_VERSION}</span> — see what's changed.
-      </span>
+      <span className="min-w-0">{t("header.banner.updated", { version: FRONTEND_VERSION })}</span>
       <button
         onClick={() => {
           onOpen();
@@ -29,11 +29,11 @@ export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
         }}
         className="ml-1 px-2.5 py-1 rounded-lg font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
       >
-        Release notes
+        {t("header.banner.releaseNotes")}
       </button>
       <button
         onClick={markSeen}
-        title="Dismiss"
+        title={t("header.banner.dismiss")}
         className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
       >
         <X className="w-4 h-4" />
diff --git a/frontend/src/i18n/locales/de/about.json b/frontend/src/i18n/locales/de/about.json
new file mode 100644
index 0000000..c529a67
--- /dev/null
+++ b/frontend/src/i18n/locales/de/about.json
@@ -0,0 +1,12 @@
+{
+  "title": "Über",
+  "tagline": "Selbstgehosteter, mehrbenutzerfähiger Reader für deine YouTube-Abos.",
+  "frontend": "Frontend",
+  "backend": "Backend",
+  "database": "Datenbank",
+  "buildDate": "Build-Datum",
+  "whatsNew": "Neuigkeiten",
+  "releaseNotes": "Versionshinweise",
+  "new": "Neu",
+  "fixes": "Korrekturen"
+}
diff --git a/frontend/src/i18n/locales/de/common.json b/frontend/src/i18n/locales/de/common.json
new file mode 100644
index 0000000..fe81995
--- /dev/null
+++ b/frontend/src/i18n/locales/de/common.json
@@ -0,0 +1,12 @@
+{
+  "privacyPolicy": "Datenschutzerklärung",
+  "termsOfService": "Nutzungsbedingungen",
+  "close": "Schließen",
+  "cancel": "Abbrechen",
+  "save": "Speichern",
+  "loading": "Wird geladen…",
+  "language": "Sprache",
+  "somethingWrong": "Etwas ist schiefgelaufen.",
+  "accessRequestsTitle": "Zugangsanfragen",
+  "accessRequestsMessage": "{{count}} ausstehend — prüfe sie unter Einstellungen → Konto."
+}
diff --git a/frontend/src/i18n/locales/de/header.json b/frontend/src/i18n/locales/de/header.json
new file mode 100644
index 0000000..4465368
--- /dev/null
+++ b/frontend/src/i18n/locales/de/header.json
@@ -0,0 +1,32 @@
+{
+  "feed": "Feed",
+  "searchPlaceholder": "Deine Abos durchsuchen…",
+  "channelManager": "Kanalverwaltung",
+  "usageStats": "Nutzung & Statistik",
+  "account": {
+    "admin": "Admin",
+    "feed": "Feed",
+    "channels": "Kanäle",
+    "stats": "Statistik",
+    "settings": "Einstellungen",
+    "about": "Über",
+    "signOut": "Abmelden"
+  },
+  "sync": {
+    "yours": "deine",
+    "total": "gesamt",
+    "countTooltip": "Videos aus deinen Abos im Vergleich zur Gesamtzahl im gemeinsamen Katalog, den die Abos aller Nutzer gefüllt haben.",
+    "paused": "pausiert",
+    "syncing": "{{count}} werden synchronisiert",
+    "allSynced": "alles synchronisiert",
+    "withoutFullHistory": "{{count}} ohne vollständigen Verlauf",
+    "fullHistoryTooltip": "Einige deiner Kanäle haben nur ihre neuesten Uploads. Klicke, um die Kanalverwaltung (auf diese gefiltert) zu öffnen und ihren vollständigen Katalog anzufordern.",
+    "pause": "Hintergrund-Synchronisierung pausieren",
+    "resume": "Hintergrund-Synchronisierung fortsetzen"
+  },
+  "banner": {
+    "updated": "Aktualisiert auf v{{version}} — sieh, was sich geändert hat.",
+    "releaseNotes": "Versionshinweise",
+    "dismiss": "Schließen"
+  }
+}
diff --git a/frontend/src/i18n/locales/de/login.json b/frontend/src/i18n/locales/de/login.json
new file mode 100644
index 0000000..c92df28
--- /dev/null
+++ b/frontend/src/i18n/locales/de/login.json
@@ -0,0 +1,12 @@
+{
+  "tagline": "Ein selbstgehosteter, filterbarer Feed deiner YouTube-Abos — sortieren, taggen und den Lärm ausblenden. Melde dich mit Google an, um loszulegen; der YouTube-Zugriff ist ein optionaler, separater Schritt, den du steuerst.",
+  "signIn": "Mit Google anmelden",
+  "approved": "Du bist bereits freigeschaltet — melde dich einfach oben mit Google an.",
+  "requested": "Danke — deine Anfrage ist eingegangen. Wir benachrichtigen dich per E-Mail, sobald sie genehmigt ist.",
+  "noAccessYet": "Noch keinen Zugang?",
+  "denied": "Dieses Google-Konto ist nicht freigeschaltet. Fordere unten Zugang an.",
+  "emailPlaceholder": "du@gmail.com",
+  "sending": "Wird gesendet…",
+  "requestAccess": "Zugang anfordern",
+  "submitError": "Konnte nicht gesendet werden — prüfe die Adresse und versuche es erneut."
+}
diff --git a/frontend/src/i18n/locales/en/about.json b/frontend/src/i18n/locales/en/about.json
new file mode 100644
index 0000000..67a8439
--- /dev/null
+++ b/frontend/src/i18n/locales/en/about.json
@@ -0,0 +1,12 @@
+{
+  "title": "About",
+  "tagline": "Self-hosted, multi-user reader for your own YouTube subscriptions.",
+  "frontend": "Frontend",
+  "backend": "Backend",
+  "database": "Database",
+  "buildDate": "Build date",
+  "whatsNew": "What's new",
+  "releaseNotes": "Release notes",
+  "new": "New",
+  "fixes": "Fixes"
+}
diff --git a/frontend/src/i18n/locales/en/common.json b/frontend/src/i18n/locales/en/common.json
new file mode 100644
index 0000000..f594fe5
--- /dev/null
+++ b/frontend/src/i18n/locales/en/common.json
@@ -0,0 +1,12 @@
+{
+  "privacyPolicy": "Privacy Policy",
+  "termsOfService": "Terms of Service",
+  "close": "Close",
+  "cancel": "Cancel",
+  "save": "Save",
+  "loading": "Loading…",
+  "language": "Language",
+  "somethingWrong": "Something went wrong.",
+  "accessRequestsTitle": "Access requests",
+  "accessRequestsMessage": "{{count}} pending — review in Settings → Account."
+}
diff --git a/frontend/src/i18n/locales/en/header.json b/frontend/src/i18n/locales/en/header.json
new file mode 100644
index 0000000..7cbe22d
--- /dev/null
+++ b/frontend/src/i18n/locales/en/header.json
@@ -0,0 +1,32 @@
+{
+  "feed": "Feed",
+  "searchPlaceholder": "Search your subscriptions…",
+  "channelManager": "Channel manager",
+  "usageStats": "Usage & stats",
+  "account": {
+    "admin": "Admin",
+    "feed": "Feed",
+    "channels": "Channels",
+    "stats": "Stats",
+    "settings": "Settings",
+    "about": "About",
+    "signOut": "Sign out"
+  },
+  "sync": {
+    "yours": "yours",
+    "total": "total",
+    "countTooltip": "Videos from your subscriptions, against the total in the shared catalog that every user's subscriptions have pulled in.",
+    "paused": "paused",
+    "syncing": "{{count}} syncing",
+    "allSynced": "all synced",
+    "withoutFullHistory": "{{count}} without full history",
+    "fullHistoryTooltip": "Some of your channels only have their recent uploads. Click to open the channel manager (filtered to these) and request their full back-catalog.",
+    "pause": "Pause background sync",
+    "resume": "Resume background sync"
+  },
+  "banner": {
+    "updated": "Updated to v{{version}} — see what's changed.",
+    "releaseNotes": "Release notes",
+    "dismiss": "Dismiss"
+  }
+}
diff --git a/frontend/src/i18n/locales/en/login.json b/frontend/src/i18n/locales/en/login.json
new file mode 100644
index 0000000..aa1c7a4
--- /dev/null
+++ b/frontend/src/i18n/locales/en/login.json
@@ -0,0 +1,12 @@
+{
+  "tagline": "A self-hosted, filterable feed of your YouTube subscriptions — sort, tag, and tune out the noise. Sign in with Google to get started; YouTube access is an optional, separate step you control.",
+  "signIn": "Sign in with Google",
+  "approved": "You're already approved — just sign in with Google above.",
+  "requested": "Thanks — your request is in. We'll email you when it's approved.",
+  "noAccessYet": "No access yet?",
+  "denied": "That Google account isn't approved. Request access below.",
+  "emailPlaceholder": "you@gmail.com",
+  "sending": "Sending…",
+  "requestAccess": "Request access",
+  "submitError": "Couldn't submit — check the address and try again."
+}
diff --git a/frontend/src/i18n/locales/hu/about.json b/frontend/src/i18n/locales/hu/about.json
new file mode 100644
index 0000000..23fc214
--- /dev/null
+++ b/frontend/src/i18n/locales/hu/about.json
@@ -0,0 +1,12 @@
+{
+  "title": "Névjegy",
+  "tagline": "Saját üzemeltetésű, többfelhasználós olvasó a YouTube-feliratkozásaidhoz.",
+  "frontend": "Frontend",
+  "backend": "Backend",
+  "database": "Adatbázis",
+  "buildDate": "Build dátuma",
+  "whatsNew": "Mi újság",
+  "releaseNotes": "Verziójegyzék",
+  "new": "Új",
+  "fixes": "Javítások"
+}
diff --git a/frontend/src/i18n/locales/hu/common.json b/frontend/src/i18n/locales/hu/common.json
new file mode 100644
index 0000000..4584d03
--- /dev/null
+++ b/frontend/src/i18n/locales/hu/common.json
@@ -0,0 +1,12 @@
+{
+  "privacyPolicy": "Adatvédelmi irányelvek",
+  "termsOfService": "Felhasználási feltételek",
+  "close": "Bezárás",
+  "cancel": "Mégse",
+  "save": "Mentés",
+  "loading": "Betöltés…",
+  "language": "Nyelv",
+  "somethingWrong": "Hiba történt.",
+  "accessRequestsTitle": "Hozzáférési kérések",
+  "accessRequestsMessage": "{{count}} függőben — nézd át a Beállítások → Fiók menüben."
+}
diff --git a/frontend/src/i18n/locales/hu/header.json b/frontend/src/i18n/locales/hu/header.json
new file mode 100644
index 0000000..44dcb04
--- /dev/null
+++ b/frontend/src/i18n/locales/hu/header.json
@@ -0,0 +1,32 @@
+{
+  "feed": "Hírfolyam",
+  "searchPlaceholder": "Keresés a feliratkozásaid között…",
+  "channelManager": "Csatornakezelő",
+  "usageStats": "Használat és statisztika",
+  "account": {
+    "admin": "Adminisztrátor",
+    "feed": "Hírfolyam",
+    "channels": "Csatornák",
+    "stats": "Statisztika",
+    "settings": "Beállítások",
+    "about": "Névjegy",
+    "signOut": "Kijelentkezés"
+  },
+  "sync": {
+    "yours": "tiéd",
+    "total": "összes",
+    "countTooltip": "A feliratkozásaidból származó videók száma a megosztott katalógus teljes számához képest, amelyet az összes felhasználó feliratkozásai gyűjtöttek össze.",
+    "paused": "szüneteltetve",
+    "syncing": "{{count}} szinkronizálás alatt",
+    "allSynced": "minden szinkronban",
+    "withoutFullHistory": "{{count}} teljes előzmény nélkül",
+    "fullHistoryTooltip": "Néhány csatornádnak csak a legutóbbi feltöltései vannak meg. Kattints a csatornakezelő megnyitásához (ezekre szűrve), és kérd le a teljes archívumukat.",
+    "pause": "Háttér-szinkronizálás szüneteltetése",
+    "resume": "Háttér-szinkronizálás folytatása"
+  },
+  "banner": {
+    "updated": "Frissítve a(z) v{{version}} verzióra — nézd meg, mi változott.",
+    "releaseNotes": "Verziójegyzék",
+    "dismiss": "Elvetés"
+  }
+}
diff --git a/frontend/src/i18n/locales/hu/login.json b/frontend/src/i18n/locales/hu/login.json
new file mode 100644
index 0000000..550a609
--- /dev/null
+++ b/frontend/src/i18n/locales/hu/login.json
@@ -0,0 +1,12 @@
+{
+  "tagline": "Saját üzemeltetésű, szűrhető hírfolyam a YouTube-feliratkozásaidból — rendezd, címkézd, és szűrd ki a zajt. A kezdéshez jelentkezz be Google-fiókkal; a YouTube-hozzáférés külön, általad vezérelt lépés.",
+  "signIn": "Bejelentkezés Google-fiókkal",
+  "approved": "Már jóvá vagy hagyva — csak jelentkezz be a fenti Google-gombbal.",
+  "requested": "Köszönjük — a kérésedet rögzítettük. E-mailben értesítünk, ha jóváhagytuk.",
+  "noAccessYet": "Még nincs hozzáférésed?",
+  "denied": "Ez a Google-fiók nincs jóváhagyva. Lent kérhetsz hozzáférést.",
+  "emailPlaceholder": "te@gmail.com",
+  "sending": "Küldés…",
+  "requestAccess": "Hozzáférés kérése",
+  "submitError": "Nem sikerült elküldeni — ellenőrizd a címet, és próbáld újra."
+}