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/EmptyState.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import { utilityStyles } from "../styles/shared";
+import { useTranslation } from "../hooks/useTranslation";
 
 interface EmptyStateProps {
   /** Message to display when empty */
@@ -18,8 +21,10 @@ interface EmptyStateProps {
  * Displays a message when there's no data, or a loading state.
  */
 export function EmptyState({ message, hint, isLoading, action, style }: EmptyStateProps) {
+  const t = useTranslation("common");
+
   if (isLoading) {
-    return <div style={{ ...utilityStyles.emptyState, ...style }}>Loading...</div>;
+    return <div style={{ ...utilityStyles.emptyState, ...style }}>{t("loading")}</div>;
   }
 
   return (

frontend/app/components/Header.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "../auth-context";
 import { sharedStyles } from "../styles/shared";
 import constants from "../../../shared/constants.json";
 import { LanguageSelector } from "./LanguageSelector";
+import { useTranslation } from "../hooks/useTranslation";
 
 const { ADMIN, REGULAR } = constants.roles;
 
@@ -24,29 +25,35 @@ interface HeaderProps {
 
 interface NavItem {
   id: PageId;
-  label: string;
+  labelKey: string;
   href: string;
   regularOnly?: boolean;
   adminOnly?: boolean;
 }
 
 const REGULAR_NAV_ITEMS: NavItem[] = [
-  { id: "exchange", label: "Exchange", href: "/exchange", regularOnly: true },
-  { id: "trades", label: "My Trades", href: "/trades", regularOnly: true },
-  { id: "invites", label: "My Invites", href: "/invites", regularOnly: true },
-  { id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
+  { id: "exchange", labelKey: "exchange", href: "/exchange", regularOnly: true },
+  { id: "trades", labelKey: "myTrades", href: "/trades", regularOnly: true },
+  { id: "invites", labelKey: "myInvites", href: "/invites", regularOnly: true },
+  { id: "profile", labelKey: "myProfile", href: "/profile", regularOnly: true },
 ];
 
 const ADMIN_NAV_ITEMS: NavItem[] = [
-  { id: "admin-trades", label: "Trades", href: "/admin/trades", adminOnly: true },
-  { id: "admin-availability", label: "Availability", href: "/admin/availability", adminOnly: true },
-  { id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
-  { id: "admin-price-history", label: "Prices", href: "/admin/price-history", adminOnly: true },
+  { id: "admin-trades", labelKey: "trades", href: "/admin/trades", adminOnly: true },
+  {
+    id: "admin-availability",
+    labelKey: "availability",
+    href: "/admin/availability",
+    adminOnly: true,
+  },
+  { id: "admin-invites", labelKey: "invites", href: "/admin/invites", adminOnly: true },
+  { id: "admin-price-history", labelKey: "prices", href: "/admin/price-history", adminOnly: true },
 ];
 
 export function Header({ currentPage }: HeaderProps) {
   const { user, logout, hasRole } = useAuth();
   const router = useRouter();
+  const t = useTranslation("navigation");
   const isRegularUser = hasRole(REGULAR);
   const isAdminUser = hasRole(ADMIN);
 
@@ -71,10 +78,10 @@ export function Header({ currentPage }: HeaderProps) {
           <span key={item.id}>
             {index > 0 && <span style={sharedStyles.navDivider}>•</span>}
             {item.id === currentPage ? (
-              <span style={sharedStyles.navCurrent}>{item.label}</span>
+              <span style={sharedStyles.navCurrent}>{t(item.labelKey)}</span>
             ) : (
               <a href={item.href} style={sharedStyles.navLink}>
-                {item.label}
+                {t(item.labelKey)}
               </a>
             )}
           </span>
@@ -84,7 +91,7 @@ export function Header({ currentPage }: HeaderProps) {
         <LanguageSelector />
         <span style={sharedStyles.userEmail}>{user.email}</span>
         <button onClick={handleLogout} style={sharedStyles.logoutBtn}>
-          Sign out
+          {t("signOut")}
         </button>
       </div>
     </div>

frontend/app/components/IntlProvider.tsx

@@ -8,11 +8,17 @@ import { useLanguage } from "../hooks/useLanguage";
 import esCommon from "../../locales/es/common.json";
 import enCommon from "../../locales/en/common.json";
 import caCommon from "../../locales/ca/common.json";
+import esNavigation from "../../locales/es/navigation.json";
+import enNavigation from "../../locales/en/navigation.json";
+import caNavigation from "../../locales/ca/navigation.json";
+import esExchange from "../../locales/es/exchange.json";
+import enExchange from "../../locales/en/exchange.json";
+import caExchange from "../../locales/ca/exchange.json";
 
 const messages = {
-  es: { common: esCommon },
-  en: { common: enCommon },
-  ca: { common: caCommon },
+  es: { common: esCommon, navigation: esNavigation, exchange: esExchange },
+  en: { common: enCommon, navigation: enNavigation, exchange: enExchange },
+  ca: { common: caCommon, navigation: caNavigation, exchange: caExchange },
 };
 
 interface IntlProviderProps {

frontend/app/components/LoadingState.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { layoutStyles } from "../styles/shared";
+import { useTranslation } from "../hooks/useTranslation";
 
 interface LoadingStateProps {
-  /** Custom loading message (default: "Loading...") */
+  /** Custom loading message (default: uses translation) */
   message?: string;
 }
 
@@ -11,10 +12,13 @@ interface LoadingStateProps {
  * Standard loading state component.
  * Displays a centered loading message with consistent styling.
  */
-export function LoadingState({ message = "Loading..." }: LoadingStateProps) {
+export function LoadingState({ message }: LoadingStateProps) {
+  const t = useTranslation("common");
+  const displayMessage = message || t("loading");
+
   return (
     <main style={layoutStyles.main}>
-      <div style={layoutStyles.loader}>{message}</div>
+      <div style={layoutStyles.loader}>{displayMessage}</div>
     </main>
   );
 }

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