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/hooks/useLocale.ts

@@ -0,0 +1,53 @@
+// ========================================
+// useLocale Hook
+// ========================================
+// Convenient hook for locale management
+
+import { useCallback } from 'react';
+import { useAppStore, selectLocale } from '../stores/appStore';
+import type { Locale } from '../types/store';
+import { availableLocales } from '../lib/i18n';
+
+export interface UseLocaleReturn {
+  /** Current locale ('en' or 'zh') */
+  locale: Locale;
+  /** Set locale preference */
+  setLocale: (locale: Locale) => void;
+  /** Available locales with display names */
+  availableLocales: Record<Locale, string>;
+}
+
+/**
+ * Hook for managing locale state
+ * @returns Locale state and actions
+ *
+ * @example
+ * ```tsx
+ * const { locale, setLocale, availableLocales } = useLocale();
+ *
+ * return (
+ *   <select value={locale} onChange={(e) => setLocale(e.target.value as Locale)}>
+ *     {Object.entries(availableLocales).map(([key, label]) => (
+ *       <option key={key} value={key}>{label}</option>
+ *     ))}
+ *   </select>
+ * );
+ * ```
+ */
+export function useLocale(): UseLocaleReturn {
+  const locale = useAppStore(selectLocale);
+  const setLocaleAction = useAppStore((state) => state.setLocale);
+
+  const setLocale = useCallback(
+    (newLocale: Locale) => {
+      setLocaleAction(newLocale);
+    },
+    [setLocaleAction]
+  );
+
+  return {
+    locale,
+    setLocale,
+    availableLocales,
+  };
+}