diff --git a/app/src/features/crews/CrewColorField.tsx b/app/src/features/crews/CrewColorField.tsx new file mode 100644 index 00000000..93b5ee70 --- /dev/null +++ b/app/src/features/crews/CrewColorField.tsx @@ -0,0 +1,46 @@ +import { Check } from "lucide-react"; +import { useT } from "../../i18n"; +import { AVATAR_PALETTE } from "../../lib/protocol.gen"; + +/** Swatches for a crew's color, and a way to have none. */ +export function CrewColorField({ + value, + onChange, +}: { + value: string | null; + onChange(color: string | null): void; +}) { + const words = useT().crews.dialog; + const same = (a: string | null, b: string | null) => a?.toLowerCase() === b?.toLowerCase(); + return ( +
+ ); +} diff --git a/app/src/features/crews/CrewDialog.tsx b/app/src/features/crews/CrewDialog.tsx index a6436cfa..bed8205a 100644 --- a/app/src/features/crews/CrewDialog.tsx +++ b/app/src/features/crews/CrewDialog.tsx @@ -9,21 +9,37 @@ import { SelectField, TextArea, TextField } from "../../ui/Field"; import { notifyError } from "../../ui/toast"; import { useCatalog } from "../catalog/useCatalog"; import { addTemplateBots } from "./addTemplateBots"; +import { CrewColorField } from "./CrewColorField"; import type { CrewTemplate } from "./crewTemplates"; import { PickedTemplate, TemplatePicker } from "./TemplatePicker"; import { WorkFolderField } from "./WorkFolderField"; const MODELS: BotModel[] = ["default", "fable", "opus", "sonnet", "haiku"]; -/** Creates a crew with its chief, or renames `crew`. */ -export function CrewDialog({ crew, onClose }: { crew?: Crew; onClose(): void }) { +/** + * Creates a crew with its chief, or renames `crew`. `start` opens a new crew + * already on that template, as when the owner taps an idea on the welcome + * screen. + */ +export function CrewDialog({ + crew, + start, + onClose, +}: { + crew?: Crew; + start?: CrewTemplate | undefined; + onClose(): void; +}) { const t = useT(); const api = useApi(); const putCrew = useApp((state) => state.putCrew); const selectCrew = useApp((state) => state.selectCrew); - const [name, setName] = useState(crew?.name ?? ""); + const [name, setName] = useState( + crew?.name ?? (start ? t.crewTemplates.items[start.id].name : ""), + ); + const [color, setColor] = useState