Merge pull request #608 from ResearchHub/search-improvements

nicktytarenko · web-flow · commit b0bd0d7c7337 · 2026-01-29T09:59:45.000+02:00
Search Improvements
diff --git a/components/Search/Search.tsx b/components/Search/Search.tsx
@@ -138,7 +138,6 @@ export function Search({
         onSelect={handleSelect}
         displayMode={displayMode}
         showSuggestionsOnFocus={showSuggestionsOnFocus}
-        indices={indices}
       />
     </div>
   );
diff --git a/components/Search/SearchModal.tsx b/components/Search/SearchModal.tsx
@@ -1,10 +1,12 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
-import { Search as SearchIcon, X, ArrowLeft, ArrowRight } from 'lucide-react';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Search as SearchIcon, X, ArrowLeft, Filter, FilterX } from 'lucide-react';
 import { SearchSuggestions } from './SearchSuggestions';
+import { SearchSuggestionFilters, AVAILABLE_INDICES } from './SearchSuggestionFilters';
 import { useSearchSuggestions } from '@/hooks/useSearchSuggestions';
 import { SearchSuggestion } from '@/types/search';
+import type { EntityType } from '@/types/search';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import { navigateToAuthorProfile } from '@/utils/navigation';
 import { BaseModal } from '@/components/ui/BaseModal';
@@ -19,12 +21,26 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [query, setQuery] = useState('');
   const [isFocused, setIsFocused] = useState(true);
+  const [selectedIndices, setSelectedIndices] = useState<EntityType[]>([]);
+  const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const hasPrefetchedRef = useRef(false);
   const navigatingToSearchRef = useRef(false);
 
+  const indicesToUse = useMemo(() => {
+    if (selectedIndices.length === 0) {
+      return AVAILABLE_INDICES;
+    }
+
+    return selectedIndices;
+  }, [selectedIndices]);
+
+  const hasActiveFilters = useMemo(() => {
+    return selectedIndices.length > 0;
+  }, [selectedIndices]);
+
   const prefetchSearchRoute = () => {
     if (!hasPrefetchedRef.current) {
       try {
@@ -35,8 +51,9 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
   };
 
   // Get search suggestions
-  const { loading, suggestions } = useSearchSuggestions({
+  const { loading, suggestions, hasLocalSuggestions, clearSearchHistory } = useSearchSuggestions({
     query,
+    indices: indicesToUse,
     includeLocalSuggestions: true,
   });
 
@@ -86,11 +103,13 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
     }
   };
 
-  // Reset query when modal closes (but preserve if navigating to search page)
+  // Reset query and filters when modal closes (but preserve if navigating to search page)
   useEffect(() => {
     if (!isOpen) {
       if (!navigatingToSearchRef.current) {
         setQuery('');
+        setSelectedIndices([]);
+        setIsFiltersExpanded(false);
       }
       navigatingToSearchRef.current = false;
     }
@@ -142,49 +161,68 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
     >
       {/* Search Input */}
       <div className="border-b border-gray-200 p-4">
-        <div className="relative">
-          <SearchIcon className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" />
-          <input
-            ref={inputRef}
-            type="text"
-            placeholder="Search papers, topics, authors..."
-            className="h-12 w-full rounded-lg border border-gray-200 bg-white pl-10 pr-8 md:!pr-24 text-base focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onClick={(e) => {
-              (e.target as HTMLInputElement).select();
-            }}
-            onFocus={() => {
-              setIsFocused(true);
-              prefetchSearchRoute();
-              inputRef.current?.select();
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && e.shiftKey && query.trim()) {
-                e.preventDefault();
-                navigatingToSearchRef.current = true;
-                router.push(`/search?debug&q=${encodeURIComponent(query.trim())}`);
-                onClose();
-              }
-            }}
-          />
-          {/* Keyboard shortcut hint - desktop only */}
-          <div className="absolute right-3 top-1/2 -translate-y-1/2 hidden md:!flex items-center space-x-1 text-xs text-gray-400">
-            <kbd className="px-1.5 py-0.5 text-xs font-semibold text-gray-500 bg-gray-100 border border-gray-200 rounded">
-              {shortcutKey}
-            </kbd>
-            <kbd className="px-1.5 py-0.5 text-xs font-semibold text-gray-500 bg-gray-100 border border-gray-200 rounded">
-              K
-            </kbd>
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <SearchIcon className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" />
+            <input
+              ref={inputRef}
+              type="text"
+              placeholder="Search papers, topics, authors..."
+              className="h-12 w-full rounded-lg border border-gray-200 bg-white pl-10 pr-10 text-base focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onClick={(e) => {
+                (e.target as HTMLInputElement).select();
+              }}
+              onFocus={() => {
+                setIsFocused(true);
+                prefetchSearchRoute();
+                inputRef.current?.select();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && e.shiftKey && query.trim()) {
+                  e.preventDefault();
+                  navigatingToSearchRef.current = true;
+                  router.push(`/search?debug&q=${encodeURIComponent(query.trim())}`);
+                  onClose();
+                }
+              }}
+            />
+            {query && (
+              <button
+                onClick={() => setQuery('')}
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-gray-100"
+              >
+                <X className="h-4 w-4 text-gray-400" />
+              </button>
+            )}
+          </div>
+          {/* Settings/Filter Button */}
+          <Button
+            variant="outlined"
+            size="icon"
+            onClick={() => setIsFiltersExpanded(!isFiltersExpanded)}
+            className="flex-shrink-0 h-12 w-12"
+            aria-label="Toggle filters"
+          >
+            {hasActiveFilters ? (
+              <FilterX className="h-4 w-4 text-gray-500" />
+            ) : (
+              <Filter className="h-4 w-4 text-gray-500" />
+            )}
+          </Button>
+        </div>
+        {/* Filter Section */}
+        <div
+          className="grid transition-[grid-template-rows] duration-[500ms] ease-in-out"
+          style={{ gridTemplateRows: isFiltersExpanded ? '1fr' : '0fr' }}
+        >
+          <div className="overflow-hidden">
+            <SearchSuggestionFilters
+              selectedIndices={selectedIndices}
+              onIndicesChange={setSelectedIndices}
+            />
           </div>
-          {query && (
-            <button
-              onClick={() => setQuery('')}
-              className="absolute right-2 md:!right-20 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-gray-100"
-            >
-              <X className="h-4 w-4 text-gray-400" />
-            </button>
-          )}
         </div>
       </div>
 
@@ -197,6 +235,10 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
             onSelect={handleSelect}
             displayMode="inline"
             showSuggestionsOnFocus={true}
+            loading={loading}
+            suggestions={suggestions}
+            hasLocalSuggestions={hasLocalSuggestions}
+            clearSearchHistory={clearSearchHistory}
           />
         ) : (
           <div className="p-8 text-center text-gray-500">
diff --git a/components/Search/SearchSuggestionFilters.tsx b/components/Search/SearchSuggestionFilters.tsx
@@ -0,0 +1,82 @@
+import { Badge } from '@/components/ui/Badge';
+import { cn } from '@/utils/styles';
+import type { EntityType } from '@/types/search';
+
+// Available entity types for filtering
+export const AVAILABLE_INDICES: EntityType[] = ['paper', 'post', 'hub', 'user'];
+
+// Entity type labels for display
+export const ENTITY_LABELS: Record<EntityType, string> = {
+  paper: 'Papers',
+  user: 'Users',
+  hub: 'Topics',
+  post: 'Posts',
+  author: 'Authors',
+};
+
+interface SearchSuggestionFiltersProps {
+  selectedIndices: EntityType[];
+  onIndicesChange: (indices: EntityType[]) => void;
+}
+
+export function SearchSuggestionFilters({
+  selectedIndices,
+  onIndicesChange,
+}: SearchSuggestionFiltersProps) {
+  const noneSelected = selectedIndices.length === 0;
+
+  // Handle index selection toggle
+  const handleIndexToggle = (index: EntityType) => {
+    if (selectedIndices.includes(index)) {
+      // Remove index - if removing the last one, this will make noneSelected true
+      const newIndices = selectedIndices.filter((i) => i !== index);
+      onIndicesChange(newIndices);
+    } else {
+      // Add index
+      onIndicesChange([...selectedIndices, index]);
+    }
+  };
+
+  // Handle "All" selection - clear all selections (show "All" as selected)
+  const handleSelectAll = () => {
+    onIndicesChange([]);
+  };
+
+  return (
+    <div className="min-h-0 mt-2">
+      {/* Index Selection Badges */}
+      <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide">
+        {/* Show "All" badge - only selected when noneSelected is true */}
+        <Badge
+          variant={noneSelected ? 'primary' : 'default'}
+          className={cn(
+            'cursor-pointer rounded-full px-3 py-1 flex items-center gap-1.5 transition-colors flex-shrink-0',
+            noneSelected ? 'hover:bg-primary-200' : 'hover:bg-gray-200'
+          )}
+          onClick={handleSelectAll}
+        >
+          <span>All</span>
+        </Badge>
+
+        {/* Individual index badges - always visible, show selected state based on selectedIndices */}
+        {AVAILABLE_INDICES.map((index) => {
+          const isSelected = selectedIndices.includes(index);
+
+          return (
+            <Badge
+              key={index}
+              variant={isSelected ? 'primary' : 'default'}
+              className={cn(
+                'cursor-pointer rounded-full px-3 py-1 flex items-center gap-1.5 transition-colors flex-shrink-0',
+                isSelected ? 'hover:bg-primary-200' : 'hover:bg-gray-200'
+              )}
+              onClick={() => handleIndexToggle(index)}
+            >
+              <span>{ENTITY_LABELS[index]}</span>
+            </Badge>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/components/Search/SearchSuggestions.tsx b/components/Search/SearchSuggestions.tsx
@@ -1,10 +1,8 @@
 import { useState } from 'react';
 import { FileText, History, Search, X, ArrowRight, User, Hash, HelpCircle } from 'lucide-react';
 import Icon from '@/components/ui/icons/Icon';
-import { useSearchSuggestions } from '@/hooks/useSearchSuggestions';
 import { cn } from '@/utils/styles';
 import { SearchSuggestion } from '@/types/search';
-import type { EntityType } from '@/types/search';
 import { FollowTopicButton } from '@/components/ui/FollowTopicButton';
 import { Avatar } from '@/components/ui/Avatar';
 import { VerifiedBadge } from '@/components/ui/VerifiedBadge';
@@ -15,7 +13,10 @@ interface SearchSuggestionsProps {
   onSelect?: (suggestion: SearchSuggestion) => void;
   displayMode?: 'dropdown' | 'inline';
   showSuggestionsOnFocus?: boolean;
-  indices?: EntityType[];
+  loading?: boolean;
+  suggestions?: SearchSuggestion[];
+  hasLocalSuggestions?: boolean;
+  clearSearchHistory?: () => void;
 }
 
 // Maximum number of search results to display
@@ -35,14 +36,12 @@ export function SearchSuggestions({
   onSelect,
   displayMode = 'dropdown',
   showSuggestionsOnFocus = true,
-  indices,
+  loading = false,
+  suggestions = [],
+  hasLocalSuggestions = false,
+  clearSearchHistory,
 }: SearchSuggestionsProps) {
   const [erroredSuggestions, setErroredSuggestions] = useState<Set<string>>(new Set());
-  const { loading, suggestions, hasLocalSuggestions, clearSearchHistory } = useSearchSuggestions({
-    query,
-    indices,
-    includeLocalSuggestions: true,
-  });
 
   // Only hide when explicitly not focused
   if (isFocused === false) {
@@ -84,6 +83,7 @@ export function SearchSuggestions({
       const isTopicSuggestion = suggestion.entityType === 'hub';
       const isPostSuggestion = suggestion.entityType === 'post';
       const isGrantPost = isPostSuggestion && suggestion?.documentType === 'GRANT';
+      const isProposalRequest = isPostSuggestion && suggestion?.documentType === 'PREREGISTRATION';
 
       // Safely access nested properties
       const safeGetAuthorsList = () => {
@@ -155,7 +155,7 @@ export function SearchSuggestions({
         }
         if (isTopicSuggestion)
           return <Hash className="h-5 w-8 text-gray-500 mt-0.5 flex-shrink-0" />;
-        if (isGrantPost)
+        if (isGrantPost || isProposalRequest)
           return (
             <div style={{ padding: '6px' }} className="mt-0.5 flex-shrink-0">
               <Icon name="fund" size={20} className="text-gray-500" />
diff --git a/hooks/useSearchSuggestions.ts b/hooks/useSearchSuggestions.ts
@@ -10,6 +10,7 @@ interface UseSearchSuggestionsConfig {
   includeLocalSuggestions?: boolean;
   debounceMs?: number;
   minQueryLength?: number;
+  externalSearch?: boolean;
 }
 
 export function useSearchSuggestions({
@@ -18,6 +19,7 @@ export function useSearchSuggestions({
   includeLocalSuggestions = false,
   debounceMs = 300,
   minQueryLength = 2,
+  externalSearch = false,
 }: UseSearchSuggestionsConfig) {
   const [loading, setLoading] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -82,7 +84,12 @@ export function useSearchSuggestions({
 
     const fetchSuggestions = async () => {
       try {
-        const suggestions = await SearchService.getSuggestions(query, indices);
+        const suggestions = await SearchService.getSuggestions(
+          query,
+          indices,
+          undefined,
+          externalSearch
+        );
         if (mounted) {
           setApiSuggestions(suggestions);
         }
@@ -103,7 +110,7 @@ export function useSearchSuggestions({
       mounted = false;
       clearTimeout(debounceTimer);
     };
-  }, [query, indices, minQueryLength, debounceMs]);
+  }, [query, indices, minQueryLength, debounceMs, externalSearch]);
 
   // Combine suggestions, prioritizing local results if enabled
   const suggestions = useMemo(() => {
diff --git a/services/search.service.ts b/services/search.service.ts
@@ -88,7 +88,8 @@ export class SearchService {
   static async getSuggestions(
     query: string,
     indices?: EntityType | EntityType[],
-    limit?: number
+    limit?: number,
+    externalSearch?: boolean
   ): Promise<SearchSuggestion[]> {
     const params = new URLSearchParams({ q: query });
 
@@ -102,6 +103,10 @@ export class SearchService {
       params.append('limit', limit.toString());
     }
 
+    if (externalSearch) {
+      params.append('enable_openalex', 'true');
+    }
+
     const response = await ApiClient.get<any[]>(
       `${this.BASE_PATH}/search/suggest/?${params.toString()}`
     );
