From f2eda6930093abb8900829d33cf6cdc590b364a8 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sun, 23 Aug 2026 07:54:57 +0000
Subject: [PATCH 1/2] tests: expand left sidebar in ProjectCreateModal stories
 so phone-viewport play passes

---
 .../ProjectCreateModal/ProjectCreateModal.stories.tsx    | 9 ++++++++-
 src/browser/stories/helpers/uiState.ts                   | 9 +++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/browser/components/ProjectCreateModal/ProjectCreateModal.stories.tsx b/src/browser/components/ProjectCreateModal/ProjectCreateModal.stories.tsx
index 4220a8431ce..01eb0837eaa 100644
--- a/src/browser/components/ProjectCreateModal/ProjectCreateModal.stories.tsx
+++ b/src/browser/components/ProjectCreateModal/ProjectCreateModal.stories.tsx
@@ -7,7 +7,11 @@
  */
 
 import type { APIClient } from "@/browser/contexts/API";
-import { expandProjects, selectWorkspace } from "@/browser/stories/helpers/uiState";
+import {
+  expandLeftSidebar,
+  expandProjects,
+  selectWorkspace,
+} from "@/browser/stories/helpers/uiState";
 import { createMockORPCClient } from "@/browser/stories/mocks/orpc";
 import { createWorkspace, groupWorkspacesByProject } from "@/browser/stories/mocks/workspaces";
 import type { AppStory } from "@/browser/stories/meta.js";
@@ -29,6 +33,9 @@ function setupProjectCreateStory(): APIClient {
   const workspaces = [createWorkspace({ id: "ws-1", name: "main", projectName: "my-app" })];
   selectWorkspace(workspaces[0]);
   expandProjects(["/mock/my-app"]);
+  // The sidebar defaults to collapsed at phone widths; the play functions need
+  // its "Add project" button visible to open the modal.
+  expandLeftSidebar();
   return createMockORPCClient({
     projects: groupWorkspacesByProject(workspaces),
     workspaces,
diff --git a/src/browser/stories/helpers/uiState.ts b/src/browser/stories/helpers/uiState.ts
index 1a15a50c38e..84616e87c11 100644
--- a/src/browser/stories/helpers/uiState.ts
+++ b/src/browser/stories/helpers/uiState.ts
@@ -53,3 +53,12 @@ export function collapseLeftSidebar(): void {
 export function expandRightSidebar(): void {
   localStorage.setItem(RIGHT_SIDEBAR_COLLAPSED_KEY, JSON.stringify(false));
 }
+
+/**
+ * Expand the left sidebar (project tree). The app defaults to collapsed when
+ * window.innerWidth <= 768, so stories whose play functions click sidebar
+ * controls must force it open to pass under Pixel's phone viewport.
+ */
+export function expandLeftSidebar(): void {
+  localStorage.setItem(LEFT_SIDEBAR_COLLAPSED_KEY, JSON.stringify(false));
+}

From 24b2e9ee698fe4daaac8935f5243cf2d4391e22c Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sun, 23 Aug 2026 08:01:51 +0000
Subject: [PATCH 2/2] review: route expandLeftSidebar through
 updatePersistedState; drop breakpoint literal from comment

---
 src/browser/stories/helpers/uiState.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/browser/stories/helpers/uiState.ts b/src/browser/stories/helpers/uiState.ts
index 84616e87c11..d567a43353d 100644
--- a/src/browser/stories/helpers/uiState.ts
+++ b/src/browser/stories/helpers/uiState.ts
@@ -1,3 +1,4 @@
+import { updatePersistedState } from "@/browser/hooks/usePersistedState";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import {
   SELECTED_WORKSPACE_KEY,
@@ -55,10 +56,10 @@ export function expandRightSidebar(): void {
 }
 
 /**
- * Expand the left sidebar (project tree). The app defaults to collapsed when
- * window.innerWidth <= 768, so stories whose play functions click sidebar
- * controls must force it open to pass under Pixel's phone viewport.
+ * Expand the left sidebar (project tree). The app defaults it to collapsed at
+ * mobile widths, so stories whose play functions click sidebar controls must
+ * force it open to pass under Pixel's phone viewport.
  */
 export function expandLeftSidebar(): void {
-  localStorage.setItem(LEFT_SIDEBAR_COLLAPSED_KEY, JSON.stringify(false));
+  updatePersistedState(LEFT_SIDEBAR_COLLAPSED_KEY, false);
 }