fix(web): make login screen theme selector reactive

This fixes an issue where the theme selector on the login screen would not update its display value after selection because the component was not re-rendering. Added local state to track the current theme. Validated that this pattern is unique to the unauthenticated context.

web/src/components/AuthFooter.tsx

@@ -1,7 +1,8 @@
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { loadLocale } from "@/utils/i18n";
-import { getInitialTheme, loadTheme } from "@/utils/theme";
+import { getInitialTheme, loadTheme, Theme } from "@/utils/theme";
 import LocaleSelect from "./LocaleSelect";
 import ThemeSelect from "./ThemeSelect";
 
@@ -12,7 +13,7 @@ interface Props {
 const AuthFooter = ({ className }: Props) => {
   const { i18n: i18nInstance } = useTranslation();
   const currentLocale = i18nInstance.language as Locale;
-  const currentTheme = getInitialTheme();
+  const [currentTheme, setCurrentTheme] = useState(getInitialTheme());
 
   const handleLocaleChange = (locale: Locale) => {
     loadLocale(locale);
@@ -20,6 +21,7 @@ const AuthFooter = ({ className }: Props) => {
 
   const handleThemeChange = (theme: string) => {
     loadTheme(theme);
+    setCurrentTheme(theme as Theme);
   };
 
   return (