Add settings modal for theme and language customization

Introduces a new SettingsModal component allowing users to select themes (light, dark, system) and languages, saving preferences to localStorage. The modal is integrated into Home and Landing pages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/9tQ591o

client/src/components/SettingsModal.tsx

@@ -0,0 +1,143 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { useState, useEffect } from "react";
+import { Sun, Moon, Monitor } from "lucide-react";
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+type Theme = 'light' | 'dark' | 'system';
+type Language = 'en' | 'fr' | 'de' | 'it' | 'hi' | 'ar' | 'ja' | 'ko' | 'zh-TW' | 'zh-CN';
+
+const languages = [
+  { code: 'en', name: 'English' },
+  { code: 'fr', name: 'Français' },
+  { code: 'de', name: 'Deutsch' },
+  { code: 'it', name: 'Italiano' },
+  { code: 'hi', name: 'हिन्दी' },
+  { code: 'ar', name: 'العربية' },
+  { code: 'ja', name: '日本語' },
+  { code: 'ko', name: '한국어' },
+  { code: 'zh-TW', name: '繁體中文' },
+  { code: 'zh-CN', name: '简体中文' },
+];
+
+export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
+  const [theme, setTheme] = useState<Theme>('system');
+  const [language, setLanguage] = useState<Language>('en');
+
+  useEffect(() => {
+    // Load saved settings
+    const savedTheme = localStorage.getItem('theme') as Theme || 'system';
+    const savedLanguage = localStorage.getItem('language') as Language || 'en';
+    setTheme(savedTheme);
+    setLanguage(savedLanguage);
+    
+    // Apply theme
+    applyTheme(savedTheme);
+  }, []);
+
+  const applyTheme = (selectedTheme: Theme) => {
+    const root = document.documentElement;
+    
+    if (selectedTheme === 'system') {
+      const systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      root.classList.toggle('dark', systemPreference === 'dark');
+    } else {
+      root.classList.toggle('dark', selectedTheme === 'dark');
+    }
+  };
+
+  const handleThemeChange = (newTheme: Theme) => {
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    applyTheme(newTheme);
+  };
+
+  const handleLanguageChange = (newLanguage: Language) => {
+    setLanguage(newLanguage);
+    localStorage.setItem('language', newLanguage);
+    // Here you would trigger language change in your app
+    // For now, just save to localStorage
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" data-testid="modal-settings">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+        </DialogHeader>
+        
+        <div className="space-y-6">
+          {/* Theme Selection */}
+          <div>
+            <Label className="text-sm font-medium mb-3 block">Theme</Label>
+            <div className="grid grid-cols-3 gap-2">
+              <button
+                onClick={() => handleThemeChange('light')}
+                className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${
+                  theme === 'light' 
+                    ? 'border-blue-600 bg-blue-50' 
+                    : 'border-gray-200 hover:border-gray-300'
+                }`}
+                data-testid="theme-light"
+              >
+                <Sun className="h-5 w-5" />
+                <span className="text-xs font-medium">Light</span>
+              </button>
+              
+              <button
+                onClick={() => handleThemeChange('dark')}
+                className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${
+                  theme === 'dark' 
+                    ? 'border-blue-600 bg-blue-50' 
+                    : 'border-gray-200 hover:border-gray-300'
+                }`}
+                data-testid="theme-dark"
+              >
+                <Moon className="h-5 w-5" />
+                <span className="text-xs font-medium">Dark</span>
+              </button>
+              
+              <button
+                onClick={() => handleThemeChange('system')}
+                className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${
+                  theme === 'system' 
+                    ? 'border-blue-600 bg-blue-50' 
+                    : 'border-gray-200 hover:border-gray-300'
+                }`}
+                data-testid="theme-system"
+              >
+                <Monitor className="h-5 w-5" />
+                <span className="text-xs font-medium">System</span>
+              </button>
+            </div>
+          </div>
+
+          {/* Language Selection */}
+          <div>
+            <Label className="text-sm font-medium mb-3 block">Language</Label>
+            <div className="grid grid-cols-2 gap-2 max-h-60 overflow-y-auto">
+              {languages.map((lang) => (
+                <button
+                  key={lang.code}
+                  onClick={() => handleLanguageChange(lang.code as Language)}
+                  className={`p-3 rounded-lg border-2 text-left transition-colors ${
+                    language === lang.code 
+                      ? 'border-blue-600 bg-blue-50' 
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                  data-testid={`language-${lang.code}`}
+                >
+                  <span className="text-sm font-medium">{lang.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/pages/Home.tsx

@@ -6,6 +6,7 @@ import { useState } from "react";
 import MainContent from "@/components/MainContent";
 import LoginModal from "@/components/LoginModal";
 import SearchModal from "@/components/SearchModal";
+import SettingsModal from "@/components/SettingsModal";
 import { useToast } from "@/hooks/use-toast";
 import { queryClient } from "@/lib/queryClient";
 import { useLocation } from "wouter";
@@ -14,6 +15,7 @@ export default function Home() {
   const { user, isAuthenticated } = useAuth();
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
   const { toast } = useToast();
   const [, setLocation] = useLocation();
 
@@ -120,6 +122,7 @@ export default function Home() {
                   <Button 
                     variant="ghost" 
                     size="sm"
+                    onClick={() => setIsSettingsModalOpen(true)}
                     data-testid="button-settings"
                   >
                     <Settings className="h-4 w-4" />
@@ -154,6 +157,12 @@ export default function Home() {
         isOpen={isSearchModalOpen}
         onClose={() => setIsSearchModalOpen(false)}
       />
+      
+      {/* Settings Modal */}
+      <SettingsModal
+        isOpen={isSettingsModalOpen}
+        onClose={() => setIsSettingsModalOpen(false)}
+      />
     </div>
   );
 }

client/src/pages/Landing.tsx

@@ -7,10 +7,12 @@ import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useMutation } from "@tanstack/react-query";
 import { Search, Settings, User } from "lucide-react";
 import MainContent from "@/components/MainContent";
+import SettingsModal from "@/components/SettingsModal";
 
 export default function Landing() {
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [showRequestModal, setShowRequestModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
   const [loginForm, setLoginForm] = useState({ username: "", password: "" });
   const [requestForm, setRequestForm] = useState({
     name: "",
@@ -108,6 +110,7 @@ export default function Landing() {
               <Button 
                 variant="ghost" 
                 size="sm"
+                onClick={() => setShowSettingsModal(true)}
                 data-testid="button-settings"
               >
                 <Settings className="h-4 w-4" />
@@ -255,6 +258,12 @@ export default function Landing() {
           </form>
         </DialogContent>
       </Dialog>
+
+      {/* Settings Modal */}
+      <SettingsModal
+        isOpen={showSettingsModal}
+        onClose={() => setShowSettingsModal(false)}
+      />
     </div>
   );
 }