@eightyfourthousand/lib-search 2026.3.1 → 2026.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightyfourthousand/lib-search",
-  "version": "2026.3.1",
+  "version": "2026.4.0",
   "description": "Shared translation search UI and server helpers for 84000 applications.",
   "private": false,
   "repository": {
@@ -17,6 +17,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@eightyfourthousand/client-graphql": "^2026.3.1",
     "@eightyfourthousand/data-access": "^2026.3.1",
     "@eightyfourthousand/design-system": "^2026.3.1",
     "@eightyfourthousand/lib-utils": "^2026.3.1"

package/src/lib/types/search.ts

@@ -1,20 +1,31 @@
+import { GlossaryTermInstance, GlossaryTermInstanceDTO, glossaryTermInstanceFromDTO } from "@eightyfourthousand/data-access";
+
 export const RESULTS_ENTITIES = [
-  'passages',
   'alignments',
+  'passages',
   'bibliographies',
   'glossaries',
 ] as const;
 
 export type ResultsEntity = (typeof RESULTS_ENTITIES)[number];
 
+export const RESULTS_ENTITY_LABELS: Record<ResultsEntity, string> = {
+  alignments: 'Translation Passages',
+  passages: 'Other Passages',
+  bibliographies: 'Bibliographies',
+  glossaries: 'Glossaries',
+} as const;
+
 export type BibliographySearchMatchDTO = {
   bibliography_uuid: string;
   content: string;
 };
 
 export type GlossarySearchMatchDTO = {
+  authority_uuid: string;
   glossary_uuid: string;
   content: string;
+  entry: GlossaryTermInstanceDTO;
 };
 
 export type PassageSearchMatchDTO = {
@@ -60,6 +71,7 @@ export type BibliographyMatch = SearchMatch & {
 
 export type GlossaryMatch = SearchMatch & {
   type: 'glossary';
+  entry: GlossaryTermInstance;
 };
 
 export type SearchResultsDTO = {
@@ -98,8 +110,9 @@ export const glossaryMatchFromDTO = (
 ): GlossaryMatch => {
   return {
     type: 'glossary',
-    uuid: dto.glossary_uuid,
+    uuid: dto.authority_uuid,
     content: dto.content,
+    entry: glossaryTermInstanceFromDTO(dto.entry),
   };
 };
 

package/src/lib/ui/SearchButton.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import type { PassageOccurrence } from '@eightyfourthousand/data-access';
+import { getPassageOccurrences } from '@eightyfourthousand/data-access';
 import {
   Button,
   Dialog,
@@ -12,71 +14,349 @@ import {
   TabsContent,
 } from '@eightyfourthousand/design-system';
 import { Loader2Icon, SearchIcon, XIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { search } from '../data';
-import { RESULTS_ENTITIES, SearchResult, SearchResults } from '../types';
+import type {
+  PassageMatch,
+  ResultsEntity,
+  SearchResult,
+  SearchResults,
+} from '../types';
+import { RESULTS_ENTITIES } from '../types';
 import { SearchResultsList } from './SearchResultsList';
 import { SearchResultTabs } from './SearchResultTab';
 
+export type SearchPendingSelection =
+  | { kind: 'index'; index: number }
+  | { kind: 'cursor'; start: number; passageUuid: string };
+
+export interface SearchActionContext {
+  activeOccurrence?: PassageOccurrence;
+  activeOccurrenceIndex: number;
+  activePassageLabel?: string;
+  activePassageUuid?: string;
+  moveActiveOccurrence: (direction: 'next' | 'previous') => void;
+  passageOccurrences: PassageOccurrence[];
+  passages: PassageMatch[];
+  refreshSearch: (options?: {
+    nextSelection?: SearchPendingSelection | null;
+  }) => Promise<void>;
+  searchQuery: string;
+  searching: boolean;
+  scrollActiveOccurrenceIntoView: () => void;
+  setActiveOccurrenceIndex: (index: number) => void;
+  setShouldScrollActiveOccurrence: (shouldScroll: boolean) => void;
+}
+
+export interface SearchButtonProps {
+  onResultSelected: (result: SearchResult) => void;
+  renderActions?: (context: SearchActionContext) => ReactNode;
+  toh?: string;
+  workUuid?: string;
+}
+
+const DEFAULT_RESULTS_TAB: ResultsEntity = 'alignments';
+
+const getFirstResultsTab = (results?: SearchResults): ResultsEntity => {
+  return (
+    RESULTS_ENTITIES.find((tab) => (results?.[tab].length ?? 0) > 0) ??
+    DEFAULT_RESULTS_TAB
+  );
+};
+
+const getOccurrenceResultsTab = (
+  occurrence?: PassageOccurrence,
+): ResultsEntity | undefined => {
+  if (!occurrence) {
+    return undefined;
+  }
+
+  return occurrence.type === 'alignment' ? 'alignments' : 'passages';
+};
+
 export const SearchButton = ({
+  renderActions,
   workUuid,
   toh,
   onResultSelected,
-}: {
-  workUuid?: string;
-  toh?: string;
-  onResultSelected: (result: SearchResult) => void;
-}) => {
+}: SearchButtonProps) => {
   const [open, setOpen] = useState(false);
   const [searching, setSearching] = useState(false);
   const [hasResults, setHasResults] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [results, setResults] = useState<SearchResults>();
+  const [activeOccurrenceIndex, setActiveOccurrenceIndexState] = useState(0);
+  const [activeResultsTab, setActiveResultsTab] =
+    useState<ResultsEntity>(DEFAULT_RESULTS_TAB);
+  const [shouldScrollActiveOccurrence, setShouldScrollActiveOccurrence] =
+    useState(false);
+  const pendingOccurrenceSelectionRef = useRef<SearchPendingSelection | null>(
+    null,
+  );
 
-  const onCardClick = (result: SearchResult) => {
-    setOpen(false);
-    onResultSelected(result);
-  };
+  const passageOccurrences = useMemo(
+    () =>
+      getPassageOccurrences(
+        [...(results?.alignments || []), ...(results?.passages || [])],
+        searchQuery,
+      ),
+    [results?.alignments, results?.passages, searchQuery],
+  );
+  const activeOccurrence = passageOccurrences[activeOccurrenceIndex];
+  const activeOccurrenceStart = activeOccurrence?.start ?? null;
+  const activePassageUuid = activeOccurrence?.passageUuid;
+  const activePassageLabel = results?.passages.find(
+    (passage) => passage.uuid === activePassageUuid,
+  )?.label;
+  const passageOrder = useMemo(
+    () =>
+      new Map(
+        (results?.passages || []).map((passage, index) => [
+          passage.uuid,
+          index,
+        ]),
+      ),
+    [results?.passages],
+  );
 
-  useEffect(() => {
-    const performSearch = async () => {
+  const scrollActiveOccurrenceIntoView = useCallback(() => {
+    requestAnimationFrame(() => {
+      document
+        .querySelector<HTMLElement>('[data-search-result-active="true"]')
+        ?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        });
+    });
+  }, []);
+
+  const refreshSearch = useCallback(
+    async (options: { nextSelection?: SearchPendingSelection | null } = {}) => {
       if (!searchQuery || !workUuid || !toh) {
         setResults(undefined);
+        setHasResults(false);
         return;
       }
 
       setSearching(true);
-
-      const results = await search({ text: searchQuery, uuid: workUuid, toh });
+      const nextResults = await search({
+        text: searchQuery,
+        uuid: workUuid,
+        toh,
+      });
       setHasResults(
-        !!results &&
-          (results.passages.length > 0 ||
-            results.alignments.length > 0 ||
-            results.bibliographies.length > 0 ||
-            results.glossaries.length > 0),
+        !!nextResults &&
+        (nextResults.passages.length > 0 ||
+          nextResults.alignments.length > 0 ||
+          nextResults.bibliographies.length > 0 ||
+          nextResults.glossaries.length > 0),
       );
-      setResults(results);
+      setResults(nextResults);
+
+      if ('nextSelection' in options) {
+        pendingOccurrenceSelectionRef.current = options.nextSelection ?? null;
+      }
+
       setSearching(false);
-    };
+    },
+    [searchQuery, toh, workUuid],
+  );
+
+  const setActiveOccurrenceIndex = useCallback(
+    (nextIndex: number) => {
+      pendingOccurrenceSelectionRef.current = null;
+      setActiveOccurrenceIndexState(
+        Math.max(
+          0,
+          Math.min(nextIndex, Math.max(passageOccurrences.length - 1, 0)),
+        ),
+      );
+    },
+    [passageOccurrences.length],
+  );
+
+  const moveActiveOccurrence = useCallback(
+    (direction: 'next' | 'previous') => {
+      if (passageOccurrences.length === 0) {
+        return;
+      }
+
+      pendingOccurrenceSelectionRef.current = null;
+      setActiveOccurrenceIndexState((current) => {
+        if (direction === 'previous') {
+          return Math.max(current - 1, 0);
+        }
+
+        return Math.min(current + 1, passageOccurrences.length - 1);
+      });
+    },
+    [passageOccurrences.length],
+  );
+
+  useEffect(() => {
+    const debounce = setTimeout(() => {
+      void refreshSearch();
+    }, 300);
 
-    const debounce = setTimeout(performSearch, 300);
     return () => clearTimeout(debounce);
-  }, [searchQuery, workUuid, toh]);
+  }, [refreshSearch]);
 
   useEffect(() => {
     setResults(undefined);
     setSearchQuery('');
+    setActiveOccurrenceIndexState(0);
+    setShouldScrollActiveOccurrence(false);
+    pendingOccurrenceSelectionRef.current = null;
   }, [open]);
 
+  useEffect(() => {
+    if (!results) {
+      setActiveResultsTab(DEFAULT_RESULTS_TAB);
+      return;
+    }
+
+    setActiveResultsTab((currentTab) =>
+      results[currentTab].length > 0 ? currentTab : getFirstResultsTab(results),
+    );
+  }, [results]);
+
+  useEffect(() => {
+    if (passageOccurrences.length === 0) {
+      setActiveOccurrenceIndexState(0);
+      pendingOccurrenceSelectionRef.current = null;
+      return;
+    }
+
+    const pendingSelection = pendingOccurrenceSelectionRef.current;
+    if (pendingSelection) {
+      if (pendingSelection.kind === 'index') {
+        setActiveOccurrenceIndexState(
+          Math.min(pendingSelection.index, passageOccurrences.length - 1),
+        );
+        pendingOccurrenceSelectionRef.current = null;
+        return;
+      }
+
+      const nextIndex = passageOccurrences.findIndex((occurrence) => {
+        if (
+          pendingSelection.kind === 'cursor' &&
+          occurrence.passageUuid === pendingSelection.passageUuid &&
+          occurrence.start >= pendingSelection.start
+        ) {
+          return true;
+        }
+
+        return false;
+      });
+
+      if (nextIndex >= 0) {
+        setActiveOccurrenceIndexState(nextIndex);
+        pendingOccurrenceSelectionRef.current = null;
+        return;
+      }
+
+      const currentPassageOrder =
+        pendingSelection.kind === 'cursor'
+          ? passageOrder.get(pendingSelection.passageUuid)
+          : undefined;
+      const nextPassageIndex =
+        pendingSelection.kind === 'cursor' && currentPassageOrder != null
+          ? passageOccurrences.findIndex((occurrence) => {
+            const occurrenceOrder = passageOrder.get(occurrence.passageUuid);
+            return (
+              occurrenceOrder != null && occurrenceOrder > currentPassageOrder
+            );
+          })
+          : -1;
+
+      setActiveOccurrenceIndexState(
+        nextPassageIndex >= 0 ? nextPassageIndex : 0,
+      );
+      pendingOccurrenceSelectionRef.current = null;
+      return;
+    }
+
+    setActiveOccurrenceIndexState((current) =>
+      Math.min(current, passageOccurrences.length - 1),
+    );
+  }, [passageOccurrences, passageOrder]);
+
+  useEffect(() => {
+    if (!shouldScrollActiveOccurrence || !activeOccurrence || !results) {
+      return;
+    }
+
+    const occurrenceTab = getOccurrenceResultsTab(activeOccurrence);
+    if (occurrenceTab && results[occurrenceTab].length > 0) {
+      setActiveResultsTab(occurrenceTab);
+    }
+  }, [activeOccurrence, results, shouldScrollActiveOccurrence]);
+
+  useEffect(() => {
+    if (
+      !shouldScrollActiveOccurrence ||
+      !activePassageUuid ||
+      activeOccurrenceStart == null
+    ) {
+      return;
+    }
+
+    scrollActiveOccurrenceIntoView();
+  }, [
+    activeOccurrenceStart,
+    activeResultsTab,
+    activePassageUuid,
+    scrollActiveOccurrenceIntoView,
+    shouldScrollActiveOccurrence,
+  ]);
+
+  const onCardClick = (result: SearchResult) => {
+    setOpen(false);
+    onResultSelected(result);
+  };
+
+  const actionContext = useMemo<SearchActionContext>(
+    () => ({
+      activeOccurrence,
+      activeOccurrenceIndex,
+      activePassageLabel,
+      activePassageUuid,
+      moveActiveOccurrence,
+      passageOccurrences,
+      passages: results?.passages || [],
+      refreshSearch,
+      searchQuery,
+      searching,
+      scrollActiveOccurrenceIntoView,
+      setActiveOccurrenceIndex,
+      setShouldScrollActiveOccurrence,
+    }),
+    [
+      activeOccurrence,
+      activeOccurrenceIndex,
+      activePassageLabel,
+      activePassageUuid,
+      moveActiveOccurrence,
+      passageOccurrences,
+      refreshSearch,
+      results?.passages,
+      scrollActiveOccurrenceIntoView,
+      searchQuery,
+      searching,
+      setActiveOccurrenceIndex,
+    ],
+  );
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button
           variant="ghost"
+          size="icon"
           className="bg-background my-auto [&_svg]:size-6 [&_svg]:stroke-1 hover:bg-background cursor-pointer text-base text-accent hover:text-accent/80"
         >
           <SearchIcon />
-          <span className="hidden md:flex">Search</span>
         </Button>
       </DialogTrigger>
       <DialogContent
@@ -87,8 +367,8 @@ export const SearchButton = ({
         <DialogDescription className="hidden">
           Search this translation
         </DialogDescription>
-        <div className="flex flex-col justify-start gap-2 h-[calc(100vh_-_2.5rem)]">
-          <div className="w-full flex flex-col gap-2 text-foreground flex-shrink-0">
+        <div className="flex flex-col justify-start gap-2 h-[calc(100vh-2.5rem)]">
+          <div className="w-full flex flex-col gap-2 text-foreground shrink-0">
             <div className="flex justify-end">
               <Button
                 className="text-secondary-foreground -me-3"
@@ -102,21 +382,36 @@ export const SearchButton = ({
             <Input
               autoFocus
               placeholder="Type to search..."
+              value={searchQuery}
               className="w-full text-foreground px-4 py-6"
-              onChange={(e) => setSearchQuery(e.target.value)}
+              onChange={(e) => {
+                const nextValue = e.target.value;
+                if (nextValue === searchQuery) {
+                  return;
+                }
+                setActiveOccurrenceIndexState(0);
+                pendingOccurrenceSelectionRef.current = null;
+                setSearchQuery(nextValue);
+              }}
             />
+            {searchQuery && renderActions?.(actionContext)}
           </div>
           {searchQuery && (
             <>
-              <div className="text-sm text-secondary-foreground">
-                Showing results for "<strong>{searchQuery}</strong>"
-                {searching && (
-                  <Loader2Icon className="size-4 ml-2 animate-spin inline-block" />
-                )}
+              <div className="flex flex-col gap-3 text-sm text-secondary-foreground">
+                <div>
+                  Showing results for "<strong>{searchQuery}</strong>"
+                  {searching && (
+                    <Loader2Icon className="size-4 ml-2 animate-spin inline-block" />
+                  )}
+                </div>
               </div>
               {results && hasResults ? (
                 <Tabs
-                  defaultValue="passages"
+                  value={activeResultsTab}
+                  onValueChange={(tab) => {
+                    setActiveResultsTab(tab as ResultsEntity);
+                  }}
                   className="flex flex-col grow min-h-0 pt-2"
                 >
                   <SearchResultTabs results={results} />
@@ -129,6 +424,13 @@ export const SearchButton = ({
                           value={tab}
                         >
                           <SearchResultsList
+                            activeOccurrenceStart={
+                              activeOccurrenceStart != null &&
+                                shouldScrollActiveOccurrence
+                                ? activeOccurrenceStart
+                                : undefined
+                            }
+                            activePassageUuid={activePassageUuid}
                             query={searchQuery}
                             results={results[tab]}
                             onCardClick={onCardClick}

package/src/lib/ui/SearchResultCard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { highlightText, removeHtmlTags, useIsMobile } from '@eightyfourthousand/lib-utils';
+import { highlightText, removeDiacritics, removeHtmlTags, useIsMobile } from '@eightyfourthousand/lib-utils';
 import {
   AlignmentMatch,
   BibliographyMatch,
@@ -10,26 +10,87 @@ import {
 } from '../types';
 import { Separator } from '@eightyfourthousand/design-system';
 
+const renderPassageHighlight = ({
+  activeOccurrenceStart,
+  query,
+  text,
+}: {
+  activeOccurrenceStart?: number;
+  query: string;
+  text: string;
+}) => {
+  if (!query.trim()) {
+    return text;
+  }
+
+  const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const parts = text.split(new RegExp(`(${escapedQuery})`, 'gi'));
+  let offset = 0;
+
+  return parts.map((part, index) => {
+    const isMatch = part.toLowerCase() === query.toLowerCase();
+
+    if (!isMatch) {
+      offset += part.length;
+      return part;
+    }
+
+    const start = offset;
+    offset += part.length;
+
+    return (
+      <mark
+        key={index}
+        className={
+          start === activeOccurrenceStart
+            ? 'bg-accent/20 text-foreground font-semibold ring-2 ring-accent ring-offset-1 ring-offset-background rounded-sm'
+            : 'bg-highlight text-foreground font-semibold'
+        }
+      >
+        {part}
+      </mark>
+    );
+  });
+};
+
 export const PassageResult = ({
+  activeOccurrenceStart,
   match,
   query,
 }: {
+  activeOccurrenceStart?: number;
   match: PassageMatch;
   query: string;
 }) => {
-  return <div>{highlightText(match.content, query)}</div>;
+  return (
+    <div>
+      {renderPassageHighlight({
+        activeOccurrenceStart,
+        query,
+        text: match.content,
+      })}
+    </div>
+  );
 };
 
 export const AlignmentResult = ({
+  activeOccurrenceStart,
   match,
   query,
 }: {
+  activeOccurrenceStart?: number;
   match: AlignmentMatch;
   query: string;
 }) => {
   return (
     <div className="grid md:grid-cols-2 gap-4">
-      <div>{highlightText(match.content, query)}</div>
+      <div>
+        {renderPassageHighlight({
+          activeOccurrenceStart,
+          query,
+          text: match.content,
+        })}
+      </div>
       <div className="text-lg">{highlightText(match.source, query)}</div>
     </div>
   );
@@ -52,14 +113,31 @@ export const GlossaryResult = ({
   match: GlossaryMatch;
   query: string;
 }) => {
-  return <div>{highlightText(removeHtmlTags(match.content), query)}</div>;
+  return (
+    <div className="flex flex-col gap-2">
+      <div className='text-primary font-bold'>{
+        highlightText(
+          removeDiacritics(match.content),
+          removeDiacritics(query)
+        )
+      }</div>
+      {match.entry.definition && <div
+        className="glossary-instance-definition"
+        dangerouslySetInnerHTML={{ __html: match.entry.definition }}
+      />}
+    </div>
+  );
 };
 
 export const SearchResultCard = ({
+  isActive = false,
+  activeOccurrenceStart,
   match,
   query,
   onClick,
 }: {
+  isActive?: boolean;
+  activeOccurrenceStart?: number;
   match: SearchResult;
   query: string;
   onClick: () => void;
@@ -72,10 +150,20 @@ export const SearchResultCard = ({
   const renderInner = (match: SearchResult) => {
     switch (match.type) {
       case 'passage':
-        return <PassageResult match={match as PassageMatch} query={query} />;
+        return (
+          <PassageResult
+            activeOccurrenceStart={isActive ? activeOccurrenceStart : undefined}
+            match={match as PassageMatch}
+            query={query}
+          />
+        );
       case 'alignment':
         return (
-          <AlignmentResult match={match as AlignmentMatch} query={query} />
+          <AlignmentResult
+            activeOccurrenceStart={isActive ? activeOccurrenceStart : undefined}
+            match={match as AlignmentMatch}
+            query={query}
+          />
         );
       case 'bibliography':
         return (
@@ -94,9 +182,13 @@ export const SearchResultCard = ({
   return (
     <div
       onClick={onClick}
-      className="flex flex-col md:flex-row gap-4 py-6 px-4 md:px-6 font-serif text-sm text-foreground rounded-lg bg-background cursor-pointer border border-3 border-transparent hover:border-border transition-colors"
+      data-search-result-active={isActive ? 'true' : undefined}
+      className={`flex flex-col md:flex-row gap-4 py-6 px-4 md:px-6 font-serif text-sm text-foreground rounded-lg bg-background cursor-pointer border transition-colors ${isActive
+        ? 'border-accent border-2 scroll-mt-4'
+        : 'border-transparent hover:border-secondary border-2'
+        }`}
     >
-      <div className="md:w-25 flex-shrink-0 flex md:flex-col gap-1 md:gap-2 md:text-right text-xs md:text-sm">
+      <div className="md:w-28 shrink-0 flex md:flex-col gap-1 md:gap-2 md:text-right text-xs md:text-sm">
         <div className="flex flex-col gap-1">
           <span className="text-secondary capitalize">{passage.type}</span>
           {passage.section && (

package/src/lib/ui/SearchResultTab.tsx

@@ -1,20 +1,20 @@
 import { TabsList, TabsTrigger } from '@eightyfourthousand/design-system';
-import { RESULTS_ENTITIES, SearchResults } from '../types';
+import { RESULTS_ENTITIES, RESULTS_ENTITY_LABELS, SearchResults } from '../types';
 
 export const SearchResultTabs = ({ results }: { results: SearchResults }) => {
   return (
-    <TabsList className="h-24 gap-4 flex-shrink-0 rounded-lg p-0 w-full bg-transparent">
+    <TabsList className="h-24 gap-4 flex-shrink-0 rounded-lg p-0 w-full bg-transparent sm:p-0">
       {RESULTS_ENTITIES.map(
         (tab) =>
           results[tab].length > 0 && (
             <TabsTrigger
               key={tab}
               value={tab}
-              className="h-full border border-border rounded-xl flex-grow data-[state=inactive]:bg-muted data-[state=active]:border-border data-[state=active]:border-3 border-2"
+              className="h-full border border-border rounded-xl flex-grow data-[state=inactive]:bg-muted data-[state=active]:border-secondary data-[state=active]:border-3 border-2"
             >
               <div className="flex flex-col gap-1 items-center">
-                <span className="capitalize text-secondary font-bold">
-                  {tab}
+                <span className="text-secondary font-bold">
+                  {RESULTS_ENTITY_LABELS[tab]}
                 </span>
                 <span className="text-primary font-bold">
                   {results[tab].length} matches

package/src/lib/ui/SearchResultsList.tsx

@@ -2,24 +2,34 @@ import { SearchResult } from '../types';
 import { SearchResultCard } from './SearchResultCard';
 
 export const SearchResultsList = ({
+  activeOccurrenceStart,
+  activePassageUuid,
   query,
   results,
   onCardClick,
 }: {
+  activeOccurrenceStart?: number;
+  activePassageUuid?: string;
   query: string;
   results: SearchResult[];
   onCardClick: (result: SearchResult) => void;
 }) => {
   return (
     <div className="h-full flex flex-col gap-3 pb-4 overflow-y-auto min-h-0">
-      {results.map((result, index) => (
-        <SearchResultCard
-          key={index}
-          match={result}
-          query={query}
-          onClick={() => onCardClick(result)}
-        />
-      ))}
+      {results.map((result, index) => {
+        const start = result.uuid === activePassageUuid ? activeOccurrenceStart : undefined;
+        const isActive = !!start;
+        return (
+          <SearchResultCard
+            key={index}
+            activeOccurrenceStart={start}
+            isActive={isActive}
+            match={result}
+            query={query}
+            onClick={() => onCardClick(result)}
+          />
+        )
+      })}
     </div>
   );
 };