From bf78a25773cba25d4ac41d0c4a2e0987c5ecedac Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 22:19:45 +0000
Subject: [PATCH] Add theme and language settings to the user profile menu

Introduces a new settings dropdown in the Home page header, containing theme (light, dark, system) and language selection options.

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/Home.tsx | 172 +++++++++++++++++++++++++-------------
 1 file changed, 114 insertions(+), 58 deletions(-)

diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 8cb7a7e..03cc43b 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -144,6 +144,60 @@ export default function Home() {
                     Admin Dashboard
                   </Button>
                   
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button 
+                        variant="ghost" 
+                        size="sm"
+                        data-testid="button-settings"
+                      >
+                        <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>
+                  
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md cursor-pointer hover:bg-gray-200 transition-colors" data-testid="user-profile-chip">
@@ -168,69 +222,71 @@ export default function Home() {
                   </DropdownMenu>
                 </>
               ) : (
-                <Button 
-                  variant="ghost" 
-                  size="sm"
-                  onClick={() => setIsLoginModalOpen(true)}
-                  data-testid="button-login"
-                >
-                  <User className="h-4 w-4" />
-                </Button>
-              )}
-              
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
+                <>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button 
+                        variant="ghost" 
+                        size="sm"
+                        data-testid="button-settings"
+                      >
+                        <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" 
                     size="sm"
-                    data-testid="button-settings"
+                    onClick={() => setIsLoginModalOpen(true)}
+                    data-testid="button-login"
                   >
-                    <Settings className="h-4 w-4" />
+                    <User 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>