fix(sidebar): cmd+click opens in new tab, shift+click for range select (#3846)

* fix(sidebar): cmd+click opens in new tab, shift+click for range select

* comment cleanup

* fix(sidebar): drop stale metaKey param from workflow and task selection hooks

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx

@@ -35,7 +35,7 @@ interface WorkflowItemProps {
   active: boolean
   level: number
   dragDisabled?: boolean
-  onWorkflowClick: (workflowId: string, shiftKey: boolean, metaKey: boolean) => void
+  onWorkflowClick: (workflowId: string, shiftKey: boolean) => void
   onDragStart?: () => void
   onDragEnd?: () => void
 }
@@ -368,13 +368,15 @@ export function WorkflowItem({
         return
       }
 
-      const isModifierClick = e.shiftKey || e.metaKey || e.ctrlKey
+      if (e.metaKey || e.ctrlKey) {
+        return
+      }
 
-      if (isModifierClick) {
+      if (e.shiftKey) {
         e.preventDefault()
       }
 
-      onWorkflowClick(workflow.id, e.shiftKey, e.metaKey || e.ctrlKey)
+      onWorkflowClick(workflow.id, e.shiftKey)
     },
     [shouldPreventClickRef, workflow.id, onWorkflowClick, isEditing]
   )

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-task-selection.ts

@@ -9,25 +9,24 @@ interface UseTaskSelectionProps {
 }
 
 /**
- * Hook for managing task selection with support for single, range, and toggle selection.
- * Handles shift-click for range selection and cmd/ctrl-click for toggle.
+ * Hook for managing task selection with support for single and range selection.
+ * Handles shift-click for range selection.
+ * cmd/ctrl+click is handled by the browser (opens in new tab) and never reaches this handler.
  * Uses the last selected task as the anchor point for range selections.
  * Selecting tasks clears workflow/folder selections and vice versa.
  */
 export function useTaskSelection({ taskIds }: UseTaskSelectionProps) {
   const selectedTasks = useFolderStore((s) => s.selectedTasks)
 
   const handleTaskClick = useCallback(
-    (taskId: string, shiftKey: boolean, metaKey: boolean) => {
+    (taskId: string, shiftKey: boolean) => {
       const {
         selectTaskOnly,
         selectTaskRange,
         toggleTaskSelection,
         lastSelectedTaskId: anchor,
       } = useFolderStore.getState()
-      if (metaKey) {
-        toggleTaskSelection(taskId)
-      } else if (shiftKey && anchor && anchor !== taskId) {
+      if (shiftKey && anchor && anchor !== taskId) {
         selectTaskRange(taskIds, anchor, taskId)
       } else if (shiftKey) {
         toggleTaskSelection(taskId)

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-selection.ts

@@ -60,18 +60,15 @@ export function useWorkflowSelection({
   }, [workflowAncestorFolderIds])
 
   /**
-   * Handle workflow click with support for shift-click range selection and cmd/ctrl-click toggle.
+   * Handle workflow click with support for shift-click range selection.
+   * cmd/ctrl+click is handled by the browser (opens in new tab) and never reaches this handler.
    *
    * @param workflowId - ID of clicked workflow
    * @param shiftKey - Whether shift key was pressed
-   * @param metaKey - Whether cmd (Mac) or ctrl (Windows) key was pressed
    */
   const handleWorkflowClick = useCallback(
-    (workflowId: string, shiftKey: boolean, metaKey: boolean) => {
-      if (metaKey) {
-        toggleWorkflowSelection(workflowId)
-        deselectConflictingFolders()
-      } else if (shiftKey && activeWorkflowId && activeWorkflowId !== workflowId) {
+    (workflowId: string, shiftKey: boolean) => {
+      if (shiftKey && activeWorkflowId && activeWorkflowId !== workflowId) {
         selectRange(workflowIds, activeWorkflowId, workflowId)
         deselectConflictingFolders()
       } else if (shiftKey) {

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

@@ -151,7 +151,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
   isUnread: boolean
   isMenuOpen: boolean
   showCollapsedTooltips: boolean
-  onMultiSelectClick: (taskId: string, shiftKey: boolean, metaKey: boolean) => void
+  onMultiSelectClick: (taskId: string, shiftKey: boolean) => void
   onContextMenu: (e: React.MouseEvent, taskId: string) => void
   onMorePointerDown: () => void
   onMoreClick: (e: React.MouseEvent<HTMLButtonElement>, taskId: string) => void
@@ -167,9 +167,10 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
         )}
         onClick={(e) => {
           if (task.id === 'new') return
-          if (e.shiftKey || e.metaKey || e.ctrlKey) {
+          if (e.metaKey || e.ctrlKey) return
+          if (e.shiftKey) {
             e.preventDefault()
-            onMultiSelectClick(task.id, e.shiftKey, e.metaKey || e.ctrlKey)
+            onMultiSelectClick(task.id, true)
           } else {
             useFolderStore.setState({
               selectedTasks: new Set<string>(),
@@ -1058,8 +1059,6 @@ export const Sidebar = memo(function Sidebar() {
     [handleCreateWorkflow]
   )
 
-  const noop = useCallback(() => {}, [])
-
   const handleExpandSidebar = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault()