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

Author: BunsDev

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?.();
                   }
                 }}

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);
 

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", () => {

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);
 

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");