@gmickel/gno 0.7.0 → 0.8.2

package/src/serve/public/pages/Search.tsx

@@ -1,12 +1,13 @@
-import { ArrowLeft, FileText, Search as SearchIcon, Zap } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { Loader } from '../components/ai-elements/loader';
-import { Badge } from '../components/ui/badge';
-import { Button } from '../components/ui/button';
-import { ButtonGroup } from '../components/ui/button-group';
-import { Card, CardContent } from '../components/ui/card';
-import { Input } from '../components/ui/input';
-import { apiFetch } from '../hooks/use-api';
+import { ArrowLeft, FileText, Search as SearchIcon, Zap } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Loader } from "../components/ai-elements/loader";
+import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
+import { ButtonGroup } from "../components/ui/button-group";
+import { Card, CardContent } from "../components/ui/card";
+import { Input } from "../components/ui/input";
+import { apiFetch } from "../hooks/use-api";
 
 /**
  * Render snippet with <mark> tags as highlighted spans.
@@ -18,7 +19,7 @@ function renderSnippet(snippet: string): React.ReactNode {
   let key = 0;
 
   while (remaining.length > 0) {
-    const markStart = remaining.indexOf('<mark>');
+    const markStart = remaining.indexOf("<mark>");
     if (markStart === -1) {
       parts.push(remaining);
       break;
@@ -28,7 +29,7 @@ function renderSnippet(snippet: string): React.ReactNode {
       parts.push(remaining.slice(0, markStart));
     }
 
-    const markEnd = remaining.indexOf('</mark>', markStart);
+    const markEnd = remaining.indexOf("</mark>", markStart);
     if (markEnd === -1) {
       parts.push(remaining.slice(markStart));
       break;
@@ -84,13 +85,13 @@ interface Capabilities {
   answer: boolean;
 }
 
-type SearchMode = 'bm25' | 'hybrid';
+type SearchMode = "bm25" | "hybrid";
 
 export default function Search({ navigate }: PageProps) {
-  const [query, setQuery] = useState('');
-  const [mode, setMode] = useState<SearchMode>('bm25');
+  const [query, setQuery] = useState("");
+  const [mode, setMode] = useState<SearchMode>("bm25");
   const [results, setResults] = useState<SearchResult[]>([]);
-  const [meta, setMeta] = useState<SearchResponse['meta'] | null>(null);
+  const [meta, setMeta] = useState<SearchResponse["meta"] | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [searched, setSearched] = useState(false);
@@ -99,16 +100,16 @@ export default function Search({ navigate }: PageProps) {
   // Fetch capabilities on mount
   useEffect(() => {
     async function fetchCapabilities() {
-      const { data } = await apiFetch<Capabilities>('/api/capabilities');
+      const { data } = await apiFetch<Capabilities>("/api/capabilities");
       if (data) {
         setCapabilities(data);
         // Auto-select hybrid if available
         if (data.hybrid) {
-          setMode('hybrid');
+          setMode("hybrid");
         }
       }
     }
-    fetchCapabilities();
+    void fetchCapabilities();
   }, []);
 
   const handleSearch = async (e: React.FormEvent) => {
@@ -122,10 +123,10 @@ export default function Search({ navigate }: PageProps) {
     setSearched(true);
 
     // Use /api/query for hybrid, /api/search for bm25
-    const endpoint = mode === 'hybrid' ? '/api/query' : '/api/search';
+    const endpoint = mode === "hybrid" ? "/api/query" : "/api/search";
 
     const { data, error } = await apiFetch<SearchResponse>(endpoint, {
-      method: 'POST',
+      method: "POST",
       body: JSON.stringify({ query, limit: 20 }),
     });
 
@@ -163,23 +164,27 @@ export default function Search({ navigate }: PageProps) {
       <main className="mx-auto max-w-4xl p-8">
         {/* Search Form */}
         <form className="mb-8" onSubmit={handleSearch}>
-          <div className="relative">
-            <SearchIcon className="absolute top-1/2 left-4 size-5 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              className="border-border bg-card py-6 pr-4 pl-12 text-lg focus:border-primary"
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search your documents..."
-              type="text"
-              value={query}
-            />
-            <Button
-              className="absolute top-1/2 right-2 -translate-y-1/2"
-              disabled={loading || !query.trim()}
-              size="sm"
-              type="submit"
-            >
-              {loading ? <Loader size={16} /> : 'Search'}
-            </Button>
+          <div className="group relative">
+            {/* Gradient border effect on focus */}
+            <div className="pointer-events-none absolute -inset-[1px] rounded-lg bg-gradient-to-r from-primary/50 via-primary to-primary/50 opacity-0 blur-sm transition-opacity duration-300 group-focus-within:opacity-100" />
+            <div className="relative">
+              <SearchIcon className="absolute top-1/2 left-4 size-5 -translate-y-1/2 text-muted-foreground transition-colors duration-200 group-focus-within:text-primary" />
+              <Input
+                className="border-border/50 bg-card py-6 pr-4 pl-12 text-lg transition-all duration-200 focus:border-primary focus:bg-card/80 focus:shadow-[0_0_20px_-5px_hsl(var(--primary)/0.3)]"
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search your documents..."
+                type="text"
+                value={query}
+              />
+              <Button
+                className="absolute top-1/2 right-2 -translate-y-1/2"
+                disabled={loading || !query.trim()}
+                size="sm"
+                type="submit"
+              >
+                {loading ? <Loader size={16} /> : "Search"}
+              </Button>
+            </div>
           </div>
 
           {/* Mode selector */}
@@ -188,42 +193,42 @@ export default function Search({ navigate }: PageProps) {
             <ButtonGroup>
               <Button
                 className={
-                  mode === 'bm25'
-                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
-                    : ''
+                  mode === "bm25"
+                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                    : ""
                 }
-                onClick={() => setMode('bm25')}
+                onClick={() => setMode("bm25")}
                 size="sm"
                 type="button"
-                variant={mode === 'bm25' ? 'default' : 'outline'}
+                variant={mode === "bm25" ? "default" : "outline"}
               >
                 BM25
               </Button>
               <Button
                 className={
-                  mode === 'hybrid'
-                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
-                    : ''
+                  mode === "hybrid"
+                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                    : ""
                 }
                 disabled={!hybridAvailable}
-                onClick={() => setMode('hybrid')}
+                onClick={() => setMode("hybrid")}
                 size="sm"
                 title={
                   hybridAvailable
-                    ? 'Hybrid search with vector + reranking'
-                    : 'Hybrid search not available (no embedding model)'
+                    ? "Hybrid search with vector + reranking"
+                    : "Hybrid search not available (no embedding model)"
                 }
                 type="button"
-                variant={mode === 'hybrid' ? 'default' : 'outline'}
+                variant={mode === "hybrid" ? "default" : "outline"}
               >
                 <Zap className="mr-1 size-3" />
                 Hybrid
               </Button>
             </ButtonGroup>
             <span className="text-muted-foreground/70 text-xs">
-              {mode === 'bm25'
-                ? 'Keyword-based full-text search'
-                : 'BM25 + vector + query expansion + reranking'}
+              {mode === "bm25"
+                ? "Keyword-based full-text search"
+                : "BM25 + vector + query expansion + reranking"}
             </span>
           </div>
         </form>
@@ -246,11 +251,28 @@ export default function Search({ navigate }: PageProps) {
         {/* Empty state */}
         {!loading && searched && results.length === 0 && !error && (
           <div className="py-20 text-center">
-            <FileText className="mx-auto mb-4 size-12 text-muted-foreground" />
-            <h3 className="mb-2 font-medium text-lg">No results found</h3>
-            <p className="text-muted-foreground">
-              Try adjusting your search terms
+            <div className="relative mx-auto mb-6 size-20">
+              <div className="absolute inset-0 animate-pulse rounded-full bg-primary/10" />
+              <div className="absolute inset-2 rounded-full bg-card" />
+              <FileText className="absolute inset-0 m-auto size-8 text-muted-foreground" />
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">No matches found</h3>
+            <p className="mx-auto mb-6 max-w-sm text-muted-foreground">
+              We couldn't find any documents matching "{query}". Try different
+              keywords or check your spelling.
             </p>
+            <div className="flex justify-center gap-3">
+              <Button onClick={() => setQuery("")} size="sm" variant="outline">
+                Clear search
+              </Button>
+              <Button
+                onClick={() => setMode(mode === "bm25" ? "hybrid" : "bm25")}
+                size="sm"
+                variant="ghost"
+              >
+                Try {mode === "bm25" ? "hybrid" : "keyword"} mode
+              </Button>
+            </div>
           </div>
         )}
 
@@ -259,7 +281,7 @@ export default function Search({ navigate }: PageProps) {
           <div className="space-y-4">
             <div className="mb-6 flex items-center justify-between">
               <p className="text-muted-foreground text-sm">
-                {results.length} result{results.length !== 1 ? 's' : ''}
+                {results.length} result{results.length !== 1 ? "s" : ""}
               </p>
               {meta && (
                 <div className="flex items-center gap-2">
@@ -302,7 +324,7 @@ export default function Search({ navigate }: PageProps) {
                 <CardContent className="py-4">
                   <div className="mb-2 flex items-start justify-between gap-4">
                     <h3 className="font-medium text-primary underline-offset-2 group-hover:underline">
-                      {r.title || r.uri.split('/').pop()}
+                      {r.title || r.uri.split("/").pop()}
                     </h3>
                     <Badge
                       className="shrink-0 font-mono text-xs"