From 36de3ee4b4309ace60d2f7d7bdc69faf7e7c4e54 Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Thu, 30 Apr 2026 09:49:00 +0900
Subject: [PATCH 1/4] feat: add useText hook for locale-aware UI strings

Introduce per-locale UI string dictionaries under src/locals/{en,ja}/ui.json
and a useText hook in src/shared/locale that picks the dictionary off the
active locale from useLocale. Components can now read UI labels from a
single typed source instead of hard-coding English strings.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 client/src/locals/en/ui.json        | 16 ++++++++++++++++
 client/src/locals/ja/ui.json        | 16 ++++++++++++++++
 client/src/shared/locale/ui-text.ts | 13 +++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 client/src/locals/en/ui.json
 create mode 100644 client/src/locals/ja/ui.json
 create mode 100644 client/src/shared/locale/ui-text.ts

diff --git a/client/src/locals/en/ui.json b/client/src/locals/en/ui.json
new file mode 100644
index 0000000..04acca6
--- /dev/null
+++ b/client/src/locals/en/ui.json
@@ -0,0 +1,16 @@
+{
+  "heritageCategory": "Heritage Category",
+  "criteria": "Criteria",
+  "viewDetails": "View details",
+  "danger": "DANGER",
+  "noImage": "No image",
+  "noOverview": "No overview available.",
+  "region": "Region",
+  "category": "Category",
+  "yearInscribed": "Year Inscribed",
+  "description": "Description",
+  "maps": "Maps",
+  "gallery": "Gallery",
+  "overview": "Overview",
+  "viewOnUnesco": "View on UNESCO"
+}
diff --git a/client/src/locals/ja/ui.json b/client/src/locals/ja/ui.json
new file mode 100644
index 0000000..b44d404
--- /dev/null
+++ b/client/src/locals/ja/ui.json
@@ -0,0 +1,16 @@
+{
+  "heritageCategory": "遺産カテゴリ",
+  "criteria": "登録基準",
+  "viewDetails": "詳細を見る",
+  "danger": "危機",
+  "noImage": "画像なし",
+  "noOverview": "概要はありません。",
+  "region": "地域",
+  "category": "カテゴリ",
+  "yearInscribed": "登録年",
+  "description": "説明",
+  "maps": "地図",
+  "gallery": "ギャラリー",
+  "overview": "概要",
+  "viewOnUnesco": "UNESCO で見る"
+}
diff --git a/client/src/shared/locale/ui-text.ts b/client/src/shared/locale/ui-text.ts
new file mode 100644
index 0000000..29a9c43
--- /dev/null
+++ b/client/src/shared/locale/ui-text.ts
@@ -0,0 +1,13 @@
+import en from "../../locals/en/ui.json";
+import ja from "../../locals/ja/ui.json";
+import { type Locale } from "../../domain/criteria.ts";
+import { useLocale } from "./LocaleHooks.ts";
+
+export type UiText = typeof en;
+
+const TEXTS: Record<Locale, UiText> = { en, ja };
+
+export const useText = (): UiText => {
+  const { locale } = useLocale();
+  return TEXTS[locale];
+};

From 861c5671157924004b2969e915409c21740f9f2b Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Thu, 30 Apr 2026 09:56:01 +0900
Subject: [PATCH 2/4] refactor: localize HeritageCard via useText and useLocale

Pull static labels (DANGER, No image, Heritage Category, Criteria,
View details, No overview available) through useText so the card
follows the active locale, and fix the title fallback so it returns
item.name in EN mode instead of always favouring heritageNameJp.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../app/features/top/cards/HeritageCard.tsx   | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/client/src/app/features/top/cards/HeritageCard.tsx b/client/src/app/features/top/cards/HeritageCard.tsx
index c1139a8..d816e1a 100644
--- a/client/src/app/features/top/cards/HeritageCard.tsx
+++ b/client/src/app/features/top/cards/HeritageCard.tsx
@@ -1,6 +1,8 @@
 import type { ReactNode, MouseEvent } from "react";
 import type { WorldHeritageVm, CriteriaCode } from "../../../../domain/types.ts";
 import { BaseCard } from "@shared/uis/BaseCard.tsx";
+import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
 
 function MetaChip({ children }: { children: ReactNode }) {
   return (
@@ -40,6 +42,9 @@ export function HeritageCard({
   item: WorldHeritageVm;
   onClickItem?: (id: number) => void;
 }) {
+  const { locale } = useLocale();
+  const t = useText();
+
   const goDetail = () => {
     if (!onClickItem) return;
     onClickItem(item.id);
@@ -54,7 +59,7 @@ export function HeritageCard({
     goDetail();
   };
 
-  const title = item.heritageNameJp || "World Heritage";
+  const title = locale === "ja" && item.heritageNameJp ? item.heritageNameJp : item.name;
   const subtitle = item.subtitle ?? "";
   const desc = (item.shortDescription ?? "").trim();
 
@@ -74,7 +79,7 @@ export function HeritageCard({
             />
           ) : (
             <div className="grid h-56 w-full place-items-center bg-zinc-100 text-sm text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 sm:h-64 lg:h-72">
-              No image
+              {t.noImage}
             </div>
           )}
 
@@ -83,7 +88,7 @@ export function HeritageCard({
           {item.isEndangered && (
             <div className="absolute right-3 bottom-3">
               <span className="inline-flex items-center rounded-md bg-red-600 px-2 py-1 text-xs font-bold text-white shadow-sm">
-                DANGER
+                {t.danger}
               </span>
             </div>
           )}
@@ -101,7 +106,7 @@ export function HeritageCard({
             {item.category && (
               <div className="flex flex-col gap-1">
                 <span className="text-[10px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400 font-bold">
-                  Heritage Category
+                  {t.heritageCategory}
                 </span>
                 <div>
                   <TagChip>{item.category}</TagChip>
@@ -112,7 +117,7 @@ export function HeritageCard({
             {criteria.length > 0 && (
               <div className="flex flex-col gap-1">
                 <span className="text-[10px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400 font-bold">
-                  Criteria
+                  {t.criteria}
                 </span>
                 <div className="flex flex-wrap gap-1.5">
                   {criteria.map((c: CriteriaCode) => (
@@ -134,7 +139,7 @@ export function HeritageCard({
               {desc}
             </p>
           ) : (
-            <p className="text-sm text-zinc-500 dark:text-zinc-400">No overview available.</p>
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">{t.noOverview}</p>
           )}
           <div className="mt-auto flex items-center justify-between pt-2 border-t border-zinc-100 dark:border-zinc-800">
             <span className="text-xs text-zinc-500 dark:text-zinc-400" aria-hidden="true">
@@ -145,7 +150,7 @@ export function HeritageCard({
               onClick={handleViewDetailClick}
               className="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:underline dark:text-indigo-400"
             >
-              View details <span>→</span>
+              {t.viewDetails} <span>→</span>
             </button>
           </div>
         </div>

From 68a54810fc8f48b53982d088f2b8a3031bb60f65 Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Thu, 30 Apr 2026 10:04:28 +0900
Subject: [PATCH 3/4] refactor: localize heritage detail components via useText

Pull static labels (Region, Category, Year Inscribed, Criteria,
Description, Maps, Gallery, Overview, View on UNESCO) through useText
in HeritageDetailLayout, HeritageHero, HeritageOverViewSection, and
HeritageSidebar so the detail screen follows the active locale.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../heritage-detail/HeritageDetailLayout.tsx  | 24 ++++++++++---------
 .../heritage-detail/HeritageHero.tsx          |  4 +++-
 .../HeritageOverviewSection.tsx               |  6 +++--
 .../heritage-detail/HeritageSidebar.tsx       |  6 +++--
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx b/client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx
index 7302450..fc565de 100644
--- a/client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx
+++ b/client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx
@@ -11,6 +11,7 @@ import { textType } from "@shared/styles/typography";
 import { useSetBreadcrumbLabel } from "@features/breadcrumbs/BreadCrumbHooks.ts";
 import { BreadcrumbList } from "@shared/components/BreadcrumbList.tsx";
 import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
 
 const DEFAULT_SEARCH: SearchValues = {
   region: "",
@@ -20,12 +21,6 @@ const DEFAULT_SEARCH: SearchValues = {
   yearInscribedTo: "",
 };
 
-const TABS: readonly { label: string; href: `#${string}` }[] = [
-  { label: "Description", href: "#content" },
-  { label: "Maps", href: "#geo-map" },
-  { label: "Gallery", href: "#gallery" },
-] as const;
-
 const formatCriteriaInline = (criteria: string[] | undefined) =>
   criteria?.length ? criteria.map((c) => `(${c})`).join("") : "—";
 
@@ -59,30 +54,31 @@ function HeritageDetailTabs({
 
 // Key exam info: visible without scrolling on all screen sizes.
 function KeyExamInfo({ item }: { item: WorldHeritageDetailVm }) {
+  const t = useText();
   return (
     <div className="mx-auto w-full max-w-6xl px-4 mt-4">
       <div className="flex flex-wrap gap-x-6 gap-y-2">
         <div>
           <div className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
-            Region
+            {t.region}
           </div>
           <div className="text-sm font-semibold text-zinc-900">{item.region ?? "—"}</div>
         </div>
         <div>
           <div className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
-            Category
+            {t.category}
           </div>
           <div className="text-sm font-semibold text-zinc-900">{item.category ?? "—"}</div>
         </div>
         <div>
           <div className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
-            Year Inscribed
+            {t.yearInscribed}
           </div>
           <div className="text-sm font-semibold text-zinc-900">{item.yearInscribed ?? "—"}</div>
         </div>
         <div>
           <div className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
-            Criteria
+            {t.criteria}
           </div>
           <div className="text-sm font-semibold text-zinc-900">
             {formatCriteriaInline(item.criteria)}
@@ -98,6 +94,12 @@ export function HeritageDetailLayout({ item }: { item: WorldHeritageDetailVm })
   const setLabel = useSetBreadcrumbLabel();
   const navigate = useNavigate();
   const { locale, toggleLocale } = useLocale();
+  const t = useText();
+  const tabs: readonly { label: string; href: `#${string}` }[] = [
+    { label: t.description, href: "#content" },
+    { label: t.maps, href: "#geo-map" },
+    { label: t.gallery, href: "#gallery" },
+  ];
 
   const handleSubmit = (q: Partial<SearchValues>) => {
     const next = { ...search, ...q };
@@ -124,7 +126,7 @@ export function HeritageDetailLayout({ item }: { item: WorldHeritageDetailVm })
       <HeritageSubHeader value={search} onChange={setSearch} onSubmit={handleSubmit} />
 
       <div className="mx-auto w-full max-w-6xl px-4 mt-6 md:mt-8 flex items-center justify-between">
-        <HeritageDetailTabs items={TABS} />
+        <HeritageDetailTabs items={tabs} />
         <button
           onClick={toggleLocale}
           className="rounded-full border border-zinc-200 px-3 py-1.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-100 shrink-0"
diff --git a/client/src/app/features/top/components/heritage-detail/HeritageHero.tsx b/client/src/app/features/top/components/heritage-detail/HeritageHero.tsx
index 011afff..e2ce6a9 100644
--- a/client/src/app/features/top/components/heritage-detail/HeritageHero.tsx
+++ b/client/src/app/features/top/components/heritage-detail/HeritageHero.tsx
@@ -1,8 +1,10 @@
 import type { WorldHeritageDetailVm, WorldHeritageImageVm } from "../../../../../domain/types.ts";
 import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
 
 export function HeritageHero({ item }: { item: WorldHeritageDetailVm }) {
   const { locale } = useLocale();
+  const t = useText();
   const primaryImage: WorldHeritageImageVm | undefined =
     item.images.find((img) => img.isPrimary) ?? item.images[0];
 
@@ -57,7 +59,7 @@ export function HeritageHero({ item }: { item: WorldHeritageDetailVm }) {
                     rel="noreferrer"
                     className="shrink-0 font-semibold text-zinc-700 hover:underline"
                   >
-                    View on UNESCO
+                    {t.viewOnUnesco}
                   </a>
                 )}
               </figcaption>
diff --git a/client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx b/client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx
index bf54f38..f1bd708 100644
--- a/client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx
+++ b/client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx
@@ -1,9 +1,11 @@
 import type { WorldHeritageDetailVm } from "../../../../../domain/types.ts";
 import { textType } from "@shared/styles/typography.ts";
 import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
 
 export function HeritageOverViewSection({ item }: { item: WorldHeritageDetailVm }) {
   const { locale } = useLocale();
+  const t = useText();
   return (
     <section
       id="overview"
@@ -11,7 +13,7 @@ export function HeritageOverViewSection({ item }: { item: WorldHeritageDetailVm
     >
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
-          <h2 className={`${textType.h2} text-zinc-900`}>Overview</h2>
+          <h2 className={`${textType.h2} text-zinc-900`}>{t.overview}</h2>
         </div>
 
         {item.unescoSiteUrl && (
@@ -22,7 +24,7 @@ export function HeritageOverViewSection({ item }: { item: WorldHeritageDetailVm
             className="shrink-0 rounded-full border border-sky-200 bg-sky-50
             px-3 py-1.5 text-xs font-semibold text-sky-900 hover:bg-sky-100"
           >
-            View on UNESCO
+            {t.viewOnUnesco}
           </a>
         )}
       </div>
diff --git a/client/src/app/features/top/components/heritage-detail/HeritageSidebar.tsx b/client/src/app/features/top/components/heritage-detail/HeritageSidebar.tsx
index 308fb04..64a94fc 100644
--- a/client/src/app/features/top/components/heritage-detail/HeritageSidebar.tsx
+++ b/client/src/app/features/top/components/heritage-detail/HeritageSidebar.tsx
@@ -1,6 +1,7 @@
 import type { WorldHeritageDetailVm } from "../../../../../domain/types.ts";
 import { DetailHeritageMap } from "@features/top/components/heritage-detail/DetailHeritageMap.tsx";
 import { HeritageMetadataList } from "./HeritageMetadataList.tsx";
+import { useText } from "@shared/locale/ui-text.ts";
 
 const formatCriteriaInline = (criteria: string[] | undefined) =>
   criteria?.length ? criteria.map((c) => `(${c})`).join("") : "—";
@@ -19,6 +20,7 @@ const formatLongitude = (lng: number): string => {
 };
 
 export function HeritageSidebar({ item }: { item: WorldHeritageDetailVm }) {
+  const t = useText();
   const hasCoord =
     item.latitude != null && item.longitude != null && !isZeroCoord(item.latitude, item.longitude);
 
@@ -60,12 +62,12 @@ export function HeritageSidebar({ item }: { item: WorldHeritageDetailVm }) {
               href={item.unescoSiteUrl}
               target="_blank"
               rel="noreferrer noopener"
-              aria-label="View on UNESCO"
+              aria-label={t.viewOnUnesco}
               className="mt-4 inline-flex w-full items-center justify-center rounded-xl
                border border-sky-200 bg-sky-50 px-3 py-2 text-sm font-semibold
                text-sky-900 hover:bg-sky-100"
             >
-              View on UNESCO
+              {t.viewOnUnesco}
             </a>
           )}
         </div>

From 4324a835ce3b7dbd40c845f79c01cdfd2bcb319b Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Thu, 30 Apr 2026 16:02:46 +0900
Subject: [PATCH 4/4] fix: const naming changed

---
 client/src/app/features/top/cards/HeritageCard.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/app/features/top/cards/HeritageCard.tsx b/client/src/app/features/top/cards/HeritageCard.tsx
index d816e1a..81857af 100644
--- a/client/src/app/features/top/cards/HeritageCard.tsx
+++ b/client/src/app/features/top/cards/HeritageCard.tsx
@@ -43,7 +43,7 @@ export function HeritageCard({
   onClickItem?: (id: number) => void;
 }) {
   const { locale } = useLocale();
-  const t = useText();
+  const text = useText();
 
   const goDetail = () => {
     if (!onClickItem) return;
@@ -79,7 +79,7 @@ export function HeritageCard({
             />
           ) : (
             <div className="grid h-56 w-full place-items-center bg-zinc-100 text-sm text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 sm:h-64 lg:h-72">
-              {t.noImage}
+              {text.noImage}
             </div>
           )}
 
@@ -88,7 +88,7 @@ export function HeritageCard({
           {item.isEndangered && (
             <div className="absolute right-3 bottom-3">
               <span className="inline-flex items-center rounded-md bg-red-600 px-2 py-1 text-xs font-bold text-white shadow-sm">
-                {t.danger}
+                {text.danger}
               </span>
             </div>
           )}
@@ -106,7 +106,7 @@ export function HeritageCard({
             {item.category && (
               <div className="flex flex-col gap-1">
                 <span className="text-[10px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400 font-bold">
-                  {t.heritageCategory}
+                  {text.heritageCategory}
                 </span>
                 <div>
                   <TagChip>{item.category}</TagChip>
@@ -117,7 +117,7 @@ export function HeritageCard({
             {criteria.length > 0 && (
               <div className="flex flex-col gap-1">
                 <span className="text-[10px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400 font-bold">
-                  {t.criteria}
+                  {text.criteria}
                 </span>
                 <div className="flex flex-wrap gap-1.5">
                   {criteria.map((c: CriteriaCode) => (
@@ -139,7 +139,7 @@ export function HeritageCard({
               {desc}
             </p>
           ) : (
-            <p className="text-sm text-zinc-500 dark:text-zinc-400">{t.noOverview}</p>
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">{text.noOverview}</p>
           )}
           <div className="mt-auto flex items-center justify-between pt-2 border-t border-zinc-100 dark:border-zinc-800">
             <span className="text-xs text-zinc-500 dark:text-zinc-400" aria-hidden="true">
@@ -150,7 +150,7 @@ export function HeritageCard({
               onClick={handleViewDetailClick}
               className="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:underline dark:text-indigo-400"
             >
-              {t.viewDetails} <span>→</span>
+              {text.viewDetails} <span>→</span>
             </button>
           </div>
         </div>