Provide a user-friendly page to find literary works and authors quickly

Implements a new `/search` page with search bar and filters, using `react-query` to fetch and display results for works and authors.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/e42e7a4c-9018-4b11-b9fe-49652fbf9978.jpg

client/src/App.tsx

@@ -6,6 +6,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import NotFound from "@/pages/not-found";
 import Home from "@/pages/Home";
 import Explore from "@/pages/Explore";
+import Search from "@/pages/Search";
 import AuthorProfile from "@/pages/authors/AuthorProfile";
 import Authors from "@/pages/authors/Authors";
 import WorkReading from "@/pages/works/WorkReading";
@@ -21,6 +22,7 @@ function Router() {
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/explore" component={Explore} />
+      <Route path="/search" component={Search} />
       <Route path="/authors" component={Authors} />
       <Route path="/authors/:slug" component={AuthorProfile} />
       <Route path="/works/:slug" component={WorkReading} />

client/src/components/common/SearchBar.tsx

@@ -81,12 +81,12 @@ export function SearchBar({
           <Input
             type="text"
             placeholder={placeholder}
-            className="pl-10 pr-4 py-2 rounded-lg bg-cream dark:bg-dark-surface border border-sage/20 dark:border-sage/10 text-navy dark:text-cream focus:outline-none focus:ring-2 focus:ring-russet/50"
+            className="pl-10 pr-4 py-2 rounded-lg bg-background dark:bg-background border border-input dark:border-input focus:outline-none focus:ring-2 focus:ring-ring"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onFocus={() => setIsFocused(true)}
           />
-          <Search className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-navy/50 dark:text-cream/50" />
+          <Search className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground dark:text-muted-foreground" />
           {query && (
             <Button
               type="submit"
@@ -104,18 +104,18 @@ export function SearchBar({
           <CardContent className="p-2">
             {results.authors.length > 0 && (
               <div className="mb-4">
-                <h3 className="text-sm font-medium mb-2 text-navy/70 dark:text-cream/70">Authors</h3>
+                <h3 className="text-sm font-medium mb-2 text-muted-foreground">Authors</h3>
                 <ul className="space-y-1">
                   {results.authors.map((author) => (
                     <li key={author.id}>
                       <Link
                         href={`/authors/${author.slug}`}
-                        className="block p-2 hover:bg-navy/5 dark:hover:bg-cream/5 rounded"
+                        className="block p-2 hover:bg-primary/5 dark:hover:bg-primary/10 rounded"
                         onClick={() => setIsFocused(false)}
                       >
                         <span className="font-medium">{author.name}</span>
                         {author.country && (
-                          <span className="text-xs text-navy/60 dark:text-cream/60 ml-2">
+                          <span className="text-xs text-muted-foreground ml-2">
                             {author.country}
                           </span>
                         )}
@@ -128,17 +128,17 @@ export function SearchBar({
 
             {results.works.length > 0 && (
               <div>
-                <h3 className="text-sm font-medium mb-2 text-navy/70 dark:text-cream/70">Works</h3>
+                <h3 className="text-sm font-medium mb-2 text-muted-foreground">Works</h3>
                 <ul className="space-y-1">
                   {results.works.map((work) => (
                     <li key={work.id}>
                       <Link
                         href={`/works/${work.slug}`}
-                        className="block p-2 hover:bg-navy/5 dark:hover:bg-cream/5 rounded"
+                        className="block p-2 hover:bg-primary/5 dark:hover:bg-primary/10 rounded"
                         onClick={() => setIsFocused(false)}
                       >
                         <span className="font-medium">{work.title}</span>
-                        <span className="text-xs text-navy/60 dark:text-cream/60 ml-2">
+                        <span className="text-xs text-muted-foreground ml-2">
                           {work.language}, {work.year || "Unknown"}
                         </span>
                       </Link>
@@ -149,16 +149,16 @@ export function SearchBar({
             )}
 
             {results.authors.length === 0 && results.works.length === 0 && (
-              <p className="py-2 text-navy/70 dark:text-cream/70 text-sm text-center">
+              <p className="py-2 text-muted-foreground text-sm text-center">
                 No results found for "{query}"
               </p>
             )}
 
-            <div className="mt-2 pt-2 border-t border-sage/10 dark:border-sage/5 text-center">
+            <div className="mt-2 pt-2 border-t border-border text-center">
               <Button
                 variant="link"
                 size="sm"
-                className="text-xs text-russet dark:text-russet/90"
+                className="text-xs text-accent"
                 onClick={handleSubmit}
               >
                 View all results

client/src/pages/Search.tsx

@@ -0,0 +1,510 @@
+import { useState, useEffect } from "react";
+import { PageLayout } from "@/components/layout/PageLayout";
+import { useQuery } from "@tanstack/react-query";
+import { useLocation } from "wouter";
+import { SearchResults, WorkWithAuthor, FilterParams } from "@/lib/types";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { WorkCard } from "@/components/common/WorkCard";
+import { AuthorChip } from "@/components/common/AuthorChip";
+import { Card, CardContent } from "@/components/ui/card";
+import { FilterSidebar } from "@/components/explore/FilterSidebar";
+import { 
+  Search as SearchIcon, 
+  Grid, 
+  List, 
+  X, 
+  Filter, 
+  ChevronLeft, 
+  ChevronRight
+} from "lucide-react";
+import { Tag } from "@shared/schema";
+
+export default function Search() {
+  const [location, setLocation] = useLocation();
+  const [query, setQuery] = useState("");
+  const [activeTab, setActiveTab] = useState("all");
+  const [viewMode, setViewMode] = useState<'list' | 'grid'>('list');
+  const [showFilters, setShowFilters] = useState(false);
+  const [filters, setFilters] = useState<{
+    language?: string;
+    type?: string;
+    yearStart?: number;
+    yearEnd?: number;
+    tags?: number[];
+    page: number;
+  }>({
+    page: 1
+  });
+  
+  // Parse URL parameters
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.split('?')[1]);
+    const q = searchParams.get('q');
+    if (q) {
+      setQuery(q);
+    }
+    
+    // Parse other filter params
+    const language = searchParams.get('language');
+    const type = searchParams.get('type');
+    const yearStart = searchParams.get('yearStart');
+    const yearEnd = searchParams.get('yearEnd');
+    const tags = searchParams.get('tags');
+    
+    setFilters({
+      language: language || undefined,
+      type: type || undefined,
+      yearStart: yearStart ? parseInt(yearStart) : undefined,
+      yearEnd: yearEnd ? parseInt(yearEnd) : undefined,
+      tags: tags ? tags.split(',').map(Number) : undefined,
+      page: parseInt(searchParams.get('page') || '1')
+    });
+  }, [location]);
+
+  // Search results query
+  const { 
+    data: searchResults, 
+    isLoading: searchLoading 
+  } = useQuery<SearchResults>({
+    queryKey: ['/api/search', query],
+    queryFn: async () => {
+      if (!query || query.length < 2) return { works: [], authors: [] };
+      const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+      return await response.json();
+    },
+    enabled: query.length >= 2,
+  });
+
+  // Filter results query (for advanced filtering)
+  const { 
+    data: filteredWorks, 
+    isLoading: filterLoading 
+  } = useQuery<WorkWithAuthor[]>({
+    queryKey: ['/api/filter', filters],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      
+      if (query) params.append('q', query);
+      if (filters.language) params.append('language', filters.language);
+      if (filters.type) params.append('type', filters.type);
+      if (filters.yearStart) params.append('yearStart', filters.yearStart.toString());
+      if (filters.yearEnd) params.append('yearEnd', filters.yearEnd.toString());
+      if (filters.tags && filters.tags.length > 0) params.append('tags', filters.tags.join(','));
+      
+      const response = await fetch(`/api/filter?${params.toString()}`);
+      return await response.json();
+    },
+    enabled: activeTab === 'advanced' && (!!filters.language || !!filters.type || !!filters.yearStart || !!filters.yearEnd || !!(filters.tags && filters.tags.length > 0)),
+  });
+
+  // Get tags for filter sidebar
+  const { data: tags } = useQuery<Tag[]>({
+    queryKey: ['/api/tags'],
+  });
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (query.trim()) {
+      const newParams = new URLSearchParams();
+      newParams.append('q', query.trim());
+      
+      // Only include filter params if we're on advanced tab
+      if (activeTab === 'advanced') {
+        if (filters.language) newParams.append('language', filters.language);
+        if (filters.type) newParams.append('type', filters.type);
+        if (filters.yearStart) newParams.append('yearStart', filters.yearStart.toString());
+        if (filters.yearEnd) newParams.append('yearEnd', filters.yearEnd.toString());
+        if (filters.tags && filters.tags.length > 0) newParams.append('tags', filters.tags.join(','));
+      }
+      
+      setLocation(`/search?${newParams.toString()}`);
+    }
+  };
+
+  const handleFilterChange = (newFilters: Partial<typeof filters>) => {
+    setFilters(prev => ({ ...prev, ...newFilters, page: 1 }));
+  };
+
+  const handleClearSearch = () => {
+    setQuery("");
+    setLocation('/search');
+  };
+
+  const handlePageChange = (newPage: number) => {
+    setFilters(prev => ({ ...prev, page: newPage }));
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // Calculate pagination values
+  const totalItems = activeTab === 'works' 
+    ? searchResults?.works.length || 0 
+    : activeTab === 'authors' 
+      ? searchResults?.authors.length || 0
+      : activeTab === 'advanced'
+        ? filteredWorks?.length || 0
+        : (searchResults?.works.length || 0) + (searchResults?.authors.length || 0);
+  
+  const itemsPerPage = 10;
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const currentPage = filters.page;
+  
+  // Generate pagination numbers
+  const maxPageButtons = 5;
+  let startPage = Math.max(1, currentPage - Math.floor(maxPageButtons / 2));
+  let endPage = Math.min(totalPages, startPage + maxPageButtons - 1);
+  
+  if (endPage - startPage + 1 < maxPageButtons) {
+    startPage = Math.max(1, endPage - maxPageButtons + 1);
+  }
+  
+  const pageNumbers = [];
+  for (let i = startPage; i <= endPage; i++) {
+    pageNumbers.push(i);
+  }
+
+  // Handle display based on current active tab
+  const displayWorks = activeTab === 'advanced' 
+    ? filteredWorks || [] 
+    : searchResults?.works || [];
+
+  const isLoading = (searchLoading && activeTab !== 'advanced') || 
+                    (filterLoading && activeTab === 'advanced');
+  
+  const hasNoResults = query.length >= 2 && !isLoading && 
+                       (activeTab === 'all' || activeTab === 'works' || activeTab === 'advanced') && 
+                       displayWorks.length === 0;
+  
+  const hasNoAuthors = query.length >= 2 && !isLoading && 
+                      (activeTab === 'all' || activeTab === 'authors') && 
+                      (searchResults?.authors.length || 0) === 0;
+
+  return (
+    <PageLayout>
+      <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 py-8">
+        <div className="mb-8">
+          <h1 className="text-2xl md:text-3xl font-bold font-serif text-primary dark:text-primary-foreground mb-2">
+            Search Literary Works
+          </h1>
+          <p className="text-foreground/70 dark:text-foreground/70">
+            Discover literary treasures from our extensive collection
+          </p>
+        </div>
+
+        {/* Search Form */}
+        <form onSubmit={handleSearch} className="mb-8">
+          <div className="flex flex-col sm:flex-row gap-2">
+            <div className="relative flex-1">
+              <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="Search by title, author, or keyword..."
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="pl-10 h-11 pr-10"
+              />
+              {query && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleClearSearch}
+                  className="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0"
+                >
+                  <X className="h-4 w-4" />
+                  <span className="sr-only">Clear search</span>
+                </Button>
+              )}
+            </div>
+            <Button type="submit" className="h-11 px-6">
+              Search
+            </Button>
+          </div>
+        </form>
+
+        {/* Tab Navigation */}
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
+          <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab} className="w-full sm:w-auto">
+            <TabsList>
+              <TabsTrigger value="all">All Results</TabsTrigger>
+              <TabsTrigger value="works">Works</TabsTrigger>
+              <TabsTrigger value="authors">Authors</TabsTrigger>
+              <TabsTrigger value="advanced">Advanced</TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowFilters(!showFilters)}
+              className="sm:hidden"
+            >
+              <Filter className="h-4 w-4 mr-2" />
+              {showFilters ? 'Hide Filters' : 'Show Filters'}
+            </Button>
+            <div className="hidden sm:flex items-center gap-2">
+              <span className="text-sm text-foreground/70">View:</span>
+              <Button
+                size="icon"
+                variant={viewMode === 'grid' ? 'default' : 'ghost'}
+                className="h-8 w-8 p-0"
+                onClick={() => setViewMode('grid')}
+              >
+                <Grid className="h-4 w-4" />
+                <span className="sr-only">Grid view</span>
+              </Button>
+              <Button
+                size="icon"
+                variant={viewMode === 'list' ? 'default' : 'ghost'}
+                className="h-8 w-8 p-0"
+                onClick={() => setViewMode('list')}
+              >
+                <List className="h-4 w-4" />
+                <span className="sr-only">List view</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col lg:flex-row gap-8">
+          {/* Show filter sidebar in Advanced tab */}
+          {(activeTab === 'advanced' || showFilters) && (
+            <FilterSidebar
+              filters={filters}
+              onFilterChange={handleFilterChange}
+              tags={tags || []}
+            />
+          )}
+
+          {/* Results area */}
+          <div className="flex-1">
+            {/* Query info */}
+            {query && query.length >= 2 && (
+              <div className="mb-4 text-sm text-foreground/70">
+                {isLoading ? (
+                  <p>Searching for "{query}"...</p>
+                ) : (
+                  <p>
+                    Showing results for "<span className="font-medium text-foreground">{query}</span>"
+                    {activeTab !== 'advanced' && searchResults && (
+                      <span> - {searchResults.works.length} works, {searchResults.authors.length} authors found</span>
+                    )}
+                    {activeTab === 'advanced' && filteredWorks && (
+                      <span> - {filteredWorks.length} works match your filters</span>
+                    )}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Authors section in all or authors tab */}
+            {(activeTab === 'all' || activeTab === 'authors') && query.length >= 2 && (
+              <>
+                {activeTab === 'all' && searchResults?.authors && searchResults.authors.length > 0 && (
+                  <h2 className="text-xl font-medium font-serif mb-4 text-primary dark:text-primary-foreground">Authors</h2>
+                )}
+                
+                {isLoading ? (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+                    {Array.from({ length: 3 }).map((_, i) => (
+                      <Card key={i} className="bg-card">
+                        <CardContent className="p-6">
+                          <div className="flex items-center gap-3 mb-3">
+                            <div className="w-12 h-12 rounded-full bg-primary/10 animate-pulse"></div>
+                            <div>
+                              <div className="h-4 w-32 bg-primary/10 rounded animate-pulse mb-2"></div>
+                              <div className="h-3 w-24 bg-primary/10 rounded animate-pulse"></div>
+                            </div>
+                          </div>
+                          <div className="h-16 bg-primary/10 rounded animate-pulse"></div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                ) : (
+                  <>
+                    {searchResults?.authors && searchResults.authors.length > 0 && (
+                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+                        {searchResults.authors.map((author) => (
+                          <Card key={author.id} className="bg-card hover:shadow-md transition-shadow">
+                            <CardContent className="p-6">
+                              <AuthorChip author={author} size="lg" withLifeDates className="mb-3" />
+                              <p className="text-foreground/80 text-sm line-clamp-3 mb-3">
+                                {author.biography?.slice(0, 120)}...
+                              </p>
+                              <Button 
+                                size="sm" 
+                                variant="outline" 
+                                className="w-full"
+                                onClick={() => setLocation(`/authors/${author.slug}`)}
+                              >
+                                View Profile
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        ))}
+                      </div>
+                    )}
+                    
+                    {hasNoAuthors && activeTab === 'authors' && (
+                      <div className="text-center py-12 bg-muted/30 rounded-lg mb-8">
+                        <p className="text-lg text-foreground/70 mb-2">No authors found matching "{query}"</p>
+                        <p className="text-sm text-foreground/60">Try a different search term or check your spelling</p>
+                      </div>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+
+            {/* Works section */}
+            {(activeTab === 'all' || activeTab === 'works' || activeTab === 'advanced') && (
+              <>
+                {activeTab === 'all' && searchResults?.works && searchResults.works.length > 0 && (
+                  <h2 className="text-xl font-medium font-serif mb-4 text-primary dark:text-primary-foreground">Works</h2>
+                )}
+
+                {isLoading ? (
+                  viewMode === 'list' ? (
+                    <div className="space-y-4">
+                      {Array.from({ length: 5 }).map((_, i) => (
+                        <div key={i} className="h-28 bg-card rounded-lg animate-pulse"></div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                      {Array.from({ length: 6 }).map((_, i) => (
+                        <div key={i} className="h-48 bg-card rounded-lg animate-pulse"></div>
+                      ))}
+                    </div>
+                  )
+                ) : (
+                  <>
+                    {displayWorks.length > 0 ? (
+                      viewMode === 'list' ? (
+                        <div className="space-y-3">
+                          {displayWorks.map((work) => (
+                            <WorkCard key={work.id} work={work} />
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                          {displayWorks.map((work) => (
+                            <WorkCard key={work.id} work={work} grid />
+                          ))}
+                        </div>
+                      )
+                    ) : hasNoResults && (
+                      <div className="text-center py-12 bg-muted/30 rounded-lg">
+                        <p className="text-lg text-foreground/70 mb-2">No works found matching "{query}"</p>
+                        <p className="text-sm text-foreground/60">
+                          {activeTab === 'advanced' 
+                            ? 'Try adjusting your filters or using different search terms' 
+                            : 'Try a different search term or check your spelling'}
+                        </p>
+                      </div>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+
+            {/* Entry prompt when search is empty */}
+            {query.length < 2 && (
+              <div className="text-center py-16 bg-muted/30 rounded-lg">
+                <SearchIcon className="h-12 w-12 mx-auto mb-4 text-primary/50" />
+                <h3 className="text-xl font-medium mb-2 text-foreground">Start Your Literary Journey</h3>
+                <p className="text-foreground/70 max-w-md mx-auto mb-6">
+                  Enter a search term above to discover works by title, author, or keyword
+                </p>
+                <div className="flex flex-wrap justify-center gap-2 max-w-md mx-auto">
+                  {['Poetry', 'Novel', 'Tolstoy', 'Shakespeare', 'Modernism', 'Love'].map((term) => (
+                    <Button 
+                      key={term} 
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => {
+                        setQuery(term);
+                        const newParams = new URLSearchParams();
+                        newParams.append('q', term);
+                        setLocation(`/search?${newParams.toString()}`);
+                      }}
+                    >
+                      {term}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Pagination */}
+            {totalPages > 1 && !isLoading && (
+              <div className="mt-8 flex justify-center">
+                <nav className="flex items-center gap-1" aria-label="Pagination">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
+                    disabled={currentPage === 1}
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                    <span className="sr-only">Previous</span>
+                  </Button>
+                  
+                  {startPage > 1 && (
+                    <>
+                      <Button
+                        variant={currentPage === 1 ? 'default' : 'ghost'}
+                        size="sm"
+                        onClick={() => handlePageChange(1)}
+                      >
+                        1
+                      </Button>
+                      {startPage > 2 && <span className="px-2 text-foreground/60">...</span>}
+                    </>
+                  )}
+                  
+                  {pageNumbers.map(number => (
+                    <Button
+                      key={number}
+                      variant={currentPage === number ? 'default' : 'ghost'}
+                      size="sm"
+                      onClick={() => handlePageChange(number)}
+                    >
+                      {number}
+                    </Button>
+                  ))}
+                  
+                  {endPage < totalPages && (
+                    <>
+                      {endPage < totalPages - 1 && <span className="px-2 text-foreground/60">...</span>}
+                      <Button
+                        variant={currentPage === totalPages ? 'default' : 'ghost'}
+                        size="sm"
+                        onClick={() => handlePageChange(totalPages)}
+                      >
+                        {totalPages}
+                      </Button>
+                    </>
+                  )}
+                  
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
+                    disabled={currentPage === totalPages}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                    <span className="sr-only">Next</span>
+                  </Button>
+                </nav>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}