remove uneeded app creation modal

packages/builder/src/components/start/CreateAppModal.svelte

@@ -11,7 +11,6 @@
   import { capitalise } from "helpers"
   import { goto } from "@roxi/routify"
   import { APP_NAME_REGEX } from "constants"
-  import TemplateList from "./TemplateList.svelte"
 
   export let template
   export let inline
@@ -147,58 +146,34 @@
   }
 </script>
 
-{#if showTemplateSelection}
+<ModalContent
-  <ModalContent
+  title={"Name your app"}
-    title={"Get started quickly"}
+  confirmText={template?.fromFile ? "Import app" : "Create app"}
-    showConfirmButton={false}
+  onConfirm={createNewApp}
-    size="L"
+  onCancel={inline ? onCancel : null}
-    onConfirm={() => {
+  cancelText={inline ? "Back" : undefined}
-      template = {}
+  showCloseIcon={!inline}
-      return false
+  disabled={!valid}
-    }}
+>
-    showCancelButton={!inline}
+  {#if template?.fromFile}
-    showCloseIcon={!inline}
+    <Dropzone
-  >
+      error={$touched.file && $errors.file}
-    <TemplateList
+      gallery={false}
-      onSelect={(selected, { useImport } = {}) => {
+      label="File to import"
-        if (!selected) {
+      value={[$values.file]}
-          template = useImport ? { fromFile: true } : {}
+      on:change={e => {
-          return
+        $values.file = e.detail?.[0]
-        }
+        $touched.file = true
-        template = selected
       }}
     />
-  </ModalContent>
+  {/if}
-{:else}
+  <Input
-  <ModalContent
+    bind:value={$values.name}
-    title={"Name your app"}
+    error={$touched.name && $errors.name}
-    confirmText={template?.fromFile ? "Import app" : "Create app"}
+    on:blur={() => ($touched.name = true)}
-    onConfirm={createNewApp}
+    label="Name"
-    onCancel={inline ? onCancel : null}
+    placeholder={$auth.user.firstName
-    cancelText={inline ? "Back" : undefined}
+      ? `${$auth.user.firstName}'s app`
-    showCloseIcon={!inline}
+      : "My app"}
-    disabled={!valid}
+  />
-  >
+</ModalContent>
-    {#if template?.fromFile}
-      <Dropzone
-        error={$touched.file && $errors.file}
-        gallery={false}
-        label="File to import"
-        value={[$values.file]}
-        on:change={e => {
-          $values.file = e.detail?.[0]
-          $touched.file = true
-        }}
-      />
-    {/if}
-    <Input
-      bind:value={$values.name}
-      error={$touched.name && $errors.name}
-      on:blur={() => ($touched.name = true)}
-      label="Name"
-      placeholder={$auth.user.firstName
-        ? `${$auth.user.firstName}'s app`
-        : "My app"}
-    />
-  </ModalContent>
-{/if}

packages/builder/src/components/start/TemplateList.svelte

@@ -1,69 +0,0 @@
-<script>
-  import { Heading, Layout, Icon } from "@budibase/bbui"
-
-  export let onSelect
-</script>
-
-<Layout gap="XS" noPadding>
-  <div class="template start-from-scratch" on:click={() => onSelect(null)}>
-    <div
-      class="background-icon"
-      style={`background: rgb(50, 50, 50); color: white;`}
-    >
-      <Icon name="Add" />
-    </div>
-    <Heading size="XS">Start from scratch</Heading>
-    <p class="detail">BLANK</p>
-  </div>
-  <div
-    class="template import"
-    on:click={() => onSelect(null, { useImport: true })}
-  >
-    <div
-      class="background-icon"
-      style={`background: rgb(50, 50, 50); color: white;`}
-    >
-      <Icon name="Add" />
-    </div>
-    <Heading size="XS">Import an app</Heading>
-    <p class="detail">BLANK</p>
-  </div>
-</Layout>
-
-<style>
-  .background-icon {
-    padding: 10px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    color: white;
-  }
-
-  .template {
-    min-height: 60px;
-    display: grid;
-    grid-gap: var(--layout-s);
-    grid-template-columns: auto 1fr auto;
-    border: 1px solid #494949;
-    align-items: center;
-    cursor: pointer;
-    border-radius: 4px;
-    background: var(--background-alt);
-    padding: 8px 16px;
-  }
-
-  .detail {
-    text-align: right;
-  }
-
-  .start-from-scratch {
-    background: var(--spectrum-global-color-gray-50);
-    margin-top: 20px;
-  }
-
-  .import {
-    background: var(--spectrum-global-color-gray-50);
-  }
-</style>

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -78,6 +78,7 @@
   }
 
   const initiateAppCreation = () => {
+    template = {}
     creationModal.show()
     creatingApp = true
   }
@@ -304,10 +305,16 @@
             Export apps
           </Button>
         {/if}
-        <Button icon="Import" quiet secondary on:click={initiateAppImport}>
+        <Button
+          icon="Import"
+          size="L"
+          quiet
+          secondary
+          on:click={initiateAppImport}
+        >
           Import app
         </Button>
-        <Button icon="Add" cta on:click={initiateAppCreation}>
+        <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
           Create app
         </Button>
       </div>