fix(projects): restore overview drawer controls

Use the stateful drawer affordance in both wide and narrow Projects layouts so context controls match the rest of the project surfaces.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
Co-authored-by: Thomas Petersen <thomasp@squareup.com>
This commit is contained in:
Thomas Petersen
2026-08-23 23:29:50 -04:00
committed by Wrench
parent b5c927e90c
commit c9e8056f3f
3 changed files with 18 additions and 16 deletions

View File

@@ -1,7 +1,8 @@
import { Info, MessageCircle } from "lucide-react";
import { MessageCircle } from "lucide-react";
import { cn } from "@/shared/lib/cn";
import { Button } from "@/shared/ui/button";
import { DrawerPanelIcon } from "@/shared/ui/DrawerPanelIcon";
export function ProjectsOverviewChromeActions({
chatOpen,
@@ -49,12 +50,10 @@ export function ProjectsOverviewChromeActions({
type="button"
variant="ghost"
>
<Info
className={cn(
"h-4 w-4 transition-opacity duration-200 ease-linear",
contextOpen ? "opacity-100" : "opacity-60",
)}
data-testid="projects-overview-context-icon"
<DrawerPanelIcon
className="-scale-x-100"
side={contextOpen ? "left" : "right"}
testId="projects-overview-context-icon"
/>
</Button>
</>

View File

@@ -1,8 +1,7 @@
import { Info } from "lucide-react";
import * as React from "react";
import { cn } from "@/shared/lib/cn";
import { Button } from "@/shared/ui/button";
import { DrawerPanelIcon } from "@/shared/ui/DrawerPanelIcon";
import { Sheet, SheetContent, SheetTitle } from "@/shared/ui/sheet";
export const ProjectsOverviewNarrowContextToggle = React.forwardRef<
@@ -21,12 +20,10 @@ export const ProjectsOverviewNarrowContextToggle = React.forwardRef<
type="button"
variant="ghost"
>
<Info
className={cn(
"h-4 w-4 transition-opacity duration-200 ease-linear",
open ? "opacity-100" : "opacity-60",
)}
data-testid="projects-overview-context-icon"
<DrawerPanelIcon
className="-scale-x-100"
side={open ? "left" : "right"}
testId="projects-overview-context-icon"
/>
</Button>
));

View File

@@ -2103,7 +2103,7 @@ test("project overview chrome toggles a detached resizable agent chat", async ({
).toBeVisible();
});
test("project overview info control animates the context rail", async ({
test("project overview drawer control animates the context rail", async ({
page,
}) => {
await enableProjectsFeature(page);
@@ -2114,6 +2114,10 @@ test("project overview info control animates the context rail", async ({
const toggle = page.getByTestId("projects-overview-context-toggle");
const rail = page.getByTestId("projects-overview-context-rail");
const railPanel = page.getByTestId("projects-overview-context-rail-panel");
const drawerIndicator = page
.getByTestId("projects-overview-context-icon")
.locator("rect")
.nth(1);
const contentSurface = page.locator("[data-buzz-content-surface]");
await expect(page.getByTestId("projects-overview-layout")).toHaveAttribute(
"data-project-context-detached",
@@ -2133,6 +2137,7 @@ test("project overview info control animates the context rail", async ({
await expect(
page.getByTestId("projects-overview-context-icon"),
).toBeVisible();
await expect(drawerIndicator).toHaveAttribute("width", "5px");
await expect(rail).toHaveCSS("width", "288px");
await expect(page.getByTestId("projects-overview-layout")).toHaveCSS(
"padding-right",
@@ -2146,6 +2151,7 @@ test("project overview info control animates the context rail", async ({
await toggle.click();
await expect(rail).toHaveCSS("width", "0px");
await expect(toggle).toHaveAttribute("aria-pressed", "false");
await expect(drawerIndicator).toHaveAttribute("width", "2px");
await expect(railPanel).toHaveCSS("transform", "none");
expect(await surfaceStyle()).toEqual(expandedSurfaceStyle);
await toggle.click();