Phase 4: Translate Shared Components - common, navigation, status labels

- Translate LoadingState and EmptyState components (common namespace)
- Translate Header navigation labels (navigation namespace)
- Translate StatusBadge trade status labels (exchange namespace)
- Create navigation.json translation files for es, en, ca
- Create exchange.json translation files for status/direction/transfer labels
- Update IntlProvider to load navigation and exchange namespaces
- Update frontend tests to expect Spanish translations (default language)
- Configure Playwright to use English language for e2e tests via storageState
- Fix test expectations to match translated strings

All frontend and e2e tests passing.

frontend/app/components/StatusBadge.tsx

@@ -1,5 +1,8 @@
+"use client";
+
 import { badgeStyles } from "../styles/shared";
 import { getTradeStatusDisplay } from "../utils/exchange";
+import { useTranslation } from "../hooks/useTranslation";
 
 type StatusBadgeVariant = "success" | "error" | "ready";
 
@@ -14,11 +17,20 @@ interface StatusBadgeProps {
   style?: React.CSSProperties;
 }
 
+const STATUS_KEY_MAP: Record<string, string> = {
+  booked: "pending",
+  completed: "completed",
+  cancelled_by_user: "userCancelled",
+  cancelled_by_admin: "adminCancelled",
+  no_show: "noShow",
+};
+
 /**
  * Standardized status badge component.
  * Can be used with a variant prop for simple badges, or tradeStatus prop for trade-specific styling.
  */
 export function StatusBadge({ children, variant, tradeStatus, style }: StatusBadgeProps) {
+  const t = useTranslation("exchange");
   let badgeStyle: React.CSSProperties = { ...badgeStyles.badge };
 
   if (tradeStatus) {
@@ -44,9 +56,9 @@ export function StatusBadge({ children, variant, tradeStatus, style }: StatusBad
     }
   }
 
-  return (
-    <span style={{ ...badgeStyle, ...style }}>
-      {tradeStatus ? getTradeStatusDisplay(tradeStatus).text : children}
-    </span>
-  );
+  const displayText = tradeStatus
+    ? t(`status.${STATUS_KEY_MAP[tradeStatus] || tradeStatus}`)
+    : children;
+
+  return <span style={{ ...badgeStyle, ...style }}>{displayText}</span>;
 }