Add E2E tests for internationalization across multiple pages

- Implemented navigation.spec.ts to test language switching and translation of navigation elements.
- Created sessions-page.spec.ts to verify translations on the sessions page, including headers, status badges, and date formatting.
- Developed settings-page.spec.ts to ensure settings page content is translated and persists across sessions.
- Added skills-page.spec.ts to validate translations for skill categories, action buttons, and empty states.

ccw/frontend/src/stores/appStore.ts

@@ -5,7 +5,8 @@
 
 import { create } from 'zustand';
 import { persist, devtools } from 'zustand/middleware';
-import type { AppStore, Theme, ViewMode, SessionFilter, LiteTaskType } from '../types/store';
+import type { AppStore, Theme, Locale, ViewMode, SessionFilter, LiteTaskType } from '../types/store';
+import { getInitialLocale, updateIntl } from '../lib/i18n';
 
 // Helper to resolve system theme
 const getSystemTheme = (): 'light' | 'dark' => {
@@ -27,6 +28,9 @@ const initialState = {
   theme: 'system' as Theme,
   resolvedTheme: 'light' as 'light' | 'dark',
 
+  // Locale
+  locale: getInitialLocale() as Locale,
+
   // Sidebar
   sidebarOpen: true,
   sidebarCollapsed: false,
@@ -69,6 +73,13 @@ export const useAppStore = create<AppStore>()(
           get().setTheme(newTheme);
         },
 
+        // ========== Locale Actions ==========
+
+        setLocale: (locale: Locale) => {
+          set({ locale }, false, 'setLocale');
+          updateIntl(locale);
+        },
+
         // ========== Sidebar Actions ==========
 
         setSidebarOpen: (open: boolean) => {
@@ -117,9 +128,10 @@ export const useAppStore = create<AppStore>()(
       }),
       {
         name: 'ccw-app-store',
-        // Only persist theme preference
+        // Only persist theme and locale preferences
         partialize: (state) => ({
           theme: state.theme,
+          locale: state.locale,
           sidebarCollapsed: state.sidebarCollapsed,
         }),
         onRehydrateStorage: () => (state) => {
@@ -133,6 +145,10 @@ export const useAppStore = create<AppStore>()(
               document.documentElement.setAttribute('data-theme', resolved);
             }
           }
+          // Apply locale on rehydration
+          if (state) {
+            updateIntl(state.locale);
+          }
         },
       }
     ),
@@ -158,6 +174,7 @@ if (typeof window !== 'undefined') {
 // Selectors for common access patterns
 export const selectTheme = (state: AppStore) => state.theme;
 export const selectResolvedTheme = (state: AppStore) => state.resolvedTheme;
+export const selectLocale = (state: AppStore) => state.locale;
 export const selectSidebarOpen = (state: AppStore) => state.sidebarOpen;
 export const selectCurrentView = (state: AppStore) => state.currentView;
 export const selectIsLoading = (state: AppStore) => state.isLoading;