fixed search issue

src/SearchPage.tsx

@@ -5,6 +5,7 @@ import { allRedLetter, loadRedLetter } from './redletter'
 import TopBar from './TopBar'
 
 const RED_LETTER_CODE = /^jesusredletter$/i
+const INITIAL_RESULTS = 50
 
 function highlight(text: string, query: string): ReactNode {
   const ql = query.trim().toLowerCase()
@@ -29,6 +30,11 @@ export default function SearchPage() {
   const [ready, setReady] = useState(false)
   const [results, setResults] = useState<SearchResult[]>([])
   const [total, setTotal] = useState(0)
+  const [expanded, setExpanded] = useState(false)
+
+  useEffect(() => {
+    setExpanded(false)
+  }, [debounced])
 
   useEffect(() => {
     Promise.all([loadBible(), loadRedLetter()]).then(() => setReady(true))
@@ -63,6 +69,9 @@ export default function SearchPage() {
 
   const searching = query.trim().length > 0 && query.trim() !== debounced.trim()
 
+  const shown = expanded || secret ? results : results.slice(0, INITIAL_RESULTS)
+  const capped = !secret && !expanded && total > INITIAL_RESULTS
+
   return (
     <div className="search-page">
       <TopBar />
@@ -98,11 +107,20 @@ export default function SearchPage() {
       {ready && !searching && query.trim() !== '' && !secret && (
         <p className="search-meta" aria-live="polite">
           {total > 0 ? `${total} verse${total === 1 ? '' : 's'} found` : 'No verses found.'}
+          {capped && ` · showing the first ${INITIAL_RESULTS}`}
         </p>
       )}
 
+      {capped && (
+        <div className="expand-wrap">
+          <button className="expand-btn" onClick={() => setExpanded(true)}>
+            Show all {total} verses
+          </button>
+        </div>
+      )}
+
       <div className="search-results">
-        {results.map((r) => (
+        {shown.map((r) => (
           <Link
             key={`${r.book}-${r.chapter}-${r.verse}`}
             className="search-result"

src/style.css

@@ -746,6 +746,32 @@ a {
   margin: 0;
 }
 
+.expand-wrap {
+  text-align: center;
+  margin: -0.5rem 0 1.6rem;
+}
+
+.expand-btn {
+  font-family: var(--display);
+  font-size: 0.75rem;
+  letter-spacing: 0.14em;
+  text-indent: 0.14em;
+  text-transform: uppercase;
+  padding: 0.65rem 1.6rem;
+  color: var(--accent-soft);
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color 0.3s, border-color 0.3s, box-shadow 0.3s;
+}
+
+.expand-btn:hover {
+  color: var(--accent-soft);
+  border-color: var(--accent);
+  box-shadow: 0 0 20px rgba(240, 169, 79, 0.15);
+}
+
 .search-results {
   max-width: 46rem;
   margin: 0 auto;