#125 add divider between search result batches

Author: jayhill

frontend/src/components/app/SearchResult.tsx

@@ -18,7 +18,7 @@ const SearchResult: React.FC<SearchResultProps> = ({ searchResult: sr }) => {
     const { zipCase: c, caseSummary: summary } = sr;
 
     return (
-        <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="bg-white rounded-lg shadow overflow-hidden border-t border-gray-100">
             <div className="p-4 sm:p-6">
                 <div className="flex items-start">
                     <div className="flex-shrink-0 mr-4">

frontend/src/components/app/SearchResultsList.tsx

@@ -3,39 +3,58 @@ import { useSearchResults, useConsolidatedPolling } from '../../hooks/useCaseSea
 import { SearchResult as SearchResultType } from '../../../../shared/types';
 import { useEffect, useMemo } from 'react';
 
-// Individual case result component - no polling here, just display
+type DisplayItem = SearchResultType | 'divider';
+
 function CaseResultItem({ searchResult }: { searchResult: SearchResultType }) {
     return <SearchResult searchResult={searchResult} />;
 }
 
 export default function SearchResultsList() {
     const { data, isLoading, isError, error } = useSearchResults();
 
-    // Extract ordered results based on batches (newest searches first)
-    const searchResults = useMemo(() => {
+    // Extract batches and create a flat display list with dividers
+    const displayItems = useMemo(() => {
         if (!data || !data.results || !data.searchBatches) {
             return [];
         }
 
-        // Flatten batches while maintaining batch order
-        const orderedCaseNumbers: string[] = [];
+        const items: DisplayItem[] = [];
         const seenCaseNumbers = new Set<string>();
 
         // Process each batch (newest first)
-        data.searchBatches.forEach(batch => {
+        data.searchBatches.forEach((batch, batchIndex) => {
+            // Collect valid results from this batch first
+            const batchResults: SearchResultType[] = [];
             batch.forEach(caseNumber => {
-                // Only add case numbers we haven't seen yet to avoid duplicates
                 if (!seenCaseNumbers.has(caseNumber)) {
-                    orderedCaseNumbers.push(caseNumber);
-                    seenCaseNumbers.add(caseNumber);
+                    const result = data.results[caseNumber];
+                    if (result) {
+                        batchResults.push(result);
+                        seenCaseNumbers.add(caseNumber);
+                    }
                 }
             });
+
+            // Only add divider and results if this batch has actual cases
+            if (batchResults.length > 0) {
+                // Add divider before each batch except the first (newest) AND only if we already have items
+                if (batchIndex > 0 && items.length > 0) {
+                    items.push('divider');
+                }
+
+                // Add all the results from this batch
+                items.push(...batchResults);
+            }
         });
 
-        // Map ordered case numbers to their result objects
-        return orderedCaseNumbers.map(caseNumber => data.results[caseNumber]).filter(Boolean); // Remove any undefined entries
+        return items;
     }, [data]);
 
+    // Extract just the search results for polling logic
+    const searchResults = useMemo(() => {
+        return displayItems.filter((item): item is SearchResultType => typeof item !== 'string');
+    }, [displayItems]);
+
     // Use the consolidated polling approach for all non-terminal cases
     const polling = useConsolidatedPolling();
 
@@ -81,12 +100,27 @@ export default function SearchResultsList() {
                     </div>
                 ) : (
                     <>
-                        {searchResults.length > 0 ? (
+                        {displayItems.length > 0 ? (
                             <div className="mt-8">
                                 <h3 className="text-base font-semibold text-gray-900">Search Results</h3>
-                                <div className="mt-4 space-y-4">
-                                    {searchResults.map(result => (
-                                        <CaseResultItem key={`${result.zipCase.caseNumber}`} searchResult={result} />
+                                <div className="mt-4">
+                                    {displayItems.map((item, index) => (
+                                        <div key={item === 'divider' ? `divider-${index}` : item.zipCase.caseNumber}>
+                                            {item === 'divider' ? (
+                                                <div className="relative my-6">
+                                                    <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                                                        <div className="w-full border-t border-gray-300" />
+                                                    </div>
+                                                    <div className="relative flex justify-center">
+                                                        <span className="bg-gray-50 px-3 text-sm text-gray-500">◇◇◇</span>
+                                                    </div>
+                                                </div>
+                                            ) : (
+                                                <div className="mb-4">
+                                                    <CaseResultItem searchResult={item} />
+                                                </div>
+                                            )}
+                                        </div>
                                     ))}
                                 </div>
                             </div>