feat: add locale toggle and Japanese description on heritage detail

client/src/app/features/heritages/mappers/__tests__/to-world-heritage-vm.test.ts

@@ -19,6 +19,7 @@ const base: ApiWorldHeritageDto = {
   area_hectares: 442,
   buffer_zone_hectares: 320,
   short_description: "desc",
+  short_description_jp: "ダミー",
   unesco_site_url: "https://whc.unesco.org/en/list/663",
   state_party: "JPN",
   state_party_codes: ["JPN"],

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

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import type { WorldHeritageDetailVm } from "../../../../../domain/types.ts";
 import type { Locale } from "../../../../../domain/criteria";
 import { HeritageSubHeader } from "../HeritageSubHeader.tsx";
@@ -15,6 +16,7 @@ import { BreadcrumbList } from "@shared/components/BreadcrumbList.tsx";
 type Props = {
   item: WorldHeritageDetailVm;
   locale: Locale;
+  toggleLocale: () => void;
 };
 
 const DEFAULT_SEARCH: SearchValues = {
@@ -96,13 +98,23 @@ 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();
+  const navigate = useNavigate();
 
   const handleSubmit = (q: Partial<SearchValues>) => {
     const next = { ...search, ...q };
     setSearch(next);
+
+    const params = new URLSearchParams();
+    if (next.keyword) params.set("search_query", next.keyword);
+    if (next.region) params.set("region", next.region);
+    if (next.category) params.set("category", next.category);
+    if (next.yearInscribedFrom) params.set("year_inscribed_from", next.yearInscribedFrom);
+    if (next.yearInscribedTo) params.set("year_inscribed_to", next.yearInscribedTo);
+
+    navigate(`/heritages/results?${params.toString()}`);
   };
 
   useEffect(() => {
@@ -115,7 +127,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 />
@@ -136,7 +156,7 @@ export function HeritageDetailLayout({ item, locale }: Props) {
         <div className="grid gap-6 lg:gap-8 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-start">
           {/* Left: Overview → Gallery */}
           <div className="space-y-8" id="content">
-            <HeritageOverViewSection item={item} />
+            <HeritageOverViewSection item={item} locale={locale} />
             <HeritageGallery images={item.images} />
           </div>
 

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/components/heritage-detail/HeritageOverviewSection.tsx

@@ -3,9 +3,10 @@ import { textType } from "@shared/styles/typography.ts";
 
 type Props = {
   item: WorldHeritageDetailVm;
+  locale: string;
 };
 
-export function HeritageOverViewSection({ item }: Props) {
+export function HeritageOverViewSection({ item, locale }: Props) {
   return (
     <section
       id="overview"
@@ -31,7 +32,9 @@ export function HeritageOverViewSection({ item }: Props) {
 
       {item.shortDescription ? (
         <p className={`${textType.body} ${textType.measure} mt-4 whitespace-pre-wrap`}>
-          {item.shortDescription}
+          {locale === "ja" && item.shortDescriptionJp
+            ? item.shortDescriptionJp
+            : item.shortDescription}
         </p>
       ) : (
         <p className={`${textType.body} mt-4 text-zinc-400`}>—</p>

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

@@ -145,6 +145,7 @@ describe("WorldHeritageDetailContainer", () => {
       latitude: null,
       longitude: null,
       shortDescription: "dummy",
+      shortDescriptionJp: "ダミー",
       unescoSiteUrl: "https://example.com",
       statePartyCodes: [],
       statePartiesMeta: {},

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