Allow deleting built in layouts and hide layouts tab when no layouts exist

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte

@@ -47,12 +47,14 @@
         active={$isActive("./navigation")}
         on:click={() => $goto("./navigation")}
       />
+      {#if $store.layouts?.length}
         <IconSideNavItem
           icon="Experience"
           tooltip="Layouts"
           active={$isActive("./layouts")}
           on:click={() => $goto("./layouts")}
         />
+      {/if}
     </IconSideNav>
   </div>
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte

@@ -13,7 +13,7 @@
       await store.actions.layouts.delete(layout)
       notifications.success("Layout deleted successfully")
     } catch (err) {
-      notifications.error("Error deleting layout")
+      notifications.error(err?.message || "Error deleting layout")
     }
   }
 </script>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte

@@ -1,14 +1,12 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import { Layout } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
   import { store } from "builderStore"
   import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
 </script>
 
 <Panel title="Layouts" borderRight>
-  <Layout paddingY="XL" paddingX="">
+  <div class="layouts">
-    <div>
     {#each $store.layouts as layout (layout._id)}
       <NavItem
         icon="Experience"
@@ -21,5 +19,11 @@
       </NavItem>
     {/each}
   </div>
-  </Layout>
 </Panel>
+
+<style>
+  .layouts {
+    margin-top: var(--spacing-xl);
+    overflow: hidden;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { store } from "builderStore"
+  import { redirect } from "@roxi/routify"
+
+  $: {
+    if (!$store.layouts?.length) {
+      $redirect("../")
+    }
+  }
+</script>
+
+<slot />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte

@@ -6,8 +6,7 @@
   onMount(() => {
     if ($store.layouts?.length) {
       $redirect(`./${$store.layouts[0]._id}`)
-    } else {
-      $redirect("../")
     }
+    // The redirection when no layouts exist is handled by the routify layout
   })
 </script>

packages/server/src/api/controllers/layout.js

@@ -30,9 +30,6 @@ exports.destroy = async function (ctx) {
   const layoutId = ctx.params.layoutId,
     layoutRev = ctx.params.layoutRev
 
-  if (Object.values(BASE_LAYOUT_PROP_IDS).includes(layoutId)) {
-    ctx.throw(400, "Cannot delete a built-in layout")
-  } else {
   const layoutsUsedByScreens = (
     await db.allDocs(
       getScreenParams(null, {
@@ -43,7 +40,6 @@ exports.destroy = async function (ctx) {
   if (layoutsUsedByScreens.includes(layoutId)) {
     ctx.throw(400, "Cannot delete a layout that's being used by a screen")
   }
-  }
 
   await db.remove(layoutId, layoutRev)
   ctx.body = { message: "Layout deleted successfully" }