Skip to content

feat: CMD+F find-in-channel search#400

Merged
wesbillman merged 2 commits intomainfrom
wes/channel-search
Apr 24, 2026
Merged

feat: CMD+F find-in-channel search#400
wesbillman merged 2 commits intomainfrom
wes/channel-search

Conversation

@wesbillman
Copy link
Copy Markdown
Collaborator

Summary

  • Adds CMD+F (Ctrl+F) find-in-channel search with a find bar UI, match highlighting, and prev/next navigation
  • Two-tier search: instant client-side substring matching + debounced relay-backed Typesense query scoped to the channel via new channel_id filter
  • Highlights matches inline using a rehype plugin that wraps matches in <mark> elements with accent-colored background (bg-primary/20)
  • Keyboard navigation: Enter/Shift+Enter for next/prev, Escape to close

Key files (16 changed, 520 insertions)

  • ChannelFindBar.tsx — find bar UI (input, match counter, prev/next/close)
  • useChannelFind.ts — hook: state, two-tier matching, keyboard shortcut, channel-switch cleanup
  • rehypeSearchHighlight.ts — rehype plugin wrapping matches in <mark> during HAST phase
  • search.rs (relay) — channel_id filter with ACL validation
  • messages.rs / models.rs (Tauri) — pass channel_id through to relay
  • globals.css — reset native <mark> yellow background so accent color shows through

Test plan

  • Open any channel, press CMD+F — find bar appears
  • Type a query (≥2 chars) — matches highlight in accent color (not yellow)
  • Press Enter / Shift+Enter to navigate between matches
  • Press Escape to close and clear highlights
  • Switch channels — find state resets cleanly
  • Verify dark mode uses slightly stronger accent tint (bg-primary/30)

🤖 Generated with Claude Code

wesbillman and others added 2 commits April 24, 2026 12:02
Two-tier search: instant client-side substring matching against loaded
messages, supplemented by debounced Typesense relay search for stemmed/
fuzzy hits. Find bar with match counter, prev/next navigation, keyboard
shortcuts (Enter/Shift+Enter/Escape), auto-scroll to active match, and
inline text highlighting via a rehype plugin.

New files:
- ChannelFindBar.tsx — find bar UI component
- useChannelFind.ts — search state, two-tier matching, keyboard shortcut
- rehypeSearchHighlight.ts — rehype plugin for <mark> highlighting

Backend: added channel_id filter to relay search API, Tauri command,
and TypeScript types.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The browser default yellow background on <mark> elements was overriding
the Tailwind bg-primary/20 class set by the rehype search highlight plugin.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@wesbillman
Copy link
Copy Markdown
Collaborator Author

Screenshot 2026-04-24 at 12 04 06 PM

@wesbillman wesbillman enabled auto-merge (squash) April 24, 2026 19:09
@wesbillman wesbillman merged commit 480d78c into main Apr 24, 2026
13 checks passed
@wesbillman wesbillman deleted the wes/channel-search branch April 24, 2026 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant