feat: implement CommandPalette for enhanced navigation and recent pages tracking

packages/ui/src/components/atoms/Command.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import {Command as CommandPrimitive} from 'cmdk';
 import {Search} from 'lucide-react';
 
 import {cn} from '../../lib';
-import {Dialog, DialogContent} from './Dialog';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -13,24 +13,34 @@ const Command = React.forwardRef<
 >(({className, ...props}, ref) => (
   <CommandPrimitive
     ref={ref}
-    className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950',
-      className,
-    )}
+    className={cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950', className)}
     {...props}
   />
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-const CommandDialog = ({children, ...props}: React.ComponentProps<typeof Dialog>) => {
+const CommandDialog = ({children, ...props}: React.ComponentProps<typeof DialogPrimitive.Root>) => {
   return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
+    <DialogPrimitive.Root {...props}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-150" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          onCloseAutoFocus={e => e.preventDefault()}
+          className={cn(
+            'fixed inset-x-0 top-[14%] z-50 mx-auto w-[92vw] max-w-2xl outline-none',
+            'overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-2xl',
+            'duration-150',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-top-3',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-top-3',
+          )}
+        >
+          <Command className="[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-14 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2.5 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4">
+            {children}
+          </Command>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
   );
 };
 
@@ -38,12 +48,12 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({className, ...props}, ref) => (
-  <div className="flex items-center border-b border-neutral-200 px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <div className="flex items-center border-b border-neutral-200 px-4 focus-within:border-neutral-200" cmdk-input-wrapper="">
+    <Search className="mr-3 h-5 w-5 shrink-0 text-neutral-400" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-14 w-full rounded-md bg-transparent text-sm outline-none! ring-0! shadow-none! border-transparent! placeholder:text-neutral-400 disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
@@ -59,7 +69,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('max-h-[440px] overflow-y-auto overflow-x-hidden', className)}
     {...props}
   />
 ));
@@ -70,11 +80,7 @@ const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm text-neutral-500"
-    {...props}
-  />
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm text-neutral-500" {...props} />
 ));
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
@@ -86,7 +92,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500',
+      'overflow-hidden p-2 text-neutral-950 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-400 [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider',
       className,
     )}
     {...props}
@@ -99,11 +105,7 @@ const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(({className, ...props}, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 h-px bg-neutral-200', className)}
-    {...props}
-  />
+  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-neutral-200', className)} {...props} />
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
@@ -114,7 +116,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none text-neutral-900 aria-selected:bg-neutral-100 aria-selected:text-neutral-900 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:bg-neutral-50',
+      'relative flex w-full cursor-pointer select-none items-center rounded-md px-3 py-2.5 text-sm outline-none text-neutral-900 aria-selected:bg-neutral-100 aria-selected:text-neutral-900 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:bg-neutral-50',
       className,
     )}
     {...props}
@@ -123,19 +125,8 @@ const CommandItem = React.forwardRef<
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-neutral-500',
-        className,
-      )}
-      {...props}
-    />
-  );
+const CommandShortcut = ({className, ...props}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-neutral-500', className)} {...props} />;
 };
 CommandShortcut.displayName = 'CommandShortcut';
 

packages/ui/src/components/atoms/Kbd.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {cn} from '../../lib';
+
+export const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({className, ...props}, ref) => (
+    <kbd
+      ref={ref}
+      className={cn(
+        'inline-flex h-5 items-center justify-center rounded border border-neutral-300 bg-neutral-100 px-1.5 font-mono text-[10px] font-medium text-neutral-600',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Kbd.displayName = 'Kbd';

packages/ui/src/components/atoms/index.ts

@@ -10,6 +10,7 @@ export * from './Dialog';
 export * from './DropdownMenu';
 export * from './Form';
 export * from './IconSpinner';
+export * from './Kbd';
 export * from './Input';
 export * from './Label';
 export * from './Loader';