Add Token Search

package.json

@@ -42,6 +42,7 @@
     "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "framer-motion": "^12.8.0",
     "graphql-request": "^7.1.2",
     "i18next": "^25.2.0",

src/components/TokenCommandMenu.tsx

@@ -0,0 +1,135 @@
+import { useState, useEffect, useMemo } from "react";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandItem,
+  CommandGroup,
+} from "@/components/ui/command";
+import { useAllCoins } from "@/hooks/metadata/use-all-coins";
+import { SearchIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTheme } from "@/lib/theme";
+import { TokenImage } from "./TokenImage";
+import { Link } from "@tanstack/react-router";
+
+export function TokenCommandMenu() {
+  const { theme } = useTheme();
+  const { tokens } = useAllCoins();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+
+  // Cmd+K or Ctrl+K to toggle
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  // Token filtering
+  const filteredTokens = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return [];
+
+    return tokens.filter(
+      (t) =>
+        (t.name && t.name.toLowerCase().includes(q)) ||
+        (t.symbol && t.symbol.toLowerCase().includes(q)),
+    );
+  }, [query, tokens]);
+
+  const isDark = theme === "dark";
+
+  return (
+    <>
+      {/* Fake Search Bar */}
+      <div
+        onClick={() => setOpen(true)}
+        className={cn(
+          "flex items-center justify-between w-full px-4 py-2 rounded-xl backdrop-blur-md border transition",
+          isDark
+            ? "bg-black/10 border-white/20 hover:bg-white/20 text-white"
+            : "text-black bg-white/50 border-white/30 hover:bg-white/30",
+        )}
+      >
+        <div className="flex items-center gap-2 text-white">
+          <SearchIcon className="h-4 w-4 text-gray-300" />
+          <span
+            className={cn(
+              "text-sm",
+              isDark ? "text-white/80" : "text-black/80",
+            )}
+          >
+            Search tokens...
+          </span>
+        </div>
+        <kbd
+          className={cn(
+            "text-xs border border-white/20 px-1.5 py-0.5 rounded",
+            isDark ? "text-white/50 bg-black/60" : "text-black/50 bg-white/10",
+          )}
+        >
+          ⌘ K
+        </kbd>
+      </div>
+
+      {/* Command Dialog */}
+      <CommandDialog
+        className={cn(
+          "backdrop-blur-md rounded-xl p-2 shadow-xl",
+          isDark ? "bg-black/20" : "bg-white/30",
+        )}
+        open={open}
+        onOpenChange={setOpen}
+      >
+        <CommandInput
+          placeholder="Search tokens..."
+          value={query}
+          onValueChange={setQuery}
+        />
+        <CommandList className={cn("p-2")}>
+          {filteredTokens.length === 0 ? (
+            <CommandEmpty>No tokens found.</CommandEmpty>
+          ) : (
+            <CommandGroup heading="Matching Tokens">
+              {filteredTokens.map((token) => (
+                <CommandItem
+                  className="blur-none"
+                  key={token.id?.toString() ?? "eth-pseudo"}
+                  onSelect={() => {
+                    setQuery(token.symbol);
+                    setOpen(false);
+                  }}
+                >
+                  <div className="flex justify-between w-full items-center space-x-2">
+                    <div className="flex items-center space-x-2">
+                      <TokenImage token={token} />
+                      <div className="flex flex-col text-left">
+                        <span className="font-medium">{token.symbol}</span>
+                        <span className="text-xs opacity-70">{token.name}</span>
+                      </div>
+                    </div>
+                    {token?.id !== null && (
+                      <Link
+                        to="/c/$coinId"
+                        params={{ coinId: token.id.toString() }}
+                      >
+                        View
+                      </Link>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

src/components/ui/command.tsx

@@ -0,0 +1,186 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0 border-white/20", className)}
+      >
+        <Command
+          className={cn(
+            "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+            className,
+          )}
+        >
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};