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

@@ -2,9 +2,29 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import { initMessages, getInitialLocale, getMessages, type Locale } from './lib/i18n'
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+async function bootstrapApplication() {
+  const rootElement = document.getElementById('root')
+  if (!rootElement) throw new Error('Failed to find the root element')
+
+  // Initialize translation messages
+  await initMessages()
+
+  // Determine initial locale from browser/storage
+  const locale: Locale = getInitialLocale()
+
+  // Get messages for the initial locale
+  const messages = getMessages(locale)
+
+  const root = createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <App locale={locale} messages={messages} />
+    </StrictMode>
+  )
+}
+
+bootstrapApplication().catch((error) => {
+  console.error('Failed to bootstrap application:', error)
+})