From 2f08097289454826f7326a27a104924f11e5f576 Mon Sep 17 00:00:00 2001 From: Jiayuan Date: Fri, 1 May 2026 09:18:31 +0200 Subject: [PATCH 1/3] feat(views): add left sidebar collapse option for desktop Show a sidebar toggle button in the page header when the sidebar is collapsed on desktop, and add a toggle button to the sidebar footer for collapsing. Also adds Cmd+B / Ctrl+B keyboard shortcut to toggle the sidebar. Closes #1967 Co-authored-by: multica-agent --- packages/ui/components/ui/sidebar.tsx | 17 +++++++++++++++++ packages/views/layout/app-sidebar.tsx | 4 +++- packages/views/layout/page-header.tsx | 9 +++++---- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/ui/components/ui/sidebar.tsx b/packages/ui/components/ui/sidebar.tsx index 254f008b65..a981218194 100644 --- a/packages/ui/components/ui/sidebar.tsx +++ b/packages/ui/components/ui/sidebar.tsx @@ -111,6 +111,23 @@ function SidebarProvider({ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) }, [isMobile, setOpen, setOpenMobile]) + // Toggle sidebar with keyboard shortcut (Cmd+B / Ctrl+B). + React.useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if ( + event.key === "b" && + (event.metaKey || event.ctrlKey) && + !event.shiftKey && + !event.altKey + ) { + event.preventDefault() + toggleSidebar() + } + } + window.addEventListener("keydown", handleKeyDown) + return () => window.removeEventListener("keydown", handleKeyDown) + }, [toggleSidebar]) + // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed" diff --git a/packages/views/layout/app-sidebar.tsx b/packages/views/layout/app-sidebar.tsx index 346194964d..27ddb4de46 100644 --- a/packages/views/layout/app-sidebar.tsx +++ b/packages/views/layout/app-sidebar.tsx @@ -51,6 +51,7 @@ import { SidebarMenuButton, SidebarMenuItem, SidebarRail, + SidebarTrigger, } from "@multica/ui/components/ui/sidebar"; import { DropdownMenu, @@ -691,7 +692,8 @@ export function AppSidebar({ topSlot, searchSlot, headerClassName, headerStyle } -
+
+
diff --git a/packages/views/layout/page-header.tsx b/packages/views/layout/page-header.tsx index 85c967714f..8a1b896ec2 100644 --- a/packages/views/layout/page-header.tsx +++ b/packages/views/layout/page-header.tsx @@ -3,13 +3,14 @@ import { cn } from "@multica/ui/lib/utils"; import { SidebarTrigger, useSidebar } from "@multica/ui/components/ui/sidebar"; -function MobileSidebarTrigger() { +function SidebarToggle() { try { - useSidebar(); + const { state } = useSidebar(); + // On mobile: always show (hamburger). On desktop: only when sidebar is collapsed. + return ; } catch { return null; } - return ; } interface PageHeaderProps { @@ -20,7 +21,7 @@ interface PageHeaderProps { export function PageHeader({ children, className }: PageHeaderProps) { return (
- + {children}
); From fc8ddc9785ccf4cf60990feb2cb9f0001c72c244 Mon Sep 17 00:00:00 2001 From: Jiayuan Date: Fri, 1 May 2026 09:22:39 +0200 Subject: [PATCH 2/3] fix(ui): guard Cmd+B sidebar shortcut against editable elements Skip the sidebar toggle when focus is inside INPUT, TEXTAREA, SELECT, or contentEditable elements so the shortcut does not steal Cmd+B (bold) from TipTap editors. Co-authored-by: multica-agent --- packages/ui/components/ui/sidebar.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/ui/components/ui/sidebar.tsx b/packages/ui/components/ui/sidebar.tsx index a981218194..a2c0afbbf4 100644 --- a/packages/ui/components/ui/sidebar.tsx +++ b/packages/ui/components/ui/sidebar.tsx @@ -112,6 +112,8 @@ function SidebarProvider({ }, [isMobile, setOpen, setOpenMobile]) // Toggle sidebar with keyboard shortcut (Cmd+B / Ctrl+B). + // Skip when focus is inside editable content so the shortcut doesn't + // steal Cmd+B (bold) from TipTap / contentEditable / inputs. React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ( @@ -120,6 +122,13 @@ function SidebarProvider({ !event.shiftKey && !event.altKey ) { + const tag = (event.target as HTMLElement)?.tagName + const isEditable = + tag === "INPUT" || + tag === "TEXTAREA" || + tag === "SELECT" || + (event.target as HTMLElement)?.isContentEditable + if (isEditable) return event.preventDefault() toggleSidebar() } From 2ff9ad0de315eee88b31708aee4cd5ca98c1c4a2 Mon Sep 17 00:00:00 2001 From: Jiayuan Date: Fri, 1 May 2026 09:31:59 +0200 Subject: [PATCH 3/3] refactor(ui): remove Cmd+B sidebar toggle keyboard shortcut Co-authored-by: multica-agent --- packages/ui/components/ui/sidebar.tsx | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/packages/ui/components/ui/sidebar.tsx b/packages/ui/components/ui/sidebar.tsx index a2c0afbbf4..254f008b65 100644 --- a/packages/ui/components/ui/sidebar.tsx +++ b/packages/ui/components/ui/sidebar.tsx @@ -111,32 +111,6 @@ function SidebarProvider({ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) }, [isMobile, setOpen, setOpenMobile]) - // Toggle sidebar with keyboard shortcut (Cmd+B / Ctrl+B). - // Skip when focus is inside editable content so the shortcut doesn't - // steal Cmd+B (bold) from TipTap / contentEditable / inputs. - React.useEffect(() => { - const handleKeyDown = (event: KeyboardEvent) => { - if ( - event.key === "b" && - (event.metaKey || event.ctrlKey) && - !event.shiftKey && - !event.altKey - ) { - const tag = (event.target as HTMLElement)?.tagName - const isEditable = - tag === "INPUT" || - tag === "TEXTAREA" || - tag === "SELECT" || - (event.target as HTMLElement)?.isContentEditable - if (isEditable) return - event.preventDefault() - toggleSidebar() - } - } - window.addEventListener("keydown", handleKeyDown) - return () => window.removeEventListener("keydown", handleKeyDown) - }, [toggleSidebar]) - // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed"