fix(chats): preserve selection for modified and overlay clicks

Author: waleedlatif1

apps/sim/app/o/[organizationId]/components/organization-sidebar/organization-sidebar.tsx

@@ -37,6 +37,7 @@ import {
   SIDEBAR_SECTION_GAP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { useSidebarResize } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import { isSidebarBackgroundClick } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import { useContextMenu } from '@/hooks/use-context-menu'
 import { useFolderStore } from '@/stores/folders/store'
 import { useSidebarStore } from '@/stores/sidebar/store'
@@ -146,9 +147,7 @@ export const OrganizationSidebar = memo(function OrganizationSidebar() {
   }
 
   const handleSidebarClick = (event: React.MouseEvent<HTMLElement>) => {
-    if (event.target instanceof Element && event.target.closest('button, [role="button"], a')) {
-      return
-    }
+    if (!isSidebarBackgroundClick(event)) return
     useFolderStore.getState().clearChatSelection()
   }
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/chat-navigation-link/chat-navigation-link.tsx

@@ -138,7 +138,13 @@ function IntentAwareChatNavigationLink({
       onTouchStart={onTouchStart}
       onClick={(event) => {
         onClick?.(event)
-        if (!event.defaultPrevented && !event.metaKey && !event.ctrlKey && onSelectChat) {
+        if (
+          !event.defaultPrevented &&
+          !event.metaKey &&
+          !event.ctrlKey &&
+          !event.altKey &&
+          onSelectChat
+        ) {
           if (event.shiftKey) event.preventDefault()
           onSelectChat(chatId, event.shiftKey)
         }

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

@@ -115,6 +115,7 @@ import {
   compareByOrder,
   createSidebarDragGhost,
   groupWorkflowsByFolder,
+  isSidebarBackgroundClick,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import { useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
@@ -1101,10 +1102,7 @@ export const Sidebar = memo(function Sidebar({ organizationHref }: SidebarProps)
   )
 
   const handleSidebarClick = (e: React.MouseEvent<HTMLElement>) => {
-    const target = e.target as HTMLElement
-    if (target.tagName === 'BUTTON' || target.closest('button, [role="button"], a')) {
-      return
-    }
+    if (!isSidebarBackgroundClick(e)) return
     const { selectOnly, clearAllSelection } = useFolderStore.getState()
     workflowId ? selectOnly(workflowId) : clearAllSelection()
   }

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

@@ -1,9 +1,19 @@
+import type { MouseEvent } from 'react'
 import type { MothershipResource } from '@/lib/mothership/resource-types'
 import { getFolderMap } from '@/hooks/queries/utils/folder-cache'
 import { getWorkflows } from '@/hooks/queries/utils/workflow-cache'
 import type { FolderTreeNode } from '@/stores/folders/types'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
+/** Distinguishes sidebar background clicks from controls and portaled overlays. */
+export function isSidebarBackgroundClick(event: MouseEvent<HTMLElement>): boolean {
+  return (
+    event.target instanceof Element &&
+    event.currentTarget.contains(event.target) &&
+    !event.target.closest('button, [role="button"], a')
+  )
+}
+
 /**
  * Builds a `MothershipResource` array from a sidebar drag selection so it can
  * be set as `application/x-sim-resources` drag data and dropped into the chat.