Tweak workspace settings and a bunch of small things

src-web/components/core/Confirm.tsx

@@ -1,33 +1,62 @@
 import type { Color } from '@yaakapp-internal/plugins';
+import type { FormEvent } from 'react';
+import { useState } from 'react';
 import { Button } from './Button';
+import { PlainInput } from './PlainInput';
 import { HStack } from './Stacks';
 
 export interface ConfirmProps {
   onHide: () => void;
   onResult: (result: boolean) => void;
   confirmText?: string;
+  requireTyping?: string;
   color?: Color;
 }
 
-export function Confirm({ onHide, onResult, confirmText, color = 'primary' }: ConfirmProps) {
+export function Confirm({
+  onHide,
+  onResult,
+  confirmText,
+  requireTyping,
+  color = 'primary',
+}: ConfirmProps) {
+  const [confirm, setConfirm] = useState<string>('');
   const handleHide = () => {
     onResult(false);
     onHide();
   };
 
-  const handleSuccess = () => {
-    onResult(true);
-    onHide();
+  const didConfirm = !requireTyping || confirm === requireTyping;
+
+  const handleSuccess = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (didConfirm) {
+      onResult(true);
+      onHide();
+    }
   };
 
   return (
-    <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
-      <Button color={color} onClick={handleSuccess}>
-        {confirmText ?? 'Confirm'}
-      </Button>
-      <Button onClick={handleHide} variant="border">
-        Cancel
-      </Button>
-    </HStack>
+    <form className="flex flex-col" onSubmit={handleSuccess}>
+      {requireTyping && (
+        <PlainInput
+          autoFocus
+          onChange={setConfirm}
+          label={
+            <>
+              Type <strong>{requireTyping}</strong> to confirm
+            </>
+          }
+        />
+      )}
+      <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
+        <Button type="submit" color={color} disabled={!didConfirm}>
+          {confirmText ?? 'Confirm'}
+        </Button>
+        <Button onClick={handleHide} variant="border">
+          Cancel
+        </Button>
+      </HStack>
+    </form>
   );
 }

src-web/components/core/Dialog.tsx

@@ -77,9 +77,9 @@ export function Dialog({
             'border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]',
             'min-h-[10rem]',
             'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]',
-            size === 'sm' && 'w-[28rem]',
-            size === 'md' && 'w-[45rem]',
-            size === 'lg' && 'w-[65rem]',
+            size === 'sm' && 'w-[30rem]',
+            size === 'md' && 'w-[50rem]',
+            size === 'lg' && 'w-[70rem]',
             size === 'full' && 'w-[100vw] h-[100vh]',
             size === 'dynamic' && 'min-w-[20rem] max-w-[100vw]',
           )}

src-web/components/core/Link.tsx

@@ -28,7 +28,7 @@ export function Link({ href, children, noUnderline, className, ...other }: Props
         rel="noopener noreferrer"
         className={classNames(
           className,
-          'pr-4 inline-flex items-center hover:underline',
+          'pr-4 inline-flex items-center hover:underline group',
           !noUnderline && 'underline',
         )}
         onClick={(e) => {
@@ -36,8 +36,8 @@ export function Link({ href, children, noUnderline, className, ...other }: Props
         }}
         {...other}
       >
-        <span>{children}</span>
-        <Icon className="inline absolute right-0.5 top-[0.3em]" size="xs" icon="external_link" />
+        <span className="pr-0.5">{children}</span>
+        <Icon className="inline absolute right-0.5 top-[0.3em] opacity-70 group-hover:opacity-100" size="xs" icon="external_link" />
       </a>
     );
   }

src-web/components/core/Table.tsx

@@ -27,7 +27,7 @@ export function TableCell({ children, className }: { children: ReactNode; classN
     <td
       className={classNames(
         className,
-        'py-2 [&:not(:first-child)]:pl-4 text-left w-0 whitespace-nowrap',
+        'py-2 [&:not(:first-child)]:pl-4 text-left whitespace-nowrap',
       )}
     >
       {children}
@@ -57,7 +57,7 @@ export function TableHeaderCell({
   className?: string;
 }) {
   return (
-    <th className={classNames(className, 'py-2 [&:not(:first-child)]:pl-4 text-left w-0 text-text-subtle')}>
+    <th className={classNames(className, 'py-2 [&:not(:first-child)]:pl-4 text-left text-text-subtle')}>
       {children}
     </th>
   );

src-web/components/core/Tabs/Tabs.tsx

@@ -84,7 +84,7 @@ export function Tabs({
           tabListClassName,
           addBorders && '!-ml-1',
           'flex items-center hide-scrollbars mb-2',
-          layout === 'horizontal' && 'h-full overflow-auto pt-1 px-2',
+          layout === 'horizontal' && 'h-full overflow-auto px-2',
           layout === 'vertical' && 'overflow-x-auto overflow-y-visible ',
           // Give space for button focus states within overflow boundary.
           layout === 'vertical' && 'py-1 -ml-5 pl-3 pr-1',
@@ -92,7 +92,7 @@ export function Tabs({
       >
         <div
           className={classNames(
-            layout === 'horizontal' && 'flex flex-col gap-1 w-full mt-1 pb-3 mb-auto',
+            layout === 'horizontal' && 'flex flex-col gap-1 w-full pb-3 mb-auto',
             layout === 'vertical' && 'flex flex-row flex-shrink-0 gap-2 w-full',
           )}
         >
@@ -104,8 +104,11 @@ export function Tabs({
               addBorders && 'border',
               isActive ? 'text-text' : 'text-text-subtle hover:text-text',
               isActive && addBorders
-                ? 'border-border-subtle bg-surface-active'
-                : 'border-transparent',
+                ? 'border-surface-active bg-surface-active'
+                : layout === 'vertical'
+                  ? 'border-border-subtle'
+                  : 'border-transparent',
+              layout === 'horizontal' && 'flex justify-between',
             );
 
             if ('options' in t) {
@@ -121,7 +124,7 @@ export function Tabs({
                 >
                   <button
                     onClick={isActive ? undefined : () => onChangeValue(t.value)}
-                    className={btnClassName}
+                    className={classNames(btnClassName)}
                   >
                     {option && 'shortLabel' in option && option.shortLabel
                       ? option.shortLabel