feat(app): the + next to Worktrees opens a new worktree in that project

app/e2e/sidebar-rail.spec.ts

@@ -209,3 +209,14 @@ test("the sheet's top edge carries on the tab bar's bottom line", async ({ app }
   await expect.poll(() => app.stored("berth.prefs").then((p) => (p as { uiFontSize: number }).uiFontSize)).toBe(15);
   await expect.poll(lined).toBe(true);
 });
+
+test("the sheet's + next to Worktrees opens a new worktree in that project", async ({ app }) => {
+  mockOnly();
+  await app.open({ prefs: rail });
+  const page = app.page;
+  await page.locator("[data-testid=rail-project][data-project=shop]").click();
+  await page.getByRole("button", { name: "New worktree in shop" }).click();
+  const dialog = page.getByRole("dialog", { name: "New worktree" });
+  await expect(dialog).toBeVisible();
+  await expect(dialog.getByRole("button", { name: "Project: shop" })).toBeVisible();
+});

app/src/components/sidebar/rail-layout.tsx

@@ -1,4 +1,4 @@
-import { EllipsisIcon, FolderPlusIcon, PanelLeftIcon, PanelLeftOpenIcon, PenLineIcon, PlusIcon, SearchIcon, ServerIcon, SettingsIcon } from "lucide-react";
+import { EllipsisIcon, PanelLeftIcon, PanelLeftOpenIcon, PenLineIcon, PlusIcon, SearchIcon, SettingsIcon } from "lucide-react";
 import { memo, type ReactNode, useId, useMemo, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 
@@ -13,7 +13,7 @@ import { RowLayer } from "@/components/sidebar/row-layer";
 import { SkillsNotices } from "@/components/sidebar/skills-notice";
 import { awayText, BoxesFoot } from "@/components/sidebar/task-parts";
 import { Tip } from "@/components/tip";
-import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@/components/ui/menu";
+import { Menu, MenuPopup, MenuTrigger } from "@/components/ui/menu";
 import { SidebarMenuSub } from "@/components/ui/sidebar";
 import { WhatsNewNudge } from "@/components/whats-new/whats-new-dialog";
 import type { Location, Session } from "@/lib/api";
@@ -23,9 +23,9 @@ import { usePrefs } from "@/lib/prefs";
 import { avatarUrl, githubOwner } from "@/lib/project-avatar";
 import { type Project, useProjects } from "@/lib/project-groups";
 import { SIDEBAR_DEFAULT, SIDEBAR_MAX, SIDEBAR_MIN } from "@/lib/sidebar-width";
+import { openComposer } from "@/lib/composer";
 import { useStore } from "@/lib/store";
 import { cn } from "@/lib/utils";
-import { openAddBox } from "@/views/onboarding/add-box-dialog";
 import { TeamSidebarCard } from "@/views/team/team-entry";
 
 // The rail sidebar, the default layout: a narrow rail of the places and
@@ -384,6 +384,7 @@ function ProjectSheet({ project: p, prefs, update }: { project: Project; prefs:
   const count = p.members.reduce((n, m) => n + (m.loc.worktrees?.filter((w) => !w.main).length ?? 0), 0);
   const boxes = p.members.map((m) => m.box.name).join(", ");
   const onNew = online ? () => useStore.getState().openNewWorktree({ box: def.box.name, location: def.loc.name }) : undefined;
+  const onWorktree = online ? () => openComposer({ noAgent: true, box: def.box.name, location: def.loc.name }) : undefined;
   return (
     <section aria-labelledby={id} data-testid="sidebar-tasks" className="flex min-h-0 flex-1 flex-col">
       <ContextRow items={() => projectGroupActions(p)} className="group/row relative shrink-0 rounded-none data-popup-open:bg-transparent">
@@ -422,7 +423,18 @@ function ProjectSheet({ project: p, prefs, update }: { project: Project; prefs:
       </div>
       <div className={cn("flex h-7 shrink-0 items-center pt-3", lanes.content)}>
         <h3 className={cn("flex-1 text-label", ink.faint)}>Worktrees</h3>
-        <AddMenu />
+        {onWorktree && (
+          <Tip label={`New worktree in ${p.name}`} side="bottom" align="end">
+            <button
+              type="button"
+              aria-label={`New worktree in ${p.name}`}
+              onClick={onWorktree}
+              className={cn("inline-flex size-6 items-center justify-center rounded-md hover:bg-sidebar-accent hover:text-foreground [&_svg]:size-3.5", ink.glyph)}
+            >
+              <PlusIcon strokeWidth={2} />
+            </button>
+          </Tip>
+        )}
       </div>
       {/* One context menu and one tooltip for every row in it. */}
       <RowLayer className={cn("min-h-0 flex-1 overflow-y-auto pt-1.5 pb-3", lanes.box)}>
@@ -440,37 +452,6 @@ function ProjectSheet({ project: p, prefs, update }: { project: Project; prefs:
   );
 }
 
-// AddMenu adds a project or a box.
-function AddMenu() {
-  return (
-    <Menu>
-      <Tip label="Add a project or box" side="bottom" align="end">
-        <MenuTrigger
-          render={
-            <button
-              type="button"
-              aria-label="Add a project or box"
-              className={cn("inline-flex size-6 items-center justify-center rounded-md hover:bg-sidebar-accent hover:text-foreground data-popup-open:bg-sidebar-accent [&_svg]:size-3.5", ink.glyph)}
-            />
-          }
-        >
-          <PlusIcon strokeWidth={2} />
-        </MenuTrigger>
-      </Tip>
-      <MenuPopup align="end" className="min-w-48">
-        <MenuItem onClick={() => useStore.getState().openAddLocation()}>
-          <FolderPlusIcon />
-          Add a project…
-        </MenuItem>
-        <MenuItem onClick={openAddBox}>
-          <ServerIcon />
-          Add a box…
-        </MenuItem>
-      </MenuPopup>
-    </Menu>
-  );
-}
-
 function NoProjects() {
   return (
     <div className="flex-1 px-3.5 pt-5">

docs/changelog.mdx

@@ -9,6 +9,13 @@ upgrades with `berth upgrade BOX`, or by running the
 [install command](/getting-started/add-a-box#with-the-install-command)
 again.
 
+## Unreleased
+
+- **The + next to Worktrees makes a worktree.** In the project sheet
+  beside the rail, it now opens New worktree for that project, instead of
+  a menu to add a project or a box. Those stay on the rail's own + and
+  the boxes row at the bottom of the sidebar.
+
 ## v0.3.29
 
 - **Removing a worktree no longer asks first.** Remove worktree in the