idea: Adjust slash command fuzzy style to match the new settings search

src/renderer/components/InputArea.tsx

@@ -584,7 +584,12 @@ export const InputArea = React.memo(function InputArea(props: InputAreaProps) {
 								onMouseEnter={() => setSelectedSlashCommandIndex(idx)}
 							>
 								<div className="font-mono text-sm">
-									{highlightSlashCommand(cmd.command, inputValueLower.replace(/^\//, ''))}
+									{highlightSlashCommand(
+										cmd.command,
+										inputValueLower.replace(/^\//, ''),
+										theme.colors.accent,
+										idx === safeSelectedIndex
+									)}
 								</div>
 								<div className="text-xs opacity-70 mt-0.5">{cmd.description}</div>
 							</button>

src/renderer/utils/search.ts

@@ -221,9 +221,17 @@ export const filterSlashCommands = <T extends SlashCommandLike>(
 
 /**
  * Render a slash command with fuzzy-matched characters highlighted.
- * Returns a React node: plain string when no query, spans with bold/dim otherwise.
+ * Matched characters use accent color + semibold (matching Settings search style).
+ * When selected, unmatched characters are dimmed so matches stand out on the
+ * accent background.
+ * Returns a React node: plain string when no query, spans otherwise.
  */
-export const highlightSlashCommand = (command: string, query: string): React.ReactNode => {
+export const highlightSlashCommand = (
+	command: string,
+	query: string,
+	accentColor?: string,
+	isSelected?: boolean
+): React.ReactNode => {
 	if (!query) return command;
 	const indices = new Set(
 		fuzzyMatchWithIndices(command.slice(1).toLowerCase(), query, '.').map((i) => i + 1)
@@ -234,7 +242,11 @@ export const highlightSlashCommand = (command: string, query: string): React.Rea
 			'span',
 			{
 				key: i,
-				style: indices.has(i) ? { fontWeight: 700 } : { opacity: 0.8 },
+				style: indices.has(i)
+					? { color: isSelected ? undefined : accentColor, fontWeight: isSelected ? 800 : 600 }
+					: isSelected
+						? { opacity: 0.6 }
+						: undefined,
 			},
 			ch
 		)

src/web/mobile/SlashCommandAutocomplete.tsx

@@ -291,7 +291,9 @@ export function SlashCommandAutocomplete({
 								cmd.command,
 								inputValue && inputValue.startsWith('/')
 									? (inputValue || '').toLowerCase().replace(/^\//, '')
-									: ''
+									: '',
+								colors.accent,
+								isSelected
 							)}
 						</div>
 						{/* Command description */}