Pick a bot's colour from stone tiles instead of a select

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/layouts/bots/(partials)/bot-form.tsx

@@ -1,19 +1,19 @@
 import { useContext, useState } from "react";
 import Form from "@moduletrace/twui/form/Form";
 import Input from "@moduletrace/twui/form/Input";
-import Select from "@moduletrace/twui/form/Select";
 import Textarea from "@moduletrace/twui/form/Textarea";
 import Checkbox from "@moduletrace/twui/form/Checkbox";
 import type { BUN_SQLITE_COBBLE_BOTS } from "@/db/types/db";
 import ImagePickField from "@/src/components/general/image-pick-field";
 import { AppContext } from "@/src/pages/__root";
-import { BotHues, type BotHue } from "@/src/dict/bot-dict";
+import type { BotHue } from "@/src/dict/bot-dict";
 import setProfileImage from "@/src/functions/frontend/set-profile-image";
 import postAdminApi from "../(functions)/post-admin-api";
 import usePickedImage from "../(hooks)/use-picked-image";
 import pickFreeHue from "@/src/utils/pick-free-hue";
 import AddFormActions from "./add-form-actions";
 import BotFormPreview from "./bot-form-preview";
+import BotHuePicker from "./bot-hue-picker";
 
 type Props = {
     /**
@@ -162,19 +162,7 @@ export default function BotForm({ bot, onCancel, onSaved }: Props) {
                         info="One line, shown under its name."
                         onChange={(e) => setRole(e.target.value)}
                     />
-                    <Select
+                    <BotHuePicker hue={hue} disabled={loading} onChange={setHue} />
-                        id="bot-form-hue"
-                        title="Colour"
-                        label="Colour"
-                        showLabel
-                        options={BotHues.map((option) => ({
-                            value: option.value,
-                            title: option.title,
-                            default: option.value == hue,
-                        }))}
-                        info="Its colour for life: how you tell it apart, even with a picture."
-                        changeHandler={(next) => setHue(next as BotHue)}
-                    />
                 </>
             )}
             <Textarea

src/layouts/bots/(partials)/bot-hue-option.tsx

@@ -0,0 +1,45 @@
+import Button from "@moduletrace/twui/layout/Button";
+import Span from "@moduletrace/twui/layout/Span";
+import Stack from "@moduletrace/twui/layout/Stack";
+import { twMerge } from "tailwind-merge";
+import BotStone from "@/src/components/general/bot-stone";
+import type { BotHues } from "@/src/dict/bot-dict";
+
+type Props = (typeof BotHues)[number] & {
+    selected: boolean;
+    disabled?: boolean;
+    onSelect: () => void;
+};
+
+/**
+ * One colour tile: a stone in that hue over its name. Selected is a strong
+ * border, so it never depends on the colour alone.
+ */
+export default function BotHueOption({ title, value, selected, disabled, onSelect }: Props) {
+    return (
+        <Button
+            title={title}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            variant="ghost"
+            color="gray"
+            disabled={disabled}
+            onClick={onSelect}
+            className={twMerge(
+                "w-full min-w-0 h-auto px-1! py-2! rounded-default",
+                "bg-surface dark:bg-surface hover:bg-sunken hover:dark:bg-sunken text-ink dark:text-ink",
+                "border border-solid border-hairline transition-colors duration-[var(--m-fast)]",
+                "focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper",
+                selected && "border-ink dark:border-ink bg-ink/5 dark:bg-ink/5",
+            )}
+        >
+            <Stack className="w-full min-w-0 gap-1! items-center">
+                <BotStone hue={value} face={selected ? "done" : "idle"} size={28} />
+                <Span className={twMerge("text-xs leading-4 text-ink-secondary truncate", selected && "font-bold text-ink")}>
+                    {title}
+                </Span>
+            </Stack>
+        </Button>
+    );
+}

src/layouts/bots/(partials)/bot-hue-picker.tsx

@@ -0,0 +1,40 @@
+import Row from "@moduletrace/twui/layout/Row";
+import Span from "@moduletrace/twui/layout/Span";
+import Stack from "@moduletrace/twui/layout/Stack";
+import { BotHues, type BotHue } from "@/src/dict/bot-dict";
+import BotHueOption from "./bot-hue-option";
+
+type Props = {
+    hue: BotHue;
+    disabled?: boolean;
+    onChange: (hue: BotHue) => void;
+};
+
+/**
+ * Picks a bot's colour from tiles that show each hue on a stone.
+ */
+export default function BotHuePicker({ hue, disabled, onChange }: Props) {
+    return (
+        <Stack className="w-full gap-2!">
+            <Span className="text-xs text-ink-secondary">Colour</Span>
+            <Row
+                role="radiogroup"
+                aria-label="Colour"
+                className="w-full grid grid-cols-4 sm:grid-cols-7 gap-2!"
+            >
+                {BotHues.map((option) => (
+                    <BotHueOption
+                        key={option.value}
+                        {...option}
+                        selected={hue == option.value}
+                        disabled={disabled}
+                        onSelect={() => onChange(option.value)}
+                    />
+                ))}
+            </Row>
+            <Span className="text-xs text-ink-secondary">
+                Its colour for life: how you tell it apart, even with a picture.
+            </Span>
+        </Stack>
+    );
+}