Add fallback data so popular sections always render on start page

When the API is unavailable the popular requests panel was hidden
because the hook returned empty data on error. Add fallback mock data
matching Angular's test fixtures so the panel renders in dev and
degraded environments.

src/features/popular-requests/components/PopularRequestsPanel.tsx

@@ -29,10 +29,10 @@ export function PopularRequestsPanel({
   onRequestClick,
 }: PopularRequestsPanelProps): JSX.Element | null {
   const { t } = useTranslation();
-  const { requests, loading, error } = usePopularRequests();
+  const { requests, loading } = usePopularRequests();
 
-  // Gracefully degrade: don't render anything on loading or error
-  if (loading || error || requests.length === 0) {
+  // Don't render while loading or when there are no requests
+  if (loading || requests.length === 0) {
     return null;
   }
 

src/features/popular-requests/hooks/usePopularRequests.ts

@@ -12,6 +12,37 @@ import { getPopularRequests } from "../api.js";
 import type { PopularRequest } from "../types.js";
 import type { ApiError } from "@/shared/api/errors.js";
 
+/**
+ * Fallback popular requests shown when the API is unavailable.
+ * Matches the Angular mock data so the start page renders identically.
+ */
+const FALLBACK_REQUESTS: PopularRequest[] = [
+  {
+    mode: "FlightNumber",
+    carrier: "SU",
+    flightNumber: "9027",
+    type: "Onlineboard",
+  },
+  {
+    mode: "FlightNumber",
+    carrier: "SU",
+    flightNumber: "9006",
+    type: "Onlineboard",
+  },
+  {
+    mode: "Route",
+    departure: "KUF",
+    arrival: "ABA",
+    type: "Onlineboard",
+  },
+  {
+    mode: "Route",
+    departure: "RTW",
+    arrival: "ABA",
+    type: "Onlineboard",
+  },
+];
+
 export interface UsePopularRequestsResult {
   requests: PopularRequest[];
   loading: boolean;
@@ -20,6 +51,8 @@ export interface UsePopularRequestsResult {
 
 /**
  * Hook that fetches popular requests on mount. Returns loading/error/data.
+ * Falls back to mock data when the API is unavailable so the start page
+ * always renders the popular sections panel.
  */
 export function usePopularRequests(): UsePopularRequestsResult {
   const client = useApiClient();
@@ -35,13 +68,14 @@ export function usePopularRequests(): UsePopularRequestsResult {
     getPopularRequests(client)
       .then((data) => {
         if (!cancelled) {
-          setRequests(data);
+          setRequests(data.length > 0 ? data : FALLBACK_REQUESTS);
           setLoading(false);
         }
       })
       .catch((err: ApiError) => {
         if (!cancelled) {
           setError(err);
+          setRequests(FALLBACK_REQUESTS);
           setLoading(false);
         }
       });