From 3e9a73e5770638e79fbc3055e999707d00f7b60e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 19 Nov 2024 14:02:13 +0000
Subject: [PATCH 1/4] Remove all traces of legacy custom layouts

---
 packages/backend-core/src/events/backfill.ts  |   3 -
 .../src/events/publishers/index.ts            |   1 -
 .../src/events/publishers/layout.ts           |  26 ---
 .../src/events/publishers/screen.ts           |   2 -
 .../tests/core/utilities/mocks/events.ts      |   3 -
 .../settings/controls/LayoutSelect.svelte     |  14 --
 packages/builder/src/dataBinding.js           |   9 +-
 .../_components/Screen/GeneralPanel.svelte    |  15 --
 packages/builder/src/stores/builder/index.js  |   4 -
 .../builder/src/stores/builder/layouts.js     |  77 ---------
 .../builder/src/stores/builder/screens.js     |  14 --
 .../src/stores/builder/tests/screens.test.js  |   5 -
 .../client/src/components/ClientApp.svelte    |  23 +--
 .../client/src/components/Component.svelte    |   2 -
 .../src/components/{app => }/Layout.svelte    |   6 +-
 packages/client/src/components/Router.svelte  |  83 +++++++---
 packages/client/src/components/app/index.js   |   1 -
 packages/client/src/index.js                  |   1 -
 packages/client/src/stores/components.js      |   9 --
 packages/client/src/stores/screens.js         |  74 +--------
 packages/frontend-core/src/api/index.js       |   2 -
 packages/frontend-core/src/api/layouts.js     |  23 ---
 .../server/src/api/controllers/application.ts |  59 -------
 packages/server/src/api/controllers/layout.ts |  55 -------
 .../controllers/static/templates/preview.hbs  |   1 -
 packages/server/src/api/routes/index.ts       |   2 -
 packages/server/src/api/routes/layout.ts      |  16 --
 .../src/api/routes/tests/layout.spec.js       |  59 -------
 packages/server/src/constants/layouts.ts      | 149 ------------------
 packages/server/src/constants/screens.ts      |   2 -
 .../src/migrations/functions/backfill/app.ts  |   9 --
 .../functions/backfill/app/layouts.ts         |  29 ----
 .../server/src/migrations/tests/index.spec.ts |   1 -
 .../server/src/tests/utilities/controllers.ts |   1 -
 .../server/src/tests/utilities/structures.ts  |   6 -
 packages/types/src/api/web/index.ts           |   1 -
 packages/types/src/api/web/layout.ts          |   5 -
 packages/types/src/documents/app/index.ts     |   1 -
 packages/types/src/documents/app/layout.ts    |  11 --
 packages/types/src/sdk/events/backfill.ts     |   1 -
 packages/types/src/sdk/events/event.ts        |   4 -
 packages/types/src/sdk/events/index.ts        |   1 -
 packages/types/src/sdk/events/layout.ts       |   9 --
 43 files changed, 70 insertions(+), 749 deletions(-)
 delete mode 100644 packages/backend-core/src/events/publishers/layout.ts
 delete mode 100644 packages/builder/src/components/design/settings/controls/LayoutSelect.svelte
 delete mode 100644 packages/builder/src/stores/builder/layouts.js
 rename packages/client/src/components/{app => }/Layout.svelte (98%)
 delete mode 100644 packages/frontend-core/src/api/layouts.js
 delete mode 100644 packages/server/src/api/controllers/layout.ts
 delete mode 100644 packages/server/src/api/routes/layout.ts
 delete mode 100644 packages/server/src/api/routes/tests/layout.spec.js
 delete mode 100644 packages/server/src/constants/layouts.ts
 delete mode 100644 packages/server/src/migrations/functions/backfill/app/layouts.ts
 delete mode 100644 packages/types/src/api/web/layout.ts
 delete mode 100644 packages/types/src/documents/app/layout.ts
 delete mode 100644 packages/types/src/sdk/events/layout.ts

diff --git a/packages/backend-core/src/events/backfill.ts b/packages/backend-core/src/events/backfill.ts
index c8025a8e4e8..d415e9e765e 100644
--- a/packages/backend-core/src/events/backfill.ts
+++ b/packages/backend-core/src/events/backfill.ts
@@ -105,9 +105,6 @@ const CUSTOM_PROPERTY_SUFFIX: any = {
   [Event.DATASOURCE_CREATED]: (properties: DatasourceCreatedEvent) => {
     return properties.datasourceId
   },
-  [Event.LAYOUT_CREATED]: (properties: LayoutCreatedEvent) => {
-    return properties.layoutId
-  },
   [Event.QUERY_CREATED]: (properties: QueryCreatedEvent) => {
     return properties.queryId
   },
diff --git a/packages/backend-core/src/events/publishers/index.ts b/packages/backend-core/src/events/publishers/index.ts
index 9c92b80499e..52651454480 100644
--- a/packages/backend-core/src/events/publishers/index.ts
+++ b/packages/backend-core/src/events/publishers/index.ts
@@ -6,7 +6,6 @@ export { default as datasource } from "./datasource"
 export { default as email } from "./email"
 export { default as ai } from "./ai"
 export { default as license } from "./license"
-export { default as layout } from "./layout"
 export { default as org } from "./org"
 export { default as query } from "./query"
 export { default as role } from "./role"
diff --git a/packages/backend-core/src/events/publishers/layout.ts b/packages/backend-core/src/events/publishers/layout.ts
deleted file mode 100644
index 6abb2260494..00000000000
--- a/packages/backend-core/src/events/publishers/layout.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { publishEvent } from "../events"
-import {
-  Event,
-  Layout,
-  LayoutCreatedEvent,
-  LayoutDeletedEvent,
-} from "@budibase/types"
-
-async function created(layout: Layout, timestamp?: string | number) {
-  const properties: LayoutCreatedEvent = {
-    layoutId: layout._id as string,
-  }
-  await publishEvent(Event.LAYOUT_CREATED, properties, timestamp)
-}
-
-async function deleted(layoutId: string) {
-  const properties: LayoutDeletedEvent = {
-    layoutId,
-  }
-  await publishEvent(Event.LAYOUT_DELETED, properties)
-}
-
-export default {
-  created,
-  deleted,
-}
diff --git a/packages/backend-core/src/events/publishers/screen.ts b/packages/backend-core/src/events/publishers/screen.ts
index df486029e8e..21d2c79a13a 100644
--- a/packages/backend-core/src/events/publishers/screen.ts
+++ b/packages/backend-core/src/events/publishers/screen.ts
@@ -8,7 +8,6 @@ import {
 
 async function created(screen: Screen, timestamp?: string | number) {
   const properties: ScreenCreatedEvent = {
-    layoutId: screen.layoutId,
     screenId: screen._id as string,
     roleId: screen.routing.roleId,
     audited: {
@@ -20,7 +19,6 @@ async function created(screen: Screen, timestamp?: string | number) {
 
 async function deleted(screen: Screen) {
   const properties: ScreenDeletedEvent = {
-    layoutId: screen.layoutId,
     screenId: screen._id as string,
     roleId: screen.routing.roleId,
     audited: {
diff --git a/packages/backend-core/tests/core/utilities/mocks/events.ts b/packages/backend-core/tests/core/utilities/mocks/events.ts
index 96f351de106..93d5de68e4b 100644
--- a/packages/backend-core/tests/core/utilities/mocks/events.ts
+++ b/packages/backend-core/tests/core/utilities/mocks/events.ts
@@ -47,9 +47,6 @@ beforeAll(async () => {
   jest.spyOn(events.email, "SMTPCreated")
   jest.spyOn(events.email, "SMTPUpdated")
 
-  jest.spyOn(events.layout, "created")
-  jest.spyOn(events.layout, "deleted")
-
   jest.spyOn(events.org, "nameUpdated")
   jest.spyOn(events.org, "logoUpdated")
   jest.spyOn(events.org, "platformURLUpdated")
diff --git a/packages/builder/src/components/design/settings/controls/LayoutSelect.svelte b/packages/builder/src/components/design/settings/controls/LayoutSelect.svelte
deleted file mode 100644
index a7966eb6712..00000000000
--- a/packages/builder/src/components/design/settings/controls/LayoutSelect.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { layoutStore } from "stores/builder"
-  import { Select } from "@budibase/bbui"
-
-  export let value
-</script>
-
-<Select
-  bind:value
-  on:change
-  options={$layoutStore.layouts}
-  getOptionLabel={layout => layout.name}
-  getOptionValue={layout => layout._id}
-/>
diff --git a/packages/builder/src/dataBinding.js b/packages/builder/src/dataBinding.js
index 8adc27ee595..93f6ff101a5 100644
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@@ -12,7 +12,6 @@ import {
   componentStore,
   screenStore,
   appStore,
-  layoutStore,
   queries as queriesStores,
   tables as tablesStore,
   roles as rolesStore,
@@ -1239,13 +1238,9 @@ export const getAllStateVariables = () => {
   return Array.from(bindingSet)
 }
 
+// Get all component containing assets
 export const getAllAssets = () => {
-  // Get all component containing assets
-  let allAssets = []
-  allAssets = allAssets.concat(get(layoutStore).layouts || [])
-  allAssets = allAssets.concat(get(screenStore).screens || [])
-
-  return allAssets
+  return get(screenStore).screens || []
 }
 
 /**
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 62fe5936025..6ec28aab705 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -72,7 +72,6 @@
         props: {
           options: ["Extra small", "Small", "Medium", "Large", "Max"],
           placeholder: "Default",
-          disabled: !!screen.layoutId,
         },
       },
       {
@@ -149,22 +148,8 @@
       notifications.error("Error saving screen settings")
     }
   }
-
-  const removeCustomLayout = async () => {
-    return screenStore.removeCustomLayout(get(selectedScreen))
-  }
 </script>
 
-{#if $selectedScreen.layoutId}
-  <Banner
-    type="warning"
-    extraButtonText="Detach custom layout"
-    extraButtonAction={removeCustomLayout}
-    showCloseButton={false}
-  >
-    This screen uses a custom layout, which is deprecated
-  </Banner>
-{/if}
 {#each screenSettings as setting (setting.key)}
   <PropertyControl
     control={setting.control}
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 08d87bebf5b..93315d08754 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -1,4 +1,3 @@
-import { layoutStore } from "./layouts.js"
 import { appStore } from "./app.js"
 import { componentStore, selectedComponent } from "./components"
 import { navigationStore } from "./navigation.js"
@@ -34,7 +33,6 @@ import { appPublished } from "./published"
 
 export {
   componentTreeNodesStore,
-  layoutStore,
   appStore,
   componentStore,
   navigationStore,
@@ -74,7 +72,6 @@ export const reset = () => {
   builderStore.reset()
   screenStore.reset()
   componentStore.reset()
-  layoutStore.reset()
   navigationStore.reset()
   rowActions.reset()
 }
@@ -109,7 +106,6 @@ export const initialise = async pkg => {
   themeStore.syncAppTheme(application)
   snippets.syncMetadata(application)
   screenStore.syncAppScreens(pkg)
-  layoutStore.syncAppLayouts(pkg)
   resetBuilderHistory()
   await refreshBuilderData()
 }
diff --git a/packages/builder/src/stores/builder/layouts.js b/packages/builder/src/stores/builder/layouts.js
deleted file mode 100644
index 30d6935b19c..00000000000
--- a/packages/builder/src/stores/builder/layouts.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { derived, get } from "svelte/store"
-import { componentStore } from "stores/builder"
-import BudiStore from "../BudiStore"
-import { API } from "api"
-
-export const INITIAL_LAYOUT_STATE = {
-  layouts: [],
-  selectedLayoutId: null,
-}
-
-export class LayoutStore extends BudiStore {
-  constructor() {
-    super(INITIAL_LAYOUT_STATE)
-
-    this.reset = this.reset.bind(this)
-    this.syncAppLayouts = this.syncAppLayouts.bind(this)
-    this.select = this.select.bind(this)
-    this.deleteLayout = this.deleteLayout.bind(this)
-  }
-
-  reset() {
-    this.store.set({ ...INITIAL_LAYOUT_STATE })
-  }
-
-  syncAppLayouts(pkg) {
-    this.update(state => ({
-      ...state,
-      layouts: [...pkg.layouts],
-    }))
-  }
-
-  select(layoutId) {
-    // Check this layout exists
-    const state = get(this.store)
-    const componentState = get(componentStore)
-    const layout = state.layouts.find(layout => layout._id === layoutId)
-    if (!layout) {
-      return
-    }
-
-    // Check layout isn't already selected
-    if (
-      state.selectedLayoutId === layout._id &&
-      componentState.selectedComponentId === layout.props?._id
-    ) {
-      return
-    }
-
-    // Select new layout
-    this.update(state => {
-      state.selectedLayoutId = layout._id
-      return state
-    })
-
-    componentStore.select(layout.props?._id)
-  }
-
-  async deleteLayout(layout) {
-    if (!layout?._id) {
-      return
-    }
-    await API.deleteLayout({
-      layoutId: layout._id,
-      layoutRev: layout._rev,
-    })
-    this.update(state => {
-      state.layouts = state.layouts.filter(x => x._id !== layout._id)
-      return state
-    })
-  }
-}
-
-export const layoutStore = new LayoutStore()
-
-export const selectedLayout = derived(layoutStore, $store => {
-  return $store.layouts?.find(layout => layout._id === $store.selectedLayoutId)
-})
diff --git a/packages/builder/src/stores/builder/screens.js b/packages/builder/src/stores/builder/screens.js
index 10c4265e73f..71030eb6ec4 100644
--- a/packages/builder/src/stores/builder/screens.js
+++ b/packages/builder/src/stores/builder/screens.js
@@ -4,7 +4,6 @@ import { Helpers } from "@budibase/bbui"
 import { RoleUtils, Utils } from "@budibase/frontend-core"
 import { findAllMatchingComponents } from "helpers/components"
 import {
-  layoutStore,
   appStore,
   componentStore,
   navigationStore,
@@ -35,7 +34,6 @@ export class ScreenStore extends BudiStore {
     this.syncScreenData = this.syncScreenData.bind(this)
     this.updateSetting = this.updateSetting.bind(this)
     this.sequentialScreenPatch = this.sequentialScreenPatch.bind(this)
-    this.removeCustomLayout = this.removeCustomLayout.bind(this)
 
     this.history = createHistoryStore({
       getDoc: id => get(this.store).screens?.find(screen => screen._id === id),
@@ -436,18 +434,6 @@ export class ScreenStore extends BudiStore {
     }
   }
 
-  // Move to layouts store
-  async removeCustomLayout(screen) {
-    // Pull relevant settings from old layout, if required
-    const layout = get(layoutStore).layouts.find(x => x._id === screen.layoutId)
-    const patchFn = screen => {
-      screen.layoutId = null
-      screen.showNavigation = layout?.props.navigation !== "None"
-      screen.width = layout?.props.width || "Large"
-    }
-    await this.patch(patchFn, screen._id)
-  }
-
   /**
    * Parse the entire screen component tree and ensure settings are valid
    * and up-to-date. Ensures stability after a product update.
diff --git a/packages/builder/src/stores/builder/tests/screens.test.js b/packages/builder/src/stores/builder/tests/screens.test.js
index 51e3a8d830c..9b5c5947dba 100644
--- a/packages/builder/src/stores/builder/tests/screens.test.js
+++ b/packages/builder/src/stores/builder/tests/screens.test.js
@@ -19,7 +19,6 @@ const COMP_PREFIX = "@budibase/standard-components"
 vi.mock("stores/builder", async () => {
   const mockAppStore = writable()
   const mockComponentStore = writable()
-  const mockLayoutStore = writable()
 
   const componentStore = {
     getDefinition: vi.fn(),
@@ -42,10 +41,6 @@ vi.mock("stores/builder", async () => {
     componentStore,
     appStore,
     navigationStore,
-    layoutStore: {
-      update: mockLayoutStore.update,
-      subscribe: mockComponentStore.subscribe,
-    },
   }
 })
 
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 1610f36bdc7..6215e8120fa 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -5,7 +5,7 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
   import { Constants, CookieUtils } from "@budibase/frontend-core"
   import { getThemeClassNames } from "@budibase/shared-core"
-  import Component from "./Component.svelte"
+  import Router from "./Router.svelte"
   import SDK from "sdk"
   import {
     featuresStore,
@@ -206,20 +206,6 @@
                                 </Body>
                               </Layout>
                             </div>
-                          {:else if !$screenStore.activeLayout}
-                            <div class="error">
-                              <Layout justifyItems="center" gap="S">
-                                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                                {@html ErrorSVG}
-                                <Heading size="L">
-                                  Something went wrong rendering your app
-                                </Heading>
-                                <Body size="S">
-                                  Get in touch with support if this issue
-                                  persists
-                                </Body>
-                              </Layout>
-                            </div>
                           {:else if embedNoScreens}
                             <div class="error">
                               <Layout justifyItems="center" gap="S">
@@ -232,12 +218,7 @@
                             </div>
                           {:else}
                             <CustomThemeWrapper>
-                              {#key $screenStore.activeLayout._id}
-                                <Component
-                                  isLayout
-                                  instance={$screenStore.activeLayout.props}
-                                />
-                              {/key}
+                              <Router />
 
                               <!-- Layers on top of app -->
                               <NotificationDisplay />
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 7a1341c67c5..dd1311dea73 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -43,7 +43,6 @@
 
   export let instance = {}
   export let parent = null
-  export let isLayout = false
   export let isRoot = false
   export let isBlock = false
 
@@ -158,7 +157,6 @@
   $: draggable =
     !inDragPath &&
     interactive &&
-    !isLayout &&
     !isRoot &&
     !isBlock &&
     definition?.draggable !== false
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/Layout.svelte
similarity index 98%
rename from packages/client/src/components/app/Layout.svelte
rename to packages/client/src/components/Layout.svelte
index 04dbb9efda7..24d8cc9ed3e 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/Layout.svelte
@@ -3,7 +3,7 @@
   import { writable } from "svelte/store"
   import { Heading, Icon, clickOutside } from "@budibase/bbui"
   import { Constants } from "@budibase/frontend-core"
-  import NavItem from "./NavItem.svelte"
+  import NavItem from "./app/NavItem.svelte"
 
   const sdk = getContext("sdk")
   const {
@@ -18,7 +18,6 @@
   const context = getContext("context")
   const navStateStore = writable({})
 
-  // Legacy props which must remain unchanged for backwards compatibility
   export let title
   export let hideTitle = false
   export let logoUrl
@@ -26,9 +25,6 @@
   export let navigation = "Top"
   export let sticky = false
   export let links
-  export let width = "Large"
-
-  // New props from new design UI
   export let navBackground
   export let navTextColor
   export let navWidth
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index d19585dceca..bb841ea3a0a 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -1,17 +1,20 @@
 <script>
-  import { setContext, getContext, onMount } from "svelte"
+  import { setContext, onMount } from "svelte"
   import Router, { querystring } from "svelte-spa-router"
-  import { routeStore, stateStore } from "stores"
+  import {
+    routeStore,
+    stateStore,
+    appStore,
+    builderStore,
+    orgStore,
+    screenStore,
+  } from "stores"
   import Screen from "./Screen.svelte"
   import { get } from "svelte/store"
+  import Layout from "./Layout.svelte"
 
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
   setContext("screenslot", true)
 
-  // Only wrap this as an array to take advantage of svelte keying,
-  // to ensure the svelte-spa-router is fully remounted when route config
-  // changes
   $: config = {
     routes: getRouterConfig($routeStore.routes),
     id: $routeStore.routeSessionId,
@@ -20,6 +23,55 @@
   // Keep query params up to date
   $: routeStore.actions.setQueryParams(parseQueryString($querystring))
 
+  // Get settings for the root layout
+  $: screen = $screenStore.activeScreen
+  $: embedded = $appStore.embedded
+  $: application = $appStore.application
+  $: navigation = $builderStore.navigation
+  $: logoUrl = $orgStore?.logoUrl
+  $: layoutSettings = getLayoutSettings(
+    screen,
+    embedded,
+    application,
+    navigation,
+    logoUrl
+  )
+
+  const getLayoutSettings = (screen, embedded, app, navigation, logoUrl) => {
+    if (!screen?.showNavigation) {
+      return { navigation: "None" }
+    }
+    let settings = {
+      embedded,
+      pageWidth: screen?.width,
+      ...app?.navigation,
+      ...navigation,
+    }
+
+    // Migrate legacy width setting
+    if (settings.width && !settings.pageWidth) {
+      layoutSettings.pageWidth = settings.width
+    }
+    if (settings.width && !settings.navWidth) {
+      settings.navWidth = settings.width
+    }
+
+    // Default some settings
+    if (!settings.navigation) {
+      settings.navigation = "Top"
+    }
+    if (!settings.pageWidth) {
+      settings.pageWidth = "Large"
+    }
+    if (!settings.title && !settings.hideTitle) {
+      settings.title = app?.name
+    }
+    if (!settings.logoUrl) {
+      settings.logoUrl = logoUrl
+    }
+    return settings
+  }
+
   const parseQueryString = query => {
     let queryParams = {}
     if (query) {
@@ -61,17 +113,8 @@
   })
 </script>
 
-{#key config.id}
-  <div use:styleable={$component.styles}>
+<Layout {...layoutSettings}>
+  {#key config.id}
     <Router on:routeLoading={onRouteLoading} routes={config.routes} />
-  </div>
-{/key}
-
-<style>
-  div {
-    position: relative;
-  }
-  div :global(> .component > *) {
-    flex: 1 1 auto;
-  }
-</style>
+  {/key}
+</Layout>
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 92e1327f969..8e98b61f774 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -21,7 +21,6 @@ export { default as button } from "./Button.svelte"
 export { default as buttongroup } from "./ButtonGroup.svelte"
 export { default as repeater } from "./Repeater.svelte"
 export { default as text } from "./Text.svelte"
-export { default as layout } from "./Layout.svelte"
 export { default as link } from "./Link.svelte"
 export { default as heading } from "./Heading.svelte"
 export { default as image } from "./Image.svelte"
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index de6d1bdc127..71699ad7aff 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -31,7 +31,6 @@ const loadBudibase = async () => {
   builderStore.set({
     ...get(builderStore),
     inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
-    layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index d4afa6c7f1c..fc85b095aae 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -6,7 +6,6 @@ import { screenStore } from "./screens"
 import { builderStore } from "./builder"
 import Router from "../components/Router.svelte"
 import * as AppComponents from "../components/app/index.js"
-import { ScreenslotType } from "../constants.js"
 
 export const BudibasePrefix = "@budibase/standard-components/"
 
@@ -105,11 +104,6 @@ const createComponentStore = () => {
       return null
     }
 
-    // Screenslot is an edge case
-    if (type === ScreenslotType) {
-      type = `${BudibasePrefix}${type}`
-    }
-
     // Handle built-in components
     if (type.startsWith(BudibasePrefix)) {
       type = type.replace(BudibasePrefix, "")
@@ -125,9 +119,6 @@ const createComponentStore = () => {
     if (!type) {
       return null
     }
-    if (type === ScreenslotType) {
-      return Router
-    }
 
     // Handle budibase components
     if (type.startsWith(BudibasePrefix)) {
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index bc87216660e..635b11e1f76 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -2,7 +2,6 @@ import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
-import { orgStore } from "./org"
 import { dndIndex, dndParent, dndIsNewComponent, dndBounds } from "./dnd.js"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
@@ -15,7 +14,6 @@ const createScreenStore = () => {
       appStore,
       routeStore,
       builderStore,
-      orgStore,
       dndParent,
       dndIndex,
       dndIsNewComponent,
@@ -25,23 +23,17 @@ const createScreenStore = () => {
       $appStore,
       $routeStore,
       $builderStore,
-      $orgStore,
       $dndParent,
       $dndIndex,
       $dndIsNewComponent,
       $dndBounds,
     ]) => {
-      let activeLayout, activeScreen
+      let activeScreen
       let screens
       if ($builderStore.inBuilder) {
         // Use builder defined definitions if inside the builder preview
         activeScreen = Helpers.cloneDeep($builderStore.screen)
         screens = [activeScreen]
-
-        // 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 || []
@@ -52,16 +44,6 @@ const createScreenStore = () => {
             )
           )
         }
-
-        // Legacy - find the custom layout for the selected screen
-        if (activeScreen) {
-          const screenLayout = $appStore.layouts?.find(
-            layout => layout._id === activeScreen.layoutId
-          )
-          if (screenLayout) {
-            activeLayout = screenLayout
-          }
-        }
       }
 
       // Insert DND placeholder if required
@@ -128,59 +110,7 @@ const createScreenStore = () => {
         return a.routing.route < b.routing.route ? -1 : 1
       })
 
-      // If we don't have a legacy custom layout, build a layout structure
-      // from the screen navigation settings
-      if (!activeLayout) {
-        let layoutSettings = {
-          navigation: "None",
-          pageWidth: activeScreen?.width || "Large",
-          embedded: $appStore.embedded,
-        }
-        if (activeScreen?.showNavigation) {
-          layoutSettings = {
-            ...layoutSettings,
-            ...($builderStore.navigation || $appStore.application?.navigation),
-          }
-
-          // Default navigation to top
-          if (!layoutSettings.navigation) {
-            layoutSettings.navigation = "Top"
-          }
-
-          // Default title to app name
-          if (!layoutSettings.title && !layoutSettings.hideTitle) {
-            layoutSettings.title = $appStore.application?.name
-          }
-
-          // Default to the org logo
-          if (!layoutSettings.logoUrl) {
-            layoutSettings.logoUrl = $orgStore?.logoUrl
-          }
-        }
-        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",
-                  },
-                },
-              },
-            ],
-            ...layoutSettings,
-          },
-        }
-      }
-      return { screens, activeLayout, activeScreen }
+      return { screens, activeScreen }
     }
   )
 
diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js
index 1ca8b7c3f4b..b8e66833e35 100644
--- a/packages/frontend-core/src/api/index.js
+++ b/packages/frontend-core/src/api/index.js
@@ -11,7 +11,6 @@ import { buildConfigEndpoints } from "./configs"
 import { buildDatasourceEndpoints } from "./datasources"
 import { buildFlagEndpoints } from "./flags"
 import { buildHostingEndpoints } from "./hosting"
-import { buildLayoutEndpoints } from "./layouts"
 import { buildOtherEndpoints } from "./other"
 import { buildPermissionsEndpoints } from "./permissions"
 import { buildQueryEndpoints } from "./queries"
@@ -280,7 +279,6 @@ export const createAPIClient = config => {
     ...buildDatasourceEndpoints(API),
     ...buildFlagEndpoints(API),
     ...buildHostingEndpoints(API),
-    ...buildLayoutEndpoints(API),
     ...buildOtherEndpoints(API),
     ...buildPermissionsEndpoints(API),
     ...buildQueryEndpoints(API),
diff --git a/packages/frontend-core/src/api/layouts.js b/packages/frontend-core/src/api/layouts.js
deleted file mode 100644
index 51bce1f5330..00000000000
--- a/packages/frontend-core/src/api/layouts.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export const buildLayoutEndpoints = API => ({
-  /**
-   * Saves a layout.
-   * @param layout the layout to save
-   */
-  saveLayout: async layout => {
-    return await API.post({
-      url: "/api/layouts",
-      body: layout,
-    })
-  },
-
-  /**
-   * Deletes a layout.
-   * @param layoutId the ID of the layout to delete
-   * @param layoutRev the rev of the layout to delete
-   */
-  deleteLayout: async ({ layoutId, layoutRev }) => {
-    return await API.delete({
-      url: `/api/layouts/${layoutId}/${layoutRev}`,
-    })
-  },
-})
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 101257c3216..3ea52ae8bdb 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -60,7 +60,6 @@ import {
   Row,
   BBRequest,
 } from "@budibase/types"
-import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts"
 import sdk from "../../sdk"
 import { builderSocket } from "../../websockets"
 import { DefaultAppTheme, sdk as sharedCoreSDK } from "@budibase/shared-core"
@@ -350,12 +349,6 @@ async function performAppCreate(ctx: UserCtx<CreateAppRequest, App>) {
       if (!existing.features?.disableUserMetadata) {
         newApplication.features!.disableUserMetadata = false
       }
-
-      // Migrate navigation settings and screens if required
-      const navigation = await migrateAppNavigation()
-      if (navigation) {
-        newApplication.navigation = navigation
-      }
     }
 
     const response = await db.put(newApplication, { force: true })
@@ -824,55 +817,3 @@ export async function setRevertableVersion(
 
   ctx.status = 200
 }
-
-async function migrateAppNavigation() {
-  const db = context.getAppDB()
-  const existing = await sdk.applications.metadata.get()
-  const layouts: Layout[] = await getLayouts()
-  const screens: Screen[] = await getScreens()
-
-  // Migrate all screens, removing custom layouts
-  for (let screen of screens) {
-    if (!screen.layoutId) {
-      continue
-    }
-    const layout = layouts.find(layout => layout._id === screen.layoutId)
-    screen.layoutId = undefined
-    screen.showNavigation = layout?.props.navigation !== "None"
-    screen.width = layout?.props.width || "Large"
-    await db.put(screen)
-  }
-
-  // Migrate layout navigation settings
-  const { name, customTheme } = existing
-  const layout = layouts?.find(
-    (layout: Layout) => layout._id === BASE_LAYOUT_PROP_IDS.PRIVATE
-  )
-  if (layout && !existing.navigation) {
-    let navigationSettings: any = {
-      navigation: "Top",
-      title: name,
-      navWidth: "Large",
-      navBackground:
-        customTheme?.navBackground || "var(--spectrum-global-color-gray-50)",
-      navTextColor:
-        customTheme?.navTextColor || "var(--spectrum-global-color-gray-800)",
-    }
-    if (layout) {
-      navigationSettings.hideLogo = layout.props.hideLogo
-      navigationSettings.hideTitle = layout.props.hideTitle
-      navigationSettings.title = layout.props.title || name
-      navigationSettings.logoUrl = layout.props.logoUrl
-      navigationSettings.links = layout.props.links
-      navigationSettings.navigation = layout.props.navigation || "Top"
-      navigationSettings.sticky = layout.props.sticky
-      navigationSettings.navWidth = layout.props.width || "Large"
-      if (navigationSettings.navigation === "None") {
-        navigationSettings.navigation = "Top"
-      }
-    }
-    return navigationSettings
-  } else {
-    return null
-  }
-}
diff --git a/packages/server/src/api/controllers/layout.ts b/packages/server/src/api/controllers/layout.ts
deleted file mode 100644
index c0406f50ac0..00000000000
--- a/packages/server/src/api/controllers/layout.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { EMPTY_LAYOUT } from "../../constants/layouts"
-import { generateLayoutID, getScreenParams } from "../../db/utils"
-import { events, context } from "@budibase/backend-core"
-import {
-  BBContext,
-  Layout,
-  SaveLayoutRequest,
-  SaveLayoutResponse,
-  UserCtx,
-} from "@budibase/types"
-
-export async function save(
-  ctx: UserCtx<SaveLayoutRequest, SaveLayoutResponse>
-) {
-  const db = context.getAppDB()
-  let layout = ctx.request.body
-
-  if (!layout.props) {
-    layout = {
-      ...EMPTY_LAYOUT,
-      ...layout,
-    }
-    layout.props._instanceName = layout.name
-  }
-
-  layout._id = layout._id || generateLayoutID()
-  const response = await db.put(layout)
-  await events.layout.created(layout)
-  layout._rev = response.rev
-
-  ctx.body = layout
-  ctx.status = 200
-}
-
-export async function destroy(ctx: BBContext) {
-  const db = context.getAppDB()
-  const layoutId = ctx.params.layoutId,
-    layoutRev = ctx.params.layoutRev
-
-  const layoutsUsedByScreens = (
-    await db.allDocs<Layout>(
-      getScreenParams(null, {
-        include_docs: true,
-      })
-    )
-  ).rows.map(element => element.doc!.layoutId)
-  if (layoutsUsedByScreens.includes(layoutId)) {
-    ctx.throw(400, "Cannot delete a layout that's being used by a screen")
-  }
-
-  await db.remove(layoutId, layoutRev)
-  await events.layout.deleted(layoutId)
-  ctx.body = { message: "Layout deleted successfully" }
-  ctx.status = 200
-}
diff --git a/packages/server/src/api/controllers/static/templates/preview.hbs b/packages/server/src/api/controllers/static/templates/preview.hbs
index 87b9ad6ea34..e794d1f606c 100644
--- a/packages/server/src/api/controllers/static/templates/preview.hbs
+++ b/packages/server/src/api/controllers/static/templates/preview.hbs
@@ -79,7 +79,6 @@
       // Set some flags so the app knows we're in the builder
       window["##BUDIBASE_IN_BUILDER##"] = true
       window["##BUDIBASE_APP_ID##"] = appId
-      window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
       window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
       window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
       window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
diff --git a/packages/server/src/api/routes/index.ts b/packages/server/src/api/routes/index.ts
index e05bc44893d..102e95cc87a 100644
--- a/packages/server/src/api/routes/index.ts
+++ b/packages/server/src/api/routes/index.ts
@@ -1,5 +1,4 @@
 import authRoutes from "./auth"
-import layoutRoutes from "./layout"
 import screenRoutes from "./screen"
 import userRoutes from "./user"
 import applicationRoutes from "./application"
@@ -42,7 +41,6 @@ export const mainRoutes: Router[] = [
   backupRoutes,
   authRoutes,
   deployRoutes,
-  layoutRoutes,
   screenRoutes,
   userRoutes,
   applicationRoutes,
diff --git a/packages/server/src/api/routes/layout.ts b/packages/server/src/api/routes/layout.ts
deleted file mode 100644
index edcafd42de8..00000000000
--- a/packages/server/src/api/routes/layout.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Router from "@koa/router"
-import authorized from "../../middleware/authorized"
-import { permissions } from "@budibase/backend-core"
-import * as controller from "../controllers/layout"
-
-const router: Router = new Router()
-
-router
-  .post("/api/layouts", authorized(permissions.BUILDER), controller.save)
-  .delete(
-    "/api/layouts/:layoutId/:layoutRev",
-    authorized(permissions.BUILDER),
-    controller.destroy
-  )
-
-export default router
diff --git a/packages/server/src/api/routes/tests/layout.spec.js b/packages/server/src/api/routes/tests/layout.spec.js
deleted file mode 100644
index c3a3010e32b..00000000000
--- a/packages/server/src/api/routes/tests/layout.spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const { checkBuilderEndpoint } = require("./utilities/TestFunctions")
-const setup = require("./utilities")
-const { basicLayout } = setup.structures
-const { events } = require("@budibase/backend-core")
-
-describe("/layouts", () => {
-  let request = setup.getRequest()
-  let config = setup.getConfig()
-  let layout
-
-  afterAll(setup.afterAll)
-
-  beforeAll(async () => {
-    await config.init()
-    layout = await config.createLayout()
-    jest.clearAllMocks()
-  })
-
-  describe("save", () => {
-    it("should be able to create a layout", async () => {
-      const res = await request
-        .post(`/api/layouts`)
-        .send(basicLayout())
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body._rev).toBeDefined()
-      expect(events.layout.created).toBeCalledTimes(1)
-    })
-
-    it("should apply authorization to endpoint", async () => {
-      await checkBuilderEndpoint({
-        config,
-        method: "POST",
-        url: `/api/layouts`,
-      })
-    })
-  })
-
-  describe("destroy", () => {
-    it("should be able to delete the layout", async () => {
-      const res = await request
-        .delete(`/api/layouts/${layout._id}/${layout._rev}`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body.message).toBeDefined()
-      expect(events.layout.deleted).toBeCalledTimes(1)
-    })
-
-    it("should apply authorization to endpoint", async () => {
-      await checkBuilderEndpoint({
-        config,
-        method: "DELETE",
-        url: `/api/layouts/${layout._id}/${layout._rev}`,
-      })
-    })
-  })
-})
diff --git a/packages/server/src/constants/layouts.ts b/packages/server/src/constants/layouts.ts
deleted file mode 100644
index f4eb337c2d4..00000000000
--- a/packages/server/src/constants/layouts.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Layout } from "@budibase/types"
-
-export const BASE_LAYOUT_PROP_IDS = {
-  PRIVATE: "layout_private_master",
-  PUBLIC: "layout_public_master",
-}
-
-export const EMPTY_LAYOUT: Layout = {
-  componentLibraries: ["@budibase/standard-components"],
-  title: "{{ name }}",
-  favicon: "./_shared/favicon.png",
-  stylesheets: [],
-  props: {
-    _id: "30b8822a-d07b-49f4-9531-551e37c6899b",
-    _component: "@budibase/standard-components/layout",
-    _children: [
-      {
-        _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
-        _component: "@budibase/standard-components/screenslot",
-        _instanceName: "Screen slot",
-        _styles: {
-          normal: {
-            flex: "1 1 auto",
-            display: "flex",
-            "flex-direction": "column",
-            "justify-content": "flex-start",
-            "align-items": "stretch",
-          },
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _children: [],
-      },
-    ],
-    _styles: {
-      active: {},
-      hover: {},
-      normal: {},
-      selected: {},
-    },
-    navigation: "Top",
-    width: "Large",
-    links: [
-      {
-        text: "Home",
-        url: "/",
-      },
-    ],
-  },
-}
-
-export const BASE_LAYOUTS = [
-  {
-    _id: BASE_LAYOUT_PROP_IDS.PRIVATE,
-    componentLibraries: ["@budibase/standard-components"],
-    title: "{{ name }}",
-    favicon: "./_shared/favicon.png",
-    stylesheets: [],
-    name: "Navigation Layout",
-    props: {
-      _id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
-      _instanceName: "Navigation Layout",
-      _component: "@budibase/standard-components/layout",
-      _children: [
-        {
-          _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
-          _component: "@budibase/standard-components/screenslot",
-          _instanceName: "Screen slot",
-          _styles: {
-            normal: {
-              flex: "1 1 auto",
-              display: "flex",
-              "flex-direction": "column",
-              "justify-content": "flex-start",
-              "align-items": "stretch",
-            },
-            hover: {},
-            active: {},
-            selected: {},
-          },
-          _children: [],
-        },
-      ],
-      _styles: {
-        active: {},
-        hover: {},
-        normal: {},
-        selected: {},
-      },
-      title: "{{ name }}",
-      navigation: "Top",
-      width: "Large",
-      links: [
-        {
-          text: "Home",
-          url: "/",
-        },
-      ],
-    },
-  },
-  {
-    _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
-    componentLibraries: ["@budibase/standard-components"],
-    title: "{{ name }}",
-    favicon: "./_shared/favicon.png",
-    stylesheets: [],
-    name: "Empty Layout",
-    props: {
-      _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
-      _instanceName: "Empty Layout",
-      _component: "@budibase/standard-components/layout",
-      _children: [
-        {
-          _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
-          _component: "@budibase/standard-components/screenslot",
-          _instanceName: "Screen slot",
-          _styles: {
-            normal: {
-              flex: "1 1 auto",
-              display: "flex",
-              "flex-direction": "column",
-              "justify-content": "flex-start",
-              "align-items": "stretch",
-            },
-            hover: {},
-            active: {},
-            selected: {},
-          },
-          _children: [],
-        },
-      ],
-      _styles: {
-        active: {},
-        hover: {},
-        normal: {},
-        selected: {},
-      },
-      navigation: "None",
-      width: "Large",
-      links: [
-        {
-          text: "Home",
-          url: "/",
-        },
-      ],
-    },
-  },
-]
diff --git a/packages/server/src/constants/screens.ts b/packages/server/src/constants/screens.ts
index 1107289ea0c..cf2725c9fb6 100644
--- a/packages/server/src/constants/screens.ts
+++ b/packages/server/src/constants/screens.ts
@@ -1,5 +1,4 @@
 import { roles } from "@budibase/backend-core"
-import { BASE_LAYOUT_PROP_IDS } from "./layouts"
 import { Screen } from "@budibase/types"
 
 export function createHomeScreen(
@@ -12,7 +11,6 @@ export function createHomeScreen(
   }
 ): Screen {
   return {
-    layoutId: BASE_LAYOUT_PROP_IDS.PRIVATE,
     props: {
       _id: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
       _component: "@budibase/standard-components/container",
diff --git a/packages/server/src/migrations/functions/backfill/app.ts b/packages/server/src/migrations/functions/backfill/app.ts
index 51a37108b0f..e64bbec2e34 100644
--- a/packages/server/src/migrations/functions/backfill/app.ts
+++ b/packages/server/src/migrations/functions/backfill/app.ts
@@ -1,6 +1,5 @@
 import * as automations from "./app/automations"
 import * as datasources from "./app/datasources"
-import * as layouts from "./app/layouts"
 import * as queries from "./app/queries"
 import * as roles from "./app/roles"
 import * as tables from "./app/tables"
@@ -28,7 +27,6 @@ const EVENTS = [
   Event.AUTOMATION_CREATED,
   Event.AUTOMATION_STEP_CREATED,
   Event.DATASOURCE_CREATED,
-  Event.LAYOUT_CREATED,
   Event.QUERY_CREATED,
   Event.ROLE_CREATED,
   Event.SCREEN_CREATED,
@@ -88,12 +86,6 @@ export const run = async (appDb: any) => {
         handleError(e, errors)
       }
 
-      try {
-        totals.layouts = await layouts.backfill(appDb, timestamp)
-      } catch (e) {
-        handleError(e, errors)
-      }
-
       try {
         totals.queries = await queries.backfill(appDb, timestamp)
       } catch (e) {
@@ -123,7 +115,6 @@ export const run = async (appDb: any) => {
       appId: app.appId,
       automations: totals.automations,
       datasources: totals.datasources,
-      layouts: totals.layouts,
       queries: totals.queries,
       roles: totals.roles,
       tables: totals.tables,
diff --git a/packages/server/src/migrations/functions/backfill/app/layouts.ts b/packages/server/src/migrations/functions/backfill/app/layouts.ts
deleted file mode 100644
index ee5806459bf..00000000000
--- a/packages/server/src/migrations/functions/backfill/app/layouts.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { events } from "@budibase/backend-core"
-import { getLayoutParams } from "../../../../db/utils"
-import { Layout } from "@budibase/types"
-
-const getLayouts = async (appDb: any): Promise<Layout[]> => {
-  const response = await appDb.allDocs(
-    getLayoutParams(null, {
-      include_docs: true,
-    })
-  )
-  return response.rows.map((row: any) => row.doc)
-}
-
-export const backfill = async (appDb: any, timestamp: string | number) => {
-  const layouts: Layout[] = await getLayouts(appDb)
-
-  for (const layout of layouts) {
-    // exclude default layouts
-    if (
-      layout._id === "layout_private_master" ||
-      layout._id === "layout_public_master"
-    ) {
-      continue
-    }
-    await events.layout.created(layout, timestamp)
-  }
-
-  return layouts.length
-}
diff --git a/packages/server/src/migrations/tests/index.spec.ts b/packages/server/src/migrations/tests/index.spec.ts
index 6b3f3314ba8..009b0278ddb 100644
--- a/packages/server/src/migrations/tests/index.spec.ts
+++ b/packages/server/src/migrations/tests/index.spec.ts
@@ -69,7 +69,6 @@ describe("migrations", () => {
         expect(events.automation.created).toHaveBeenCalledTimes(2)
         expect(events.automation.stepCreated).toHaveBeenCalledTimes(1)
         expect(events.datasource.created).toHaveBeenCalledTimes(2)
-        expect(events.layout.created).toHaveBeenCalledTimes(1)
         expect(events.query.created).toHaveBeenCalledTimes(2)
         expect(events.role.created).toHaveBeenCalledTimes(3) // created roles + admin (created on table creation)
         expect(events.table.created).toHaveBeenCalledTimes(3)
diff --git a/packages/server/src/tests/utilities/controllers.ts b/packages/server/src/tests/utilities/controllers.ts
index 315b61551c5..2268e50ecac 100644
--- a/packages/server/src/tests/utilities/controllers.ts
+++ b/packages/server/src/tests/utilities/controllers.ts
@@ -10,5 +10,4 @@ export * as datasource from "../../api/controllers/datasource"
 export * as query from "../../api/controllers/query"
 export * as screen from "../../api/controllers/screen"
 export * as webhook from "../../api/controllers/webhook"
-export * as layout from "../../api/controllers/layout"
 export * as deploy from "../../api/controllers/deploy"
diff --git a/packages/server/src/tests/utilities/structures.ts b/packages/server/src/tests/utilities/structures.ts
index beb03ecf08c..db1799286b2 100644
--- a/packages/server/src/tests/utilities/structures.ts
+++ b/packages/server/src/tests/utilities/structures.ts
@@ -1,7 +1,5 @@
 import { roles, utils } from "@budibase/backend-core"
 import { createHomeScreen } from "../../constants/screens"
-import { EMPTY_LAYOUT } from "../../constants/layouts"
-import { cloneDeep } from "lodash/fp"
 import {
   BUILTIN_ACTION_DEFINITIONS,
   TRIGGER_DEFINITIONS,
@@ -604,10 +602,6 @@ export function customScreen(config: { roleId: string; route: string }) {
   return createHomeScreen(config)
 }
 
-export function basicLayout() {
-  return cloneDeep(EMPTY_LAYOUT)
-}
-
 export function basicWebhook(automationId: string): Webhook {
   return {
     live: true,
diff --git a/packages/types/src/api/web/index.ts b/packages/types/src/api/web/index.ts
index 27d51ce1b78..b7e74f4845e 100644
--- a/packages/types/src/api/web/index.ts
+++ b/packages/types/src/api/web/index.ts
@@ -12,7 +12,6 @@ export * from "./pagination"
 export * from "./searchFilter"
 export * from "./cookies"
 export * from "./automation"
-export * from "./layout"
 export * from "./query"
 export * from "./role"
 export * from "./plugins"
diff --git a/packages/types/src/api/web/layout.ts b/packages/types/src/api/web/layout.ts
deleted file mode 100644
index 50512777ef3..00000000000
--- a/packages/types/src/api/web/layout.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Layout } from "../../documents"
-
-export interface SaveLayoutRequest extends Layout {}
-
-export interface SaveLayoutResponse extends Layout {}
diff --git a/packages/types/src/documents/app/index.ts b/packages/types/src/documents/app/index.ts
index bb94c3b4da7..4914971661e 100644
--- a/packages/types/src/documents/app/index.ts
+++ b/packages/types/src/documents/app/index.ts
@@ -1,7 +1,6 @@
 export * from "./app"
 export * from "./automation"
 export * from "./datasource"
-export * from "./layout"
 export * from "./query"
 export * from "./role"
 export * from "./table"
diff --git a/packages/types/src/documents/app/layout.ts b/packages/types/src/documents/app/layout.ts
deleted file mode 100644
index 51ce511712b..00000000000
--- a/packages/types/src/documents/app/layout.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Document } from "../document"
-
-export interface Layout extends Document {
-  componentLibraries: string[]
-  title: string
-  favicon: string
-  stylesheets: string[]
-  props: any
-  layoutId?: string
-  name?: string
-}
diff --git a/packages/types/src/sdk/events/backfill.ts b/packages/types/src/sdk/events/backfill.ts
index 163b0fe6a26..95573b25dbf 100644
--- a/packages/types/src/sdk/events/backfill.ts
+++ b/packages/types/src/sdk/events/backfill.ts
@@ -4,7 +4,6 @@ export interface AppBackfillSucceededEvent extends BaseEvent {
   appId: string
   automations: number
   datasources: number
-  layouts: number
   queries: number
   roles: number
   tables: number
diff --git a/packages/types/src/sdk/events/event.ts b/packages/types/src/sdk/events/event.ts
index 242b182decc..83b93ae58be 100644
--- a/packages/types/src/sdk/events/event.ts
+++ b/packages/types/src/sdk/events/event.ts
@@ -131,10 +131,6 @@ export enum Event {
   SCREEN_CREATED = "screen:created",
   SCREEN_DELETED = "screen:deleted",
 
-  // LAYOUT
-  LAYOUT_CREATED = "layout:created",
-  LAYOUT_DELETED = "layout:deleted",
-
   // AUTOMATION
   AUTOMATION_CREATED = "automation:created",
   AUTOMATION_DELETED = "automation:deleted",
diff --git a/packages/types/src/sdk/events/index.ts b/packages/types/src/sdk/events/index.ts
index 043e62faa45..a08a92aeef5 100644
--- a/packages/types/src/sdk/events/index.ts
+++ b/packages/types/src/sdk/events/index.ts
@@ -5,7 +5,6 @@ export * from "./email"
 export * from "./ai"
 export * from "./datasource"
 export * from "./event"
-export * from "./layout"
 export * from "./license"
 export * from "./version"
 export * from "./query"
diff --git a/packages/types/src/sdk/events/layout.ts b/packages/types/src/sdk/events/layout.ts
deleted file mode 100644
index 12680a28b58..00000000000
--- a/packages/types/src/sdk/events/layout.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { BaseEvent } from "./event"
-
-export interface LayoutCreatedEvent extends BaseEvent {
-  layoutId: string
-}
-
-export interface LayoutDeletedEvent extends BaseEvent {
-  layoutId: string
-}

From 5fe3b71ca9fb50287fd1c1b955102a248798154e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 19 Nov 2024 14:28:42 +0000
Subject: [PATCH 2/4] Remove old usages of legacy width setting

---
 packages/client/src/components/Layout.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Layout.svelte b/packages/client/src/components/Layout.svelte
index 24d8cc9ed3e..3e83d36f0be 100644
--- a/packages/client/src/components/Layout.svelte
+++ b/packages/client/src/components/Layout.svelte
@@ -61,8 +61,8 @@
 
   $: enrichedNavItems = enrichNavItems(links, $roleStore)
   $: typeClass = NavigationClasses[navigation] || NavigationClasses.None
-  $: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large
-  $: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large
+  $: navWidthClass = WidthClasses[navWidth] || WidthClasses.Large
+  $: pageWidthClass = WidthClasses[pageWidth] || WidthClasses.Large
   $: navStyle = getNavStyle(
     navBackground,
     navTextColor,

From c8d01b39f0909aad4c0d539fd6cc0028d313af75 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 19 Nov 2024 15:21:57 +0000
Subject: [PATCH 3/4] Refactor how layout settings are determined

---
 packages/client/src/components/Router.svelte | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index bb841ea3a0a..9bc1116d5ae 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -38,23 +38,15 @@
   )
 
   const getLayoutSettings = (screen, embedded, app, navigation, logoUrl) => {
-    if (!screen?.showNavigation) {
-      return { navigation: "None" }
-    }
     let settings = {
       embedded,
-      pageWidth: screen?.width,
       ...app?.navigation,
       ...navigation,
     }
 
-    // Migrate legacy width setting
-    if (settings.width && !settings.pageWidth) {
-      layoutSettings.pageWidth = settings.width
-    }
-    if (settings.width && !settings.navWidth) {
-      settings.navWidth = settings.width
-    }
+    // Migrate some settings
+    settings.pageWidth = screen?.width || settings.width || "Large"
+    settings.navWidth = settings.navWidth || settings.width || "Large"
 
     // Default some settings
     if (!settings.navigation) {
@@ -69,6 +61,12 @@
     if (!settings.logoUrl) {
       settings.logoUrl = logoUrl
     }
+
+    // Hide nav if required
+    if (!screen?.showNavigation) {
+      settings.navigation = "None"
+    }
+
     return settings
   }
 

From fe118f7524121859c952090c7028185367036a74 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 20 Nov 2024 10:28:57 +0000
Subject: [PATCH 4/4] Lint

---
 packages/backend-core/src/events/backfill.ts               | 1 -
 packages/builder/src/constants/index.js                    | 7 -------
 .../[componentId]/_components/Screen/GeneralPanel.svelte   | 1 -
 packages/client/src/stores/components.js                   | 1 -
 packages/types/src/sdk/events/event.ts                     | 4 ----
 5 files changed, 14 deletions(-)

diff --git a/packages/backend-core/src/events/backfill.ts b/packages/backend-core/src/events/backfill.ts
index d415e9e765e..6a0de6f112e 100644
--- a/packages/backend-core/src/events/backfill.ts
+++ b/packages/backend-core/src/events/backfill.ts
@@ -6,7 +6,6 @@ import {
   AutomationCreatedEvent,
   AutomationStepCreatedEvent,
   DatasourceCreatedEvent,
-  LayoutCreatedEvent,
   QueryCreatedEvent,
   RoleCreatedEvent,
   ScreenCreatedEvent,
diff --git a/packages/builder/src/constants/index.js b/packages/builder/src/constants/index.js
index 0d51f57c3e8..2b6b4671345 100644
--- a/packages/builder/src/constants/index.js
+++ b/packages/builder/src/constants/index.js
@@ -34,13 +34,6 @@ export const UNEDITABLE_USER_FIELDS = [
   "lastName",
 ]
 
-export const LAYOUT_NAMES = {
-  MASTER: {
-    PRIVATE: "layout_private_master",
-    PUBLIC: "layout_private_master",
-  },
-}
-
 // one or more word characters and whitespace
 export const APP_NAME_REGEX = /^[\w\s]+$/
 // zero or more non-whitespace characters
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 6ec28aab705..c2e023a78dc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -4,7 +4,6 @@
     Helpers,
     Input,
     Checkbox,
-    Banner,
     Select,
     notifications,
   } from "@budibase/bbui"
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index fc85b095aae..ea0de734adf 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -4,7 +4,6 @@ import { findComponentById, findComponentPathById } from "../utils/components"
 import { devToolsStore } from "./devTools"
 import { screenStore } from "./screens"
 import { builderStore } from "./builder"
-import Router from "../components/Router.svelte"
 import * as AppComponents from "../components/app/index.js"
 
 export const BudibasePrefix = "@budibase/standard-components/"
diff --git a/packages/types/src/sdk/events/event.ts b/packages/types/src/sdk/events/event.ts
index 83b93ae58be..9b578f536f2 100644
--- a/packages/types/src/sdk/events/event.ts
+++ b/packages/types/src/sdk/events/event.ts
@@ -357,10 +357,6 @@ export const AuditedEventFriendlyName: Record<Event, string | undefined> = {
   [Event.INSTALLATION_BACKFILL_SUCCEEDED]: undefined,
   [Event.INSTALLATION_BACKFILL_FAILED]: undefined,
 
-  // LAYOUT - NOT AUDITED
-  [Event.LAYOUT_CREATED]: undefined,
-  [Event.LAYOUT_DELETED]: undefined,
-
   // VIEW - NOT AUDITED
   [Event.VIEW_CREATED]: undefined,
   [Event.VIEW_UPDATED]: undefined,