From 64d4dd084f2a1f87c24ed2469de439fb4e6e2563 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 14 Jun 2026 18:48:56 -0700
Subject: [PATCH 1/2] =?UTF-8?q?feat(sidebar):=20add=20=E2=8C=98B=20shortcu?=
 =?UTF-8?q?t=20to=20collapse/expand=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[workspaceId]/utils/commands-utils.ts       |  6 ++++++
 .../w/components/sidebar/sidebar.tsx            | 17 +++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts b/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts
index 24a6eead3ad..33f0fcf22fa 100644
--- a/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts
+++ b/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',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 785e2120e51..c9541e614d0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/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}

From 97d8c98cd56a8757e5ad904e7a1244cf5f04744a Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 14 Jun 2026 18:59:11 -0700
Subject: [PATCH 2/2] =?UTF-8?q?improvement(sidebar):=20address=20review=20?=
 =?UTF-8?q?=E2=80=94=20skip=20editable,=20registry-derived=20hint,=20expan?=
 =?UTF-8?q?d=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[workspaceId]/utils/commands-utils.ts     | 32 +++++++-
 .../workspace-header/workspace-header.tsx     | 79 +++++++++++--------
 .../w/components/sidebar/sidebar.tsx          |  9 ++-
 3 files changed, 85 insertions(+), 35 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts b/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts
index 33f0fcf22fa..d227b6d9026 100644
--- a/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts
@@ -61,7 +61,7 @@ export const COMMAND_DEFINITIONS: Record<CommandId, CommandDefinition> = {
   'collapse-sidebar': {
     id: 'collapse-sidebar',
     shortcut: 'Mod+B',
-    allowInEditable: true,
+    allowInEditable: false,
   },
   'goto-logs': {
     id: 'goto-logs',
@@ -150,3 +150,33 @@ export function createCommand(input: CreateCommandInput): GlobalCommand {
 export function createCommands(inputs: CreateCommandInput[]): GlobalCommand[] {
   return inputs.map((input) => createCommand(input))
 }
+
+/** Display symbols for shortcut modifiers on macOS. */
+const MAC_MODIFIER_SYMBOLS: Record<string, string> = {
+  Mod: '⌘',
+  Shift: '⇧',
+  Alt: '⌥',
+}
+
+/** Display labels for shortcut modifiers on Windows/Linux. */
+const NON_MAC_MODIFIER_LABELS: Record<string, string> = {
+  Mod: 'Ctrl',
+  Shift: 'Shift',
+  Alt: 'Alt',
+}
+
+/**
+ * Formats a command's shortcut for display, deriving the keys from
+ * {@link COMMAND_DEFINITIONS} so tooltips never drift from the registered
+ * binding. macOS renders compact symbols (`⌘⇧P`); other platforms render
+ * `+`-joined labels (`Ctrl+Shift+P`).
+ *
+ * @param id - Command whose shortcut to format.
+ * @param isMac - Whether to render macOS symbols instead of Windows/Linux labels.
+ */
+export function formatCommandShortcut(id: CommandId, isMac: boolean): string {
+  const tokens = COMMAND_DEFINITIONS[id].shortcut.split('+')
+  return isMac
+    ? tokens.map((token) => MAC_MODIFIER_SYMBOLS[token] ?? token).join('')
+    : tokens.map((token) => NON_MAC_MODIFIER_LABELS[token] ?? token).join('+')
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 499f79b91b2..c6f10ebdb29 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -15,6 +15,7 @@ import {
   Plus,
   Send,
   Skeleton,
+  Tooltip,
 } from '@/components/emcn'
 import { ManageWorkspace, PanelLeft } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
@@ -68,6 +69,8 @@ interface WorkspaceHeaderProps {
   isCollapsed?: boolean
   /** Callback to expand the sidebar from collapsed state */
   onExpandSidebar?: () => void
+  /** Formatted keyboard shortcut shown in the expand affordance tooltip */
+  expandShortcut?: string
 }
 
 /**
@@ -93,6 +96,7 @@ function WorkspaceHeaderImpl({
   sessionUserId,
   isCollapsed = false,
   onExpandSidebar,
+  expandShortcut,
 }: WorkspaceHeaderProps) {
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
   const [isInviteModalOpen, setIsInviteModalOpen] = useState(false)
@@ -270,41 +274,52 @@ function WorkspaceHeaderImpl({
   return (
     <div className='min-w-0 flex-1'>
       {isMounted && isCollapsed ? (
-        <button
-          type='button'
-          aria-label='Expand sidebar'
-          onClick={onExpandSidebar}
-          className={chipVariants({ fullWidth: true })}
-        >
-          <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
-            {!activeWorkspaceFull ? (
-              <Skeleton className='size-[16px] rounded-sm' />
-            ) : (
-              <>
-                {activeWorkspaceFull.logoUrl ? (
-                  <img
-                    src={activeWorkspaceFull.logoUrl}
-                    alt={activeWorkspaceFull.name || 'Workspace logo'}
-                    className='size-[16px] rounded-sm object-cover group-hover:invisible'
-                  />
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type='button'
+              aria-label='Expand sidebar'
+              onClick={onExpandSidebar}
+              className={chipVariants({ fullWidth: true })}
+            >
+              <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
+                {!activeWorkspaceFull ? (
+                  <Skeleton className='size-[16px] rounded-sm' />
                 ) : (
-                  <div
-                    className='flex size-[16px] items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none group-hover:invisible'
-                    style={{
-                      backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
-                    }}
-                  >
-                    {workspaceInitial}
-                  </div>
+                  <>
+                    {activeWorkspaceFull.logoUrl ? (
+                      <img
+                        src={activeWorkspaceFull.logoUrl}
+                        alt={activeWorkspaceFull.name || 'Workspace logo'}
+                        className='size-[16px] rounded-sm object-cover group-hover:invisible'
+                      />
+                    ) : (
+                      <div
+                        className='flex size-[16px] items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none group-hover:invisible'
+                        style={{
+                          backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
+                        }}
+                      >
+                        {workspaceInitial}
+                      </div>
+                    )}
+                    <PanelLeft
+                      aria-hidden
+                      className='pointer-events-none invisible absolute inset-0 m-auto size-[16px] rotate-180 text-[var(--text-icon)] group-hover:visible'
+                    />
+                  </>
                 )}
-                <PanelLeft
-                  aria-hidden
-                  className='pointer-events-none invisible absolute inset-0 m-auto size-[16px] rotate-180 text-[var(--text-icon)] group-hover:visible'
-                />
-              </>
+              </div>
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='right'>
+            {expandShortcut ? (
+              <Tooltip.Shortcut keys={expandShortcut}>Expand sidebar</Tooltip.Shortcut>
+            ) : (
+              <p>Expand sidebar</p>
             )}
-          </div>
-        </button>
+          </Tooltip.Content>
+        </Tooltip.Root>
       ) : isMounted && isWorkspaceReady ? (
         <DropdownMenu
           open={isWorkspaceMenuOpen}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index c9541e614d0..fff30694c1d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -46,7 +46,10 @@ import { buildFolderTree, getFolderPath } from '@/lib/folders/tree'
 import { captureEvent } from '@/lib/posthog/client'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
+import {
+  createCommands,
+  formatCommandShortcut,
+} from '@/app/workspace/[workspaceId]/utils/commands-utils'
 import {
   CollapsedChatFlyoutItem,
   CollapsedFolderItems,
@@ -390,6 +393,7 @@ export const Sidebar = memo(function Sidebar() {
   }, [isCollapsed])
 
   const isMac = isMacPlatform()
+  const collapseShortcut = formatCommandShortcut('collapse-sidebar', isMac)
 
   const [showCollapsedTooltips, setShowCollapsedTooltips] = useState(isCollapsed)
 
@@ -1275,12 +1279,13 @@ export const Sidebar = memo(function Sidebar() {
                 sessionUserId={sessionData?.user?.id}
                 isCollapsed={isCollapsed}
                 onExpandSidebar={toggleCollapsed}
+                expandShortcut={collapseShortcut}
               />
               <SidebarTooltip
                 label='Collapse sidebar'
                 enabled={!isCollapsed}
                 side='bottom'
-                shortcut={isMac ? '⌘B' : 'Ctrl+B'}
+                shortcut={collapseShortcut}
               >
                 <button
                   type='button'