mirror of
https://github.com/simstudioai/sim.git
synced 2026-09-24 15:45:35 +08:00
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:
+1
-1
@@ -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>
|
||||
) : (
|
||||
|
||||
+8
-20
@@ -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('')
|
||||
|
||||
Reference in New Issue
Block a user