feat(sidebar): add ⌘B shortcut to collapse/expand sidebar

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts

@@ -10,6 +10,7 @@ export type CommandId =
   | 'accept-diff-changes'
   | 'add-agent'
   | 'add-workflow'
+  | 'collapse-sidebar'
   | 'goto-logs'
   | 'open-search'
   | 'open-workflow-search-replace'
@@ -57,6 +58,11 @@ export const COMMAND_DEFINITIONS: Record<CommandId, CommandDefinition> = {
     shortcut: 'Mod+Shift+P',
     allowInEditable: false,
   },
+  'collapse-sidebar': {
+    id: 'collapse-sidebar',
+    shortcut: 'Mod+B',
+    allowInEditable: true,
+  },
   'goto-logs': {
     id: 'goto-logs',
     shortcut: 'Mod+L',

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -118,18 +118,20 @@ export function SidebarTooltip({
   label,
   enabled,
   side = 'right',
+  shortcut,
 }: {
   children: React.ReactElement
   label: string
   enabled: boolean
   side?: 'right' | 'bottom'
+  shortcut?: string
 }) {
   if (!enabled) return children
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
       <Tooltip.Content side={side}>
-        <p>{label}</p>
+        {shortcut ? <Tooltip.Shortcut keys={shortcut}>{label}</Tooltip.Shortcut> : <p>{label}</p>}
       </Tooltip.Content>
     </Tooltip.Root>
   )
@@ -1218,6 +1220,12 @@ export const Sidebar = memo(function Sidebar() {
           handleCreateWorkflow()
         },
       },
+      {
+        id: 'collapse-sidebar',
+        handler: () => {
+          toggleCollapsed()
+        },
+      },
     ])
   )
 
@@ -1268,7 +1276,12 @@ export const Sidebar = memo(function Sidebar() {
                 isCollapsed={isCollapsed}
                 onExpandSidebar={toggleCollapsed}
               />
-              <SidebarTooltip label='Collapse sidebar' enabled={!isCollapsed} side='bottom'>
+              <SidebarTooltip
+                label='Collapse sidebar'
+                enabled={!isCollapsed}
+                side='bottom'
+                shortcut={isMac ? '⌘B' : 'Ctrl+B'}
+              >
                 <button
                   type='button'
                   onClick={toggleCollapsed}