chore: exclude local resource artifacts from main sync

src/app/main/layout/MainLayout.tsx

@@ -11,6 +11,7 @@ import { matchesShortcut, isTypingTarget, scrollToElement } from '../mainView/ut
 import { MainContent } from '../MainContent';
 import { MainHeader } from '../MainHeader';
 import { MainSidebar } from '../MainSidebar';
+import { appendPreviewRuntimeSearch, isPreviewRuntime, readPreviewRuntimeDeviceModeFromUrl } from '../previewRuntime';
 import { buildSearchOptions } from './buildSearchOptions';
 import { MainLayoutContextProvider } from './MainLayoutContext';
 import { useMainLayoutData } from './useMainLayoutData';
@@ -161,6 +162,10 @@ function getIsMobileViewport() {
     return false;
   }
 
+  if (readPreviewRuntimeDeviceModeFromUrl() === 'mobile') {
+    return true;
+  }
+
   return window.matchMedia('(max-width: 768px)').matches;
 }
 
@@ -169,10 +174,14 @@ function getIsSidebarOverlayViewport(topMenu: TopMenuKey) {
     return false;
   }
 
+  if (readPreviewRuntimeDeviceModeFromUrl() === 'mobile') {
+    return true;
+  }
+
   return window.matchMedia(topMenu === 'chat' ? '(max-width: 1180px)' : '(max-width: 768px)').matches;
 }
 
-function resolveSidebarCollapsedForViewport(isSidebarOverlayViewport: boolean, topMenu: TopMenuKey) {
+function resolveSidebarCollapsedForViewport(isSidebarOverlayViewport: boolean) {
   if (!isSidebarOverlayViewport) {
     return false;
   }
@@ -214,6 +223,7 @@ function resolveSidebarOpenKeys(
 }
 
 export function MainLayout() {
+  const previewRuntime = isPreviewRuntime();
   const location = useLocation();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -225,7 +235,7 @@ export function MainLayout() {
   const routeState = useMemo(() => parseRoute(location.pathname), [location.pathname]);
   const [isMobileViewport, setIsMobileViewport] = useState(() => getIsMobileViewport());
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() =>
-    resolveSidebarCollapsedForViewport(getIsSidebarOverlayViewport(routeState.topMenu), routeState.topMenu),
+    resolveSidebarCollapsedForViewport(getIsSidebarOverlayViewport(routeState.topMenu)),
   );
   const [isSidebarOverlayViewport, setIsSidebarOverlayViewport] = useState(() =>
     getIsSidebarOverlayViewport(routeState.topMenu),
@@ -240,6 +250,10 @@ export function MainLayout() {
   const [planQuickFilterRequestKey, setPlanQuickFilterRequestKey] = useState(routeState.planMenu === 'release' ? 1 : 0);
   const { componentSampleEntries, widgetSampleEntries, componentSamples, widgetSamples, docsDocuments, savedLayouts, savedLayoutsReady, setSavedLayouts, docFolders } = layoutData;
   const { chatUnreadCount } = useUnreadCounts();
+  const navigateWithinApp = (path: string, options?: { replace?: boolean }) => {
+    const nextPath = previewRuntime ? appendPreviewRuntimeSearch(path, location.search) : path;
+    navigate(nextPath, options);
+  };
 
   useEffect(() => {
     void syncAppConfigFromServer();
@@ -248,7 +262,7 @@ export function MainLayout() {
   useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 768px)');
     const updateViewport = () => {
-      setIsMobileViewport(mediaQuery.matches);
+      setIsMobileViewport(getIsMobileViewport());
     };
 
     updateViewport();
@@ -262,7 +276,7 @@ export function MainLayout() {
   useEffect(() => {
     const mediaQuery = window.matchMedia(routeState.topMenu === 'chat' ? '(max-width: 1180px)' : '(max-width: 768px)');
     const updateViewport = () => {
-      setIsSidebarOverlayViewport(mediaQuery.matches);
+      setIsSidebarOverlayViewport(getIsSidebarOverlayViewport(routeState.topMenu));
     };
 
     updateViewport();
@@ -274,7 +288,7 @@ export function MainLayout() {
   }, [routeState.topMenu]);
 
   useEffect(() => {
-    setSidebarCollapsed(resolveSidebarCollapsedForViewport(isSidebarOverlayViewport, routeState.topMenu));
+    setSidebarCollapsed(resolveSidebarCollapsedForViewport(isSidebarOverlayViewport));
   }, [isSidebarOverlayViewport, routeState.topMenu]);
 
   useEffect(() => {
@@ -283,17 +297,17 @@ export function MainLayout() {
 
   useEffect(() => {
     if (docFolders.length > 0 && routeState.topMenu === 'docs' && !docFolders.includes(routeState.docsMenu)) {
-      navigate(buildDocsPath(docFolders[0]), { replace: true });
+      navigateWithinApp(buildDocsPath(docFolders[0]), { replace: true });
     }
-  }, [docFolders, navigate, routeState.docsMenu, routeState.topMenu]);
+  }, [docFolders, navigate, location.search, previewRuntime, routeState.docsMenu, routeState.topMenu]);
 
   useEffect(() => {
     const savedLayoutId = resolveSavedLayoutIdFromMenuKey(routeState.playMenu);
 
     if (savedLayoutId && savedLayoutsReady && !savedLayouts.some((record) => record.id === savedLayoutId)) {
-      navigate(buildPlayPath('layout'), { replace: true });
+      navigateWithinApp(buildPlayPath('layout'), { replace: true });
     }
-  }, [navigate, routeState.playMenu, savedLayouts, savedLayoutsReady]);
+  }, [location.search, navigate, previewRuntime, routeState.playMenu, savedLayouts, savedLayoutsReady]);
 
   useEffect(() => {
     if (!isRestrictedTopMenu(routeState.topMenu, hasAccess)) {
@@ -384,9 +398,10 @@ export function MainLayout() {
         widgetSamples,
         docFolders,
         docsDocuments,
+        savedLayouts,
         hasAccess,
         navigateTo: (path) => {
-          navigate(path);
+          navigateWithinApp(path);
         },
         setFocusedComponentId,
         requestPlanQuickFilter: (filter) => {
@@ -394,7 +409,18 @@ export function MainLayout() {
           setPlanQuickFilterRequestKey((previous) => previous + 1);
         },
       }),
-    [componentSamples, docFolders, docsDocuments, hasAccess, navigate, setFocusedComponentId, widgetSamples],
+    [
+      componentSamples,
+      docFolders,
+      docsDocuments,
+      hasAccess,
+      location.search,
+      navigate,
+      previewRuntime,
+      savedLayouts,
+      setFocusedComponentId,
+      widgetSamples,
+    ],
   );
 
   useEffect(() => {
@@ -450,8 +476,8 @@ export function MainLayout() {
         searchOptions,
       }}
     >
-      <Layout className="app-shell app-shell--docs-api">
-        <ChatRuntimeBridgeV2 />
+      <Layout className={`app-shell app-shell--docs-api${previewRuntime ? ' app-shell--preview-runtime' : ''}`}>
+        {routeState.topMenu === 'chat' ? null : <ChatRuntimeBridgeV2 />}
         {contentExpanded ? null : (
           <MainHeader
             activeTopMenu={routeState.topMenu}
@@ -465,15 +491,15 @@ export function MainLayout() {
               setContentExpanded((previous) => !previous);
             }}
             onChangeTopMenu={(menu) => {
-              navigate(resolveTopMenuPath(menu, currentDocsFolder));
-              setSidebarCollapsed(resolveSidebarCollapsedForViewport(getIsSidebarOverlayViewport(menu), menu));
+              navigateWithinApp(resolveTopMenuPath(menu, currentDocsFolder));
+              setSidebarCollapsed(resolveSidebarCollapsedForViewport(getIsSidebarOverlayViewport(menu)));
             }}
             onOpenPlanQuickFilter={(filter) => {
               const targetPlanMenu = resolvePlanQuickFilterMenu(filter);
               setActivePlanQuickFilter(filter);
               setPlanQuickFilterRequestKey((previous) => previous + 1);
-              navigate(buildPlansPath(targetPlanMenu));
-              setSidebarCollapsed(resolveSidebarCollapsedForViewport(getIsSidebarOverlayViewport('plans'), 'plans'));
+              navigateWithinApp(buildPlansPath(targetPlanMenu));
+              setSidebarCollapsed(resolveSidebarCollapsedForViewport(getIsSidebarOverlayViewport('plans')));
               scrollToElement(PLAN_MENU_ANCHOR_IDS[targetPlanMenu] ?? 'plan-menu-all');
             }}
           />
@@ -499,13 +525,13 @@ export function MainLayout() {
               selectedPlayMenu={routeState.playMenu}
               onOpenKeysChange={setSidebarOpenKeys}
               onSelectApiMenu={(key) => {
-                navigate(buildApisPath(key as ApiSectionKey));
+                navigateWithinApp(buildApisPath(key as ApiSectionKey));
                 if (isSidebarOverlayViewport) {
                   setSidebarCollapsed(true);
                 }
               }}
               onSelectDocsMenu={(key) => {
-                navigate(buildDocsPath(key));
+                navigateWithinApp(buildDocsPath(key));
                 if (isSidebarOverlayViewport) {
                   setSidebarCollapsed(true);
                 }
@@ -513,20 +539,20 @@ export function MainLayout() {
               onSelectPlanMenu={(key) => {
                 setActivePlanQuickFilter(key === 'release' ? 'release-pending-main' : null);
                 setPlanQuickFilterRequestKey((previous) => previous + 1);
-                navigate(buildPlansPath(key));
+                navigateWithinApp(buildPlansPath(key));
                 if (isSidebarOverlayViewport) {
                   setSidebarCollapsed(true);
                 }
               }}
               onSelectChatMenu={(key) => {
-                navigate(buildChatPath(key));
+                navigateWithinApp(buildChatPath(key));
                 if (isSidebarOverlayViewport) {
                   setSidebarCollapsed(true);
                 }
               }}
               onSelectPlayMenu={(key) => {
                 const savedLayoutId = resolveSavedLayoutIdFromMenuKey(key);
-                navigate(savedLayoutId ? buildSavedLayoutPath(savedLayoutId) : buildPlayPath(key as 'layout' | 'test'));
+                navigateWithinApp(savedLayoutId ? buildSavedLayoutPath(savedLayoutId) : buildPlayPath(key as 'layout' | 'test'));
                 if (isSidebarOverlayViewport) {
                   setSidebarCollapsed(true);
                 }
@@ -539,7 +565,8 @@ export function MainLayout() {
 
           <MainContent
             contentExpanded={contentExpanded}
-            sidebarOverlayActive={isSidebarOverlayViewport && !sidebarCollapsed}
+            sidebarOverlayActive={!previewRuntime && isSidebarOverlayViewport && !sidebarCollapsed}
+            disableWindowLayer={previewRuntime}
             onToggleContentExpanded={() => setContentExpanded((previous) => !previous)}
           >
             <Outlet />