feat(app): right-click a bot in the sidebar for its menu

app/src/features/bots/BotHeader.tsx

@@ -1,34 +1,25 @@
 import {
-  Archive,
-  Crown,
   Ellipsis,
   Files,
-  FolderOpen,
   Globe,
   LayoutTemplate,
   PanelRight,
   Pause,
-  Pencil,
   Play,
-  RefreshCcw,
   RotateCw,
   ShieldOff,
 } from "lucide-react";
-import { useState } from "react";
 import { useT } from "../../i18n";
 import type { Bot, Crew } from "../../lib/protocol.gen";
-import { useApi, useApp, useHost } from "../../store/context";
+import { useApi, useApp } from "../../store/context";
 import { Button } from "../../ui/Button";
-import { Confirm } from "../../ui/Confirm";
 import { Menu } from "../../ui/Menu";
 import { attempt } from "../../ui/toast";
 import { BotAvatar, moodOf } from "./BotAvatar";
-import { BotDialog } from "./BotDialog";
 import { BotStateBadge } from "./BotStateBadge";
+import { useBotActions } from "./botActions";
 import { ChiefBadge, isChief } from "./ChiefBadge";
 
-type Open = "edit" | "archive" | "fresh" | null;
-
 /** The bot's name, state and actions. */
 export function BotHeader({
   bot,
@@ -68,25 +59,18 @@ export function BotHeader({
   const t = useT();
   const words = t.bots.header;
   const api = useApi();
-  const host = useHost();
   const putBot = useApp((state) => state.putBot);
-  const putCrew = useApp((state) => state.putCrew);
   const chief = isChief(bot, crew);
-  const [open, setOpen] = useState<Open>(null);
-  const close = () => setOpen(null);
+  const actions = useBotActions(bot, crew);
   const stopped = bot.paused || crew.paused;
 
   const setPaused = (paused: boolean) =>
     attempt(paused ? words.failed.pause : words.failed.resume, async () =>
       putBot(await api.call("bots.setPaused", { botId: bot.id, paused })),
     );
-  const setChief = (on: boolean) =>
-    attempt(words.failed.chief, async () =>
-      putCrew(await api.call("crews.setLead", { crewId: crew.id, botId: on ? bot.id : null })),
-    );
-  const restart = (fresh: boolean) =>
+  const restart = () =>
     attempt(words.failed.restart, async () =>
-      putBot(await api.call("bots.restart", { botId: bot.id, fresh })),
+      putBot(await api.call("bots.restart", { botId: bot.id, fresh: false })),
     );
 
   return (
@@ -123,7 +107,7 @@ export function BotHeader({
           {words.pause}
         </Button>
       )}
-      <Button icon={RotateCw} disabled={stopped} onClick={() => restart(false)}>
+      <Button icon={RotateCw} disabled={stopped} onClick={restart}>
         {words.restart}
       </Button>
       <span className="relative">
@@ -202,56 +186,8 @@ export function BotHeader({
         aria-pressed={detailsOpen}
         onClick={onToggleDetails}
       />
-      <Menu
-        label={words.more}
-        icon={Ellipsis}
-        items={[
-          { label: words.edit, icon: Pencil, onSelect: () => setOpen("edit") },
-          {
-            label: chief ? words.stopChief : words.makeChief,
-            icon: Crown,
-            onSelect: () => setChief(!chief),
-          },
-          {
-            label: words.restartFresh,
-            icon: RefreshCcw,
-            disabled: stopped,
-            onSelect: () => setOpen("fresh"),
-          },
-          {
-            label: words.openFolder,
-            icon: FolderOpen,
-            onSelect: () => attempt(words.failed.openFolder, () => host.openPath(bot.workspace)),
-          },
-          { label: words.archive, icon: Archive, danger: true, onSelect: () => setOpen("archive") },
-        ]}
-      />
-
-      {open === "edit" && <BotDialog bot={bot} onClose={close} />}
-      {open === "fresh" && (
-        <Confirm
-          title={words.fresh.title}
-          confirmLabel={words.fresh.confirm}
-          onClose={close}
-          onConfirm={() => restart(true)}
-        >
-          {words.fresh.body(bot.name)}
-        </Confirm>
-      )}
-      {open === "archive" && (
-        <Confirm
-          title={words.archiveConfirm.title(bot.name)}
-          confirmLabel={words.archiveConfirm.confirm}
-          onClose={close}
-          onConfirm={() =>
-            attempt(words.failed.archive, async () =>
-              putBot(await api.call("bots.archive", { botId: bot.id })),
-            )
-          }
-        >
-          {words.archiveConfirm.body}
-        </Confirm>
-      )}
+      <Menu label={words.more} icon={Ellipsis} items={actions.items} />
+      {actions.dialogs}
     </header>
   );
 }

app/src/features/bots/botActions.tsx

@@ -0,0 +1,91 @@
+import { Archive, Crown, FolderOpen, Pencil, RefreshCcw } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { useT } from "../../i18n";
+import type { Bot, Crew } from "../../lib/protocol.gen";
+import { useApi, useApp, useHost } from "../../store/context";
+import { Confirm } from "../../ui/Confirm";
+import type { MenuItem } from "../../ui/Menu";
+import { attempt } from "../../ui/toast";
+import { BotDialog } from "./BotDialog";
+import { isChief } from "./ChiefBadge";
+
+type Open = "edit" | "archive" | "fresh" | null;
+
+/**
+ * What the owner can do with a bot from a menu, and the dialogs those
+ * actions open (`null` while none is). The header's menu and the right-click
+ * menu of the conversation list both come from here, so they stay the same.
+ */
+export function useBotActions(
+  bot: Bot,
+  crew: Crew,
+): { items: MenuItem[]; dialogs: ReactNode | null } {
+  const t = useT();
+  const words = t.bots.header;
+  const api = useApi();
+  const host = useHost();
+  const putBot = useApp((state) => state.putBot);
+  const putCrew = useApp((state) => state.putCrew);
+  const chief = isChief(bot, crew);
+  const [open, setOpen] = useState<Open>(null);
+  const close = () => setOpen(null);
+
+  const items: MenuItem[] = [
+    { label: words.edit, icon: Pencil, onSelect: () => setOpen("edit") },
+    {
+      label: chief ? words.stopChief : words.makeChief,
+      icon: Crown,
+      onSelect: () =>
+        attempt(words.failed.chief, async () =>
+          putCrew(
+            await api.call("crews.setLead", { crewId: crew.id, botId: chief ? null : bot.id }),
+          ),
+        ),
+    },
+    {
+      label: words.restartFresh,
+      icon: RefreshCcw,
+      disabled: bot.paused || crew.paused,
+      onSelect: () => setOpen("fresh"),
+    },
+    {
+      label: words.openFolder,
+      icon: FolderOpen,
+      onSelect: () => attempt(words.failed.openFolder, () => host.openPath(bot.workspace)),
+    },
+    { label: words.archive, icon: Archive, danger: true, onSelect: () => setOpen("archive") },
+  ];
+
+  const dialogs =
+    open === "edit" ? (
+      <BotDialog bot={bot} onClose={close} />
+    ) : open === "fresh" ? (
+      <Confirm
+        title={words.fresh.title}
+        confirmLabel={words.fresh.confirm}
+        onClose={close}
+        onConfirm={() =>
+          attempt(words.failed.restart, async () =>
+            putBot(await api.call("bots.restart", { botId: bot.id, fresh: true })),
+          )
+        }
+      >
+        {words.fresh.body(bot.name)}
+      </Confirm>
+    ) : open === "archive" ? (
+      <Confirm
+        title={words.archiveConfirm.title(bot.name)}
+        confirmLabel={words.archiveConfirm.confirm}
+        onClose={close}
+        onConfirm={() =>
+          attempt(words.failed.archive, async () =>
+            putBot(await api.call("bots.archive", { botId: bot.id })),
+          )
+        }
+      >
+        {words.archiveConfirm.body}
+      </Confirm>
+    ) : null;
+
+  return { items, dialogs };
+}

app/src/features/crews/Sidebar.tsx

@@ -1,16 +1,19 @@
 import { Pause, Plus } from "lucide-react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
+import { createPortal } from "react-dom";
 import { useShallow } from "zustand/react/shallow";
 import { type Messages, useT } from "../../i18n";
 import { when } from "../../lib/format";
 import type { Activity, Bot, Crew } from "../../lib/protocol.gen";
 import { botsOf, crewList } from "../../store/app";
 import { useApp } from "../../store/context";
 import { Button } from "../../ui/Button";
+import { ContextMenu, menuPoint, type Point } from "../../ui/ContextMenu";
 import { APP_OPENED } from "../../ui/motion";
 import { AccountArea } from "../account/AccountArea";
 import { BotAvatar, moodOf } from "../bots/BotAvatar";
 import { BotStateBadge, stateView } from "../bots/BotStateBadge";
+import { useBotActions } from "../bots/botActions";
 import { ChiefBadge, isChief } from "../bots/ChiefBadge";
 import { toolAction, toolTitle } from "../chat/toolNames";
 import { CrewDialog } from "./CrewDialog";
@@ -85,6 +88,10 @@ function Conversation({ bot, crew }: { bot: Bot; crew: Crew }) {
   const t = useT();
   const selected = useApp((state) => state.selectedBotId === bot.id);
   const selectBot = useApp((state) => state.selectBot);
+  // A right-click opens the bot's menu, the same as in its header.
+  const actions = useBotActions(bot, crew);
+  const [menuAt, setMenuAt] = useState<Point | null>(null);
+  const closeMenu = useCallback(() => setMenuAt(null), []);
   const activity = bot.lastActivity;
   return (
     <li className={bot.createdAt > APP_OPENED ? "animate-rise" : undefined}>
@@ -93,7 +100,11 @@ function Conversation({ bot, crew }: { bot: Bot; crew: Crew }) {
         aria-current={selected ? "page" : undefined}
         aria-label={`${bot.name}, ${stateView(bot, crew.paused).label}`}
         onClick={() => selectBot(bot.id)}
-        className={`${row} gap-2.5 px-2.5 py-2 ${selected ? "bg-sunken" : ""}`}
+        onContextMenu={(event) => {
+          event.preventDefault();
+          setMenuAt(menuPoint(event));
+        }}
+        className={`${row} gap-2.5 px-2.5 py-2 ${selected || menuAt ? "bg-sunken" : ""}`}
       >
         <BotAvatar color={bot.color} size={32} mood={moodOf(bot, crew.paused)} />
         <span className="min-w-0 flex-1">
@@ -119,6 +130,16 @@ function Conversation({ bot, crew }: { bot: Bot; crew: Crew }) {
           </span>
         </span>
       </button>
+      {menuAt && (
+        <ContextMenu
+          label={t.bots.header.menuOf(bot.name)}
+          items={actions.items}
+          at={menuAt}
+          onClose={closeMenu}
+        />
+      )}
+      {/* Outside the list: a dialog is not part of the navigation. */}
+      {actions.dialogs && createPortal(actions.dialogs, document.body)}
     </li>
   );
 }