feat: replace plain-text 500 error states with an ErrorPanel component (#395)

* feat: add ErrorPanel component for API error states

Add a shared icon + heading + retry-action panel to replace the
plain-text error states currently shown on the top, detail, and
search results pages.

* feat: use ErrorPanel for detail page 500 error state

Replace the plain-text error message with the ErrorPanel component,
wired to the existing reload function for the retry action.

* feat: use ErrorPanel for top page 500 error state

Replace the red text + underlined retry link with the ErrorPanel
component for consistency with the detail and search results pages.

* feat: add refetch to useHeritageSearchQuery

Expose a refetch function so callers can retry a failed search
request without changing search params.

* feat: use ErrorPanel for search results 500 error state

Render the ErrorPanel standalone (alongside the search header) instead
of passing errorMessage into SearchResultsPage's small inline text,
and wire the retry action to the new refetch function.

* refactor: use ErrorPanel for invalid-response state and drop dead baseProps

The malformed-response branch still used the old inline-text error
styling; switch it to ErrorPanel for consistency with the other error
branches, and remove the now-unused baseProps/WorldHeritageVm import.

* chore: remove dead errorMessage prop from SearchResultsPage

No callers pass errorMessage anymore now that error states render
ErrorPanel standalone instead.

* test: update loading/error assertions for Spinner and ErrorPanel

These tests still asserted on the old plain-text "Loading…" and
"Failed to load." strings, left stale by the prior Spinner migration
and this PR's ErrorPanel/message changes.

Author: zigzagdev

client/src/app/features/search/components/SearchResultsPage.tsx

@@ -17,7 +17,6 @@ type Props = {
   onClickItem?: (id: number) => void;
   onPrev?: () => void;
   onNext?: () => void;
-  errorMessage?: string;
   onPageChange?: (page: number) => void;
   onBackToAllSites?: () => void;
 };
@@ -28,7 +27,6 @@ export default function SearchResultsPage({
   pagination,
   rangeText,
   onClickItem,
-  errorMessage,
   onPageChange,
   onBackToAllSites,
 }: Props) {
@@ -56,10 +54,6 @@ export default function SearchResultsPage({
             <p className="mt-1 text-sm text-zinc-600">
               Use filters to narrow down sites for World Heritage exam study.
             </p>
-
-            {errorMessage ? (
-              <div className="mt-1 text-sm font-semibold text-red-600">{errorMessage}</div>
-            ) : null}
           </div>
 
           <div className="flex flex-wrap items-center gap-2">

client/src/app/features/search/containers/search-heritage-result-container.tsx

@@ -9,17 +9,13 @@ import {
 
 import { useHeritageSearchQuery } from "../../search/hooks/use-search-heritage-query";
 import SearchResultsPage from "../components/SearchResultsPage";
-import type {
-  ApiWorldHeritageDto,
-  Pagination,
-  SearchValues,
-  WorldHeritageVm,
-} from "../../../../domain/types";
+import type { ApiWorldHeritageDto, Pagination, SearchValues } from "../../../../domain/types";
 import { toWorldHeritageListVm } from "@features/heritages/mappers/to-world-heritage-vm";
 import { HeritageSubHeader } from "@features/top/components/HeritageSubHeader";
 import { DEFAULT_HERITAGE_SEARCH_PARAMS as SEARCH_PARAMS } from "../mapper/search-heritage.types";
 import { useLocale } from "@shared/locale/LocaleHooks";
 import { Spinner } from "@shared/uis/Spinner.tsx";
+import { ErrorPanel } from "@shared/uis/ErrorPanel.tsx";
 
 const fmtRangeText = (pagination: Pagination, count: number): string => {
   if (count === 0) {
@@ -135,7 +131,9 @@ export function SearchHeritageResultsContainer(): React.ReactElement {
 
   const { draft, setDraft, handleChange } = useHeritageSearchDraft(params);
 
-  const { data, isLoading, error } = useHeritageSearchQuery(params, { enabled: isSearchMode });
+  const { data, isLoading, error, refetch } = useHeritageSearchQuery(params, {
+    enabled: isSearchMode,
+  });
 
   const handleClickItem = React.useCallback(
     (id: number) => {
@@ -194,13 +192,6 @@ export function SearchHeritageResultsContainer(): React.ReactElement {
     <HeritageSubHeader value={draft} onChange={handleChange} onSubmit={handleSubmit} />
   );
 
-  const baseProps = {
-    header,
-    onBackToAllSites: handleBackToAllSites,
-    items: [] as WorldHeritageVm[],
-    pagination: null,
-  };
-
   if (isLoading) {
     return (
       <main className="mx-auto max-w-7xl px-4 py-12">
@@ -211,18 +202,27 @@ export function SearchHeritageResultsContainer(): React.ReactElement {
   }
 
   if (error) {
-    const message = error instanceof Error ? error.message : "Failed";
+    const message = error instanceof Error ? error.message : "Failed to load search results.";
 
-    return <SearchResultsPage {...baseProps} rangeText="Failed to load." errorMessage={message} />;
+    return (
+      <main className="mx-auto max-w-7xl px-4 py-12">
+        {header}
+        <ErrorPanel message={message} onRetry={refetch} />
+      </main>
+    );
   }
 
   if (!data || !isValidListResult(data)) {
     return (
-      <SearchResultsPage
-        {...baseProps}
-        rangeText="Unexpected response."
-        errorMessage={!data ? undefined : "Invalid data structure: items or pagination missing."}
-      />
+      <main className="mx-auto max-w-7xl px-4 py-12">
+        {header}
+        <ErrorPanel
+          message={
+            !data ? "Unexpected response." : "Invalid data structure: items or pagination missing."
+          }
+          onRetry={refetch}
+        />
+      </main>
     );
   }
 

client/src/app/features/search/hooks/use-search-heritage-query.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { HeritageSearchParams } from "../../../../domain/types.ts";
 import { fetchSearchHeritagesResult } from "../apis";
 import type { SearchParams } from "../apis/search-api";
@@ -32,8 +32,10 @@ export function useHeritageSearchQuery(
   const [data, setData] = useState<ListResult<ApiWorldHeritageDto> | null>(null);
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<unknown>(null);
+  const [reloadToken, setReloadToken] = useState(0);
 
   const request: SearchParams = useMemo(() => toSearchParams(params), [params]);
+  const refetch = useCallback(() => setReloadToken((t) => t + 1), []);
 
   useEffect(() => {
     if (!enabled) {
@@ -59,7 +61,7 @@ export function useHeritageSearchQuery(
       .finally(() => setLoading(false));
 
     return () => abortController.abort();
-  }, [enabled, request]);
+  }, [enabled, request, reloadToken]);
 
-  return { data, isLoading, error };
+  return { data, isLoading, error, refetch };
 }

client/src/app/features/top/containers/__tests__/top-page-container.test.tsx

@@ -113,7 +113,7 @@ describe("TopPageContainer", () => {
     navigateMock.mockReset();
   });
 
-  it("loading のときは Loading… を表示する", () => {
+  it("loading のときは Spinner を表示する", () => {
     useTopPageMock.mockReturnValue(
       mkHookState({
         isLoading: true,
@@ -127,7 +127,7 @@ describe("TopPageContainer", () => {
       </MemoryRouter>,
     );
 
-    expect(screen.getByText("Loading…")).toBeInTheDocument();
+    expect(screen.getByRole("status", { name: "Loading" })).toBeInTheDocument();
     expect(screen.getByTestId("subheader")).toBeInTheDocument();
   });
 

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

@@ -83,7 +83,7 @@ describe("WorldHeritageDetailContainer", () => {
     });
   });
 
-  test("loading の場合 'Loading…' を表示する", () => {
+  test("loading の場合 Spinner を表示する", () => {
     useWorldHeritageDetailMock.mockReturnValue({
       item: null,
       isLoading: true,
@@ -93,10 +93,10 @@ describe("WorldHeritageDetailContainer", () => {
     });
 
     renderWithRoute("/heritages/:id", "/heritages/1");
-    expect(screen.getByText("Loading…")).toBeInTheDocument();
+    expect(screen.getByRole("status", { name: "Loading" })).toBeInTheDocument();
   });
 
-  test("エラーの場合 'Failed to load.' と Back ボタンを表示する", () => {
+  test("エラーの場合 ErrorPanel と Back ボタンを表示する", () => {
     useWorldHeritageDetailMock.mockReturnValue({
       item: null,
       isLoading: false,
@@ -107,7 +107,7 @@ describe("WorldHeritageDetailContainer", () => {
 
     renderWithRoute("/heritages/:id", "/heritages/1");
 
-    expect(screen.getByText("Failed to load.")).toBeInTheDocument();
+    expect(screen.getByText("Failed to load this site.")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Back to World Heritages" })).toBeInTheDocument();
   });
 

client/src/app/features/top/containers/top-page-container.tsx

@@ -11,6 +11,7 @@ import type { IdSortOption } from "../../../../domain/types";
 import { parseHeritageSearchParams } from "@features/search/mapper/search-heritages.params";
 import { DEFAULT_HERITAGE_SEARCH_PARAMS as SEARCH_PARAMS } from "@features/search/mapper/search-heritage.types";
 import { Spinner } from "@shared/uis/Spinner.tsx";
+import { ErrorPanel } from "@shared/uis/ErrorPanel.tsx";
 
 const DEFAULT_TOP_PER_PAGE = 30;
 const DEFAULT_ORDER: IdSortOption = "asc";
@@ -105,11 +106,8 @@ export default function TopPageContainer(): React.ReactElement {
     return (
       <>
         {header}
-        <main className="space-y-3 p-6">
-          <div className="text-red-700">Failed to load.</div>
-          <button type="button" onClick={reload} className="underline">
-            Retry
-          </button>
+        <main className="mx-auto max-w-2xl px-4 py-12">
+          <ErrorPanel message="Failed to load World Heritage sites." onRetry={reload} />
         </main>
       </>
     );

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

@@ -4,6 +4,7 @@ import { useWorldHeritageDetail } from "../hooks/use-world-heritage-detail";
 import { HeritageDetailLayout } from "../components/heritage-detail/HeritageDetailLayout";
 import BreadcrumbContext from "@features/breadcrumbs/BreadCrumbProvider";
 import { Spinner } from "@shared/uis/Spinner.tsx";
+import { ErrorPanel } from "@shared/uis/ErrorPanel.tsx";
 
 export function WorldHeritageDetailContainer() {
   const { id } = useParams<{ id: string }>();
@@ -13,7 +14,7 @@ export function WorldHeritageDetailContainer() {
     if (!id) navigate("/heritages", { replace: true });
   }, [id, navigate]);
 
-  const { item, isLoading, isError } = useWorldHeritageDetail(id);
+  const { item, reload, isLoading, isError } = useWorldHeritageDetail(id);
   const breadcrumbCtx = useContext(BreadcrumbContext);
   if (!breadcrumbCtx) throw new Error("BreadcrumbProvider is missing");
 
@@ -28,9 +29,11 @@ export function WorldHeritageDetailContainer() {
 
   if (isError) {
     return (
-      <div>
-        <p>Failed to load.</p>
-        <button onClick={() => navigate("/heritages")}>Back to World Heritages</button>
+      <div className="mx-auto max-w-2xl px-4 py-12">
+        <ErrorPanel message="Failed to load this site." onRetry={reload} />
+        <div className="mt-4 text-center">
+          <button onClick={() => navigate("/heritages")}>Back to World Heritages</button>
+        </div>
       </div>
     );
   }

client/src/shared/uis/ErrorPanel.tsx

@@ -0,0 +1,22 @@
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import { Button } from "./Button.tsx";
+
+export function ErrorPanel({
+  message = "Something went wrong.",
+  onRetry,
+}: {
+  message?: string;
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-3 rounded-2xl border border-red-100 bg-red-50/60 px-6 py-12 text-center">
+      <ErrorOutlineIcon className="!text-4xl !text-red-500" />
+      <p className="text-sm font-semibold text-zinc-700">{message}</p>
+      {onRetry && (
+        <Button type="button" variant="secondary" size="sm" onClick={onRetry}>
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}