improvement(menus): tighten dropdown spacing and cap the @ mention list (#6972)

Menu rows composed their own gap (8px) instead of the platform's
chipContentGap (6px), so a menu row and the chip it opens over spaced
their icon/label pairs differently. Surface padding was 6px against an
8px row radius and a 12px surface radius, so a first or last row's
rounding cut across the corner it sat in; 4px makes them concentric.
Separators carried a 13px gutter against a 0px gap between rows in the
same group, which read as the groups floating apart.

DropdownMenuLabel padded to an uncontrolled, font-dependent height and
sat two type steps below its rows in a colour heavier than them; it now
composes the shared row height at one step down in --text-muted.

The @ mention list showed every integration. The per-family preview cap
defaulted to uncapped, and integrations are 300+ near-identical rows
sorted first, so the unfiltered list was the whole catalogue and no
other family was reachable without scrolling past all of it. Capping is
now the default, families are labelled, the menu is capped shorter than
the action-menu default since it floats over the chat input, and the
integrations shown are curated popular ones rather than whatever sorts
first alphabetically.

Both hand-rolled menus that render plain buttons for Radix focus
reasons now compose the exported dropdownMenuRowClass instead of
re-deriving row chrome.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx

@@ -41,7 +41,7 @@ import type {
   MothershipResourceType,
 } from '@/app/workspace/[workspaceId]/home/types'
 import { formatDate } from '@/app/workspace/[workspaceId]/logs/utils'
-import { listIntegrations } from '@/blocks/integration-matcher'
+import { listIntegrationsByPopularity } from '@/blocks/integration-matcher'
 import { useFolders } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useLogsList } from '@/hooks/queries/logs'
@@ -255,7 +255,7 @@ export function useAvailableResources(
       },
       {
         type: 'integration' as const,
-        items: listIntegrations().map((integration) => ({
+        items: listIntegrationsByPopularity().map((integration) => ({
           id: integration.blockType,
           name: integration.name,
           iconComponent: integration.icon,

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx

@@ -163,7 +163,7 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
           )}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end' sideOffset={5} className='w-[320px] p-1'>
+      <DropdownMenuContent align='end' sideOffset={5} className='w-[320px]'>
         <DropdownMenuLabel>Downloads</DropdownMenuLabel>
         {downloads.map((download) => {
           const completed = download.state === 'completed'

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts

@@ -3,6 +3,7 @@ export {
   byResourceMenuOrder,
   getResourceConfig,
   invalidateResourceQueries,
+  MENTION_PREVIEW_DEFAULT_LIMIT,
   RESOURCE_MENU_ORDER,
   RESOURCE_REGISTRY,
 } from './resource-registry'

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx

@@ -42,9 +42,10 @@ export interface ResourceTypeConfig {
   renderTabIcon: (resource: MothershipResource, className: string) => ReactNode
   renderDropdownItem: (props: DropdownItemRenderProps) => ReactNode
   /**
-   * How many of this family's candidates an unfiltered `@` list shows.
-   * Uncapped by default; set it for a family whose near-identical rows would
-   * otherwise bury every other family.
+   * How many of this family's candidates an unfiltered `@` list shows, overriding
+   * {@link MENTION_PREVIEW_DEFAULT_LIMIT}. Raise it only for a family whose rows a
+   * user browses; the unfiltered list is a preview, not a browser, and typing a
+   * query lifts the cap entirely — see `buildMentionPreview`.
    */
   mentionPreviewLimit?: number
 }
@@ -218,7 +219,6 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
       <Library className={cn(className, 'text-[var(--text-icon)]')} />
     ),
     renderDropdownItem: (props) => <LogDropdownItem {...props} />,
-    mentionPreviewLimit: 5,
   },
   integration: {
     type: 'integration',
@@ -249,6 +249,13 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
   },
 } as const
 
+/**
+ * Rows per family in the unfiltered `@` preview, unless the family overrides it
+ * with {@link ResourceTypeConfig.mentionPreviewLimit}. Enough to show what a family
+ * holds without any one of them crowding out the rest.
+ */
+export const MENTION_PREVIEW_DEFAULT_LIMIT = 5
+
 /**
  * Top-down order for every menu that lists resource families, mirroring the
  * workspace sidebar so a user reads the same sequence in both places. The two
@@ -324,7 +331,7 @@ const RESOURCE_INVALIDATORS: Record<
   },
   /**
    * Integrations are sourced from the static integration catalog
-   * (`listIntegrations()`), not a server-backed query, so there is nothing to
+   * (`listIntegrationsByPopularity()`), not a server-backed query, so there is nothing to
    * invalidate when one is added.
    */
   integration: () => {},

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.tsx

@@ -5,18 +5,24 @@ import {
   cn,
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuLabel,
   DropdownMenuSearchInput,
   DropdownMenuTrigger,
+  dropdownMenuRowClass,
 } from '@sim/emcn'
 import {
   ResourceMenuSections,
   resourceFromItem,
   useAvailableResources,
   useResourceTreeSections,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
-import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
+import {
+  getResourceConfig,
+  MENTION_PREVIEW_DEFAULT_LIMIT,
+} from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
 import type { PlusMenuHandle } from '@/app/workspace/[workspaceId]/home/components/user-input/components/constants'
 import {
+  buildMentionPreview,
   resourceMentionMatches,
   withDesktopTabMentions,
 } from '@/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/resource-mention-items'
@@ -27,6 +33,14 @@ import type {
 import { useBrowserSessionStore } from '@/stores/browser-session/store'
 import { useCopilotTerminalStore } from '@/stores/copilot-terminal/store'
 
+/**
+ * The `@` list is shorter than the emcn menu default (420px, sized for right-click
+ * action menus). This one floats directly over the chat input, so a menu tall enough
+ * to swallow the conversation behind it reads as a takeover rather than an
+ * autocomplete. ~10 rows is enough to show several families at once.
+ */
+const MENTION_MAX_HEIGHT_CLASS = 'max-h-[min(280px,var(--radix-popper-available-height,280px))]'
+
 /**
  * Resource types that are only offered via `@`-mention autocomplete and hidden
  * from the `+` browse menu. Integrations are searchable inline (e.g. typing
@@ -130,11 +144,10 @@ export const PlusMenuDropdown = React.memo(
       const q = rawQuery.toLowerCase().trim()
       if (!isMention && !q) return null
       if (isMention && !q) {
-        return visibleResources.flatMap(({ type, items }) => {
-          const limit = getResourceConfig(type).mentionPreviewLimit
-          const previewed = limit === undefined ? items : items.slice(0, limit)
-          return previewed.map((item) => ({ type, item }))
-        })
+        return buildMentionPreview(
+          visibleResources,
+          (type) => getResourceConfig(type).mentionPreviewLimit ?? MENTION_PREVIEW_DEFAULT_LIMIT
+        )
       }
       return visibleResources.flatMap(({ type, items }) =>
         items.filter((item) => resourceMentionMatches(item, q)).map((item) => ({ type, item }))
@@ -298,7 +311,7 @@ export const PlusMenuDropdown = React.memo(
             // Plus-click shows short fixed labels (Workflows, Tables, …) — let it size
             // to its content via the emcn DropdownMenuContent default max-w.
             // Mention mode renders resource names directly, so widen for breathing room.
-            isMention && 'max-w-[min(300px,calc(100vw-32px))]'
+            isMention && `max-w-[min(300px,calc(100vw-32px))] ${MENTION_MAX_HEIGHT_CLASS}`
           )}
           onCloseAutoFocus={handleCloseAutoFocus}
           onOpenAutoFocus={handleOpenAutoFocus}
@@ -334,28 +347,36 @@ export const PlusMenuDropdown = React.memo(
                 filteredItems.map(({ type, item }, index) => {
                   const config = getResourceConfig(type)
                   const isActive = index === activeIndex
+                  /* Items arrive grouped by family (one group per type, ordered by
+                     RESOURCE_MENU_ORDER), so a type change marks a section boundary.
+                     Deriving the heading from the flat list keeps `activeIndex` — and
+                     therefore every keyboard path — indexing exactly what it did. */
+                  const startsSection = index === 0 || filteredItems[index - 1]?.type !== type
                   return (
-                    <button
-                      key={`${type}:${item.id}`}
-                      type='button'
-                      role='menuitem'
-                      data-filtered-idx={index}
-                      onMouseEnter={() => setActiveIndex(index)}
-                      onClick={() => {
-                        handleSelect(resourceFromItem(type, item))
-                      }}
-                      className={cn(
-                        'relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-left text-[var(--text-body)] text-caption outline-none transition-colors duration-0 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
-                        /* `activeIndex` is the cursor, not a selection — hover surface. */
-                        isActive && 'bg-[var(--surface-hover)]'
-                      )}
-                    >
-                      {config.renderDropdownItem({ item })}
-                    </button>
+                    <React.Fragment key={`${type}:${item.id}`}>
+                      {startsSection && <DropdownMenuLabel>{config.label}</DropdownMenuLabel>}
+                      <button
+                        type='button'
+                        role='menuitem'
+                        data-filtered-idx={index}
+                        onMouseEnter={() => setActiveIndex(index)}
+                        onClick={() => {
+                          handleSelect(resourceFromItem(type, item))
+                        }}
+                        className={cn(
+                          dropdownMenuRowClass,
+                          'w-full text-left',
+                          /* `activeIndex` is the cursor, not a selection — hover surface. */
+                          isActive && 'bg-[var(--surface-hover)]'
+                        )}
+                      >
+                        {config.renderDropdownItem({ item })}
+                      </button>
+                    </React.Fragment>
                   )
                 })
               ) : (
-                <div className='px-2 py-1.5 text-center text-[var(--text-tertiary)] text-caption'>
+                <div className='flex h-[28px] items-center justify-center px-2 text-[var(--text-muted)] text-caption'>
                   No results
                 </div>
               ))}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/resource-mention-items.test.ts

@@ -3,7 +3,9 @@ import {
   BROWSER_SESSION_RESOURCE_ID,
   TERMINAL_SESSION_RESOURCE_ID,
 } from '@/lib/copilot/resources/types'
+import type { AvailableItem } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/resource-folder-tree'
 import {
+  buildMentionPreview,
   resourceMentionMatches,
   withDesktopTabMentions,
 } from '@/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/resource-mention-items'
@@ -106,3 +108,53 @@ describe('withDesktopTabMentions', () => {
     expect(resourceMentionMatches(tab, 'terminal')).toBe(false)
   })
 })
+
+describe('buildMentionPreview', () => {
+  const item = (id: string): AvailableItem => ({ id, name: id })
+  const many = (n: number) => Array.from({ length: n }, (_, i) => item(`i${i}`))
+
+  it('caps each family so a large one cannot bury the families after it', () => {
+    const preview = buildMentionPreview(
+      [
+        { type: 'integration', items: many(300) },
+        { type: 'workflow', items: [item('thermal-field')] },
+      ],
+      () => 5
+    )
+
+    expect(preview.filter((c) => c.type === 'integration')).toHaveLength(5)
+    expect(preview.map((c) => c.item.id)).toContain('thermal-field')
+  })
+
+  it('lets a family raise its own cap', () => {
+    const preview = buildMentionPreview(
+      [
+        { type: 'integration', items: many(10) },
+        { type: 'workflow', items: many(10) },
+      ],
+      (type) => (type === 'workflow' ? 2 : 5)
+    )
+
+    expect(preview.filter((c) => c.type === 'integration')).toHaveLength(5)
+    expect(preview.filter((c) => c.type === 'workflow')).toHaveLength(2)
+  })
+
+  it('keeps families in the order they were given, so headings stay contiguous', () => {
+    const preview = buildMentionPreview(
+      [
+        { type: 'integration', items: many(3) },
+        { type: 'workflow', items: many(3) },
+      ],
+      () => 5
+    )
+
+    const boundaries = preview.filter((c, i) => i > 0 && preview[i - 1].type !== c.type)
+    expect(boundaries).toHaveLength(1)
+    expect(preview.at(-1)?.type).toBe('workflow')
+  })
+
+  it('keeps a family shorter than the cap intact', () => {
+    const preview = buildMentionPreview([{ type: 'workflow', items: many(2) }], () => 5)
+    expect(preview).toHaveLength(2)
+  })
+})

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/resource-mention-items.ts

@@ -92,3 +92,30 @@ export function withDesktopTabMentions(
     return group
   })
 }
+
+/** One row of the `@` list: an item plus the family it came from. */
+export interface ResourceMentionCandidate {
+  type: MothershipResourceType
+  item: AvailableItem
+}
+
+/**
+ * The rows an `@` list shows for an EMPTY query — a preview of what is mentionable,
+ * capped per family so no one family can bury the rest.
+ *
+ * `integration` carries 300+ near-identical rows and sorts FIRST, so while the cap
+ * defaulted to "uncapped" the preview was its entire catalog and no other family was
+ * reachable without scrolling past all of it. Capping is therefore the default and a
+ * family opts out by raising its own limit, not by omitting one.
+ *
+ * Only the empty-query preview is capped; {@link resourceMentionMatches} searches
+ * every family in full once the user types.
+ */
+export function buildMentionPreview(
+  groups: readonly ResourceMentionGroup[],
+  limitFor: (type: MothershipResourceType) => number
+): ResourceMentionCandidate[] {
+  return groups.flatMap(({ type, items }) =>
+    items.slice(0, limitFor(type)).map((item) => ({ type, item }))
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/skills-menu-dropdown/skills-menu-dropdown.tsx

@@ -1,7 +1,13 @@
 'use client'
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@sim/emcn'
+import {
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  dropdownMenuRowClass,
+} from '@sim/emcn'
 import { AgentSkillsIcon, McpIcon } from '@/components/icons'
 import type { McpServer } from '@/hooks/queries/mcp'
 import type { SkillDefinition } from '@/hooks/queries/skills'
@@ -210,7 +216,8 @@ export const SkillsMenuDropdown = React.memo(
                     onMouseEnter={() => setActiveIndex(index)}
                     onClick={() => handleSelect(target)}
                     className={cn(
-                      'relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-left text-[var(--text-body)] text-caption outline-none transition-colors duration-0 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
+                      dropdownMenuRowClass,
+                      'w-full text-left',
                       /* `activeIndex` is the cursor, not a selection — hover surface. */
                       isActive && 'bg-[var(--surface-hover)]'
                     )}
@@ -221,7 +228,7 @@ export const SkillsMenuDropdown = React.memo(
                 )
               })
             ) : (
-              <div className='px-2 py-1.5 text-center text-[var(--text-tertiary)] text-caption'>
+              <div className='flex h-[28px] items-center justify-center px-2 text-[var(--text-muted)] text-caption'>
                 No skills or MCP servers
               </div>
             )}

apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx

@@ -79,7 +79,7 @@ export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuP
           </span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end' className='min-w-[320px] max-w-[420px] gap-0 p-1'>
+      <DropdownMenuContent align='end' className='min-w-[320px] max-w-[420px]'>
         {imports.map((row) => {
           const stage = getImportStage(row)
           const isReadyExport = row.jobType === 'export' && row.phase === 'ready' && row.hasResult