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/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>
   );
 }