fix: better search command (#36)

Author: mehdibha

www/src/components/search-command.tsx

@@ -4,7 +4,16 @@ import React from "react";
 import { useRouter } from "next/navigation";
 import { useDocsSearch } from "fumadocs-core/search/client";
 import { SortedResult } from "fumadocs-core/server";
-import { FileTextIcon, HashIcon, TextIcon } from "lucide-react";
+import {
+  ChevronsUpDownIcon,
+  CornerDownLeftIcon,
+  FileTextIcon,
+  HashIcon,
+  Loader2Icon,
+  SearchIcon,
+  TextIcon,
+  Undo2Icon,
+} from "lucide-react";
 import { kekabCaseToTitle } from "@/lib/string";
 import { useCommandMenuInputRef } from "@/hooks/use-focus-command-menu";
 import {
@@ -85,7 +94,17 @@ export const SearchCommand = ({
         onValueChange={setSearch}
         autoFocus
         placeholder="Search a component, a block, a hook..."
-        wrapperClassName={cn(animated && "border-b-0")}
+        icon={
+          query.isLoading && search !== "" ? (
+            <Loader2Icon className="animate-spin" />
+          ) : (
+            <SearchIcon />
+          )
+        }
+        wrapperClassName={cn(
+          "[&_svg]:text-fg-muted [&_svg]:size-4",
+          animated && "border-b-0"
+        )}
       />
       {animated && (
         <CommandSeparator className="before:opacity-1 before:animate-loading before:delay-900 relative h-[2px] overflow-hidden before:absolute before:left-0 before:top-0 before:h-full before:w-1/2 before:bg-[linear-gradient(90deg,rgba(0,0,0,0)_0,#707070_50%,rgba(0,0,0,0)_100%)] before:opacity-0 before:content-['']" />
@@ -118,6 +137,18 @@ export const SearchCommand = ({
           </CommandGroup>
         ))}
       </CommandList>
+      {!animated && (
+        <div className="text-fg-muted flex items-center justify-end gap-4 rounded-b-[inherit] border-t p-3 text-xs [&_svg]:size-4">
+          <div className="flex items-center gap-1">
+            <ChevronsUpDownIcon />
+            <span>Navigate</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <CornerDownLeftIcon />
+            <span>Go</span>
+          </div>
+        </div>
+      )}
     </CommandRoot>
   );
 };

www/src/components/sidebar.tsx

@@ -23,6 +23,7 @@ import {
 } from "@/registry/ui/default/core/collapsible";
 import { Dialog, DialogRoot } from "@/registry/ui/default/core/dialog";
 import { Kbd } from "@/registry/ui/default/core/kbd";
+import { DismissButton } from "@/registry/ui/default/core/overlay";
 import { ScrollArea } from "@/registry/ui/default/core/scroll-area";
 import { Tooltip, TooltipProps } from "@/registry/ui/default/core/tooltip";
 import { cn } from "@/registry/ui/default/lib/cn";
@@ -286,8 +287,19 @@ const SearchCommandDialog = ({ isCollapsed }: { isCollapsed: boolean }) => {
           </span>
         </SidebarButton>
       </StyledTooltip>
-      <Dialog>
-        <SearchCommand onRunCommand={() => setIsOpen(false)} />
+      <Dialog className="!p-0" showDismissButton={false}>
+        <SearchCommand
+          onRunCommand={() => setIsOpen(false)}
+          className="h-72 max-h-full"
+        />
+        <DismissButton
+          variant="outline"
+          shape="rectangle"
+          size="sm"
+          className="h-7 px-2 text-xs font-normal"
+        >
+          Esc
+        </DismissButton>
       </Dialog>
     </DialogRoot>
   );

www/src/registry/ui/default/core/command/command.tsx

@@ -25,16 +25,17 @@ type CommandInputProps = React.ComponentPropsWithoutRef<
   typeof CommandPrimitive.Input
 > & {
   wrapperClassName?: string;
+  icon?: React.ReactNode;
 };
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   CommandInputProps
->(({ className, wrapperClassName, ...props }, ref) => (
+>(({ className, wrapperClassName, icon, ...props }, ref) => (
   <div
-    className={cn("flex items-center border-b px-3", wrapperClassName)}
+    className={cn("flex items-center gap-2 border-b px-3", wrapperClassName)}
     cmdk-input-wrapper=""
   >
-    <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    {icon || <SearchIcon className="size-4 shrink-0" />}
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
@@ -56,7 +57,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("flex-1 overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
 ));

www/src/registry/ui/default/core/overlay/overlay.tsx

@@ -309,6 +309,7 @@ export {
   PopoverOverlay,
   DrawerOverlay,
   ModalOverlay,
+  DismissButton,
   drawerVariants,
   modalVariants,
   popoverOverlayVariants,

www/src/styles/globals.css

@@ -265,6 +265,10 @@
     @apply absolute left-0 top-3 h-3 w-[1px] bg-border content-[''];
   }
 
+  .focus-ring {
+		@apply ring-team-current ring-offset-4 ring-offset-white transition duration-300 focus-within:outline-none focus-within:ring-2 focus-within:ring-team-current hover:ring-2 hover:ring-team-current focus:outline-none focus:ring-2 focus:ring-team-current disabled:ring-0 group-hover:ring-2 group-hover:ring-team-current group-focus:ring-2 group-focus:ring-team-current dark:ring-offset-gray-900;
+	}
+
   @media (max-width: 640px) {
     .container {
       @apply px-4;