SearchPalette.tsx

src/components/SearchPalette.tsx

1. import { useEffect, useRef, useState } from 'react'
3. import type { SearchHit } from '../ipc/gen/SearchHit'
4. import { relativeDay, snippetParts } from '../lib/format'
5. import { useStore } from '../state/store'
7. export function SearchPalette() {
8. const [q, setQ] = useState('')
9. const [hits, setHits] = useState<SearchHit[]>([])
10. const [cursor, setCursor] = useState(0)
11. const client = useStore((s) => s.client)
12. const open = useStore((s) => s.open)
13. const setPanel = useStore((s) => s.setPanel)
14. const input = useRef<HTMLInputElement>(null)
15. useEffect(() => input.current?.focus(), [])
16. useEffect(() => {
17. if (!client) return
18. const t = setTimeout(
19. () =>
20. void client.search(q).then((h) => {
21. setHits(h)
22. setCursor(0)
23. }),
24. 120,
25. )
26. return () => clearTimeout(t)
27. }, [q, client])
29. return (
30. <div className="overlay" onMouseDown={(e) => e.target === e.currentTarget && setPanel(null)}>
31. <div
32. className="palette glass-strong"
33. role="dialog"
34. aria-label="Search chats"
35. onKeyDown={(e) => {
36. if (e.key === 'ArrowDown') {
37. e.preventDefault()
38. setCursor((c) => Math.min(c + 1, hits.length - 1))
39. }
40. if (e.key === 'ArrowUp') {
41. e.preventDefault()
42. setCursor((c) => Math.max(c - 1, 0))
43. }
44. if (e.key === 'Enter' && hits[cursor]) void open(hits[cursor].conversation_id)
45. }}
46. >
47. <input
48. ref={input}
49. className="search-input big"
50. placeholder="Search every chat"
51. value={q}
52. onChange={(e) => setQ(e.target.value)}
53. aria-label="Search every chat"
54. data-testid="search-input"
55. />
56. <ul className="hits" role="listbox">
57. {hits.map((h, i) => (
58. <li
59. key={`${h.conversation_id}-${h.message_id ?? 't'}`}
60. role="option"
61. aria-selected={i === cursor}
62. className={i === cursor ? 'cursor' : ''}
63. onMouseEnter={() => setCursor(i)}
64. onClick={() => void open(h.conversation_id)}
65. >
66. <div className="hit-head">
67. <strong>{h.title}</strong>
68. <span className="muted small">{relativeDay(h.created_at)}</span>
69. </div>
70. <div className="hit-snippet">
71. {snippetParts(h.snippet).map((p, j) =>
72. p.hit ? <mark key={j}>{p.text}</mark> : <span key={j}>{p.text}</span>,
73. )}
74. </div>
75. </li>
76. ))}
77. {q.trim() && hits.length === 0 && <li className="empty-row">Nothing found.</li>}
78. </ul>
79. </div>
80. </div>
81. )
82. }