feat(home): move manual booking to responsive dialog

- Add Dice UI responsive-dialog component
- Move manual booking form to dialog (drawer on mobile)
- Filter past time slots when booking for today
- Rename button to 'Nueva Reserva'

apps/frontend/src/components/ui/dialog.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import * as React from 'react';
 

apps/frontend/src/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/lib/utils';
+
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('font-heading text-base font-medium text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

apps/frontend/src/components/ui/responsive-dialog.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
+import { useAsRef } from '@/hooks/use-as-ref';
+import { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect';
+import { useLazyRef } from '@/hooks/use-lazy-ref';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+const ROOT_NAME = 'ResponsiveDialog';
+
+interface StoreState {
+  open: boolean;
+  isMobile: boolean;
+}
+
+interface Store {
+  subscribe: (callback: () => void) => () => void;
+  getState: () => StoreState;
+  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
+  notify: () => void;
+}
+
+const StoreContext = React.createContext<Store | null>(null);
+
+function useStore<T>(selector: (state: StoreState) => T, ogStore?: Store | null): T {
+  const contextStore = React.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+
+  if (!store) {
+    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
+  }
+
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+
+interface ResponsiveDialogProps extends React.ComponentProps<typeof Dialog> {
+  breakpoint?: number;
+}
+
+function ResponsiveDialog({
+  breakpoint = 768,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange: onOpenChangeProp,
+  ...props
+}: ResponsiveDialogProps) {
+  const isMobile = useIsMobile(breakpoint);
+
+  const listenersRef = useLazyRef(() => new Set<() => void>());
+  const stateRef = useLazyRef<StoreState>(() => ({
+    open: openProp ?? defaultOpen,
+    isMobile,
+  }));
+
+  const onOpenChangeRef = useAsRef(onOpenChangeProp);
+
+  const store = React.useMemo<Store>(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value) => {
+        if (Object.is(stateRef.current[key], value)) return;
+
+        if (key === 'open' && typeof value === 'boolean') {
+          stateRef.current.open = value;
+          onOpenChangeRef.current?.(value);
+        } else {
+          stateRef.current[key] = value;
+        }
+
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      },
+    };
+  }, [listenersRef, stateRef, onOpenChangeRef]);
+
+  if (stateRef.current.isMobile !== isMobile) {
+    stateRef.current.isMobile = isMobile;
+  }
+
+  const open = useStore((state) => state.open, store);
+
+  useIsomorphicLayoutEffect(() => {
+    if (openProp !== undefined) {
+      store.setState('open', openProp);
+    }
+  }, [openProp]);
+
+  const onOpenChange = React.useCallback(
+    (value: boolean) => {
+      store.setState('open', value);
+    },
+    [store]
+  );
+
+  if (isMobile) {
+    return (
+      <StoreContext.Provider value={store}>
+        <Drawer open={open} onOpenChange={onOpenChange} {...props} />
+      </StoreContext.Provider>
+    );
+  }
+
+  return (
+    <StoreContext.Provider value={store}>
+      <Dialog open={open} onOpenChange={onOpenChange} {...props} />
+    </StoreContext.Provider>
+  );
+}
+
+function ResponsiveDialogTrigger({ ...props }: React.ComponentProps<typeof DialogTrigger>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerTrigger data-variant="drawer" {...props} />;
+  }
+
+  return <DialogTrigger data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogClose({ ...props }: React.ComponentProps<typeof DialogClose>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerClose data-variant="drawer" {...props} />;
+  }
+
+  return <DialogClose data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogPortal({ ...props }: React.ComponentProps<typeof DialogPortal>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerPortal data-variant="drawer" {...props} />;
+  }
+
+  return <DialogPortal data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogOverlay({ ...props }: React.ComponentProps<typeof DialogOverlay>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerOverlay data-variant="drawer" {...props} />;
+  }
+
+  return <DialogOverlay data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogContent>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return (
+      <DrawerContent data-variant="drawer" className={cn('px-4 pb-4', className)} {...props} />
+    );
+  }
+
+  return <DialogContent data-variant="dialog" className={className} {...props} />;
+}
+
+function ResponsiveDialogHeader({ ...props }: React.ComponentProps<typeof DialogHeader>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerHeader data-variant="drawer" {...props} />;
+  }
+
+  return <DialogHeader data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogFooter({
+  showCloseButton,
+  ...props
+}: React.ComponentProps<typeof DialogFooter>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerFooter data-variant="drawer" {...props} />;
+  }
+
+  return <DialogFooter data-variant="dialog" showCloseButton={showCloseButton} {...props} />;
+}
+
+function ResponsiveDialogTitle({ ...props }: React.ComponentProps<typeof DialogTitle>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerTitle data-variant="drawer" {...props} />;
+  }
+
+  return <DialogTitle data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogDescription({ ...props }: React.ComponentProps<typeof DialogDescription>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerDescription data-variant="drawer" {...props} />;
+  }
+
+  return <DialogDescription data-variant="dialog" {...props} />;
+}
+
+export {
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPortal,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger,
+};