From e6ebb91beb5f061ad38cc1217eb4503619b21e70 Mon Sep 17 00:00:00 2001 From: waleed Date: Sat, 28 Mar 2026 13:23:47 -0700 Subject: [PATCH 1/6] improvement(sidebar): expand sidebar by hovering and clicking the edge --- .../w/components/sidebar/sidebar.tsx | 981 +++++++++--------- 1 file changed, 494 insertions(+), 487 deletions(-) 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 a48982e5631..f87fd72ad31 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx @@ -1158,543 +1158,550 @@ export const Sidebar = memo(function Sidebar() { return ( <> - + {/* Universal Search Modal */} Date: Sat, 28 Mar 2026 13:35:56 -0700 Subject: [PATCH 2/6] improvement(sidebar): add keyboard shortcuts for new workflow/task, center search modal, fix edge ARIA --- .../[workspaceId]/utils/commands-utils.ts | 12 ++++++ .../components/search-modal/search-modal.tsx | 2 +- .../w/components/sidebar/sidebar.tsx | 41 +++++++++++++++++-- 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts b/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts index fd9e9678287..5866f4d48c4 100644 --- a/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts +++ b/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 = { 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', diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx index 592d3562d6a..23c34bfdea4 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx +++ b/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%)' }} >
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 f87fd72ad31..aa1b1e6fc63 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx +++ b/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() {

New task

+

+ {isMac ? '⌘⇧K' : 'Ctrl+Shift+K'} +

@@ -1500,6 +1528,11 @@ export const Sidebar = memo(function Sidebar() {

{isCreatingWorkflow ? 'Creating workflow...' : 'New workflow'}

+ {!isCreatingWorkflow && ( +

+ {isMac ? '⌘⇧W' : 'Ctrl+Shift+W'} +

+ )} @@ -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'} /> )} From 577ead560f4cacb1995e6fbc23cd26284e01861d Mon Sep 17 00:00:00 2001 From: waleed Date: Sat, 28 Mar 2026 13:39:47 -0700 Subject: [PATCH 3/6] improvement(sidebar): use Tooltip.Shortcut for inline shortcut display --- .../w/components/sidebar/sidebar.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) 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 aa1b1e6fc63..15efdac8236 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx @@ -1358,10 +1358,9 @@ export const Sidebar = memo(function Sidebar() { -

New task

-

- {isMac ? '⌘⇧K' : 'Ctrl+Shift+K'} -

+ + New task + @@ -1527,11 +1526,12 @@ export const Sidebar = memo(function Sidebar() { -

{isCreatingWorkflow ? 'Creating workflow...' : 'New workflow'}

- {!isCreatingWorkflow && ( -

- {isMac ? '⌘⇧W' : 'Ctrl+Shift+W'} -

+ {isCreatingWorkflow ? ( +

Creating workflow...

+ ) : ( + + New workflow + )} From 4f705d7da80ea3ae37c123d5e899e0c79e8a19c5 Mon Sep 17 00:00:00 2001 From: waleed Date: Sat, 28 Mar 2026 13:46:38 -0700 Subject: [PATCH 4/6] fix(sidebar): change new workflow shortcut from Mod+Shift+W to Mod+Shift+P to avoid browser close-window conflict --- apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts | 2 +- .../workspace/[workspaceId]/w/components/sidebar/sidebar.tsx | 2 +- 2 files changed, 2 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 5866f4d48c4..8bdbeac2577 100644 --- a/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts +++ b/apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts @@ -56,7 +56,7 @@ export const COMMAND_DEFINITIONS: Record = { }, 'add-workflow': { id: 'add-workflow', - shortcut: 'Mod+Shift+W', + shortcut: 'Mod+Shift+P', allowInEditable: false, }, 'add-task': { 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 15efdac8236..d0e206291e3 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx @@ -1529,7 +1529,7 @@ export const Sidebar = memo(function Sidebar() { {isCreatingWorkflow ? (

Creating workflow...

) : ( - + New workflow )} From 3fad92b6b0045526953dd45f93b8d31cf6447025 Mon Sep 17 00:00:00 2001 From: waleed Date: Sat, 28 Mar 2026 13:56:09 -0700 Subject: [PATCH 5/6] fix(hotkeys): fall back to event.code for international keyboard layout compatibility --- .../providers/global-commands-provider.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/apps/sim/app/workspace/[workspaceId]/providers/global-commands-provider.tsx b/apps/sim/app/workspace/[workspaceId]/providers/global-commands-provider.tsx index f7bbcd00946..2d8747efb92 100644 --- a/apps/sim/app/workspace/[workspaceId]/providers/global-commands-provider.tsx +++ b/apps/sim/app/workspace/[workspaceId]/providers/global-commands-provider.tsx @@ -57,14 +57,26 @@ function parseShortcut(shortcut: string): ParsedShortcut { } } +/** + * Maps a KeyboardEvent.code value to the logical key name used in shortcut definitions. + * Needed for international keyboard layouts where e.key may produce unexpected characters + * (e.g. macOS Option+letter yields 'å' instead of 'a', dead keys yield 'Dead'). + */ +function codeToKey(code: string): string | undefined { + if (code.startsWith('Key')) return code.slice(3).toLowerCase() + if (code.startsWith('Digit')) return code.slice(5) + return undefined +} + function matchesShortcut(e: KeyboardEvent, parsed: ParsedShortcut): boolean { const isMac = isMacPlatform() const expectedCtrl = parsed.ctrl || (parsed.mod ? !isMac : false) const expectedMeta = parsed.meta || (parsed.mod ? isMac : false) const eventKey = e.key.length === 1 ? e.key.toLowerCase() : e.key + const keyMatches = eventKey === parsed.key || codeToKey(e.code) === parsed.key return ( - eventKey === parsed.key && + keyMatches && !!e.ctrlKey === !!expectedCtrl && !!e.metaKey === !!expectedMeta && !!e.shiftKey === !!parsed.shift && From ba0320633a78c8f7710dbf995fa631abd3b97b7d Mon Sep 17 00:00:00 2001 From: waleed Date: Sat, 28 Mar 2026 13:56:38 -0700 Subject: [PATCH 6/6] fix(sidebar): guard add-workflow shortcut with canEdit and isCreatingWorkflow checks --- .../app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx | 1 + 1 file changed, 1 insertion(+) 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 d0e206291e3..deac68e7c99 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx @@ -1169,6 +1169,7 @@ export const Sidebar = memo(function Sidebar() { { id: 'add-workflow', handler: () => { + if (!canEdit || isCreatingWorkflow) return handleCreateWorkflow() }, },