A bunch of changes, including moving prompt/confirm out of context

src-web/components/core/Alert.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { Button } from './Button';
+import { HStack, VStack } from './Stacks';
+
+export interface AlertProps {
+  onHide: () => void;
+  body: ReactNode;
+}
+
+export function Alert({ onHide, body }: AlertProps) {
+  return (
+    <VStack space={3} className="pb-4">
+      <div>{body}</div>
+      <HStack space={2} justifyContent="end">
+        <Button className="focus" color="primary" onClick={onHide}>
+          Okay
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}

src-web/components/core/Confirm.tsx

@@ -0,0 +1,43 @@
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+import { HStack } from './Stacks';
+
+export interface ConfirmProps {
+  onHide: () => void;
+  onResult: (result: boolean) => void;
+  variant?: 'delete' | 'confirm';
+  confirmText?: string;
+}
+
+const colors: Record<NonNullable<ConfirmProps['variant']>, ButtonProps['color']> = {
+  delete: 'danger',
+  confirm: 'primary',
+};
+
+const confirmButtonTexts: Record<NonNullable<ConfirmProps['variant']>, string> = {
+  delete: 'Delete',
+  confirm: 'Confirm',
+};
+
+export function Confirm({ onHide, onResult, confirmText, variant = 'confirm' }: ConfirmProps) {
+  const handleHide = () => {
+    onResult(false);
+    onHide();
+  };
+
+  const handleSuccess = () => {
+    onResult(true);
+    onHide();
+  };
+
+  return (
+    <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
+      <Button color={colors[variant]} onClick={handleSuccess}>
+        {confirmText ?? confirmButtonTexts[variant]}
+      </Button>
+      <Button onClick={handleHide} variant="border">
+        Cancel
+      </Button>
+    </HStack>
+  );
+}

src-web/components/core/PairEditor.tsx

@@ -12,9 +12,9 @@ import {
 } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
-import { usePrompt } from '../../hooks/usePrompt';
 import { useToggle } from '../../hooks/useToggle';
 import { generateId } from '../../lib/generateId';
+import { showPrompt } from '../../lib/prompt';
 import { DropMarker } from '../DropMarker';
 import { SelectFile } from '../SelectFile';
 import { Button } from './Button';
@@ -556,7 +556,6 @@ function FileActionsDropdown({
   onChangeContentType: (contentType: string) => void;
   onDelete: () => void;
 }) {
-  const prompt = usePrompt();
   const onChange = useCallback(
     (v: string) => {
       if (v === 'file') onChangeFile({ filePath: '' });
@@ -573,7 +572,7 @@ function FileActionsDropdown({
         leftSlot: <Icon icon="pencil" />,
         hidden: !pair.isFile,
         onSelect: async () => {
-          const contentType = await prompt({
+          const contentType = await showPrompt({
             id: 'content-type',
             require: false,
             title: 'Override Content-Type',
@@ -604,7 +603,7 @@ function FileActionsDropdown({
         leftSlot: <Icon icon="trash" />,
       },
     ],
-    [onChangeContentType, onChangeFile, onDelete, pair.contentType, pair.isFile, prompt],
+    [onChangeContentType, onChangeFile, onDelete, pair.contentType, pair.isFile],
   );
 
   return (

src-web/components/core/Prompt.tsx

@@ -0,0 +1,57 @@
+import type { PromptTextRequest } from '@yaakapp-internal/plugins';
+import type { FormEvent, ReactNode } from 'react';
+import { useCallback, useState } from 'react';
+import {PlainInput} from "./PlainInput";
+import { HStack } from './Stacks';
+import { Button } from './Button';
+
+export type PromptProps = Omit<PromptTextRequest, 'id' | 'title' | 'description'> & {
+  description?: ReactNode;
+  onCancel: () => void;
+  onResult: (value: string | null) => void;
+};
+
+export function Prompt({
+  onCancel,
+  label,
+  defaultValue,
+  placeholder,
+  onResult,
+  require,
+  confirmText,
+  cancelText,
+}: PromptProps) {
+  const [value, setValue] = useState<string>(defaultValue ?? '');
+  const handleSubmit = useCallback(
+    (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      onResult(value);
+    },
+    [onResult, value],
+  );
+
+  return (
+    <form
+      className="grid grid-rows-[auto_auto] grid-cols-[minmax(0,1fr)] gap-4 mb-4"
+      onSubmit={handleSubmit}
+    >
+      <PlainInput
+        hideLabel
+        autoSelect
+        require={require}
+        placeholder={placeholder ?? 'Enter text'}
+        label={label}
+        defaultValue={defaultValue}
+        onChange={setValue}
+      />
+      <HStack space={2} justifyContent="end">
+        <Button onClick={onCancel} variant="border" color="secondary">
+          {cancelText || 'Cancel'}
+        </Button>
+        <Button type="submit" color="primary">
+          {confirmText || 'Done'}
+        </Button>
+      </HStack>
+    </form>
+  );
+}