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

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

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>

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

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) => (

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" />}

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" />