@narumitw/pi-image-drop 0.28.0 → 0.31.0

package/src/web/ui/components.tsx

@@ -0,0 +1,615 @@
+import {
+	ArrowLeftIcon,
+	ArrowRightIcon,
+	ChevronDownIcon,
+	Cross2Icon,
+	ExclamationTriangleIcon,
+	ImageIcon,
+	InfoCircledIcon,
+	ReloadIcon,
+	TrashIcon,
+	UploadIcon,
+} from "@radix-ui/react-icons";
+import {
+	Badge,
+	Box,
+	Button,
+	Callout,
+	Card,
+	Code,
+	Flex,
+	Heading,
+	IconButton,
+	Spinner,
+	Text,
+} from "@radix-ui/themes";
+import { AlertDialog, Collapsible, Dialog } from "radix-ui";
+import { useRef, useState } from "react";
+import { imageDropClient } from "./client.js";
+import {
+	canMutate,
+	draftPresentation,
+	formatBytes,
+	summarizeBatch,
+	summarizeHistory,
+	visibleItemNotes,
+} from "./state.js";
+import type {
+	ConnectionFailure,
+	ImageDropState,
+	PublicBatchItem,
+	PublicHistoryItem,
+} from "./types.js";
+
+export const ACCEPTED_IMAGES =
+	"image/png,image/jpeg,image/webp,image/gif,image/bmp,image/tiff,image/heic,image/heif,image/avif,.bmp,.tif,.tiff,.heic,.heif,.avif";
+
+export interface PreviewSelection {
+	collection: "items" | "history";
+	item: PublicBatchItem | PublicHistoryItem;
+}
+
+export function SessionHeader({ state }: { state?: ImageDropState }) {
+	return (
+		<header className="page-header">
+			<Box className="session-identity">
+				<Text as="p" className="eyebrow" color="jade" size="1" weight="bold">
+					Pi local image staging
+				</Text>
+				<Heading as="h1" size="8">
+					Image Drop
+				</Heading>
+				<Text as="p" className="session-label" color="gray" size="2">
+					{state
+						? state.sessionName
+							? `${state.projectName} · ${state.sessionName}`
+							: state.projectName
+						: "Connecting to Pi…"}
+				</Text>
+			</Box>
+			<Collapsible.Root className="session-details">
+				<Collapsible.Trigger asChild>
+					<Button color="gray" highContrast type="button" variant="ghost">
+						<InfoCircledIcon /> Session details <ChevronDownIcon className="disclosure-icon" />
+					</Button>
+				</Collapsible.Trigger>
+				<Collapsible.Content className="session-details-content">
+					<Text as="div" color="gray" size="1" weight="bold">
+						Working directory
+					</Text>
+					<Code id="cwd" size="1" variant="ghost">
+						{state?.cwd ?? "—"}
+					</Code>
+				</Collapsible.Content>
+			</Collapsible.Root>
+		</header>
+	);
+}
+
+export function LoadingState() {
+	return (
+		<Flex align="center" className="loading-state" gap="2" justify="center" role="status">
+			<Spinner />
+			<Text color="gray">Connecting to this Pi session…</Text>
+		</Flex>
+	);
+}
+
+export function DropZone({
+	dragActive,
+	mutable,
+	onFiles,
+}: {
+	dragActive: boolean;
+	mutable: boolean;
+	onFiles: (files: FileList | null) => void;
+}) {
+	const inputRef = useRef<HTMLInputElement>(null);
+	return (
+		<section
+			aria-disabled={!mutable}
+			aria-labelledby="drop-title"
+			className={`drop-zone ${dragActive ? "drag-active" : ""} ${mutable ? "" : "disabled"}`}
+			id="drop-zone"
+		>
+			<div className="drop-copy">
+				<ImageIcon aria-hidden="true" className="drop-icon" />
+				<Box>
+					<Heading as="h2" id="drop-title" size="5">
+						Add images
+					</Heading>
+					<Text as="p" color="gray" size="2">
+						Paste anywhere, drop files here, or choose images.
+					</Text>
+				</Box>
+				<Button disabled={!mutable} onClick={() => inputRef.current?.click()} type="button">
+					<UploadIcon /> Choose images
+				</Button>
+				<input
+					accept={ACCEPTED_IMAGES}
+					disabled={!mutable}
+					hidden
+					multiple
+					onChange={(event) => {
+						onFiles(event.target.files);
+						event.target.value = "";
+					}}
+					ref={inputRef}
+					type="file"
+				/>
+			</div>
+		</section>
+	);
+}
+
+export function DraftSection({
+	error,
+	highlightedId,
+	onPreview,
+	state,
+}: {
+	error: string;
+	highlightedId?: string;
+	onPreview: (selection: PreviewSelection, trigger: HTMLElement) => void;
+	state: ImageDropState;
+}) {
+	const summary = summarizeBatch(state.batch);
+	const presentation = draftPresentation(state.batch);
+	const mutable = canMutate(state.batch);
+	return (
+		<section aria-labelledby="batch-title" className="batch draft">
+			<div className="batch-toolbar">
+				<Box>
+					<Heading as="h2" id="batch-title" size="5">
+						Ready for next message
+					</Heading>
+					{presentation.status && (
+						<Text as="p" color="gray" id="status" size="2">
+							{presentation.status}
+						</Text>
+					)}
+					<Text as="p" className="next-step" id="next-step" role="status" size="2">
+						{presentation.guidance}
+					</Text>
+				</Box>
+				{summary.total > 0 && <ClearDraftDialog disabled={!mutable} />}
+			</div>
+			{error && (
+				<Callout.Root color="red" id="error-banner" role="alert" size="1">
+					<Callout.Icon>
+						<ExclamationTriangleIcon />
+					</Callout.Icon>
+					<Callout.Text>{error}</Callout.Text>
+				</Callout.Root>
+			)}
+			<DraftGrid
+				highlightedId={highlightedId}
+				mutable={mutable}
+				onPreview={onPreview}
+				state={state}
+			/>
+		</section>
+	);
+}
+
+function DraftGrid({
+	highlightedId,
+	mutable,
+	onPreview,
+	state,
+}: {
+	highlightedId?: string;
+	mutable: boolean;
+	onPreview: (selection: PreviewSelection, trigger: HTMLElement) => void;
+	state: ImageDropState;
+}) {
+	const [draggedId, setDraggedId] = useState("");
+	if (state.batch.items.length === 0) return null;
+	return (
+		<ol aria-live="polite" className="image-grid" id="grid">
+			{state.batch.items.map((item, index) => (
+				<Card asChild key={item.id} size="1">
+					<li
+						aria-label={`${index + 1}. ${item.name}, ${item.status}`}
+						className={`image-card status-${item.status} ${item.id === highlightedId ? "duplicate-highlight" : ""}`}
+						draggable={mutable}
+						onDragEnd={() => setDraggedId("")}
+						onDragOver={(event) => {
+							if (!mutable || !draggedId) return;
+							event.preventDefault();
+						}}
+						onDragStart={() => setDraggedId(item.id)}
+						onDrop={(event) => {
+							event.preventDefault();
+							if (draggedId) void imageDropClient.moveBefore(draggedId, item.id);
+							setDraggedId("");
+						}}
+					>
+						<DraftPreview item={item} onPreview={onPreview} revision={state.batch.revision} />
+						<ImageDetails index={index} item={item} />
+						<Flex className="card-actions" gap="1" wrap="wrap">
+							<IconButton
+								aria-label="Move backward"
+								disabled={!mutable || index === 0}
+								onClick={() => void imageDropClient.move(item.id, -1)}
+								title="Move backward"
+								type="button"
+								variant="soft"
+							>
+								<ArrowLeftIcon />
+							</IconButton>
+							<IconButton
+								aria-label="Move forward"
+								disabled={!mutable || index === state.batch.items.length - 1}
+								onClick={() => void imageDropClient.move(item.id, 1)}
+								title="Move forward"
+								type="button"
+								variant="soft"
+							>
+								<ArrowRightIcon />
+							</IconButton>
+							{item.status === "error" && (
+								<Button
+									disabled={!mutable}
+									onClick={() => void imageDropClient.retry(item.id)}
+									type="button"
+									variant="soft"
+								>
+									<ReloadIcon /> Retry
+								</Button>
+							)}
+							<Button
+								color="red"
+								disabled={!mutable}
+								onClick={() => void imageDropClient.remove(item.id)}
+								type="button"
+								variant="ghost"
+							>
+								<TrashIcon /> Delete
+							</Button>
+						</Flex>
+					</li>
+				</Card>
+			))}
+		</ol>
+	);
+}
+
+function DraftPreview({
+	item,
+	onPreview,
+	revision,
+}: {
+	item: PublicBatchItem;
+	onPreview: (selection: PreviewSelection, trigger: HTMLElement) => void;
+	revision: number;
+}) {
+	if (item.status !== "ready") {
+		return (
+			<div className="preview">
+				<span aria-hidden="true" className="placeholder">
+					{item.status === "error" ? "!" : "…"}
+				</span>
+			</div>
+		);
+	}
+	return (
+		<IconButton
+			aria-label={`Enlarge preview of ${item.name}`}
+			className="preview preview-button"
+			data-id={item.id}
+			onClick={(event) => onPreview({ collection: "items", item }, event.currentTarget)}
+			type="button"
+			variant="ghost"
+		>
+			<img
+				alt={`Preview of ${item.name}`}
+				loading="lazy"
+				src={`/api/items/${item.id}/preview?revision=${revision}`}
+			/>
+		</IconButton>
+	);
+}
+
+function ImageDetails({ index, item }: { index: number; item: PublicBatchItem }) {
+	const dimensions = item.width && item.height ? ` · ${item.width}×${item.height}` : "";
+	return (
+		<Box className="card-body">
+			<Heading as="h3" size="3" title={item.name}>
+				{item.name}
+			</Heading>
+			<Flex align="center" gap="2" mt="1" wrap="wrap">
+				<Text color="gray" size="1">
+					{`${index + 1} · ${formatBytes(item.size)}${dimensions}`}
+				</Text>
+				<Badge color={item.status === "error" ? "red" : item.status === "ready" ? "jade" : "gray"}>
+					{item.status}
+				</Badge>
+			</Flex>
+			{item.sourceFormat && item.sourceFormat !== item.outputFormat && (
+				<Text as="p" className="conversion" size="1" weight="bold">
+					{`${item.sourceFormat.toUpperCase()} → ${item.outputFormat?.toUpperCase()}`}
+				</Text>
+			)}
+			{visibleItemNotes(item.notes).map((note) => (
+				<Text as="p" className="note" color="gray" key={note} size="1">
+					{note}
+				</Text>
+			))}
+			{item.error && (
+				<Text as="p" className="item-error" color="red" size="1">
+					{item.error}
+				</Text>
+			)}
+		</Box>
+	);
+}
+
+export function HistorySection({
+	onPreview,
+	state,
+}: {
+	onPreview: (selection: PreviewSelection, trigger: HTMLElement) => void;
+	state: ImageDropState;
+}) {
+	const history = summarizeHistory(state.history);
+	const mutable = canMutate(state.batch);
+	return (
+		<section aria-labelledby="history-title" className="history">
+			<header className="history-toolbar">
+				<Box className="history-summary">
+					<Heading as="h2" id="history-title" size="4">
+						Previously sent
+					</Heading>
+					<Text as="p" color="gray" id="history-status" role="status" size="2">
+						{history.label}
+					</Text>
+					<Text as="p" className="history-note" color="gray" size="2">
+						<span id="history-retention">{history.usage}</span>. Images here are not attached again
+						unless you choose <strong>Add again</strong>. The oldest are removed at the configured
+						memory limit, and all are cleared when this Pi session ends.
+					</Text>
+				</Box>
+				{history.total > 0 && <ClearHistoryDialog />}
+			</header>
+			{history.total > 0 && (
+				<ol aria-live="polite" className="image-grid" id="history-grid">
+					{state.history.items.map((item, index) => (
+						<Card asChild key={item.id} size="1">
+							<li
+								aria-label={`${index + 1}. ${item.name}, sent this session`}
+								className="image-card history-card"
+							>
+								<IconButton
+									aria-label={`Enlarge preview of ${item.name}`}
+									className="preview preview-button"
+									onClick={(event) =>
+										onPreview({ collection: "history", item }, event.currentTarget)
+									}
+									type="button"
+									variant="ghost"
+								>
+									<img
+										alt={`Preview of sent ${item.name}`}
+										loading="lazy"
+										src={`/api/history/${item.id}/preview?revision=${state.batch.revision}`}
+									/>
+								</IconButton>
+								<Box className="card-body">
+									<Heading as="h3" size="3" title={item.name}>
+										{item.name}
+									</Heading>
+									<Text as="p" color="gray" size="1">
+										{`${index + 1} · ${formatBytes(item.size)} · ${item.width}×${item.height}`}
+									</Text>
+									{visibleItemNotes(item.notes).map((note) => (
+										<Text as="p" color="gray" key={note} size="1">
+											{note}
+										</Text>
+									))}
+								</Box>
+								<Flex className="card-actions" gap="1" wrap="wrap">
+									<Button
+										disabled={!mutable}
+										onClick={() => void imageDropClient.restageHistory(item.id)}
+										type="button"
+										variant="soft"
+									>
+										<ImageIcon /> Add again
+									</Button>
+									<Button
+										color="red"
+										onClick={() => void imageDropClient.deleteHistory(item.id)}
+										type="button"
+										variant="ghost"
+									>
+										<TrashIcon /> Delete
+									</Button>
+								</Flex>
+							</li>
+						</Card>
+					))}
+				</ol>
+			)}
+		</section>
+	);
+}
+
+function ClearDraftDialog({ disabled }: { disabled: boolean }) {
+	return (
+		<AlertDialog.Root>
+			<AlertDialog.Trigger asChild>
+				<Button color="red" disabled={disabled} type="button" variant="ghost">
+					<TrashIcon /> Clear all
+				</Button>
+			</AlertDialog.Trigger>
+			<AlertDialog.Portal>
+				<AlertDialog.Overlay className="dialog-overlay" />
+				<AlertDialog.Content className="dialog-content">
+					<AlertDialog.Title asChild>
+						<Heading as="h2" size="5">
+							Clear every staged image?
+						</Heading>
+					</AlertDialog.Title>
+					<AlertDialog.Description asChild>
+						<Text as="p" color="gray" size="2">
+							This removes the current batch from Pi memory.
+						</Text>
+					</AlertDialog.Description>
+					<Flex gap="3" justify="end">
+						<AlertDialog.Cancel asChild>
+							<Button color="gray" type="button" variant="soft">
+								Cancel
+							</Button>
+						</AlertDialog.Cancel>
+						<AlertDialog.Action asChild>
+							<Button color="red" onClick={() => void imageDropClient.clearAll()} type="button">
+								<TrashIcon /> Clear all
+							</Button>
+						</AlertDialog.Action>
+					</Flex>
+				</AlertDialog.Content>
+			</AlertDialog.Portal>
+		</AlertDialog.Root>
+	);
+}
+
+function ClearHistoryDialog() {
+	return (
+		<AlertDialog.Root>
+			<AlertDialog.Trigger asChild>
+				<Button color="red" type="button" variant="ghost">
+					<TrashIcon /> Clear history
+				</Button>
+			</AlertDialog.Trigger>
+			<AlertDialog.Portal>
+				<AlertDialog.Overlay className="dialog-overlay" />
+				<AlertDialog.Content className="dialog-content">
+					<AlertDialog.Title asChild>
+						<Heading as="h2" size="5">
+							Clear sent image history?
+						</Heading>
+					</AlertDialog.Title>
+					<AlertDialog.Description asChild>
+						<Text as="p" color="gray" size="2">
+							This releases every retained image from this Pi session. Images already sent to Pi or
+							a model provider are unaffected.
+						</Text>
+					</AlertDialog.Description>
+					<Flex gap="3" justify="end">
+						<AlertDialog.Cancel asChild>
+							<Button color="gray" type="button" variant="soft">
+								Cancel
+							</Button>
+						</AlertDialog.Cancel>
+						<AlertDialog.Action asChild>
+							<Button color="red" onClick={() => void imageDropClient.clearHistory()} type="button">
+								<TrashIcon /> Clear history
+							</Button>
+						</AlertDialog.Action>
+					</Flex>
+				</AlertDialog.Content>
+			</AlertDialog.Portal>
+		</AlertDialog.Root>
+	);
+}
+
+export function ImagePreviewDialog({
+	onOpenChange,
+	open,
+	revision,
+	selection,
+}: {
+	onOpenChange: (open: boolean) => void;
+	open: boolean;
+	revision: number;
+	selection?: PreviewSelection;
+}) {
+	const item = selection?.item;
+	return (
+		<Dialog.Root onOpenChange={onOpenChange} open={open}>
+			<Dialog.Portal>
+				<Dialog.Overlay className="dialog-overlay preview-overlay" />
+				<Dialog.Content className="preview-content">
+					<Flex align="center" className="preview-header" justify="between">
+						<Dialog.Title asChild>
+							<Heading className="preview-title" size="3">
+								{item?.name ?? "Image preview"}
+							</Heading>
+						</Dialog.Title>
+						<Dialog.Close asChild>
+							<IconButton
+								aria-label="Close enlarged image"
+								color="gray"
+								type="button"
+								variant="soft"
+							>
+								<Cross2Icon />
+							</IconButton>
+						</Dialog.Close>
+					</Flex>
+					{selection && item && (
+						<Dialog.Close asChild>
+							<button
+								aria-label="Close enlarged image"
+								className="image-preview-dismiss"
+								type="button"
+							>
+								<img
+									alt={`Enlarged preview of ${item.name}`}
+									src={`/api/${selection.collection}/${item.id}/preview?revision=${revision}`}
+								/>
+							</button>
+						</Dialog.Close>
+					)}
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}
+
+export function PrivacyNotice() {
+	return (
+		<Text as="p" className="privacy" color="gray" size="2">
+			Draft and previously sent images stay in this Pi process until removed, evicted at the
+			retention limit, or the session ends. Sending a Pi message sends its staged images to your
+			configured model provider; deleting local history does not retract images already sent.
+		</Text>
+	);
+}
+
+export function ConnectionBlocker({ failure }: { failure?: ConnectionFailure }) {
+	return (
+		<Dialog.Root open={Boolean(failure)}>
+			<Dialog.Portal>
+				<Dialog.Overlay className="connection-overlay" />
+				<Dialog.Content
+					className="connection-card"
+					onEscapeKeyDown={(event) => event.preventDefault()}
+					onPointerDownOutside={(event) => event.preventDefault()}
+				>
+					<Flex direction="column" gap="2">
+						<Dialog.Title asChild>
+							<Heading as="h2" size="5">
+								{failure?.title ?? "Connection lost"}
+							</Heading>
+						</Dialog.Title>
+						<Dialog.Description asChild>
+							<Text color="gray">
+								{failure?.message ?? "Run /image-drop in Pi for a new link."}
+							</Text>
+						</Dialog.Description>
+					</Flex>
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}
+
+export function MetadataNotice() {
+	return (
+		<Text as="p" className="collection-note" color="gray" size="2">
+			Sensitive image metadata removed from processed images.
+		</Text>
+	);
+}