feat: improve command search items

Author: pheralb

apps/website/src/components/docs/search-docs.tsx

@@ -10,9 +10,11 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
+  CommandSeparator,
 } from "@/components/ui/command";
 import { Button } from "@/components/ui/button";
 
+import { cn } from "@/utils/cn";
 import { SearchIcon } from "lucide-react";
 import { getDocsByFolder } from "@/utils/docs";
 
@@ -54,23 +56,42 @@ const SearchDocs = () => {
         <CommandInput placeholder="Search" />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
-          {Object.entries(docsByFolder).map(([folder, docs]) => (
-            <CommandGroup key={folder} heading={folder} className="my-2">
-              {docs.map((doc) => (
-                <CommandItem
-                  key={doc._meta.path}
-                  onSelect={() => {
-                    router.push(`/docs/${doc.folder}/${doc._meta.path}`);
-                    setOpen(false);
-                  }}
-                >
-                  <span className="font-medium">{doc.title}</span>
-                  <span className="max-w-110 truncate text-xs text-neutral-600 dark:text-neutral-400">
-                    {doc.description}
-                  </span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
+          {Object.entries(docsByFolder).map(([folder, docs], index, array) => (
+            <div key={folder}>
+              <CommandGroup heading={folder} className="my-1">
+                {docs.map((doc) => (
+                  <CommandItem
+                    key={doc._meta.path}
+                    onSelect={() => {
+                      router.push(`/docs/${doc.folder}/${doc._meta.path}`);
+                      setOpen(false);
+                    }}
+                  >
+                    <span className="font-medium">{doc.title}</span>
+                    <span className="max-w-110 truncate text-xs text-neutral-600 dark:text-neutral-400">
+                      {doc.description}
+                    </span>
+                    {doc.category && (
+                      <div className="mt-1 flex items-center space-x-1">
+                        {doc.category.map((cat) => (
+                          <span
+                            key={cat}
+                            className={cn(
+                              "bg-neutral-100 dark:bg-neutral-800",
+                              "border border-neutral-300 dark:border-neutral-700",
+                              "rounded-full px-2 py-0.5 text-xs tracking-tight text-neutral-600 dark:text-neutral-300",
+                            )}
+                          >
+                            {cat}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              {index < array.length - 1 && <CommandSeparator />}
+            </div>
           ))}
         </CommandList>
       </CommandDialog>

apps/website/src/components/ui/command.tsx

@@ -155,7 +155,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "relative flex cursor-default flex-col items-start justify-start rounded-sm px-4 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-neutral-500 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
+        "relative flex cursor-default flex-col items-start justify-start rounded-sm px-4 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-200/70 data-[selected=true]:text-neutral-900 dark:data-[selected=true]:bg-neutral-800/70 dark:data-[selected=true]:text-neutral-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-neutral-500 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
         className,
       )}
       {...props}