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.
This commit is contained in:
Anso
2026-05-15 09:00:56 -04:00
committed by GitHub
parent 489aab4516
commit 13e4edc1e2
@@ -52,6 +52,19 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
const { logout, user, isAdmin } = useAuth(); const { logout, user, isAdmin } = useAuth();
const { license } = useLicense(); const { license } = useLicense();
const [billingLoading, setBillingLoading] = useState(false); 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 () => { const openBillingPortal = async () => {
setBillingLoading(true); setBillingLoading(true);
@@ -67,6 +80,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
toast.error('Failed to open billing portal.'); toast.error('Failed to open billing portal.');
} finally { } finally {
setBillingLoading(false); setBillingLoading(false);
closeMenu();
} }
}; };
@@ -75,7 +89,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
const roleLabel = user?.role; const roleLabel = user?.role;
return ( return (
<Popover> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
variant="outline" variant="outline"
@@ -131,7 +145,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
{/* Navigation strip */} {/* Navigation strip */}
<div className="border-t border-card-border/60"> <div className="border-t border-card-border/60">
<MenuRow icon={Settings} label="Settings" onClick={onOpenSettings} /> <MenuRow icon={Settings} label="Settings" onClick={handleOpenSettings} />
{showBilling ? ( {showBilling ? (
<MenuRow <MenuRow
icon={CreditCard} icon={CreditCard}
@@ -147,12 +161,14 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
label="Documentation" label="Documentation"
href="https://docs.sencho.io" href="https://docs.sencho.io"
external external
onClick={closeMenu}
/> />
<MenuRow <MenuRow
icon={MessageSquare} icon={MessageSquare}
label="Feedback" label="Feedback"
href="https://github.com/studio-saelix/sencho/issues" href="https://github.com/studio-saelix/sencho/issues"
external external
onClick={closeMenu}
/> />
</div> </div>
@@ -174,7 +190,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
<div className="border-t border-card-border/60"> <div className="border-t border-card-border/60">
<button <button
type="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" 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} /> <LogOut className="h-4 w-4" strokeWidth={1.5} />
@@ -235,6 +251,7 @@ function MenuRow({
href={href} href={href}
target={external ? '_blank' : undefined} target={external ? '_blank' : undefined}
rel={external ? 'noopener noreferrer' : undefined} rel={external ? 'noopener noreferrer' : undefined}
onClick={onClick}
className={classes} className={classes}
> >
{body} {body}