Merge pull request #238 from httpsphl/feat/welcome-ideas

feat(app): tap an idea on the welcome screen

Author: httpsphl

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 (
+    <fieldset className="m-0 flex flex-col gap-1.5 border-0 p-0">
+      <legend className="mb-1.5 font-medium text-ink-soft text-sm">{words.color}</legend>
+      <div className="flex flex-wrap items-center gap-1.5">
+        <button
+          type="button"
+          aria-pressed={value === null}
+          onClick={() => onChange(null)}
+          className={`rounded-lg px-2 py-1 font-medium text-xs ${value === null ? "bg-sunken text-ink ring-2 ring-accent" : "text-muted hover:text-ink"}`}
+        >
+          {words.noColor}
+        </button>
+        {AVATAR_PALETTE.map((swatch) => {
+          const on = same(value, swatch);
+          return (
+            <button
+              key={swatch}
+              type="button"
+              aria-label={words.swatch(swatch)}
+              aria-pressed={on}
+              onClick={() => onChange(swatch)}
+              className={`relative grid size-7 place-items-center rounded-full ${on ? "ring-2 ring-accent ring-offset-2 ring-offset-panel" : ""}`}
+              style={{ background: swatch }}
+            >
+              {on && <Check aria-hidden size={14} className="text-black/70" />}
+            </button>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+}

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<string | null>(crew?.color ?? null);
   const [folder, setFolder] = useState<string | null>(null);
-  const [goal, setGoal] = useState("");
+  const [goal, setGoal] = useState(start ? t.crewTemplates.items[start.id].goal : "");
   const [chiefModel, setChiefModel] = useState<BotModel>("default");
   const selectBot = useApp((state) => state.selectBot);
   const putBot = useApp((state) => state.putBot);
@@ -32,7 +48,7 @@ export function CrewDialog({ crew, onClose }: { crew?: Crew; onClose(): void })
   // A new crew starts from a template (spec 29.1) when the catalog loaded:
   // `undefined` is the list of templates, `null` an empty crew.
   const { roles, failed: catalogFailed } = useCatalog(!crew);
-  const [template, setTemplate] = useState<CrewTemplate | null | undefined>(undefined);
+  const [template, setTemplate] = useState<CrewTemplate | null | undefined>(start);
   const loading = !crew && roles === null && !catalogFailed;
   const choosing = !crew && template === undefined && roles !== null;
 
@@ -49,7 +65,7 @@ export function CrewDialog({ crew, onClose }: { crew?: Crew; onClose(): void })
     setError(null);
     try {
       const d = t.crews.dialog;
-      const saved = crew
+      let saved = crew
         ? await api.call("crews.rename", { crewId: crew.id, name })
         : await api.call("crews.create", {
             name,
@@ -62,6 +78,9 @@ export function CrewDialog({ crew, onClose }: { crew?: Crew; onClose(): void })
               ...(chiefModel !== "default" && { model: chiefModel }),
             },
           });
+      if (crew && color !== crew.color) {
+        saved = await api.call("crews.setColor", { crewId: crew.id, color });
+      }
       putCrew(saved);
       if (!crew) {
         selectCrew(saved.id);
@@ -134,6 +153,7 @@ export function CrewDialog({ crew, onClose }: { crew?: Crew; onClose(): void })
           autoFocus
           required
         />
+        {crew && <CrewColorField value={color} onChange={setColor} />}
         {!crew && (
           <>
             <TextArea

app/src/features/crews/Sidebar.tsx

@@ -127,6 +127,14 @@ function CrewEntry({ crew }: { crew: Crew }) {
           }}
           className={`${row} h-8 gap-2 pr-2.5 pl-8 font-semibold text-sm ${selected || menuAt ? "bg-sunken" : ""}`}
         >
+          {crew.color && (
+            <span
+              aria-hidden
+              data-testid="crew-color"
+              className="size-2.5 shrink-0 rounded-full"
+              style={{ background: crew.color }}
+            />
+          )}
           <span className="min-w-0 flex-1 truncate">{crew.name}</span>
           {waiting && (
             <span className="flex shrink-0">

app/src/features/crews/crewColor.test.tsx

@@ -0,0 +1,31 @@
+import { cleanup, fireEvent, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { FakeBotloft } from "../../lib/fake";
+import { crewOpened, renderApp, sidebar } from "../../test/app";
+
+afterEach(cleanup);
+
+describe("a crew's color", () => {
+  test("the owner picks one in the rename dialog and it shows beside the crew", async () => {
+    const fake = new FakeBotloft();
+    const crew = fake.addCrew("Ops");
+    fake.addBot(crew.id, "Scout");
+    renderApp(fake);
+    await crewOpened("Ops");
+    expect(within(sidebar()).queryByTestId("crew-color")).toBeNull();
+
+    fireEvent.contextMenu(within(sidebar()).getByRole("button", { name: /^Ops/ }), {
+      clientX: 100,
+      clientY: 100,
+    });
+    const menu = screen.getByRole("menu", { name: "Actions for Ops" });
+    fireEvent.click(within(menu).getByRole("menuitem", { name: "Rename" }));
+    const dialog = await screen.findByRole("dialog");
+    fireEvent.click(within(dialog).getByRole("button", { name: "Color #5EC8FF" }));
+    fireEvent.click(within(dialog).getByRole("button", { name: "Rename" }));
+
+    const dot = await within(sidebar()).findByTestId("crew-color");
+    expect(dot.style.background).toMatch(/#5ec8ff|rgb\(94, 200, 255\)/i);
+    expect(fake.crew(crew.id).color).toBe("#5EC8FF");
+  });
+});

app/src/features/onboarding/Welcome.tsx

@@ -8,14 +8,21 @@ import { Button } from "../../ui/Button";
 import { useDaemonSettings } from "../account/useDaemonSettings";
 import { BotAvatar } from "../bots/BotAvatar";
 import { CrewDialog } from "../crews/CrewDialog";
+import { CREW_TEMPLATES, type CrewTemplate } from "../crews/crewTemplates";
 import { ClaudeCodeHelp } from "./ClaudeCodeHelp";
 import { SignInButton } from "./SignIn";
 
+/** Templates shown as ideas on the first screen. */
+const IDEAS = 4;
+
 /** First run: what is ready, what is not, and the first crew. */
 export function Welcome() {
-  const w = useT().onboarding.welcome;
+  const t = useT();
+  const w = t.onboarding.welcome;
+  const ideas = t.crewTemplates.items;
   const system = useApp((state) => state.system);
   const [creating, setCreating] = useState(false);
+  const [idea, setIdea] = useState<CrewTemplate | undefined>(undefined);
   const whenClosed = usePref(prefs.whenClosed);
   const { settings } = useDaemonSettings();
   const running =
@@ -82,11 +89,42 @@ export function Welcome() {
           <p className="font-semibold">{w.askFirstTitle}</p>
           <p className="mt-1 text-ink-soft">{w.askFirstBody}</p>
         </div>
-        <Button className="mt-6" variant="primary" icon={Plus} onClick={() => setCreating(true)}>
+        <section aria-label={w.ideasTitle} className="mt-6">
+          <h2 className="font-semibold text-sm">{w.ideasTitle}</h2>
+          <ul className="m-0 mt-2 grid list-none grid-cols-1 gap-2 p-0 sm:grid-cols-2">
+            {CREW_TEMPLATES.slice(0, IDEAS).map((template) => {
+              const item = ideas[template.id];
+              return (
+                <li key={template.id} className="flex">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIdea(template);
+                      setCreating(true);
+                    }}
+                    className="flex w-full flex-col gap-0.5 rounded-xl border border-line bg-panel p-3 text-left transition-colors hover:border-line-strong hover:bg-sunken"
+                  >
+                    <span className="font-semibold text-sm">{item.name}</span>
+                    <span className="line-clamp-2 text-ink-soft text-sm">{item.summary}</span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+        <Button
+          className="mt-4"
+          variant="primary"
+          icon={Plus}
+          onClick={() => {
+            setIdea(undefined);
+            setCreating(true);
+          }}
+        >
           {w.createCrew}
         </Button>
       </div>
-      {creating && <CrewDialog onClose={() => setCreating(false)} />}
+      {creating && <CrewDialog start={idea} onClose={() => setCreating(false)} />}
     </main>
   );
 }

app/src/features/onboarding/ideas.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, fireEvent, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { FakeBotloft } from "../../lib/fake";
+import { renderApp } from "../../test/app";
+
+afterEach(cleanup);
+
+describe("ideas on the welcome screen", () => {
+  test("tapping an idea opens a new crew already set up from that template", async () => {
+    renderApp(new FakeBotloft());
+    const ideas = await screen.findByRole("region", { name: "Or tap an idea" });
+    expect(within(ideas).getAllByRole("listitem")).toHaveLength(4);
+
+    fireEvent.click(within(ideas).getByRole("button", { name: /Software team/ }));
+    const dialog = await screen.findByRole("dialog", { name: "New crew" });
+    expect((within(dialog).getByLabelText("Name") as HTMLInputElement).value).toBe("Software team");
+    expect(within(dialog).getByText(/This team adds/)).toBeDefined();
+  });
+
+  test("the plain button still starts at the list of templates", async () => {
+    renderApp(new FakeBotloft());
+    fireEvent.click(await screen.findByRole("button", { name: "Create your first crew" }));
+    expect(await screen.findByRole("dialog", { name: "Start from a template" })).toBeDefined();
+  });
+});

app/src/i18n/en/crews.ts

@@ -43,6 +43,9 @@ export const crews = {
     noBots: "No bots yet",
   },
   dialog: {
+    color: "Color",
+    noColor: "No color",
+    swatch: (color: string) => `Color ${color}`,
     folder: "Work folder",
     folderHint: "Where the bots put what they make. It can be a folder you already use.",
     folderDefault: "A new folder inside Botloft",

app/src/i18n/en/onboarding.ts

@@ -65,6 +65,7 @@ export const onboarding = {
     askFirstTitle: "Bots ask before they change things",
     askFirstBody:
       "When a bot wants to run a command or edit a file, it asks in its chat and waits for you to allow or deny it.",
+    ideasTitle: "Or tap an idea",
     createCrew: "Create your first crew",
   },
   claudeCode: {

app/src/i18n/es/crews.ts

@@ -35,6 +35,9 @@ export const crews: Messages["crews"] = {
     noBots: "Ningún bot todavía",
   },
   dialog: {
+    color: "Color",
+    noColor: "Sin color",
+    swatch: (color: string) => `Color ${color}`,
     folder: "Carpeta de trabajo",
     folderHint: "Donde los bots guardan lo que hacen. Puede ser una carpeta que ya usas.",
     folderDefault: "Una carpeta nueva dentro de Botloft",

app/src/i18n/es/onboarding.ts

@@ -65,6 +65,7 @@ export const onboarding: Messages["onboarding"] = {
     askFirstTitle: "Los bots preguntan antes de cambiar cosas",
     askFirstBody:
       "Cuando un bot quiere ejecutar un comando o editar un archivo, lo pregunta en su chat y espera a que lo permitas o lo deniegues.",
+    ideasTitle: "O toca una idea",
     createCrew: "Crear tu primer equipo",
   },
   claudeCode: {