Language: use navigator.language as default and replace segmented control with dropdown

[hunter-read]

Bug / Improvement

Two related issues with the language selection in User Settings:

1. No browser language detection

The i18n initialization in frontend/src/i18n.js falls back to the hardcoded string 'en-US' when no preference is saved in localStorage. It never consults navigator.language, so users always see the interface in English on first load regardless of their browser locale.

Expected behaviour: On first visit (no grimoire:language key in localStorage), resolve the UI language by matching navigator.language (and navigator.languages) against the available locales, then fall back to en-US if no match is found.

Suggested logic:

function detectLanguage() {
  const saved = localStorage.getItem('grimoire:language')
  if (saved) return saved
  const available = Object.keys(resources) // e.g. ['en-US', 'fr-FR', 'fr-CA', 'de-DE']
  for (const lang of navigator.languages ?? [navigator.language]) {
    // exact match first (e.g. 'fr-FR'), then prefix match (e.g. 'fr' → 'fr-FR')
    const exact  = available.find(a => a === lang)
    const prefix = available.find(a => a.startsWith(lang.split('-')[0]))
    if (exact  || prefix) return exact ?? prefix
  }
  return 'en-US'
}

2. Segmented control doesn't scale

The current SegmentedControl layout in LanguageSection works for 2–3 options but breaks visually as more locales are added — buttons overflow or wrap awkwardly.

Expected behaviour: Replace the segmented control with a standard <select> dropdown (styled to match the existing input aesthetic) so the language list can grow without layout issues.

Files to change

• frontend/src/i18n.js — replace hardcoded 'en-US' fallback with detectLanguage()
• frontend/src/components/settings/UserPreferenceSections.jsx — replace SegmentedControl in LanguageSection with a styled <select>