Reuse computer rows and open computers in the viewer

2026-10-19 13:50:04 +01:00
parent e5747effa8
commit 47c58bc76b
9 changed files with 257 additions and 110 deletions
@@ -0,0 +1,76 @@
+import { useState } from "react";
+import Button from "@moduletrace/twui/layout/Button";
+import type {
+    TWUIButtonColorType,
+    TWUIButtonSizeType,
+    TWUIButtonVariantType,
+} from "@moduletrace/twui/layout/Button";
+import { AppWindow } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+import ComputerViewerModal from "./computer-viewer-modal";
+
+type Props = {
+    computer_id: number;
+    /**
+     * The computer's name, for the modal and the button's title.
+     */
+    name: string;
+    /**
+     * Words after the icon; without them it's an icon button.
+     */
+    label?: string;
+    title?: string;
+    variant?: TWUIButtonVariantType;
+    color?: TWUIButtonColorType;
+    size?: TWUIButtonSizeType;
+    disabled?: boolean;
+    className?: string;
+};
+
+const IconButtonClasses =
+    "shrink-0 p-2! text-ink-secondary dark:text-ink-secondary hover:text-ink hover:dark:text-ink hover:bg-sunken hover:dark:bg-sunken rounded-default transition-colors duration-[var(--m-fast)] focus-visible:ring-2 focus-visible:ring-ink";
+
+/**
+ * Opens a computer in the viewer over the page, in its browser, terminal
+ * or code editor. Lists use it as an icon button; the computer's own page
+ * adds a label.
+ */
+export default function ComputerOpenButton({
+    computer_id,
+    name,
+    label,
+    title,
+    variant = "ghost",
+    color = "text",
+    size,
+    disabled,
+    className,
+}: Props) {
+    const [open, setOpen] = useState(false);
+    const button_title = title || `Open ${name}`;
+
+    return (
+        <>
+            <Button
+                title={button_title}
+                aria-label={label ? undefined : button_title}
+                type="button"
+                variant={variant}
+                color={color}
+                size={size}
+                disabled={disabled}
+                onClick={() => setOpen(true)}
+                className={twMerge(label ? "shrink-0 gap-1!" : IconButtonClasses, className)}
+            >
+                <AppWindow size={16} aria-hidden />
+                {label}
+            </Button>
+            <ComputerViewerModal
+                open={open}
+                onClose={() => setOpen(false)}
+                computer_id={computer_id}
+                name={name}
+            />
+        </>
+    );
+}
@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import Modal from "@moduletrace/twui/elements/Modal";
+import H2 from "@moduletrace/twui/layout/H2";
+import Row from "@moduletrace/twui/layout/Row";
+import Span from "@moduletrace/twui/layout/Span";
+import Stack from "@moduletrace/twui/layout/Stack";
+import type { ComputerViewMode } from "@/src/dict/computer-dict";
+import ComputerView from "./computer-view";
+
+type Props = {
+    open: boolean;
+    onClose: () => void;
+    computer_id: number;
+    /**
+     * The computer's name, in the header and the frame titles.
+     */
+    name: string;
+    /**
+     * The mode it opens in.
+     */
+    default_mode?: ComputerViewMode;
+    /**
+     * A line under the name, e.g. a take-over note.
+     */
+    note?: string;
+    /**
+     * Controls at the end of the header, e.g. handing it back.
+     */
+    action?: ReactNode;
+};
+
+/**
+ * A computer, large, in its browser, terminal or code editor, over the
+ * page. `ComputerOpenButton` opens it from lists; chat's viewer adds a
+ * note and the hand-back action after a take-over.
+ */
+export default function ComputerViewerModal({
+    open,
+    onClose,
+    computer_id,
+    name,
+    default_mode,
+    note,
+    action,
+}: Props) {
+    if (!open) return null;
+
+    return (
+        <Modal
+            open
+            setOpen={(next_open) => {
+                if (!next_open) onClose();
+            }}
+            className="max-w-[95vw]! h-[90vh] p-0 bg-paper flex flex-col overflow-hidden"
+        >
+            <Row className="w-full gap-3! flex-nowrap items-center pl-5 pr-14 py-3 border-0 border-b border-solid border-hairline">
+                <Stack className="min-w-0 gap-0! items-start">
+                    <H2 className="text-base! leading-6! tracking-normal! font-bold text-ink truncate w-full">
+                        {name}
+                    </H2>
+                    {note ? (
+                        <Span className="text-[13px] leading-[18px] text-ink-secondary">
+                            {note}
+                        </Span>
+                    ) : null}
+                </Stack>
+                {action ? (
+                    <Stack className="ml-auto shrink-0 gap-1! items-end">
+                        {action}
+                    </Stack>
+                ) : null}
+            </Row>
+            <ComputerView
+                key={`${computer_id}-${default_mode}`}
+                computer_id={computer_id}
+                name={name}
+                default_mode={default_mode}
+                className="grow"
+            />
+        </Modal>
+    );
+}