From 13e4edc1e2537d944d6f5669d668d18a7de140b1 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Fri, 15 May 2026 09:00:56 -0400
Subject: [PATCH] fix(ui): close user dropdown after clicking menu actions
 (#1058)

Clicking Settings, Billing, Documentation, Feedback, or Log Out now
dismisses the popover, matching standard menu UX. The Appearance theme
toggle stays open so users can preview themes without reopening the menu.
---
 .../src/components/UserProfileDropdown.tsx    | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/UserProfileDropdown.tsx b/frontend/src/components/UserProfileDropdown.tsx
index 03a8c62e..c7203153 100644
--- a/frontend/src/components/UserProfileDropdown.tsx
+++ b/frontend/src/components/UserProfileDropdown.tsx
@@ -52,6 +52,19 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
     const { logout, user, isAdmin } = useAuth();
     const { license } = useLicense();
     const [billingLoading, setBillingLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+
+    const closeMenu = () => setOpen(false);
+
+    const handleOpenSettings = () => {
+        closeMenu();
+        onOpenSettings();
+    };
+
+    const handleLogout = () => {
+        closeMenu();
+        logout();
+    };
 
     const openBillingPortal = async () => {
         setBillingLoading(true);
@@ -67,6 +80,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
             toast.error('Failed to open billing portal.');
         } finally {
             setBillingLoading(false);
+            closeMenu();
         }
     };
 
@@ -75,7 +89,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
     const roleLabel = user?.role;
 
     return (
-        <Popover>
+        <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <Button
                     variant="outline"
@@ -131,7 +145,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
 
                 {/* Navigation strip */}
                 <div className="border-t border-card-border/60">
-                    <MenuRow icon={Settings} label="Settings" onClick={onOpenSettings} />
+                    <MenuRow icon={Settings} label="Settings" onClick={handleOpenSettings} />
                     {showBilling ? (
                         <MenuRow
                             icon={CreditCard}
@@ -147,12 +161,14 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
                         label="Documentation"
                         href="https://docs.sencho.io"
                         external
+                        onClick={closeMenu}
                     />
                     <MenuRow
                         icon={MessageSquare}
                         label="Feedback"
                         href="https://github.com/studio-saelix/sencho/issues"
                         external
+                        onClick={closeMenu}
                     />
                 </div>
 
@@ -174,7 +190,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
                 <div className="border-t border-card-border/60">
                     <button
                         type="button"
-                        onClick={logout}
+                        onClick={handleLogout}
                         className="flex w-full items-center gap-2.5 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left text-sm text-destructive transition-colors hover:bg-destructive/5 focus-visible:bg-destructive/5 focus-visible:outline-none"
                     >
                         <LogOut className="h-4 w-4" strokeWidth={1.5} />
@@ -235,6 +251,7 @@ function MenuRow({
                 href={href}
                 target={external ? '_blank' : undefined}
                 rel={external ? 'noopener noreferrer' : undefined}
+                onClick={onClick}
                 className={classes}
             >
                 {body}