improvement(sidebar): add keyboard shortcuts for new workflow/task, center search modal, fix edge ARIA

Author: waleedlatif1

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

@@ -9,6 +9,8 @@ import type { GlobalCommand } from '@/app/workspace/[workspaceId]/providers/glob
 export type CommandId =
   | 'accept-diff-changes'
   | 'add-agent'
+  | 'add-workflow'
+  | 'add-task'
   // | 'goto-templates'
   | 'goto-logs'
   | 'open-search'
@@ -52,6 +54,16 @@ export const COMMAND_DEFINITIONS: Record<CommandId, CommandDefinition> = {
     shortcut: 'Mod+Shift+A',
     allowInEditable: true,
   },
+  'add-workflow': {
+    id: 'add-workflow',
+    shortcut: 'Mod+Shift+W',
+    allowInEditable: false,
+  },
+  'add-task': {
+    id: 'add-task',
+    shortcut: 'Mod+Shift+K',
+    allowInEditable: false,
+  },
   // 'goto-templates': {
   //   id: 'goto-templates',
   //   shortcut: 'Mod+Y',

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

@@ -343,7 +343,7 @@ export function SearchModal({
           '-translate-x-1/2 fixed top-[15%] z-50 w-[500px] rounded-xl border-[4px] border-black/[0.06] bg-[var(--bg)] shadow-[0_24px_80px_-16px_rgba(0,0,0,0.15)] dark:border-white/[0.06] dark:shadow-[0_24px_80px_-16px_rgba(0,0,0,0.4)]',
           open ? 'visible opacity-100' : 'invisible opacity-0'
         )}
-        style={{ left: '50%' }}
+        style={{ left: 'calc(var(--sidebar-width) / 2 + 50%)' }}
       >
         <Command label='Search' shouldFilter={false}>
           <div className='mx-2 mt-2 mb-1 flex items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>

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

@@ -37,6 +37,7 @@ import {
 } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
+import { isMacPlatform } from '@/lib/core/utils/platform'
 import {
   START_NAV_TOUR_EVENT,
   START_WORKFLOW_TOUR_EVENT,
@@ -322,6 +323,8 @@ export const Sidebar = memo(function Sidebar() {
     isCollapsedRef.current = isCollapsed
   }, [isCollapsed])
 
+  const isMac = useMemo(() => isMacPlatform(), [])
+
   // Delay collapsed tooltips until the width transition finishes.
   const [showCollapsedTooltips, setShowCollapsedTooltips] = useState(isCollapsed)
 
@@ -1065,6 +1068,16 @@ export const Sidebar = memo(function Sidebar() {
   // Stable callback for DeleteModal close
   const handleCloseTaskDeleteModal = useCallback(() => setIsTaskDeleteModalOpen(false), [])
 
+  const handleEdgeKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (isCollapsed && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault()
+        toggleCollapsed()
+      }
+    },
+    [isCollapsed, toggleCollapsed]
+  )
+
   // Stable handler for help modal open from dropdown
   const handleOpenHelpFromMenu = useCallback(() => setIsHelpModalOpen(true), [])
 
@@ -1153,6 +1166,18 @@ export const Sidebar = memo(function Sidebar() {
           openSearchModal()
         },
       },
+      {
+        id: 'add-workflow',
+        handler: () => {
+          handleCreateWorkflow()
+        },
+      },
+      {
+        id: 'add-task',
+        handler: () => {
+          handleNewTask()
+        },
+      },
     ])
   )
 
@@ -1334,6 +1359,9 @@ export const Sidebar = memo(function Sidebar() {
                             </Tooltip.Trigger>
                             <Tooltip.Content>
                               <p>New task</p>
+                              <p className='text-[var(--text-muted)]'>
+                                {isMac ? '⌘⇧K' : 'Ctrl+Shift+K'}
+                              </p>
                             </Tooltip.Content>
                           </Tooltip.Root>
                         </div>
@@ -1500,6 +1528,11 @@ export const Sidebar = memo(function Sidebar() {
                             </Tooltip.Trigger>
                             <Tooltip.Content>
                               <p>{isCreatingWorkflow ? 'Creating workflow...' : 'New workflow'}</p>
+                              {!isCreatingWorkflow && (
+                                <p className='text-[var(--text-muted)]'>
+                                  {isMac ? '⌘⇧W' : 'Ctrl+Shift+W'}
+                                </p>
+                              )}
                             </Tooltip.Content>
                           </Tooltip.Root>
                         </div>
@@ -1696,9 +1729,11 @@ export const Sidebar = memo(function Sidebar() {
             )}
             onMouseDown={isCollapsed ? undefined : handleMouseDown}
             onClick={isCollapsed ? toggleCollapsed : undefined}
-            role='separator'
-            aria-orientation='vertical'
-            aria-label='Sidebar edge'
+            onKeyDown={isCollapsed ? handleEdgeKeyDown : undefined}
+            role={isCollapsed ? 'button' : 'separator'}
+            tabIndex={isCollapsed ? 0 : undefined}
+            aria-orientation={isCollapsed ? undefined : 'vertical'}
+            aria-label={isCollapsed ? 'Expand sidebar' : 'Resize sidebar'}
           />
         )}
       </div>