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

web/src/components/LocaleSelect.tsx

@@ -1,7 +1,7 @@
 import { GlobeIcon } from "lucide-react";
 import { FC } from "react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { locales } from "@/i18n";
+import { locales, loadLocale } from "@/i18n";
 import { getLocaleDisplayName } from "@/utils/i18n";
 
 interface Props {
@@ -13,6 +13,9 @@ const LocaleSelect: FC<Props> = (props: Props) => {
   const { onChange, value } = props;
 
   const handleSelectChange = async (locale: Locale) => {
+    // Apply locale globally immediately
+    loadLocale(locale);
+    // Also notify parent component
     onChange(locale);
   };
 

web/src/components/ThemeSelect.tsx

@@ -1,6 +1,6 @@
 import { Monitor, Moon, MoonStar, Palette, Sun, Wallpaper } from "lucide-react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { THEME_OPTIONS } from "@/utils/theme";
+import { THEME_OPTIONS, loadTheme } from "@/utils/theme";
 
 interface ThemeSelectProps {
   value?: string;
@@ -21,6 +21,9 @@ const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {})
   const currentTheme = value || "system";
 
   const handleThemeChange = (newTheme: string) => {
+    // Apply theme globally immediately
+    loadTheme(newTheme);
+    // Also notify parent component if callback is provided
     if (onValueChange) {
       onValueChange(newTheme);
     }