feat: add locale toggle on heritage detail

Wire toggleLocale callback from container to layout, render a flag button in
the tab bar, and switch HeritageHero between Japanese and English titles
based on locale.

Author: zigzagdev

client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx

@@ -15,6 +15,7 @@ import { BreadcrumbList } from "@shared/components/BreadcrumbList.tsx";
 type Props = {
   item: WorldHeritageDetailVm;
   locale: Locale;
+  toggleLocale: () => void;
 };
 
 const DEFAULT_SEARCH: SearchValues = {
@@ -96,7 +97,7 @@ function KeyExamInfo({ item }: { item: WorldHeritageDetailVm }) {
   );
 }
 
-export function HeritageDetailLayout({ item, locale }: Props) {
+export function HeritageDetailLayout({ item, locale, toggleLocale }: Props) {
   const [search, setSearch] = useState<SearchValues>(DEFAULT_SEARCH);
   const setLabel = useSetBreadcrumbLabel();
 
@@ -115,7 +116,15 @@ export function HeritageDetailLayout({ item, locale }: Props) {
     <div className="min-h-screen bg-zinc-50 text-zinc-900">
       <HeritageSubHeader value={search} onChange={setSearch} onSubmit={handleSubmit} />
 
-      <HeritageDetailTabs items={TABS} />
+      <div className="mx-auto w-full max-w-6xl px-4 mt-6 md:mt-8 flex items-center justify-between">
+        <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"
+        >
+          {locale === "ja" ? "🇯🇵" : "🇬🇧"}
+        </button>
+      </div>
 
       <div className="mx-auto w-full max-w-6xl px-4 mt-4">
         <BreadcrumbList />

client/src/app/features/top/components/heritage-detail/HeritageHero.tsx

@@ -6,16 +6,16 @@ type Props = {
   locale: Locale;
 };
 
-export function HeritageHero({ item }: Props) {
+export function HeritageHero({ item, locale }: Props) {
   const primaryImage: WorldHeritageImageVm | undefined =
     item.images.find((img) => img.isPrimary) ?? item.images[0];
 
   return (
     <header className="mx-auto w-full max-w-6xl px-4 pt-10 pb-6">
       <div className="mb-5 md:mb-6">
         <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight text-zinc-900">
-          {item.heritageNameJp}
-          {item.name && (
+          {locale === "ja" && item.heritageNameJp ? item.heritageNameJp : item.name}
+          {locale === "ja" && item.heritageNameJp && item.name && (
             <span className="ml-2 text-xl md:text-2xl font-bold text-zinc-500">
               （{item.name}）
             </span>

client/src/app/features/top/containers/world-heritage-detail-container.tsx

@@ -13,9 +13,19 @@ function resolveLocale(raw: string | null): Locale {
 export function WorldHeritageDetailContainer() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const locale = useMemo(() => resolveLocale(searchParams.get("lang")), [searchParams]);
 
+  const toggleLanguageLocation = () => {
+    const theOther = locale === "ja" ? "en" : "ja";
+    setSearchParams((prev) => {
+      const nowLocal = new URLSearchParams(prev);
+      nowLocal.set("lang", theOther);
+
+      return nowLocal;
+    });
+  };
+
   useEffect(() => {
     if (!id) navigate("/heritages", { replace: true });
   }, [id, navigate]);
@@ -51,5 +61,5 @@ export function WorldHeritageDetailContainer() {
     );
   }
 
-  return <HeritageDetailLayout item={item} locale={locale} />;
+  return <HeritageDetailLayout item={item} locale={locale} toggleLocale={toggleLanguageLocation} />;
 }