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

frontend/app/profile/page.test.tsx

@@ -115,7 +115,7 @@ describe("ProfilePage - Display", () => {
     mockGetProfile.mockImplementation(() => new Promise(() => {}));
 
     renderWithProviders(<ProfilePage />);
-    expect(screen.getByText("Loading...")).toBeDefined();
+    expect(screen.getByText("Cargando...")).toBeDefined();
   });
 
   test("renders profile page title", async () => {
@@ -211,7 +211,7 @@ describe("ProfilePage - Navigation", () => {
     renderWithProviders(<ProfilePage />);
     await waitFor(() => {
       expect(screen.getByText("Exchange")).toBeDefined();
-      expect(screen.getByText("My Trades")).toBeDefined();
+      expect(screen.getByText("Mis Operaciones")).toBeDefined();
     });
   });
 
@@ -284,7 +284,7 @@ describe("ProfilePage - Loading State", () => {
 
     renderWithProviders(<ProfilePage />);
 
-    expect(screen.getByText("Loading...")).toBeDefined();
+    expect(screen.getByText("Cargando...")).toBeDefined();
   });
 });
 

frontend/e2e/helpers/setup.ts

@@ -0,0 +1,12 @@
+import { Page } from "@playwright/test";
+
+/**
+ * Set language to English for e2e tests.
+ * E2E tests should only test in English according to requirements.
+ * Call this in beforeEach hooks in test files.
+ */
+export async function setEnglishLanguage(page: Page) {
+  await page.addInitScript(() => {
+    window.localStorage.setItem("arbret-locale", "en");
+  });
+}

frontend/locales/ca/exchange.json

@@ -0,0 +1,17 @@
+{
+  "status": {
+    "pending": "Pendent",
+    "completed": "Completada",
+    "userCancelled": "Cancel·lada per Usuari",
+    "adminCancelled": "Cancel·lada per Admin",
+    "noShow": "No Present"
+  },
+  "direction": {
+    "buy": "COMPRAR BTC",
+    "sell": "VENDRE BTC"
+  },
+  "transferMethod": {
+    "onchain": "Onchain",
+    "lightning": "Lightning"
+  }
+}

frontend/locales/ca/navigation.json

@@ -0,0 +1,11 @@
+{
+  "exchange": "Exchange",
+  "myTrades": "Les Meves Operacions",
+  "myInvites": "Les Meves Invitacions",
+  "myProfile": "El Meu Perfil",
+  "signOut": "Tancar sessió",
+  "trades": "Operacions",
+  "availability": "Disponibilitat",
+  "invites": "Invitacions",
+  "prices": "Preus"
+}

frontend/locales/en/exchange.json

@@ -0,0 +1,17 @@
+{
+  "status": {
+    "pending": "Pending",
+    "completed": "Completed",
+    "userCancelled": "User Cancelled",
+    "adminCancelled": "Admin Cancelled",
+    "noShow": "No Show"
+  },
+  "direction": {
+    "buy": "BUY BTC",
+    "sell": "SELL BTC"
+  },
+  "transferMethod": {
+    "onchain": "Onchain",
+    "lightning": "Lightning"
+  }
+}

frontend/locales/en/navigation.json

@@ -0,0 +1,11 @@
+{
+  "exchange": "Exchange",
+  "myTrades": "My Trades",
+  "myInvites": "My Invites",
+  "myProfile": "My Profile",
+  "signOut": "Sign out",
+  "trades": "Trades",
+  "availability": "Availability",
+  "invites": "Invites",
+  "prices": "Prices"
+}

frontend/locales/es/exchange.json

@@ -0,0 +1,17 @@
+{
+  "status": {
+    "pending": "Pendiente",
+    "completed": "Completada",
+    "userCancelled": "Cancelada por Usuario",
+    "adminCancelled": "Cancelada por Admin",
+    "noShow": "No Presente"
+  },
+  "direction": {
+    "buy": "COMPRAR BTC",
+    "sell": "VENDER BTC"
+  },
+  "transferMethod": {
+    "onchain": "Onchain",
+    "lightning": "Lightning"
+  }
+}

frontend/locales/es/navigation.json

@@ -0,0 +1,11 @@
+{
+  "exchange": "Exchange",
+  "myTrades": "Mis Operaciones",
+  "myInvites": "Mis Invitaciones",
+  "myProfile": "Mi Perfil",
+  "signOut": "Cerrar sesión",
+  "trades": "Operaciones",
+  "availability": "Disponibilidad",
+  "invites": "Invitaciones",
+  "prices": "Precios"
+}

frontend/playwright.config.ts

@@ -20,5 +20,21 @@ export default defineConfig({
     // Reduce screenshot/recording overhead
     screenshot: "only-on-failure",
     trace: "retain-on-failure",
+    // Set language to English for all e2e tests via localStorage
+    // E2E tests should only test in English according to requirements
+    storageState: {
+      cookies: [],
+      origins: [
+        {
+          origin: "http://localhost:3000",
+          localStorage: [
+            {
+              name: "arbret-locale",
+              value: "en",
+            },
+          ],
+        },
+      ],
+    },
   },
 });