Cookie Support (#19)

src-web/components/core/Banner.tsx

@@ -4,14 +4,18 @@ import type { ReactNode } from 'react';
 interface Props {
   children: ReactNode;
   className?: string;
+  color?: 'danger' | 'success' | 'gray';
 }
-export function Banner({ children, className }: Props) {
+export function Banner({ children, className, color = 'gray' }: Props) {
   return (
     <div>
       <div
         className={classNames(
           className,
-          'border border-red-500 bg-red-300/10 text-red-800 px-3 py-2 rounded select-auto cursor-text',
+          'border border-dashed italic px-3 py-2 rounded select-auto cursor-text',
+          color === 'gray' && 'border-gray-500/60 bg-gray-300/10 text-gray-800',
+          color === 'danger' && 'border-red-500/60 bg-red-300/10 text-red-800',
+          color === 'success' && 'border-green-500/60 bg-green-300/10 text-green-800',
         )}
       >
         {children}

src-web/components/core/Button.tsx

@@ -5,20 +5,9 @@ import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useFormattedHotkey, useHotKey } from '../../hooks/useHotKey';
 import { Icon } from './Icon';
 
-const colorStyles = {
-  custom: 'ring-blue-500/50',
-  default:
-    'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-1000 ring-blue-500/50',
-  gray: 'text-gray-800 bg-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000 ring-blue-500/50',
-  primary: 'bg-blue-400 text-white enabled:hocus:bg-blue-500 ring-blue-500/50',
-  secondary: 'bg-violet-400 text-white enabled:hocus:bg-violet-500 ring-violet-500/50',
-  warning: 'bg-orange-400 text-white enabled:hocus:bg-orange-500 ring-orange-500/50',
-  danger: 'bg-red-400 text-white enabled:hocus:bg-red-500 ring-red-500/50',
-};
-
-export type ButtonProps = HTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'color'> & {
   innerClassName?: string;
-  color?: keyof typeof colorStyles;
+  color?: 'custom' | 'default' | 'gray' | 'primary' | 'secondary' | 'warning' | 'danger';
   isLoading?: boolean;
   size?: 'sm' | 'md' | 'xs';
   justify?: 'start' | 'center';
@@ -64,7 +53,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         'flex-shrink-0 flex items-center',
         'focus-visible-or-class:ring rounded-md',
         disabled ? 'pointer-events-none opacity-disabled' : 'pointer-events-auto',
-        colorStyles[color || 'default'],
+        color === 'custom' && 'ring-blue-500/50',
+        color === 'default' &&
+          'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-1000 ring-blue-500/50',
+        color === 'gray' &&
+          'text-gray-800 bg-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000 ring-blue-500/50',
+        color === 'primary' && 'bg-blue-400 text-white enabled:hocus:bg-blue-500 ring-blue-500/50',
+        color === 'secondary' &&
+          'bg-violet-400 text-white enabled:hocus:bg-violet-500 ring-violet-500/50',
+        color === 'warning' &&
+          'bg-orange-400 text-white enabled:hocus:bg-orange-500 ring-orange-500/50',
+        color === 'danger' && 'bg-red-400 text-white enabled:hocus:bg-red-500 ring-red-500/50',
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-md px-3',

src-web/components/core/Dialog.tsx

@@ -54,10 +54,10 @@ export function Dialog({
             className={classNames(
               className,
               'gap-2 grid grid-rows-[auto_minmax(0,1fr)]',
-              'relative bg-gray-50 pointer-events-auto',
-              'px-6 py-4 rounded-lg overflow-auto',
+              'pt-4 relative bg-gray-50 pointer-events-auto',
+              'rounded-lg',
               'dark:border border-highlight shadow shadow-black/10',
-              'max-w-[90vw] max-h-[calc(100vh-8em)]',
+              'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
               size === 'sm' && 'w-[25rem] max-h-[80vh]',
               size === 'md' && 'w-[45rem] max-h-[80vh]',
               size === 'full' && 'w-[100vw] h-[100vh]',
@@ -65,19 +65,26 @@ export function Dialog({
             )}
           >
             {title ? (
-              <Heading size={1} id={titleId}>
+              <Heading className="px-6 pt-4" size={1} id={titleId}>
                 {title}
               </Heading>
             ) : (
               <span />
             )}
-            {description && <p id={descriptionId}>{description}</p>}
-            <div className="h-full w-full grid grid-cols-[minmax(0,1fr)]">{children}</div>
+            {description && (
+              <p className="px-6" id={descriptionId}>
+                {description}
+              </p>
+            )}
+            <div className="h-full w-full grid grid-cols-[minmax(0,1fr)] overflow-y-auto px-6 py-2">
+              {children}
+            </div>
 
             {/*Put close at the end so that it's the last thing to be tabbed to*/}
             {!hideX && (
               <div className="ml-auto absolute right-1 top-1">
                 <IconButton
+                  className="opacity-70 hover:opacity-100"
                   onClick={onClose}
                   title="Close dialog (Esc)"
                   aria-label="Close"

src-web/components/core/FormattedError.tsx

@@ -10,7 +10,7 @@ export function FormattedError({ children }: Props) {
     <pre
       className={classNames(
         'w-full text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
-        'whitespace-pre border border-red-500 border-dashed overflow-x-auto',
+        'whitespace-pre-wrap border border-red-500 border-dashed overflow-x-auto',
       )}
     >
       {children}

src-web/components/core/Icon.tsx

@@ -11,6 +11,7 @@ const icons = {
   check: lucide.CheckIcon,
   chevronDown: lucide.ChevronDownIcon,
   chevronRight: lucide.ChevronRightIcon,
+  cookie: lucide.CookieIcon,
   code: lucide.CodeIcon,
   copy: lucide.CopyIcon,
   download: lucide.DownloadIcon,