fix: apply theme and locale changes immediately on login screen (#5440)

[Omcodes23]

Fix: Apply theme and locale changes immediately on login screen (#5440)

Description

This PR resolves the issue where theme and language settings were unresponsive on the login screen. The UI elements (theme toggle and language selector) now apply changes immediately upon selection.

Problem

Users were unable to change the Theme (Dark/Light mode) and Language settings on the login screen. Selecting a different language or toggling the theme did not update the interface. This issue occurred in v0.25.3 but not in the official demo.

Root Cause: The ThemeSelect and LocaleSelect components only called the parent callback (onValueChange/onChange) without applying the global state changes (loadTheme()/loadLocale()).

Solution

Updated both components to apply global state changes synchronously while still notifying parent components:

Changes Made

1. ThemeSelect Component (web/src/components/ThemeSelect.tsx)

• Added import of loadTheme from @/utils/theme
• Modified handleThemeChange to call loadTheme() immediately before the parent callback
• Ensures theme changes are applied globally and persist to localStorage

2. LocaleSelect Component (web/src/components/LocaleSelect.tsx)

• Added import of loadLocale from @/i18n
• Modified handleSelectChange to call loadLocale() immediately before the parent callback
• Ensures locale changes are applied globally and persist to localStorage

Key Changes

// ThemeSelect: Apply theme globally first, then notify parent
const handleThemeChange = (newTheme: string) => {
  loadTheme(newTheme);      // Apply globally
  if (onValueChange) {
    onValueChange(newTheme); // Notify parent
  }
};

// LocaleSelect: Apply locale globally first, then notify parent
const handleSelectChange = async (locale: Locale) => {
  loadLocale(locale);  // Apply globally
  onChange(locale);    // Notify parent
};