From 0bce64032aa115e4fbd012b55722122b7ec26318 Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Tue, 24 Mar 2026 00:09:42 +0700
Subject: [PATCH] refactor(ui): move About button back to user menu dropdown

---
 ui/web/src/components/layout/topbar.tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/ui/web/src/components/layout/topbar.tsx b/ui/web/src/components/layout/topbar.tsx
index 31ac9f9e..33b2dd2f 100644
--- a/ui/web/src/components/layout/topbar.tsx
+++ b/ui/web/src/components/layout/topbar.tsx
@@ -25,8 +25,6 @@ export function Topbar() {
   const toggleSidebar = useUiStore((s) => s.toggleSidebar);
   const setMobileSidebarOpen = useUiStore((s) => s.setMobileSidebarOpen);
   const isMobile = useIsMobile();
-  const [showAbout, setShowAbout] = useState(false);
-
   const isDark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
 
   const handleSidebarToggle = isMobile
@@ -52,15 +50,6 @@ export function Topbar() {
       </div>
 
       <div className="flex items-center gap-2">
-        <button
-          onClick={() => setShowAbout(true)}
-          className="flex items-center gap-1 cursor-pointer rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-          title={t("about.menuItem")}
-        >
-          <Info className="h-4 w-4 shrink-0" />
-          <span className="hidden sm:inline">{t("about.menuItem")}</span>
-        </button>
-
         <Select value={language} onValueChange={(v) => setLanguage(v as Language)}>
           <SelectTrigger
             title={t("language")}
@@ -102,7 +91,6 @@ export function Topbar() {
         <UserMenu />
       </div>
 
-      <AboutDialog open={showAbout} onOpenChange={setShowAbout} />
     </header>
   );
 }
@@ -115,6 +103,7 @@ function UserMenu() {
   const { currentTenant, currentTenantName, tenants, isCrossTenant, isMultiTenant, currentTenantId } = useTenants();
   const [open, setOpen] = useState(false);
   const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
+  const [showAbout, setShowAbout] = useState(false);
   const navigate = useNavigate();
 
   const tenantLabel = currentTenant?.name || currentTenantName || "";
@@ -206,6 +195,15 @@ function UserMenu() {
             <span>{t("apiKeys")}</span>
           </button>
 
+          {/* About */}
+          <button
+            onClick={() => { setOpen(false); setShowAbout(true); }}
+            className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent"
+          >
+            <Info className="h-3.5 w-3.5 shrink-0" />
+            <span>{t("about.menuItem")}</span>
+          </button>
+
           <div className="my-1 border-t" />
 
           {/* Logout */}
@@ -230,6 +228,7 @@ function UserMenu() {
       onConfirm={() => { setShowLogoutConfirm(false); logout(); }}
     />
 
+    <AboutDialog open={showAbout} onOpenChange={setShowAbout} />
     </>
   );
 }