From f8aa890635e943e920bf1fa2a2e8b4bf1c8d83cf Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Sat, 25 Apr 2026 07:24:54 -0500
Subject: [PATCH] Default preview layout to side panel

- Default project preview layout to side instead of top
- Keep layout switcher and fullscreen restore aligned with the new default
- Update preview tests for the side-layout fallback
---
 apps/web/src/components/ChatView.tsx              | 4 ++--
 apps/web/src/components/PreviewLayoutSwitcher.tsx | 2 +-
 apps/web/src/components/PreviewPanel.test.ts      | 4 ++--
 apps/web/src/components/PreviewPanel.tsx          | 2 +-
 apps/web/src/previewStateStore.ts                 | 8 ++++----
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 86d652983..4558bca14 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -442,7 +442,7 @@ export default function ChatView({
     activeProjectId ? (state.dockByProjectId[activeProjectId] ?? "top") : "top",
   );
   const previewLayoutMode = usePreviewStateStore((state) =>
-    activeProjectId ? (state.layoutModeByProjectId[activeProjectId] ?? "top") : "top",
+    activeProjectId ? (state.layoutModeByProjectId[activeProjectId] ?? "side") : "side",
   );
   const previewSizeDefault =
     previewLayoutMode === "side"
@@ -5054,7 +5054,7 @@ export default function ChatView({
                 className="rounded-md border border-border/50 bg-background px-2 py-0.5 text-xs text-foreground transition-colors hover:bg-muted"
                 onClick={() => {
                   if (activeProjectId) {
-                    usePreviewStateStore.getState().setProjectLayoutMode(activeProjectId, "top");
+                    usePreviewStateStore.getState().setProjectLayoutMode(activeProjectId, "side");
                     void readDesktopPreviewBridge()?.popIn?.();
                   }
                 }}
diff --git a/apps/web/src/components/PreviewLayoutSwitcher.tsx b/apps/web/src/components/PreviewLayoutSwitcher.tsx
index 8c8e2f614..e151bd1bb 100644
--- a/apps/web/src/components/PreviewLayoutSwitcher.tsx
+++ b/apps/web/src/components/PreviewLayoutSwitcher.tsx
@@ -24,7 +24,7 @@ interface PreviewLayoutSwitcherProps {
 
 export function PreviewLayoutSwitcher({ projectId }: PreviewLayoutSwitcherProps) {
   const layoutMode = usePreviewStateStore(
-    (state) => state.layoutModeByProjectId[projectId] ?? "top",
+    (state) => state.layoutModeByProjectId[projectId] ?? "side",
   );
   const setProjectLayoutMode = usePreviewStateStore((state) => state.setProjectLayoutMode);
 
diff --git a/apps/web/src/components/PreviewPanel.test.ts b/apps/web/src/components/PreviewPanel.test.ts
index b37ba678c..635358732 100644
--- a/apps/web/src/components/PreviewPanel.test.ts
+++ b/apps/web/src/components/PreviewPanel.test.ts
@@ -57,9 +57,9 @@ describe("PreviewLayoutSwitcher", () => {
 describe("previewStateStore layout mode", () => {
   const projectId = "test-project";
 
-  it("defaults layout mode to 'top'", () => {
+  it("defaults layout mode to 'side'", () => {
     const state = usePreviewStateStore.getState();
-    expect(state.layoutModeByProjectId[projectId] ?? "top").toBe("top");
+    expect(state.layoutModeByProjectId[projectId] ?? "side").toBe("side");
   });
 
   it("sets and persists layout mode", () => {
diff --git a/apps/web/src/components/PreviewPanel.tsx b/apps/web/src/components/PreviewPanel.tsx
index 2e7d7fdc5..e441150dd 100644
--- a/apps/web/src/components/PreviewPanel.tsx
+++ b/apps/web/src/components/PreviewPanel.tsx
@@ -163,7 +163,7 @@ export function PreviewPanel({ projectId, threadId, onClose }: PreviewPanelProps
   );
   const setCustomViewport = usePreviewStateStore((state) => state.setCustomViewport);
   const layoutMode = usePreviewStateStore(
-    (state) => state.layoutModeByProjectId[projectId] ?? "top",
+    (state) => state.layoutModeByProjectId[projectId] ?? "side",
   );
   const toggleFullscreen = usePreviewStateStore((state) => state.toggleFullscreen);
 
diff --git a/apps/web/src/previewStateStore.ts b/apps/web/src/previewStateStore.ts
index a82160cc8..bebbdc37d 100644
--- a/apps/web/src/previewStateStore.ts
+++ b/apps/web/src/previewStateStore.ts
@@ -292,7 +292,7 @@ export const usePreviewStateStore = create<PreviewStateStore>((set, get) => ({
   },
 
   toggleProjectLayout: (_projectId) => {
-    // No-op: browser is locked to "top" position.
+    // No-op: browser layout switching stays explicit in the preview controls.
   },
 
   setProjectSize: (projectId, size) => {
@@ -395,7 +395,7 @@ export const usePreviewStateStore = create<PreviewStateStore>((set, get) => ({
 
   setProjectLayoutMode: (projectId, mode) => {
     set((state) => {
-      const currentMode = state.layoutModeByProjectId[projectId] ?? "top";
+      const currentMode = state.layoutModeByProjectId[projectId] ?? "side";
       const nextLayoutModeByProjectId = {
         ...state.layoutModeByProjectId,
         [projectId]: mode,
@@ -418,10 +418,10 @@ export const usePreviewStateStore = create<PreviewStateStore>((set, get) => ({
   },
 
   toggleFullscreen: (projectId) => {
-    const current = get().layoutModeByProjectId[projectId] ?? "top";
+    const current = get().layoutModeByProjectId[projectId] ?? "side";
     if (current === "fullscreen") {
       // Restore previous mode
-      const previous = get().previousLayoutModeByProjectId[projectId] ?? "top";
+      const previous = get().previousLayoutModeByProjectId[projectId] ?? "side";
       get().setProjectLayoutMode(projectId, previous);
     } else {
       get().setProjectLayoutMode(projectId, "fullscreen");