Improve copy-as-curl

src-web/components/core/Button.tsx

@@ -10,7 +10,7 @@ export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'color'> & {
   color?: 'custom' | 'default' | 'gray' | 'primary' | 'secondary' | 'warning' | 'danger';
   variant?: 'border' | 'solid';
   isLoading?: boolean;
-  size?: 'sm' | 'md' | 'xs';
+  size?: 'xs' | 'sm' | 'md';
   justify?: 'start' | 'center';
   type?: 'button' | 'submit';
   forDropdown?: boolean;

src-web/components/core/Dropdown.tsx

@@ -312,8 +312,8 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
         handleClose();
       }
       setSelectedIndex(null);
-      if (i.type !== 'separator') {
-        i.onSelect?.();
+      if (i.type !== 'separator' && typeof i.onSelect === 'function') {
+        i.onSelect();
       }
     },
     [handleClose],
@@ -506,7 +506,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
   return (
     <Button
       ref={initRef}
-      size="xs"
+      size="sm"
       tabIndex={-1}
       onMouseEnter={(e) => e.currentTarget.focus()}
       onMouseLeave={(e) => e.currentTarget.blur()}
@@ -518,6 +518,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
       rightSlot={rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
       className={classNames(
         className,
+        'h-xs', // More compact
         'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm text-gray-700 whitespace-nowrap',
         'focus:bg-highlight focus:text-gray-800 rounded',
         item.variant === 'danger' && 'text-red-600',

src-web/components/core/Icon.tsx

@@ -19,6 +19,7 @@ const icons = {
   cake: lucide.CakeIcon,
   chat: lucide.MessageSquare,
   check: lucide.CheckIcon,
+  checkCircle: lucide.CheckCircleIcon,
   chevronDown: lucide.ChevronDownIcon,
   chevronRight: lucide.ChevronRightIcon,
   code: lucide.CodeIcon,
@@ -41,6 +42,7 @@ const icons = {
   magicWand: lucide.Wand2Icon,
   minus: lucide.MinusIcon,
   moreVertical: lucide.MoreVerticalIcon,
+  paste: lucide.ClipboardPasteIcon,
   pencil: lucide.PencilIcon,
   plug: lucide.Plug,
   plus: lucide.PlusIcon,

src-web/components/core/PairEditor.tsx

@@ -392,11 +392,15 @@ function PairEditorRow({
               className="font-mono text-xs"
               onClick={async (e) => {
                 e.preventDefault();
-                const file = await open({
+                const selected = await open({
                   title: 'Select file',
                   multiple: false,
                 });
-                handleChangeValueFile((Array.isArray(file) ? file[0] : file) ?? '');
+                if (selected == null) {
+                  return;
+                }
+
+                handleChangeValueFile(selected.path);
               }}
             >
               {getFileName(pairContainer.pair.value) || 'Select File'}
@@ -491,7 +495,8 @@ const newPairContainer = (initialPair?: Pair): PairContainer => {
   return { id, pair };
 };
 
-const getFileName = (path: string): string => {
-  const parts = path.split(/[\\/]/);
+const getFileName = (path: string | null | undefined): string => {
+  console.log('PATH', path);
+  const parts = String(path).split(/[\\/]/);
   return parts[parts.length - 1] ?? '';
 };

src-web/components/core/Toast.tsx

@@ -1,23 +1,37 @@
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useKey } from 'react-use';
-import { Heading } from './Heading';
 import { IconButton } from './IconButton';
+import type { IconProps } from './Icon';
+import { Icon } from './Icon';
 
 export interface ToastProps {
   children: ReactNode;
   open: boolean;
   onClose: () => void;
-  title?: ReactNode;
   className?: string;
   timeout: number;
+  variant?: 'copied' | 'success' | 'info' | 'warning' | 'error';
 }
 
-export function Toast({ children, className, open, onClose, title, timeout }: ToastProps) {
-  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
+const ICONS: Record<NonNullable<ToastProps['variant']>, IconProps['icon']> = {
+  copied: 'copyCheck',
+  warning: 'alert',
+  error: 'alert',
+  info: 'info',
+  success: 'checkCircle',
+};
 
+export function Toast({
+  children,
+  className,
+  open,
+  onClose,
+  timeout,
+  variant = 'info',
+}: ToastProps) {
   useKey(
     'Escape',
     () => {
@@ -46,13 +60,16 @@ export function Toast({ children, className, open, onClose, title, timeout }: To
         'text-gray-700',
       )}
     >
-      <div className="px-3 py-2">
-        {title && (
-          <Heading size={3} id={titleId}>
-            {title}
-          </Heading>
-        )}
-
+      <div className="px-3 py-2 flex items-center gap-2">
+        <Icon
+          icon={ICONS[variant]}
+          className={classNames(
+            variant === 'success' && 'text-green-500',
+            variant === 'warning' && 'text-orange-500',
+            variant === 'error' && 'text-red-500',
+            variant === 'copied' && 'text-violet-500',
+          )}
+        />
         <div className="flex items-center gap-2">{children}</div>
       </div>