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