Skip to content

Commit f8aa890

Browse files
committed
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
1 parent 76dcd83 commit f8aa890

5 files changed

Lines changed: 10 additions & 10 deletions

File tree

apps/web/src/components/ChatView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ export default function ChatView({
442442
activeProjectId ? (state.dockByProjectId[activeProjectId] ?? "top") : "top",
443443
);
444444
const previewLayoutMode = usePreviewStateStore((state) =>
445-
activeProjectId ? (state.layoutModeByProjectId[activeProjectId] ?? "top") : "top",
445+
activeProjectId ? (state.layoutModeByProjectId[activeProjectId] ?? "side") : "side",
446446
);
447447
const previewSizeDefault =
448448
previewLayoutMode === "side"
@@ -5054,7 +5054,7 @@ export default function ChatView({
50545054
className="rounded-md border border-border/50 bg-background px-2 py-0.5 text-xs text-foreground transition-colors hover:bg-muted"
50555055
onClick={() => {
50565056
if (activeProjectId) {
5057-
usePreviewStateStore.getState().setProjectLayoutMode(activeProjectId, "top");
5057+
usePreviewStateStore.getState().setProjectLayoutMode(activeProjectId, "side");
50585058
void readDesktopPreviewBridge()?.popIn?.();
50595059
}
50605060
}}

apps/web/src/components/PreviewLayoutSwitcher.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ interface PreviewLayoutSwitcherProps {
2424

2525
export function PreviewLayoutSwitcher({ projectId }: PreviewLayoutSwitcherProps) {
2626
const layoutMode = usePreviewStateStore(
27-
(state) => state.layoutModeByProjectId[projectId] ?? "top",
27+
(state) => state.layoutModeByProjectId[projectId] ?? "side",
2828
);
2929
const setProjectLayoutMode = usePreviewStateStore((state) => state.setProjectLayoutMode);
3030

apps/web/src/components/PreviewPanel.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ describe("PreviewLayoutSwitcher", () => {
5757
describe("previewStateStore layout mode", () => {
5858
const projectId = "test-project";
5959

60-
it("defaults layout mode to 'top'", () => {
60+
it("defaults layout mode to 'side'", () => {
6161
const state = usePreviewStateStore.getState();
62-
expect(state.layoutModeByProjectId[projectId] ?? "top").toBe("top");
62+
expect(state.layoutModeByProjectId[projectId] ?? "side").toBe("side");
6363
});
6464

6565
it("sets and persists layout mode", () => {

apps/web/src/components/PreviewPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export function PreviewPanel({ projectId, threadId, onClose }: PreviewPanelProps
163163
);
164164
const setCustomViewport = usePreviewStateStore((state) => state.setCustomViewport);
165165
const layoutMode = usePreviewStateStore(
166-
(state) => state.layoutModeByProjectId[projectId] ?? "top",
166+
(state) => state.layoutModeByProjectId[projectId] ?? "side",
167167
);
168168
const toggleFullscreen = usePreviewStateStore((state) => state.toggleFullscreen);
169169

apps/web/src/previewStateStore.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ export const usePreviewStateStore = create<PreviewStateStore>((set, get) => ({
292292
},
293293

294294
toggleProjectLayout: (_projectId) => {
295-
// No-op: browser is locked to "top" position.
295+
// No-op: browser layout switching stays explicit in the preview controls.
296296
},
297297

298298
setProjectSize: (projectId, size) => {
@@ -395,7 +395,7 @@ export const usePreviewStateStore = create<PreviewStateStore>((set, get) => ({
395395

396396
setProjectLayoutMode: (projectId, mode) => {
397397
set((state) => {
398-
const currentMode = state.layoutModeByProjectId[projectId] ?? "top";
398+
const currentMode = state.layoutModeByProjectId[projectId] ?? "side";
399399
const nextLayoutModeByProjectId = {
400400
...state.layoutModeByProjectId,
401401
[projectId]: mode,
@@ -418,10 +418,10 @@ export const usePreviewStateStore = create<PreviewStateStore>((set, get) => ({
418418
},
419419

420420
toggleFullscreen: (projectId) => {
421-
const current = get().layoutModeByProjectId[projectId] ?? "top";
421+
const current = get().layoutModeByProjectId[projectId] ?? "side";
422422
if (current === "fullscreen") {
423423
// Restore previous mode
424-
const previous = get().previousLayoutModeByProjectId[projectId] ?? "top";
424+
const previous = get().previousLayoutModeByProjectId[projectId] ?? "side";
425425
get().setProjectLayoutMode(projectId, previous);
426426
} else {
427427
get().setProjectLayoutMode(projectId, "fullscreen");

0 commit comments

Comments
 (0)