refactoring and more work with clerk

apps/web/src/components/FullPageEmptyState.tsx

@@ -0,0 +1,27 @@
+import type { LucideIcon } from 'lucide-react';
+
+interface FullPageEmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  children: React.ReactNode;
+}
+
+export function FullPageEmptyState({
+  icon: Icon,
+  title,
+  children,
+}: FullPageEmptyStateProps) {
+  return (
+    <div className="p-4 flex items-center justify-center">
+      <div className="p-8 w-full max-w-xl flex flex-col items-center justify-center">
+        <div className="w-24 h-24 bg-white shadow-sm rounded-full flex justify-center items-center mb-6">
+          <Icon size={60} strokeWidth={1} />
+        </div>
+
+        <h1 className="text-xl font-medium mb-1">{title}</h1>
+
+        {children}
+      </div>
+    </div>
+  );
+}

apps/web/src/components/ui/button.tsx

@@ -26,14 +26,14 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
+        sm: 'h-8 rounded-md px-2',
         lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        icon: 'h-8 w-8',
       },
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default',
+      size: 'sm',
     },
   }
 );

apps/web/src/components/ui/combobox-advanced.tsx

@@ -2,11 +2,19 @@
 
 import * as React from 'react';
 import { Badge } from '@/components/ui/badge';
-import { Command, CommandGroup, CommandItem } from '@/components/ui/command';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@/components/ui/command';
 import { useOnClickOutside } from 'usehooks-ts';
 
+import { Button } from './button';
 import { Checkbox } from './checkbox';
 import { Input } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 type IValue = any;
 type IItem = Record<'value' | 'label', IValue>;
@@ -43,7 +51,6 @@ export function ComboboxAdvanced({
     const checked = !!value.find((s) => s === item.value);
     return (
       <CommandItem
-        key={String(item.value)}
         onMouseDown={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -71,52 +78,40 @@ export function ComboboxAdvanced({
   };
 
   return (
-    <Command className="overflow-visible bg-white" ref={ref}>
-      <button
-        type="button"
-        className="group border border-input px-3 py-2 text-sm ring-offset-background rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
-        onClick={() => setOpen((prev) => !prev)}
-      >
-        <div className="flex gap-1 flex-wrap">
-          {value.length === 0 && placeholder}
-          {value.slice(0, 2).map((value) => {
-            const item = items.find((item) => item.value === value) ?? {
-              value,
-              label: value,
-            };
-            return (
-              <Badge key={String(item.value)} variant="secondary">
-                {item.label}
-              </Badge>
-            );
-          })}
-          {value.length > 2 && (
-            <Badge variant="secondary">+{value.length - 2} more</Badge>
-          )}
-        </div>
-      </button>
-      {open && (
-        <div className="relative top-2">
-          <div className="max-h-80 min-w-[300px] absolute w-full z-10 top-0 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
-            <CommandGroup className="max-h-80 overflow-auto">
-              <div className="p-1 mb-2">
-                <Input
-                  placeholder="Type to search"
-                  value={inputValue}
-                  onChange={(event) => setInputValue(event.target.value)}
-                />
-              </div>
-              {inputValue === ''
-                ? value.map(renderUnknownItem)
-                : renderItem({
-                    value: inputValue,
-                    label: `Pick "${inputValue}"`,
-                  })}
-              {selectables.map(renderItem)}
-            </CommandGroup>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant={'outline'} onClick={() => setOpen((prev) => !prev)}>
+          <div className="flex gap-1 flex-wrap">
+            {value.length === 0 && placeholder}
+            {value.slice(0, 2).map((value) => {
+              const item = items.find((item) => item.value === value) ?? {
+                value,
+                label: value,
+              };
+              return <Badge key={String(item.value)}>{item.label}</Badge>;
+            })}
+            {value.length > 2 && <Badge>+{value.length - 2} more</Badge>}
           </div>
-        </div>
-      )}
-    </Command>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full max-w-md p-0" align="start">
+        <Command>
+          <CommandInput
+            placeholder="Search"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+          <CommandGroup>
+            {inputValue === ''
+              ? value.map(renderUnknownItem)
+              : renderItem({
+                  value: inputValue,
+                  label: `Pick "${inputValue}"`,
+                })}
+            {selectables.map(renderItem)}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 }

apps/web/src/components/ui/combobox-multi.tsx

@@ -1,125 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Command, CommandGroup, CommandItem } from '@/components/ui/command';
-import { Command as CommandPrimitive } from 'cmdk';
-import { X } from 'lucide-react';
-
-type Item = Record<'value' | 'label', string>;
-
-interface ComboboxMultiProps {
-  selected: Item[];
-  setSelected: React.Dispatch<React.SetStateAction<Item[]>>;
-  items: Item[];
-  placeholder: string;
-}
-
-export function ComboboxMulti({
-  items,
-  selected,
-  setSelected,
-  placeholder,
-  ...props
-}: ComboboxMultiProps) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const [open, setOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
-
-  const handleUnselect = React.useCallback((item: Item) => {
-    setSelected((prev) => prev.filter((s) => s.value !== item.value));
-  }, []);
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      const input = inputRef.current;
-      if (input) {
-        if (e.key === 'Delete' || e.key === 'Backspace') {
-          if (input.value === '') {
-            setSelected((prev) => {
-              const newSelected = [...prev];
-              newSelected.pop();
-              return newSelected;
-            });
-          }
-        }
-        // This is not a default behaviour of the <input /> field
-        if (e.key === 'Escape') {
-          input.blur();
-        }
-      }
-    },
-    []
-  );
-
-  const selectables = items.filter(
-    (item) => !selected.find((s) => s.value === item.value)
-  );
-
-  return (
-    <Command onKeyDown={handleKeyDown} className="overflow-visible bg-white">
-      <div className="group border border-input px-3 py-2 text-sm ring-offset-background rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
-        <div className="flex gap-1 flex-wrap">
-          {selected.map((item) => {
-            return (
-              <Badge key={item.value} variant="secondary">
-                {item.label}
-                <button
-                  className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      handleUnselect(item);
-                    }
-                  }}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }}
-                  onClick={() => handleUnselect(item)}
-                >
-                  <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
-                </button>
-              </Badge>
-            );
-          })}
-          {/* Avoid having the "Search" Icon */}
-          <CommandPrimitive.Input
-            ref={inputRef}
-            value={inputValue}
-            onValueChange={setInputValue}
-            onBlur={() => setOpen(false)}
-            onFocus={() => setOpen(true)}
-            placeholder={placeholder}
-            className="ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1"
-          />
-        </div>
-      </div>
-      <div className="relative mt-2">
-        {open && selectables.length > 0 ? (
-          <div className="absolute w-full z-10 top-0 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
-            <CommandGroup className="h-full overflow-auto">
-              {selectables.map((item) => {
-                return (
-                  <CommandItem
-                    key={item.value}
-                    onMouseDown={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }}
-                    onSelect={(value) => {
-                      setInputValue('');
-                      setSelected((prev) => [...prev, item]);
-                    }}
-                    className={'cursor-pointer'}
-                  >
-                    {item.label}
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-          </div>
-        ) : null}
-      </div>
-    </Command>
-  );
-}

apps/web/src/components/ui/combobox.tsx

@@ -55,7 +55,6 @@ export function Combobox<T extends string>({
   searchable,
   icon: Icon,
   size,
-  label,
 }: ComboboxProps<T>) {
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');

apps/web/src/components/ui/input.tsx

@@ -13,7 +13,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50',
           className,
           !!error && 'border-destructive'
         )}