Add language and theme selection to the user settings menu

Integrates dropdown menus for theme (light/dark) and language selection into the header component, persisting choices in localStorage. Updates LoginModal title with SAPIENS logo.

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/LoginModal.tsx

@@ -68,7 +68,14 @@ export default function LoginModal({ isOpen, onClose }: LoginModalProps) {
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="sm:max-w-[425px]" data-testid="login-modal">
         <DialogHeader>
-          <DialogTitle>로그인</DialogTitle>
+          <DialogTitle className="flex items-center gap-2">
+            <span>Login to</span>
+            <img 
+              src="/attached_assets/logo_black_1759181850935.png" 
+              alt="SAPIENS" 
+              className="h-4 w-auto"
+            />
+          </DialogTitle>
         </DialogHeader>
         <form onSubmit={handleLogin} className="space-y-4">
           <div className="space-y-2">

client/src/pages/Home.tsx

@@ -1,23 +1,66 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAuth } from "@/hooks/useAuth";
-import { Search, Settings, User, LogOut } from "lucide-react";
+import { Search, Settings, User, LogOut, Sun, Moon, Monitor, Globe } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } 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";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 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();
+  
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+  const [language, setLanguage] = useState(() => localStorage.getItem('language') || 'en');
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  useEffect(() => {
+    localStorage.setItem('language', language);
+  }, [language]);
+
+  const handleThemeChange = (newTheme: string) => {
+    setTheme(newTheme);
+  };
+
+  const handleLanguageChange = (newLanguage: string) => {
+    setLanguage(newLanguage);
+  };
+
+  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: '简体中文' },
+  ];
 
   const handleLogout = async () => {
     try {
@@ -128,14 +171,59 @@ export default function Home() {
                 </Button>
               )}
               
-              <Button 
+              <DropdownMenu>
-                variant="ghost" 
+                <DropdownMenuTrigger asChild>
-                size="sm"
+                  <Button 
-                onClick={() => setIsSettingsModalOpen(true)}
+                    variant="ghost" 
-                data-testid="button-settings"
+                    size="sm"
-              >
+                    data-testid="button-settings"
-                <Settings className="h-4 w-4" />
+                  >
-              </Button>
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56">
+                  <DropdownMenuLabel>Theme</DropdownMenuLabel>
+                  <DropdownMenuItem 
+                    onClick={() => handleThemeChange('light')}
+                    className="cursor-pointer"
+                    data-testid="theme-light"
+                  >
+                    <Sun className="h-4 w-4 mr-2" />
+                    Light
+                  </DropdownMenuItem>
+                  <DropdownMenuItem 
+                    onClick={() => handleThemeChange('dark')}
+                    className="cursor-pointer"
+                    data-testid="theme-dark"
+                  >
+                    <Moon className="h-4 w-4 mr-2" />
+                    Dark
+                  </DropdownMenuItem>
+                  <DropdownMenuItem 
+                    onClick={() => handleThemeChange('system')}
+                    className="cursor-pointer"
+                    data-testid="theme-system"
+                  >
+                    <Monitor className="h-4 w-4 mr-2" />
+                    System
+                  </DropdownMenuItem>
+                  
+                  <DropdownMenuSeparator />
+                  
+                  <DropdownMenuLabel>Language</DropdownMenuLabel>
+                  {languages.map((lang) => (
+                    <DropdownMenuItem 
+                      key={lang.code}
+                      onClick={() => handleLanguageChange(lang.code)}
+                      className="cursor-pointer"
+                      data-testid={`language-${lang.code}`}
+                    >
+                      <Globe className="h-4 w-4 mr-2" />
+                      {lang.name}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           </div>
         </div>
@@ -155,12 +243,6 @@ export default function Home() {
         isOpen={isSearchModalOpen}
         onClose={() => setIsSearchModalOpen(false)}
       />
-      
-      {/* Settings Modal */}
-      <SettingsModal
-        isOpen={isSettingsModalOpen}
-        onClose={() => setIsSettingsModalOpen(false)}
-      />
     </div>
   );
 }

client/src/pages/Landing.tsx

@@ -1,18 +1,24 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useMutation } from "@tanstack/react-query";
-import { Search, Settings, User } from "lucide-react";
+import { Search, Settings, User, Sun, Moon, Monitor, Globe } from "lucide-react";
 import MainContent from "@/components/MainContent";
-import SettingsModal from "@/components/SettingsModal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 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: "",
@@ -20,6 +26,43 @@ export default function Landing() {
     description: ""
   });
   const { toast } = useToast();
+  
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+  const [language, setLanguage] = useState(() => localStorage.getItem('language') || 'en');
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  useEffect(() => {
+    localStorage.setItem('language', language);
+  }, [language]);
+
+  const handleThemeChange = (newTheme: string) => {
+    setTheme(newTheme);
+  };
+
+  const handleLanguageChange = (newLanguage: string) => {
+    setLanguage(newLanguage);
+  };
+
+  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: '简体中文' },
+  ];
 
   const loginMutation = useMutation({
     mutationFn: async (credentials: { username: string; password: string }) => {
@@ -107,14 +150,59 @@ export default function Landing() {
                 />
               </div>
               
-              <Button 
+              <DropdownMenu>
-                variant="ghost" 
+                <DropdownMenuTrigger asChild>
-                size="sm"
+                  <Button 
-                onClick={() => setShowSettingsModal(true)}
+                    variant="ghost" 
-                data-testid="button-settings"
+                    size="sm"
-              >
+                    data-testid="button-settings"
-                <Settings className="h-4 w-4" />
+                  >
-              </Button>
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56">
+                  <DropdownMenuLabel>Theme</DropdownMenuLabel>
+                  <DropdownMenuItem 
+                    onClick={() => handleThemeChange('light')}
+                    className="cursor-pointer"
+                    data-testid="theme-light"
+                  >
+                    <Sun className="h-4 w-4 mr-2" />
+                    Light
+                  </DropdownMenuItem>
+                  <DropdownMenuItem 
+                    onClick={() => handleThemeChange('dark')}
+                    className="cursor-pointer"
+                    data-testid="theme-dark"
+                  >
+                    <Moon className="h-4 w-4 mr-2" />
+                    Dark
+                  </DropdownMenuItem>
+                  <DropdownMenuItem 
+                    onClick={() => handleThemeChange('system')}
+                    className="cursor-pointer"
+                    data-testid="theme-system"
+                  >
+                    <Monitor className="h-4 w-4 mr-2" />
+                    System
+                  </DropdownMenuItem>
+                  
+                  <DropdownMenuSeparator />
+                  
+                  <DropdownMenuLabel>Language</DropdownMenuLabel>
+                  {languages.map((lang) => (
+                    <DropdownMenuItem 
+                      key={lang.code}
+                      onClick={() => handleLanguageChange(lang.code)}
+                      className="cursor-pointer"
+                      data-testid={`language-${lang.code}`}
+                    >
+                      <Globe className="h-4 w-4 mr-2" />
+                      {lang.name}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
               
               <Button 
                 variant="ghost" 
@@ -258,12 +346,6 @@ export default function Landing() {
           </form>
         </DialogContent>
       </Dialog>
-
-      {/* Settings Modal */}
-      <SettingsModal
-        isOpen={showSettingsModal}
-        onClose={() => setShowSettingsModal(false)}
-      />
     </div>
   );
 }