feat: trigger search on enter

Author: vemonet

src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Search, Unplug, Server, Trash2, Download } from 'lucide-react';
+import { Search, Unplug, Server, Trash2, Download, CornerDownLeft } from 'lucide-react';
 
 import { buildIdeConfigForPkg, buildIdeConfigForRemote } from '~/lib/ide-config';
 import { Card } from '~/components/ui/card';
@@ -288,33 +288,35 @@ export default function App() {
     [registryUrl, resultsPerPage]
   );
 
-  // Fetch servers when search, apiUrl, filterDate, or resultsPerPage changes
+  // Fetch servers when apiUrl, filterDate, or resultsPerPage changes (not on every keystroke).
+  // Use `performSearch` to trigger searches from the UI (Enter or button).
   useEffect(() => {
+    // Reset pagination and fetch for the currently confirmed `search` value.
     setCurrentCursor(null);
     setPreviousCursors([]);
     setNextCursor(null);
     setCurrentPage(1);
-    // Reset page cursor map for the new search / filters / settings.
+    // Reset page cursor map for the new filters / settings.
     setPageCursors({ 1: null });
     fetchServers(search, null, filterDate);
-  }, [search, registryUrl, filterDate, resultsPerPage, fetchServers]);
-
-  // // Initialize Orama (client-side) on mount
-  // useEffect(() => {
-  //   let mounted = true;
-  //   (async () => {
-  //     try {
-  //       if (typeof window === 'undefined') return;
-  //       await initOrama();
-  //       if (!mounted) return;
-  //     } catch (err) {
-  //       // ignore
-  //     }
-  //   })();
-  //   return () => {
-  //     mounted = false;
-  //   };
-  // }, []);
+    // NOTE: we intentionally omit `search` from the dependency list so typing into
+    // the input doesn't trigger a fetch on every keystroke. Searches are triggered
+    // explicitly via `performSearch` which updates `search` and performs the fetch.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [registryUrl, filterDate, resultsPerPage, fetchServers]);
+
+  // Helper to perform a confirmed search (called on Enter or when clicking the search button)
+  const performSearch = (newSearch: string) => {
+    // Update the confirmed `search` state which also keeps URL in sync via the existing effect.
+    setSearch(newSearch);
+    // If the query differs from the current confirmed search, reset pagination and fetch
+    setCurrentCursor(null);
+    setPreviousCursors([]);
+    setNextCursor(null);
+    setCurrentPage(1);
+    setPageCursors({ 1: null });
+    fetchServers(newSearch, null, filterDate);
+  };
 
   const handleNext = () => {
     if (nextCursor) {
@@ -551,21 +553,38 @@ export default function App() {
             <div className="relative flex gap-2 items-center">
               <div className="relative flex-1">
                 <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <input
-                  type="text"
-                  placeholder="Search MCP servers by name"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  className="w-full rounded-lg border border-input bg-background px-10 py-3 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                />
+                <div className="flex">
+                  <input
+                    type="text"
+                    placeholder="Search MCP servers by name"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        performSearch(search);
+                      }
+                    }}
+                    className="w-full rounded-lg border border-input bg-background px-10 py-3 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => performSearch(search)}
+                    className="-ml-10 mr-2 self-center h-5 w-8 px-2 text-muted-foreground/80"
+                    aria-label="Search"
+                  >
+                    <CornerDownLeft className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
               </div>
               {/* Filter Date Button */}
               <DatePicker
                 date={filterDate}
                 onDateChange={setFilterDate}
                 placeholder="Filter by date"
                 variant={filterDate ? 'default' : 'outline'}
-                className="h-auto py-3 px-4"
+                className="h-auto py-3 px-4 text-muted-foreground"
               />
               {/* Results Per Page Selector */}
               <DropdownMenu>

src/components/about.tsx

@@ -61,8 +61,8 @@ export const AboutPopup = () => {
             <div className="flex gap-3">
               <Server className="h-5 w-5 flex-shrink-0 mt-0.5 text-primary" />
               <p>
-                Build a stack with a list of MCP servers, that can then be exported in VSCode{' '}
-                <code className="text-xs bg-muted px-1 py-0.5 rounded">mcp.json</code> or Cursor formats.
+                Build a stack with a list of MCP servers, that can then be exported to VSCode or Cursor{' '}
+                <code className="text-xs bg-muted px-1 py-0.5 rounded">mcp.json</code>.
               </p>
             </div>
             <div className="flex gap-3">

src/components/logos/docker-logo.svg

@@ -18,7 +18,7 @@ import { ServerPkg } from './server-pkg';
 import { ServerRemote } from './server-remote';
 import { getRemoteIcon, getPkgIcon } from './server-utils';
 import { Button } from './ui/button';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+import { Dialog, DialogContent, DialogTrigger } from './ui/dialog';
 
 /** List and select versions with dropdown */
 const VersionList = ({

src/components/server-card.tsx

@@ -18,7 +18,7 @@ import { Input } from './ui/input';
 import { getPkgDefaultCmd, getPkgIcon, getPkgUrl } from './server-utils';
 import { PasswordInput } from './ui/password-input';
 import { ServerActionButtons } from './server-action-buttons';
-import { DialogDescription, DialogHeader, DialogTitle } from './ui/dialog';
+import { DialogHeader, DialogTitle } from './ui/dialog';
 
 /** Display all details on a MCP server */
 export const ServerPkg = ({

src/components/server-pkg.tsx

@@ -1,8 +1,9 @@
-import { HardDriveUpload, Rss, Link2, Container, Package } from 'lucide-react';
+import { HardDriveUpload, Rss, Link2, Package } from 'lucide-react';
 
 import type { McpServerPkg, McpServerRemote } from '~/lib/types';
 import PypiLogo from '~/components/logos/pypi-logo.svg';
 import NpmLogo from '~/components/logos/npm-logo.svg';
+import DockerLogo from '~/components/logos/docker-logo.svg';
 
 /** Get icon for remote access points */
 export const getRemoteIcon = (remote: McpServerRemote) => {
@@ -22,7 +23,7 @@ export const getPkgIcon = (pkg: McpServerPkg) => {
   } else if (pkg.registryType === 'pypi') {
     return <img src={PypiLogo} alt="PyPI" className="h-4 w-4" style={{ filter: 'grayscale(40%)' }} />;
   } else if (pkg.registryType === 'oci' || pkg.registryType === 'docker') {
-    return <Container className="h-4 w-4 text-muted-foreground" />;
+    return <img src={DockerLogo} alt="Docker" className="h-4 w-4" style={{ filter: 'grayscale(40%)' }} />;
   } else {
     return <Package className="h-4 w-4 text-muted-foreground" />;
   }

src/components/server-utils.tsx

@@ -57,7 +57,6 @@ export function ThemeProvider({
   );
 }
 
-// eslint-disable-next-line react-refresh/only-export-components
 export const useTheme = () => {
   const context = useContext(ThemeProviderContext);
   if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');

src/components/theme/theme-provider.tsx

@@ -47,7 +47,7 @@ function Button({
   }) {
   const Comp = asChild ? Slot : 'button';
 
-  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size }), className)} {...props} />;
 }
 
 export { Button, buttonVariants };