Reuse computer rows and open computers in the viewer

src/pages/admin/settings/(partials)/computer-list-row.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import ComputerIconTile from "@/src/components/general/computer-icon-tile";
+import ComputerOpenButton from "@/src/components/general/computer-open-button";
+import type { ComputerWithStatus } from "@/src/types";
+import computerResourcesLabel from "@/src/utils/computer-resources-label";
+import computerStatusLabel from "@/src/utils/computer-status-label";
+import SettingsListRow from "./settings-list-row";
+
+type Props = {
+    computer: ComputerWithStatus;
+    badge?: string;
+    /**
+     * Defaults to its state, resources and description.
+     */
+    subtitle?: string;
+    /**
+     * What can be done with it, after the open button.
+     */
+    children?: ReactNode;
+};
+
+/**
+ * One computer in a settings list: its avatar and details, opening its
+ * settings page from the title. Every list uses it, so the row behaves the
+ * same, and the open button shows it in the viewer over the page.
+ */
+export default function ComputerListRow({ computer, badge, subtitle, children }: Props) {
+    const name = computer.name || `Computer ${computer.id}`;
+    const ready = computer.status == "running";
+
+    return (
+        <SettingsListRow
+            avatar={<ComputerIconTile />}
+            href={`/admin/settings/computers/${computer.id}`}
+            title={name}
+            badge={badge}
+            subtitle={
+                subtitle ??
+                [
+                    computerStatusLabel({ computer }),
+                    computerResourcesLabel({ computer }),
+                    computer.description,
+                ]
+                    .filter(Boolean)
+                    .join(" · ")
+            }
+        >
+            <ComputerOpenButton
+                computer_id={Number(computer.id)}
+                name={name}
+                title={ready ? `Open ${name}` : `${name} isn't running yet`}
+                disabled={!ready}
+            />
+            {children}
+        </SettingsListRow>
+    );
+}

src/pages/admin/settings/bots/[bot_id]/(partials)/bot-computer-row.tsx

@@ -1,8 +1,5 @@
-import ComputerIconTile from "@/src/components/general/computer-icon-tile";
 import type { ComputerWithStatus } from "@/src/types";
-import computerResourcesLabel from "@/src/utils/computer-resources-label";
-import computerStatusLabel from "@/src/utils/computer-status-label";
-import SettingsListRow from "../../../(partials)/settings-list-row";
+import ComputerListRow from "../../../(partials)/computer-list-row";
 import SettingsRowAction from "../../../(partials)/settings-row-action";
 
 type Props = {
@@ -22,17 +19,7 @@ export default function BotComputerRow({
     const name = computer.name || `Computer ${computer.id}`;
 
     return (
-        <SettingsListRow
-            avatar={<ComputerIconTile />}
-            title={name}
-            subtitle={[
-                computerStatusLabel({ computer }),
-                computerResourcesLabel({ computer }),
-                computer.description,
-            ]
-                .filter(Boolean)
-                .join(" · ")}
-        >
+        <ComputerListRow computer={computer}>
             {onRemove ? (
                 <SettingsRowAction
                     title={`Take ${name}'s access away`}
@@ -41,6 +28,6 @@ export default function BotComputerRow({
                     onClick={onRemove}
                 />
             ) : null}
-        </SettingsListRow>
+        </ComputerListRow>
     );
 }

src/pages/admin/settings/computers/(partials)/computer-settings-row.tsx

@@ -1,8 +1,5 @@
-import ComputerIconTile from "@/src/components/general/computer-icon-tile";
 import type { ComputerWithStatus } from "@/src/types";
-import computerResourcesLabel from "@/src/utils/computer-resources-label";
-import computerStatusLabel from "@/src/utils/computer-status-label";
-import SettingsListRow from "../../(partials)/settings-list-row";
+import ComputerListRow from "../../(partials)/computer-list-row";
 import SettingsRowAction from "../../(partials)/settings-row-action";
 
 type Props = {
@@ -29,18 +26,9 @@ export default function ComputerSettingsRow({
     const busy_here = busy || computer.status == "creating";
 
     return (
-        <SettingsListRow
-            avatar={<ComputerIconTile />}
-            href={`/admin/settings/computers/${computer.id}`}
-            title={name}
+        <ComputerListRow
+            computer={computer}
             badge={computer.kind == "main" ? "Main" : undefined}
-            subtitle={[
-                computerStatusLabel({ computer }),
-                computerResourcesLabel({ computer }),
-                computer.description,
-            ]
-                .filter(Boolean)
-                .join(" · ")}
         >
             {is_super_admin && computer.status == "failed" ? (
                 <SettingsRowAction
@@ -58,6 +46,6 @@ export default function ComputerSettingsRow({
                     onClick={onDelete}
                 />
             ) : null}
-        </SettingsListRow>
+        </ComputerListRow>
     );
 }

src/pages/admin/settings/computers/[computer_id]/(partials)/computer-overview-group.tsx

@@ -1,13 +1,11 @@
-import Button from "@moduletrace/twui/layout/Button";
 import Row from "@moduletrace/twui/layout/Row";
 import Span from "@moduletrace/twui/layout/Span";
 import Stack from "@moduletrace/twui/layout/Stack";
-import { ExternalLink } from "lucide-react";
 import ComputerIconTile from "@/src/components/general/computer-icon-tile";
+import ComputerOpenButton from "@/src/components/general/computer-open-button";
 import type { ComputerWithStatus } from "@/src/types";
 import computerResourcesLabel from "@/src/utils/computer-resources-label";
 import computerStatusLabel from "@/src/utils/computer-status-label";
-import computerViewUrl from "@/src/utils/computer-view-url";
 import SettingsGroup from "../../../(partials)/settings-group";
 
 type Props = {
@@ -16,7 +14,7 @@ type Props = {
 
 /**
  * The computer at a glance: its state, resources and what it's for, and a
- * way to open it in the browser.
+ * way to open it in the viewer.
  */
 export default function ComputerOverviewGroup({ computer }: Props) {
     const name = computer.name || `Computer ${computer.id}`;
@@ -51,31 +49,20 @@ export default function ComputerOverviewGroup({ computer }: Props) {
                             .join(" · ")}
                     </Span>
                 </Stack>
-                <Button
+                <ComputerOpenButton
+                    computer_id={Number(computer.id)}
+                    name={name}
+                    label="Open"
                     title={
                         ready
-                            ? `Open ${name} in the browser`
+                            ? `Open ${name}`
                             : `${name} isn't running yet`
                     }
-                    type="button"
                     variant="outlined"
                     color="gray"
                     size="small"
-                    href={
-                        ready
-                            ? computerViewUrl({
-                                  computer_id: Number(computer.id),
-                                  mode: "browser",
-                              })
-                            : undefined
-                    }
-                    target="_blank"
                     disabled={!ready}
-                    beforeIcon={<ExternalLink size={14} aria-hidden />}
-                    className="shrink-0"
-                >
-                    Open
-                </Button>
+                />
             </Row>
         </SettingsGroup>
     );

src/pages/admin/settings/workspaces/[workspace_id]/(partials)/workspace-computer-row.tsx

@@ -1,8 +1,6 @@
-import ComputerIconTile from "@/src/components/general/computer-icon-tile";
-import SettingsListRow from "@/src/pages/admin/settings/(partials)/settings-list-row";
-import SettingsRowAction from "@/src/pages/admin/settings/(partials)/settings-row-action";
 import type { ComputerWithStatus } from "@/src/types";
-import computerStatusLabel from "@/src/utils/computer-status-label";
+import ComputerListRow from "@/src/pages/admin/settings/(partials)/computer-list-row";
+import SettingsRowAction from "@/src/pages/admin/settings/(partials)/settings-row-action";
 
 type Props = {
     computer: ComputerWithStatus;
@@ -32,11 +30,9 @@ export default function WorkspaceComputerRow({
     const name = computer.name || `Computer ${computer.id}`;
 
     return (
-        <SettingsListRow
-            avatar={<ComputerIconTile />}
-            title={name}
+        <ComputerListRow
+            computer={computer}
             badge={is_default ? "Default" : undefined}
-            subtitle={`${computerStatusLabel({ computer })}${computer.description ? ` · ${computer.description}` : ""}`}
         >
             {is_default ? null : (
                 <SettingsRowAction title={`Make ${name} the default`} label="Make default" disabled={busy} onClick={onMakeDefault} />
@@ -48,6 +44,6 @@ export default function WorkspaceComputerRow({
             {is_super_admin && computer.kind != "main" ? (
                 <SettingsRowAction title={`Delete ${name}; its files are kept`} label="Delete" disabled={busy} onClick={onDelete} />
             ) : null}
-        </SettingsListRow>
+        </ComputerListRow>
     );
 }