refactor wizard into its own file

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -13,6 +13,8 @@
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
   import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
 
+  export let showModal
+
   const tabs = [
     {
       title: "Screens",
@@ -24,7 +26,7 @@
     },
   ]
 
-  export let modal
+  let modal
   $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
 
   const navigate = ({ detail }) => {
@@ -98,7 +100,7 @@
     </Tab>
   </Tabs>
   <div class="add-button">
-    <Icon hoverable name="AddCircle" on:click={modal.show} />
+    <Icon hoverable name="AddCircle" on:click={showModal()} />
   </div>
 </div>
 

packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte

@@ -17,12 +17,12 @@
   let selectedNav
   let createdScreens = []
   $: {
-    selectedScreens.forEach(screen => {
+    selectedScreens?.forEach(screen => {
       createdScreens = [...createdScreens, screen.create()]
     })
   }
 
-  $: blankSelected = selectedScreens.find(x => x.id === "createFromScratch")
+  $: blankSelected = selectedScreens.length === 1
 
   const save = async screens => {
     for (let screen of screens) {

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -9,7 +9,7 @@
   export let selectedScreens = []
 
   const blankScreen = "createFromScratch"
-  $: blankSelected = selectedScreens.find(x => x.id === blankScreen)
+  $: blankSelected = selectedScreens.length === 1
   $: autoSelected = selectedScreens.length > 0 && !blankSelected
 
   $: templates = getTemplates($store, $tables.list)
@@ -19,7 +19,7 @@
         screen => !screen.name.includes(table.name)
       )
     } else {
-      const templates = getTemplates($store, $tables.list).filter(template =>
+      const templates = templates.filter(template =>
         template.name.includes(table.name)
       )
       selectedScreens = [...templates, ...selectedScreens]
@@ -41,7 +41,7 @@
     Autogenerated screens come with CRUD functionality.</Body
   >
 
-  <Layout noPadding>
+  <Layout noPadding gap="S">
     <Detail size="S">Blank screen</Detail>
     <div
       class="item"
@@ -90,7 +90,6 @@
   }
 
   .content {
-    padding-left: 10px;
     letter-spacing: 0px;
     color: #2c2c2c;
   }

packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte

@@ -35,7 +35,7 @@
 
 <ModalContent
   size="M"
-  title={"Enter Details"}
+  title={"Enter details"}
   confirmText={"Continue"}
   onCancel={() => modal.show()}
   onConfirm={() => navigationSelectionModal.show()}

packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte

@@ -0,0 +1,43 @@
+<script>
+  import NavigationSelectionModal from "components/design/NavigationPanel/NavigationSelectionModal.svelte"
+  import ScreenNameModal from "components/design/NavigationPanel/ScreenNameModal.svelte"
+  import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
+  import { Modal } from "@budibase/bbui"
+
+  let modal
+  let navigationSelectionModal
+  let screenNameModal
+  let screenName = ""
+  let url = ""
+  let selectedScreens = []
+
+  export function showModal() {
+    modal.show()
+  }
+</script>
+
+<Modal bind:this={modal}>
+  <NewScreenModal
+    {screenNameModal}
+    {navigationSelectionModal}
+    bind:selectedScreens
+  />
+</Modal>
+
+<Modal bind:this={screenNameModal}>
+  <ScreenNameModal
+    bind:screenName
+    bind:url
+    {modal}
+    {navigationSelectionModal}
+  />
+</Modal>
+<Modal bind:this={navigationSelectionModal}>
+  <NavigationSelectionModal
+    bind:url
+    bind:screenName
+    {modal}
+    bind:selectedScreens
+    {screenNameModal}
+  />
+</Modal>

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

@@ -5,7 +5,7 @@
     selectedComponent,
     allScreens,
   } from "builderStore"
-  import { Detail, Layout, Button, Modal, Icon } from "@budibase/bbui"
+  import { Detail, Layout, Button, Icon } from "@budibase/bbui"
 
   import CurrentItemPreview from "components/design/AppPreview"
   import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte"
@@ -18,10 +18,8 @@
   import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
   import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte"
   import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte"
-  import NavigationSelectionModal from "components/design/NavigationPanel/NavigationSelectionModal.svelte"
-  import ScreenNameModal from "components/design/NavigationPanel/ScreenNameModal.svelte"
-  import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import Logo from "assets/bb-space-man.svg"
+  import ScreenWizard from "components/design/NavigationPanel/ScreenWizard.svelte"
 
   // Cache previous values so we don't update the URL more than necessary
   let previousType
@@ -30,12 +28,7 @@
   let hydrationComplete = false
 
   // Manage the layout modal flow from here
-  let modal
+  let showModal
-  let navigationSelectionModal
-  let screenNameModal
-  let screenName = ""
-  let url = ""
-  let selectedScreens = []
 
   // Hydrate state from URL params
   $: hydrateStateFromURL($params, $leftover)
@@ -159,7 +152,7 @@
 <!-- routify:options index=1 -->
 <div class="root">
   <div class="ui-nav">
-    <FrontendNavigatePane {modal} />
+    <FrontendNavigatePane {showModal} />
   </div>
 
   <div class="preview-pane">
@@ -188,7 +181,7 @@
             <div class="new-screen-text">
               <Detail size="M">Let's add some life to this screen</Detail>
             </div>
-            <Button on:click={() => modal.show()} size="M" cta>
+            <Button on:click={() => showModal()} size="M" cta>
               <div class="new-screen-button">
                 <div class="background-icon" style="color: white;">
                   <Icon name="Add" />
@@ -210,31 +203,8 @@
 </div>
 
 <slot />
-<Modal bind:this={modal}>
-  <NewScreenModal
-    {screenNameModal}
-    {navigationSelectionModal}
-    bind:selectedScreens
-  />
-</Modal>
 
-<Modal bind:this={screenNameModal}>
+<ScreenWizard bind:showModal />
-  <ScreenNameModal
-    bind:screenName
-    bind:url
-    {modal}
-    {navigationSelectionModal}
-  />
-</Modal>
-<Modal bind:this={navigationSelectionModal}>
-  <NavigationSelectionModal
-    bind:url
-    bind:screenName
-    {modal}
-    bind:selectedScreens
-    {screenNameModal}
-  />
-</Modal>
 
 <style>
   .root {