improvement(search): align cmd+k action icons + highlight with the design system (#5114)

* improvement(search): align cmd+k action icons + highlight with the design system

- Each Actions verb now uses the exact icon from its real location: Fit to view
  -> Scan (workflow-controls), Copy workflow link -> Duplicate (nav context menu),
  Invite teammates -> User (settings teammates nav). Run/Create/Import already matched.
- Remove the Toggle theme action and its now-dead useTheme wiring.
- Matched-text highlight now uses the design-system search tokens
  (--highlight-match-bg / --highlight-match-text), matching the SearchHighlight
  component used in knowledge-base and code search, instead of an ad-hoc font-semibold.

* improvement(search): use font-medium for matched-text emphasis in cmd+k

Drop the colored background highlight in favor of the design system's standard
emphasis weight (font-medium, used by Button/Label/Input/Table). Lighter than
the previous semibold and avoids a background, keeping the palette's clean,
undecorated text style.
This commit is contained in:
Waleed
2026-06-17 11:52:57 -07:00
committed by GitHub
parent 9e9f2b9e1f
commit d7fd0405f9
2 changed files with 9 additions and 21 deletions
@@ -42,7 +42,7 @@ export const HighlightedText = memo(
<>
{buildSegments(text, positions).map((segment, index) =>
segment.hit ? (
<span key={index} className='font-semibold text-[var(--text-body)]'>
<span key={index} className='font-medium'>
{segment.text}
</span>
) : (
@@ -3,28 +3,26 @@
import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
import { createLogger } from '@sim/logger'
import { Command } from 'cmdk'
import { Scan } from 'lucide-react'
import { useParams, useRouter } from 'next/navigation'
import { useTheme } from 'next-themes'
import { usePostHog } from 'posthog-js/react'
import { createPortal } from 'react-dom'
import { Library } from '@/components/emcn'
import {
Calendar,
Database,
Expand,
Duplicate,
File,
FolderPlus,
HelpCircle,
Home,
Integration,
Link,
Palette,
Play,
Plus,
Settings,
Table,
Upload,
Users,
User,
} from '@/components/emcn/icons'
import { Search } from '@/components/emcn/icons/search'
import { cn } from '@/lib/core/utils/cn'
@@ -102,7 +100,6 @@ export function SearchModal({
const [mounted, setMounted] = useState(false)
const { navigateToSettings } = useSettingsNavigation()
const { config: permissionConfig } = usePermissionConfig()
const { resolvedTheme, setTheme } = useTheme()
const invokeCommand = useInvokeGlobalCommand()
const posthog = usePostHog()
@@ -201,7 +198,8 @@ export function SearchModal({
/**
* Verbs the palette can run directly. Entity navigation lives in the groups
* below; this list is for "do something" intents (create, import, toggle).
* below; this list is for "do something" intents (run, create, import, copy,
* invite).
*/
const actions = useMemo((): ActionItem[] => {
const list: ActionItem[] = []
@@ -248,7 +246,7 @@ export function SearchModal({
id: 'fit-to-view',
name: 'Fit workflow to view',
keywords: 'zoom center recenter canvas reset',
icon: Expand,
icon: Scan,
shortcut: '⌘⇧F',
context: 'workflow',
run: () => invokeCommand('fit-to-view'),
@@ -257,7 +255,7 @@ export function SearchModal({
id: 'copy-workflow-url',
name: 'Copy workflow link',
keywords: 'url share clipboard',
icon: Link,
icon: Duplicate,
context: 'workflow',
run: () => {
navigator.clipboard.writeText(window.location.href).catch((error) => {
@@ -269,18 +267,10 @@ export function SearchModal({
id: 'invite-teammates',
name: 'Invite teammates',
keywords: 'members people add user organization',
icon: Users,
icon: User,
context: 'global',
run: () => navigateToSettings({ section: 'teammates' }),
})
list.push({
id: 'toggle-theme',
name: 'Toggle theme',
keywords: 'dark light mode appearance color',
icon: Palette,
context: 'global',
run: () => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'),
})
return list
}, [
canEdit,
@@ -289,8 +279,6 @@ export function SearchModal({
onImportWorkflow,
invokeCommand,
navigateToSettings,
resolvedTheme,
setTheme,
])
const [search, setSearch] = useState('')