fix(web): persist browser preview viewport (#4899)

Author: HD-L

apps/web/src/components/DesignBrowserPanel.tsx

@@ -834,7 +834,11 @@ export function DesignBrowserPanel({
   const [isLoading, setIsLoading] = useState(false);
   const [webviewNode, setWebviewNode] = useState<WebviewElement | null>(null);
   const [drawOverlayOpen, setDrawOverlayOpen] = useState(false);
-  const [viewport, setViewport] = useState<BrowserViewportId>('desktop');
+  const [viewport, setViewportState] = useState<BrowserViewportId>(() => loadBrowserViewport(projectId));
+  const setViewport = useCallback((nextViewport: BrowserViewportId) => {
+    saveBrowserViewport(projectId, nextViewport);
+    setViewportState(nextViewport);
+  }, [projectId]);
   const [activeTool, setActiveTool] = useState<BrowserTool | null>(null);
   const [activeCommentTarget, setActiveCommentTarget] = useState<BrowserElementSnapshot | null>(null);
   const [activePreviewCommentId, setActivePreviewCommentId] = useState<string | null>(null);
@@ -924,6 +928,7 @@ export function DesignBrowserPanel({
   }, []);
 
   useEffect(() => {
+    setViewportState(loadBrowserViewport(projectId));
     setHistory(loadHistory(projectId));
     const nextInitialState = initialBrowserState(initialUrl, initialTitle);
     setLoadUrl(nextInitialState.url);
@@ -3323,6 +3328,33 @@ function historyStorageKey(projectId: string): string {
   return `od:design-browser:${projectId}:history:v1`;
 }
 
+function viewportStorageKey(projectId: string): string {
+  return `od:design-browser:${projectId}:viewport:v1`;
+}
+
+function isBrowserViewportId(value: unknown): value is BrowserViewportId {
+  return value === 'desktop' || value === 'tablet' || value === 'mobile';
+}
+
+export function loadBrowserViewport(projectId: string): BrowserViewportId {
+  if (typeof window === 'undefined') return 'desktop';
+  try {
+    const stored = window.localStorage.getItem(viewportStorageKey(projectId));
+    return isBrowserViewportId(stored) ? stored : 'desktop';
+  } catch {
+    return 'desktop';
+  }
+}
+
+export function saveBrowserViewport(projectId: string, viewport: BrowserViewportId) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(viewportStorageKey(projectId), viewport);
+  } catch {
+    // Ignore storage quota and private-mode failures.
+  }
+}
+
 export function isHistoryEntry(value: unknown): value is BrowserHistoryEntry {
   if (typeof value !== 'object' || value == null || Array.isArray(value)) return false;
   const record = value as Record<string, unknown>;

apps/web/tests/components/DesignBrowserPanel.test.tsx

@@ -19,11 +19,13 @@ import {
   isHistoryEntry,
   isHistoryUrl,
   labelFromUrl,
+  loadBrowserViewport,
   loadHistory,
   normalizeBrowserAddress,
   pageBriefMarkdown,
   referenceIconUrl,
   sameUrl,
+  saveBrowserViewport,
   saveHistory,
 } from '../../src/components/DesignBrowserPanel';
 import {
@@ -438,6 +440,33 @@ describe('loadHistory / saveHistory round-trip', () => {
   });
 });
 
+describe('loadBrowserViewport / saveBrowserViewport round-trip', () => {
+  const projectId = 'proj-viewport';
+
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('returns desktop when no browser viewport is stored', () => {
+    expect(loadBrowserViewport(projectId)).toBe('desktop');
+  });
+
+  it('round-trips the selected browser viewport', () => {
+    saveBrowserViewport(projectId, 'mobile');
+    expect(window.localStorage.getItem(`od:design-browser:${projectId}:viewport:v1`)).toBe('mobile');
+    expect(loadBrowserViewport(projectId)).toBe('mobile');
+  });
+
+  it('ignores malformed stored browser viewport values', () => {
+    window.localStorage.setItem(`od:design-browser:${projectId}:viewport:v1`, 'watch');
+    expect(loadBrowserViewport(projectId)).toBe('desktop');
+  });
+});
+
 describe('REFERENCE_GROUPS catalogue', () => {
   it('exposes every documented designer reference category', () => {
     const ids = REFERENCE_GROUPS.map((group) => group.id);