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

[scriptease]

I don't know maybe it it too many colors.

Summary by CodeRabbit

Release Notes

• New Features
  • Enhanced slash-command autocomplete with dynamic theme-aware styling. Matched and unmatched characters now display contextually based on selection state and the active theme's accent color. Font weights and opacity levels adjust accordingly, providing improved visual distinction during command navigation and selection.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4330bd6e-30c8-4faa-b229-50e9fe88417a

📥 Commits

Reviewing files that changed from the base of the PR and between 4d39166 and 52f05bd.

📒 Files selected for processing (3)

• src/renderer/components/InputArea.tsx
• src/renderer/utils/search.ts
• src/web/mobile/SlashCommandAutocomplete.tsx

---

📝 Walkthrough

Walkthrough

The changes enhance slash-command autocomplete highlighting by passing the theme accent color and selection state to the highlightSlashCommand function, enabling dynamic styling of matched characters based on whether the item is currently selected in the autocomplete menu.

Changes

Cohort / File(s)	Summary
Slash-Command Autocomplete Callsites src/renderer/components/InputArea.tsx, src/web/mobile/SlashCommandAutocomplete.tsx	Updated highlightSlashCommand calls to pass two additional arguments: theme accent color and a boolean flag indicating whether the current item is selected.
Highlighting Logic src/renderer/utils/search.ts	Modified highlightSlashCommand to accept optional accentColor and isSelected parameters. Matched characters now use conditional styling: higher weight (800) with inherited color when selected, or weight 600 with accent color otherwise. Unmatched characters receive dimming (0.6 opacity) only when selected, removing the previous fixed dimming.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat: Add fuzzy search for slash commands #685: Directly related as it also modifies the highlightSlashCommand function signature and its callsites within the slash-command autocomplete flow.

Poem

🐰 With accent hues and selected states,
The slash commands now highlight with grace,
Matched letters bold, unmatched fade away,
Selection's glow makes choices clear today! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adjusting slash command fuzzy matching styles to align with a new settings search pattern.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pedramamini]

Thanks for the contribution @scriptease! 🎯

This looks good — the changes are clean, focused, and consistent across both desktop and mobile. Using the accent color for matched characters and dimming unmatched ones on selection is a nice touch that brings visual consistency with the settings search.

Re: "maybe it is too many colors" — I think it's fine. The accent color is only applied to matched characters in the non-selected state, and on selection it falls back to font weight differentiation with opacity dimming. That's restrained and purposeful, not noisy.

LGTM — approving!

[greptile-apps]

Greptile Summary

Adds fuzzy match character highlighting to the slash command autocomplete in both desktop (InputArea.tsx) and mobile (SlashCommandAutocomplete.tsx), mirroring the style already used in Settings search. Two new helpers — fuzzyMatchWithIndices (boundary-preferring subsequence position finder) and highlightSlashCommand (accent-colored span renderer) — are added to the shared search.ts utility and wired into both UIs.

Confidence Score: 5/5

Safe to merge — purely additive visual enhancement with no logic, data-flow, or API changes.

All findings are P2 (minor style/readability). No correctness, security, or data-integrity issues were found. The two new algorithms (fuzzyMatchWithIndices and highlightSlashCommand) are consistent with each other and with the existing fuzzyMatchWithScore filter.

No files require special attention.

Important Files Changed

Filename	Overview
src/renderer/utils/search.ts	Adds fuzzyMatchWithIndices and highlightSlashCommand; logic is correct and consistent with the existing fuzzyMatchWithScore used for filtering.
src/renderer/components/InputArea.tsx	Imports and calls highlightSlashCommand with theme.colors.accent and the isSelected flag; existing selection styling (bgMain text on accent background) remains intact.
src/web/mobile/SlashCommandAutocomplete.tsx	Mobile autocomplete adopts the shared highlightSlashCommand helper; query is re-normalised inline in the render instead of reusing the useMemo value.

Sequence Diagram

sequenceDiagram
    participant User
    participant InputArea
    participant search.ts
    participant React

    User->>InputArea: types /cmd
    InputArea->>search.ts: filterSlashCommands(cmds, query, isTerminal)
    Note over search.ts: fuzzyMatchWithScore per command
    search.ts-->>InputArea: filtered + sorted commands
    loop each matching command
        InputArea->>search.ts: highlightSlashCommand(cmd, query, accentColor, isSelected)
        search.ts->>search.ts: fuzzyMatchWithIndices(cmd.slice(1), query)
        search.ts-->>InputArea: React.ReactNode (accent spans for matched chars)
    end
    InputArea->>React: render dropdown with highlighted commands

Loading

Comments Outside Diff (2)

1. src/renderer/utils/search.ts, line 229-254 (link)

   Silent highlight fallback when indices are empty

   When query is non-empty but fuzzyMatchWithIndices returns [], highlightSlashCommand silently falls back to returning the plain command string with no highlights — even though the caller already confirmed the command matches. In practice the two algorithms agree, but the fallback path is invisible to the caller and could confuse future debugging if the algorithms ever diverge. A small comment explaining the intentional fallback would help.

   _{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

2. src/web/mobile/SlashCommandAutocomplete.tsx, line 290-297 (link)

   Query normalisation duplicated in render

   The query string (inputValue.toLowerCase().replace(/^\//, '')) is already computed in the useMemo on line 99, but it is re-derived inline here during render. Extracting it from the memo or passing it down avoids the redundant computation on every render cycle.

_{Reviews (1): Last reviewed commit: "idea: Adjust slash command fuzzy style t..." | Re-trigger Greptile}

[scriptease]

Yay 🎉 I love colors!