From 58b969146720b037c21ff29588cec65eb3f1647f Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 21 Jul 2026 23:13:53 +0200
Subject: [PATCH] i18n(a11y): translate the modal + Welcome close buttons and
 the feed fallback (C-3.22)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

House policy is HU+EN for every user-facing string. Modal's shared close button was a
hardcoded title="Close" (in every modal) — now t("common.close") + an aria-label.
Welcome's lightbox close aria-label and Feed's "this video" notification fallback are
translated too (new feed.thisVideo, HU+EN). The other Close hardcodes the review
listed were already fixed since.
---
 frontend/src/components/Feed.tsx       | 4 ++--
 frontend/src/components/Modal.tsx      | 5 ++++-
 frontend/src/components/Welcome.tsx    | 3 ++-
 frontend/src/i18n/locales/en/feed.json | 1 +
 frontend/src/i18n/locales/hu/feed.json | 1 +
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index 210c1ae..ad46558 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -255,7 +255,7 @@ export default function Feed({
               meta: {
                 kind: "video-hidden",
                 videoId: id,
-                title: v?.title ?? "this video",
+                title: v?.title ?? i18n.t("feed.thisVideo"),
                 channelId: v?.channel_id ?? "",
                 channelName: v?.channel_title ?? "",
               },
@@ -270,7 +270,7 @@ export default function Feed({
               meta: {
                 kind: "video-watched",
                 videoId: id,
-                title: v?.title ?? "this video",
+                title: v?.title ?? i18n.t("feed.thisVideo"),
                 channelId: v?.channel_id ?? "",
                 channelName: v?.channel_title ?? "",
               },
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 99b5b6b..805743f 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, type ReactNode } from "react";
 import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 import { useBackToClose } from "../lib/history";
 
@@ -27,6 +28,7 @@ export default function Modal({
   children: ReactNode;
   maxWidth?: string;
 }) {
+  const { t } = useTranslation();
   // Browser/mouse Back closes the topmost modal instead of navigating away.
   useBackToClose(onClose);
 
@@ -76,7 +78,8 @@ export default function Modal({
           <h2 className="text-lg font-semibold leading-snug">{title}</h2>
           <button
             onClick={onClose}
-            title="Close"
+            title={t("common.close")}
+            aria-label={t("common.close")}
             className="shrink-0 p-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition"
           >
             <X className="w-4 h-4" />
diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index a3fb5b3..f899cd4 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -212,6 +212,7 @@ function Preview({
 // Full-size image viewer: a dimmed, blurred backdrop with the screenshot fit to the viewport
 // (aspect ratio preserved via object-contain). Closes on backdrop click, the ✕, or Escape.
 function Lightbox({ src, label, onClose }: { src: string; label: string; onClose: () => void }) {
+  const { t } = useTranslation();
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
@@ -235,7 +236,7 @@ function Lightbox({ src, label, onClose }: { src: string; label: string; onClose
       <button
         type="button"
         onClick={onClose}
-        aria-label="Close"
+        aria-label={t("common.close")}
         className="absolute top-4 right-4 p-2 rounded-full glass-card glass-hover text-fg"
       >
         <X className="w-5 h-5" />
diff --git a/frontend/src/i18n/locales/en/feed.json b/frontend/src/i18n/locales/en/feed.json
index f1b2424..7374ec5 100644
--- a/frontend/src/i18n/locales/en/feed.json
+++ b/frontend/src/i18n/locales/en/feed.json
@@ -45,6 +45,7 @@
   "undo": "Undo",
   "markedWatchedNamed": "Marked watched “{{title}}”",
   "markedWatched": "Marked watched",
+  "thisVideo": "this video",
   "unwatch": "Unwatch",
   "source": {
     "label": "Source",
diff --git a/frontend/src/i18n/locales/hu/feed.json b/frontend/src/i18n/locales/hu/feed.json
index ba15ced..7e0625b 100644
--- a/frontend/src/i18n/locales/hu/feed.json
+++ b/frontend/src/i18n/locales/hu/feed.json
@@ -45,6 +45,7 @@
   "undo": "Visszavonás",
   "markedWatchedNamed": "Megnézettnek jelölve: „{{title}}”",
   "markedWatched": "Megnézettnek jelölve",
+  "thisVideo": "ez a videó",
   "unwatch": "Megnézés visszavonása",
   "source": {
     "label": "Forrás",