Implement Language Selection UI and Auto-Detection

[markdav-is]

Feature: Language Selection

Implement language picker UI with auto-detection, manual selection, and session persistence.

Priority: High

Tags: @workflow-localization, @priority-high, @mobile

Requirements

• Add language picker component (dropdown or toggle)
• Implement device language auto-detection
• Persist language preference in browser storage
• Update all text immediately on language change
• Add to main layout/navigation

Behavior Checklist

✅ Auto-Detection from Device Settings

• Detect device language on first app load
• If device language is "ts-ZA", display app in Xitsonga
• If device language is "en-ZA", display app in English
• If device language is unsupported (e.g., "fr-FR"), fall back to English
• Apply language to all modules and components

✅ Manual Language Selection

• Display language picker in UI (nav bar or settings)
• Show current language indicator
• Tap/click language picker to open options
• Display language options:
  • English (en-ZA)
  • Xitsonga (Shangaan) (ts-ZA)
• Select "Xitsonga"
• All form labels update to Xitsonga immediately
• All button text updates to Xitsonga immediately
• Navigation updates to Xitsonga
• No English text visible after switch

✅ Immediate UI Update on Language Change

• User viewing Enrollment Form in English
• Switch language to "ts-ZA"
• All visible text updates to Xitsonga (no refresh required)
• Form title changes: "Enrollment" → "Ngheniso"
• Field labels change to Xitsonga
• Button text changes to Xitsonga
• Validation messages display in Xitsonga
• Navigation menu updates to Xitsonga

✅ Language Preference Persistence

• Set language preference to "ts-ZA"
• Close browser/app
• Reopen browser/app
• App displays in Xitsonga (preference remembered)
• Persist in localStorage or browser cookie
• Apply persisted language on startup

✅ Supported Languages List

• View language picker
• See available languages:
  • English (en-ZA)
  • Xitsonga (Shangaan) (ts-ZA)
• Display language names in their native form (optional):
  • English
  • Xitsonga
• Sort alphabetically or by priority

✅ Integration

• Apply language to all modules:
  • Enrollment
  • Mapping (when implemented)
  • Assessment (when implemented)
  • Attendance (when implemented)
  • Reports (when implemented)
• Apply to error messages
• Apply to confirmation messages
• Apply to validation messages
• Apply to date/time formatting (culture-specific)

Technical Notes

• Use Blazor's IStringLocalizer<T> for all text
• Store language preference in localStorage: localStorage.setItem('preferredLanguage', 'ts-ZA')
• Detect device language: navigator.language via JS interop
• Update culture on change: CultureInfo.CurrentCulture and CultureInfo.CurrentUICulture
• Component re-render on culture change
• Mobile-friendly language picker (icon or dropdown in nav bar)

UI Design

Option 1: Dropdown in Navigation

• Location: Top-right of nav bar
• Icon: Globe icon or language code (e.g., "EN", "TS")
• Click to open dropdown with language options

Option 2: Toggle Switch

• Location: Top-right of nav bar
• Two-state toggle: EN ↔ TS
• Tap to switch between languages

Option 3: Settings Page

• Add "Language" setting in user preferences
• Radio buttons for language selection
• Apply button (or auto-apply)

Localization Files Required

• All existing resource files (.resx) are already created for:
  • Enrollment module (BasicInfo, Criteria, Commitments, Signature)
• Need to create resource files for future modules:
  • Mapping
  • Assessment
  • Attendance
  • Reports
  • PhotoRelease
  • Village management
  • User administration

Related Feature Files

• Specs/Features/LanguageSelection.feature
• Specs/Features/LocalizedForms.feature
• Specs/Features/SingleLanguageDisplay.feature
• Specs/Docs/10Trees_Localization.feature.md