Add dedicated bot, workspace and user settings pages

2026-10-19 13:17:17 +01:00
parent 731ea73486
commit 7667f2bc2f
74 changed files with 2183 additions and 358 deletions
@@ -0,0 +1,53 @@
+import { useState } from "react";
+import Select from "@moduletrace/twui/form/Select";
+import Button from "@moduletrace/twui/layout/Button";
+import Row from "@moduletrace/twui/layout/Row";
+
+type Props = {
+    id: string;
+    /**
+     * What's being picked, e.g. "bot".
+     */
+    noun: string;
+    options: { value: string; title: string }[];
+    loading?: boolean;
+    onAdd: (params: { value: string }) => void;
+};
+
+/**
+ * A select of things to add, and an Add button beside it.
+ */
+export default function InlineAddSelect({ id, noun, options, loading, onAdd }: Props) {
+    const [value, setValue] = useState("");
+
+    if (!options.length) return null;
+
+    return (
+        <Row className="w-full gap-2! flex-nowrap items-end">
+            <Select
+                id={id}
+                title={`Pick a ${noun}`}
+                aria-label={`Pick a ${noun}`}
+                options={[
+                    { value: "", title: `Pick a ${noun}…`, default: !value },
+                    ...options.map((option) => ({ ...option, default: option.value == value })),
+                ]}
+                changeHandler={(next) => setValue(String(next))}
+                wrapperWrapperProps={{ className: "grow min-w-0" }}
+            />
+            <Button
+                title={`Add the ${noun}`}
+                type="button"
+                size="small"
+                variant="outlined"
+                color="gray"
+                loading={loading}
+                disabled={!value || loading}
+                onClick={() => value && onAdd({ value })}
+                className="shrink-0"
+            >
+                Add
+            </Button>
+        </Row>
+    );
+}