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")}
       />
-      <IconSideNavItem
+      {#if $store.layouts?.length}
-        icon="Experience"
+        <IconSideNavItem
-        tooltip="Layouts"
+          icon="Experience"
-        active={$isActive("./layouts")}
+          tooltip="Layouts"
-        on:click={() => $goto("./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,25 +1,29 @@
 <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)}
-      {#each $store.layouts as layout (layout._id)}
+      <NavItem
-        <NavItem
+        icon="Experience"
-          icon="Experience"
+        indentLevel={0}
-          indentLevel={0}
+        selected={$store.selectedLayoutId === layout._id}
-          selected={$store.selectedLayoutId === layout._id}
+        text={layout.name}
-          text={layout.name}
+        on:click={() => ($store.selectedLayoutId = layout._id)}
-          on:click={() => ($store.selectedLayoutId = layout._id)}
+      >
-        >
+        <LayoutDropdownMenu {layout} />
-          <LayoutDropdownMenu {layout} />
+      </NavItem>
-        </NavItem>
+    {/each}
-      {/each}
+  </div>
-    </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,19 +30,15 @@ exports.destroy = async function (ctx) {
   const layoutId = ctx.params.layoutId,
     layoutRev = ctx.params.layoutRev
 
-  if (Object.values(BASE_LAYOUT_PROP_IDS).includes(layoutId)) {
+  const layoutsUsedByScreens = (
-    ctx.throw(400, "Cannot delete a built-in layout")
+    await db.allDocs(
-  } else {
+      getScreenParams(null, {
-    const layoutsUsedByScreens = (
+        include_docs: true,
-      await db.allDocs(
+      })
-        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")
-    ).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)