Allow client library to render new screen structure without layouts

packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js

@@ -5,7 +5,7 @@ export class Screen extends BaseStructure {
   constructor() {
     super(true)
     this._json = {
-      layoutId: "layout_private_master",
+      showNavigation: true,
       props: {
         _id: Helpers.uuid(),
         _component: "@budibase/standard-components/container",

packages/client/src/components/devtools/DevToolsStatsTab.svelte

@@ -14,8 +14,6 @@
       value={`${$appStore.clientLoadTime} ms`}
     />
   {/if}
-  <DevToolsStat label="App layouts" value={$screenStore.layouts?.length || 0} />
-  <DevToolsStat label="Active layout" value={$screenStore.activeLayout?.name} />
   <DevToolsStat label="App screens" value={$screenStore.screens?.length || 0} />
   <DevToolsStat
     label="Active screen"

packages/client/src/stores/builder.js

@@ -9,7 +9,6 @@ const dispatchEvent = (type, data = {}) => {
 const createBuilderStore = () => {
   const initialState = {
     inBuilder: false,
-    layout: null,
     screen: null,
     selectedComponentId: null,
     editMode: false,
@@ -20,6 +19,9 @@ const createBuilderStore = () => {
     customTheme: null,
     previewDevice: "desktop",
     isDragging: false,
+
+    // Legacy - allow the builder to specify a layout
+    layout: null,
   }
   const store = writable(initialState)
   const actions = {

packages/client/src/stores/screens.js

@@ -13,31 +13,69 @@ const createScreenStore = () => {
     [appStore, routeStore, builderStore],
     ([$appStore, $routeStore, $builderStore]) => {
       let activeLayout, activeScreen
-      let layouts, screens
+      let screens
+
       if ($builderStore.inBuilder) {
         // Use builder defined definitions if inside the builder preview
-        activeLayout = $builderStore.layout
         activeScreen = $builderStore.screen
-        layouts = [activeLayout]
         screens = [activeScreen]
-      } else {
-        activeLayout = { props: { _component: "screenslot" } }
 
+        // Legacy - allow the builder to specify a layout
+        if ($builderStore.layout) {
+          activeLayout = $builderStore.layout
+        }
+      } else {
         // Find the correct screen by matching the current route
         screens = $appStore.screens
-        layouts = $appStore.layouts
         if ($routeStore.activeRoute) {
           activeScreen = screens.find(
             screen => screen._id === $routeStore.activeRoute.screenId
           )
         }
+
+        // Legacy - find the custom layout for the selected screen
         if (activeScreen) {
-          activeLayout = layouts.find(
+          const screenLayout = $appStore.layouts?.find(
             layout => layout._id === activeScreen.layoutId
           )
+          if (screenLayout) {
+            activeLayout = screenLayout
           }
         }
-      return { layouts, screens, activeLayout, activeScreen }
+      }
+
+      // If we don't have a legacy custom layout, build a layout structure
+      // from the screen navigation settings
+      if (!activeLayout) {
+        activeLayout = {
+          _id: "layout",
+          props: {
+            _component: "@budibase/standard-components/layout",
+            _children: [
+              {
+                _component: "screenslot",
+                _id: "screenslot",
+                _styles: {
+                  normal: {
+                    flex: "1 1 auto",
+                    display: "flex",
+                    "flex-direction": "column",
+                    "justify-content": "flex-start",
+                    "align-items": "stretch",
+                  },
+                },
+              },
+            ],
+            // If this is a legacy screen without any navigation settings,
+            // fall back to just showing the app title
+            ...(activeScreen.navigation || {
+              title: $appStore.application?.name,
+            }),
+          },
+        }
+      }
+
+      return { screens, activeLayout, activeScreen }
     }
   )