From 830069970ad635e0f95e0fb94f8c49098d631894 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 7 May 2021 11:14:43 +0100
Subject: [PATCH 01/24] Bump svelte and routify deps, fix builder _reset usage
 and some tidy ups

---
 packages/bbui/package.json                    |  2 +-
 packages/bbui/yarn.lock                       |  8 +-
 packages/builder/package.json                 |  4 +-
 .../{AppList.svelte => AppGridView.svelte}    |  3 -
 .../src/components/start/AppTableView.svelte  | 23 ++++++
 .../components/start/CreateAppModal.svelte    |  1 -
 .../{_reset.svelte => _layout.svelte}         |  0
 .../src/pages/builder/portal/_layout.svelte   |  9 ++-
 .../pages/builder/portal/apps/_layout.svelte  |  7 --
 .../pages/builder/portal/apps/index.svelte    | 76 ++++++++++---------
 packages/builder/yarn.lock                    |  8 +-
 packages/client/package.json                  |  2 +-
 packages/server/package.json                  |  2 +-
 packages/server/yarn.lock                     |  8 +-
 packages/standard-components/package.json     |  2 +-
 15 files changed, 88 insertions(+), 67 deletions(-)
 rename packages/builder/src/components/start/{AppList.svelte => AppGridView.svelte} (87%)
 create mode 100644 packages/builder/src/components/start/AppTableView.svelte
 rename packages/builder/src/pages/builder/app/[application]/{_reset.svelte => _layout.svelte} (100%)
 delete mode 100644 packages/builder/src/pages/builder/portal/apps/_layout.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 573e115377..056f4229cb 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -27,7 +27,7 @@
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.37.0"
+    "svelte": "^3.38.2"
   },
   "keywords": [
     "svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 5dcac027b9..e9bad2e162 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -2407,10 +2407,10 @@ svelte-portal@^1.0.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
-svelte@^3.37.0:
-  version "3.37.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
-  integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA==
+svelte@^3.38.2:
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 svgo@^1.0.0:
   version "1.3.2"
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 4b9522aab0..a22cacd57c 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -90,7 +90,7 @@
     "@babel/preset-env": "^7.13.12",
     "@babel/runtime": "^7.13.10",
     "@rollup/plugin-replace": "^2.4.2",
-    "@roxi/routify": "2.15.1",
+    "@roxi/routify": "2.18.0",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/svelte": "^3.0.0",
@@ -106,7 +106,7 @@
     "rollup": "^2.44.0",
     "rollup-plugin-copy": "^3.4.0",
     "start-server-and-test": "^1.12.1",
-    "svelte": "^3.37.0",
+    "svelte": "^3.38.2",
     "svelte-jester": "^1.3.2",
     "vite": "^2.1.5"
   },
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppGridView.svelte
similarity index 87%
rename from packages/builder/src/components/start/AppList.svelte
rename to packages/builder/src/components/start/AppGridView.svelte
index 33c8d765f9..947477b03e 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppGridView.svelte
@@ -1,9 +1,6 @@
 <script>
-  import { onMount } from "svelte"
   import AppCard from "./AppCard.svelte"
   import { apps } from "stores/portal"
-
-  onMount(apps.load)
 </script>
 
 {#if $apps.length}
diff --git a/packages/builder/src/components/start/AppTableView.svelte b/packages/builder/src/components/start/AppTableView.svelte
new file mode 100644
index 0000000000..0886f3e1eb
--- /dev/null
+++ b/packages/builder/src/components/start/AppTableView.svelte
@@ -0,0 +1,23 @@
+<script>
+  import AppCard from "./AppCard.svelte"
+  import { apps } from "stores/portal"
+  import { Table } from "@budibase/bbui"
+</script>
+
+{#if $apps.length}
+  <div class="appList">
+    {#each $apps as app}
+      <AppCard {...app} />
+    {/each}
+  </div>
+{:else}
+  <div>No apps found.</div>
+{/if}
+
+<style>
+  .appList {
+    display: grid;
+    grid-gap: 50px;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+</style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 3cbdaa3f34..fcfea2d8cf 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -7,7 +7,6 @@
   import Spinner from "components/common/Spinner.svelte"
   import { Info, User } from "./Steps"
   import Indicator from "./Indicator.svelte"
-  import { goto } from "@roxi/routify"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
diff --git a/packages/builder/src/pages/builder/app/[application]/_reset.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/_reset.svelte
rename to packages/builder/src/pages/builder/app/[application]/_layout.svelte
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 5019edb56e..cd2b6ecccc 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -17,9 +17,6 @@
   import { auth } from "stores/backend"
   import BuilderSettingsModal from "components/start/BuilderSettingsModal.svelte"
 
-  organisation.init()
-  apps.load()
-
   let orgName
   let orgLogo
   let user
@@ -32,7 +29,11 @@
     user = { name: "John Doe" }
   }
 
-  onMount(getInfo)
+  onMount(() => {
+    organisation.init()
+    apps.load()
+    getInfo()
+  })
 
   let menu = [
     { title: "Apps", href: "/builder/portal/apps" },
diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
deleted file mode 100644
index c87ab149ba..0000000000
--- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { Page } from "@budibase/bbui"
-</script>
-
-<Page wide>
-  <slot />
-</Page>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 5062248e11..09b179bdf1 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -8,12 +8,15 @@
     ButtonGroup,
     Select,
     Modal,
+    Page,
   } from "@budibase/bbui"
-  import AppList from "components/start/AppList.svelte"
+  import AppGridView from "components/start/AppGridView.svelte"
+  import AppTableView from "components/start/AppTableView.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import api from "builderStore/api"
   import analytics from "analytics"
   import { onMount } from "svelte"
+  import { apps } from "stores/portal"
 
   let layout = "grid"
   let modal
@@ -32,42 +35,47 @@
     modal.show()
   }
 
-  onMount(checkKeys)
+  onMount(() => {
+    checkKeys()
+    apps.load()
+  })
 </script>
 
-<Layout noPadding>
-  <div class="title">
-    <Heading>Apps</Heading>
-    <ButtonGroup>
-      <Button secondary on:click={initiateAppImport}>Import app</Button>
-      <Button cta on:click={modal.show}>Create new app</Button>
-    </ButtonGroup>
-  </div>
-  <div class="filter">
-    <div class="select">
-      <Select quiet placeholder="Filter by groups" />
+<Page wide>
+  <Layout noPadding>
+    <div class="title">
+      <Heading>Apps</Heading>
+      <ButtonGroup>
+        <Button secondary on:click={initiateAppImport}>Import app</Button>
+        <Button cta on:click={modal.show}>Create new app</Button>
+      </ButtonGroup>
     </div>
-    <ActionGroup>
-      <ActionButton
-        on:click={() => (layout = "grid")}
-        selected={layout === "grid"}
-        quiet
-        icon="ClassicGridView"
-      />
-      <ActionButton
-        on:click={() => (layout = "table")}
-        selected={layout === "table"}
-        quiet
-        icon="ViewRow"
-      />
-    </ActionGroup>
-  </div>
-  {#if layout === "grid"}
-    <AppList />
-  {:else}
-    Table view.
-  {/if}
-</Layout>
+    <div class="filter">
+      <div class="select">
+        <Select quiet placeholder="Filter by groups" />
+      </div>
+      <ActionGroup>
+        <ActionButton
+          on:click={() => (layout = "grid")}
+          selected={layout === "grid"}
+          quiet
+          icon="ClassicGridView"
+        />
+        <ActionButton
+          on:click={() => (layout = "table")}
+          selected={layout === "table"}
+          quiet
+          icon="ViewRow"
+        />
+      </ActionGroup>
+    </div>
+    {#if layout === "grid"}
+      <AppGridView />
+    {:else}
+      <AppTableView />
+    {/if}
+  </Layout>
+</Page>
 <Modal
   bind:this={modal}
   padding={false}
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 6450807f7e..db214f1e2a 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -1194,10 +1194,10 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@roxi/routify@2.15.1":
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/@roxi/routify/-/routify-2.15.1.tgz#cbd5eafedfee7f04b154173dccd7474c177acb4f"
-  integrity sha512-IRdoaPSfP09EwWtB+tpbHgH6ejYtowale24rgfpxRQhFNyTUK4jYXclvx3XkUD1NSupSgl1kDAsWSiRSG0WvkQ==
+"@roxi/routify@2.18.0":
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/@roxi/routify/-/routify-2.18.0.tgz#8f88bedd936312d0dbe44cbc11ab179b1f938ec2"
+  integrity sha512-MVB50HN+VQWLzfjLplcBjsSBvwOiExKOmht2DuWR3WQ60JxQi9pSejkB06tFVkFKNXz2X5iYtKDqKBTdae/gRg==
   dependencies:
     "@roxi/ssr" "^0.2.1"
     "@types/node" ">=4.2.0 < 13"
diff --git a/packages/client/package.json b/packages/client/package.json
index a34835eccf..b96c20a2f2 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -38,7 +38,7 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.37.0"
+    "svelte": "^3.38.2"
   },
   "gitHead": "4b6efc42ed3273595c7a129411f4d883733d3321"
 }
diff --git a/packages/server/package.json b/packages/server/package.json
index 62e4c50d71..ed77be004d 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -127,7 +127,7 @@
     "pouchdb-replication-stream": "1.2.9",
     "sanitize-s3-objectkey": "0.0.1",
     "server-destroy": "1.0.1",
-    "svelte": "3.30.0",
+    "svelte": "^3.38.2",
     "tar-fs": "2.1.0",
     "to-json-schema": "0.2.5",
     "uuid": "3.3.2",
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 28084e86e3..e8f7c53e30 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -8767,10 +8767,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte@3.30.0:
-  version "3.30.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
-  integrity sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag==
+svelte@^3.38.2:
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 symbol-tree@^3.2.2:
   version "3.2.4"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index d3030d590d..48c966f558 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -23,7 +23,7 @@
   ],
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
-    "svelte": "^3.37.0",
+    "svelte": "^3.38.2",
     "vite": "^2.1.5"
   },
   "keywords": [

From 5d4d3f19495da64d057a763810b4c6b53f01bb77 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 7 May 2021 11:14:57 +0100
Subject: [PATCH 02/24] Bump deps

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 171f9510f3..ad1ff80b38 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-replace": "^2.2.0",
-    "svelte": "^3.37.0"
+    "svelte": "^3.38.2"
   },
   "scripts": {
     "bootstrap": "lerna link && lerna bootstrap",

From 8aaeac764bd3ea5810deae0bcf920e4b9ebdca94 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 7 May 2021 13:13:24 +0100
Subject: [PATCH 03/24] Use local transitions in modal to avoid issues with
 component unmounting when navigating away

---
 packages/bbui/src/Modal/Modal.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index adc726a7ab..f1a51d0ea1 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -49,7 +49,7 @@
   <Portal target=".modal-container">
     <div
       class="spectrum-Underlay is-open"
-      transition:fade={{ duration: 200 }}
+      transition:fade|local={{ duration: 200 }}
       on:mousedown|self={hide}
     >
       <div class="modal-wrapper" on:mousedown|self={hide}>
@@ -57,7 +57,7 @@
           <div
             use:focusFirstInput
             class="spectrum-Modal is-open"
-            transition:fly={{ y: 30, duration: 200 }}
+            transition:fly|local={{ y: 30, duration: 200 }}
           >
             <slot />
           </div>

From 010fc955d783c2bb4a006ade5959eb2a7571aad1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 7 May 2021 13:13:34 +0100
Subject: [PATCH 04/24] Update default gradients slightly

---
 packages/builder/src/actions.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/actions.js b/packages/builder/src/actions.js
index f465513f21..cb5f61bd9c 100644
--- a/packages/builder/src/actions.js
+++ b/packages/builder/src/actions.js
@@ -2,8 +2,8 @@ export const gradient = (node, config = {}) => {
   const defaultConfig = {
     points: 10,
     saturation: 0.8,
-    lightness: 0.75,
-    softness: 0.8,
+    lightness: 0.7,
+    softness: 0.9,
   }
 
   // Applies a gradient background

From 35b9ab353ea4677326032400231bc4a9e530829a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 7 May 2021 13:13:51 +0100
Subject: [PATCH 05/24] Add table app list view

---
 .../src/components/start/AppCard.svelte       |  29 ++---
 .../src/components/start/AppGridView.svelte   |   6 +-
 .../src/components/start/AppTableView.svelte  | 100 ++++++++++++++++--
 .../components/start/CreateAppModal.svelte    |   3 +-
 .../pages/builder/portal/apps/index.svelte    |  24 ++++-
 5 files changed, 123 insertions(+), 39 deletions(-)

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 9a14efd81b..de01c125d6 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -7,43 +7,28 @@
     ActionMenu,
     MenuItem,
     Link,
-    notifications,
   } from "@budibase/bbui"
-  import download from "downloadjs"
   import { gradient } from "actions"
+  import { url } from "@roxi/routify"
 
-  export let name
-  export let _id
+  export let app
+  export let exportApp
 
   let appExportLoading = false
-
-  async function exportApp() {
-    appExportLoading = true
-    try {
-      download(
-        `/api/backups/export?appId=${_id}&appname=${encodeURIComponent(name)}`
-      )
-      notifications.success("App export complete")
-    } catch (err) {
-      console.error(err)
-      notifications.error("App export failed")
-    } finally {
-      appExportLoading = false
-    }
-  }
 </script>
 
 <Layout noPadding gap="XS">
   <div class="preview" use:gradient />
   <div class="title">
-    <Link href={`/builder/app/${_id}`}>
+    <Link href={$url(`../../app/${app._id}`)}>
       <Heading size="XS">
-        {name}
+        {app.name}
       </Heading>
     </Link>
     <ActionMenu>
       <Icon slot="control" name="More" hoverable />
-      <MenuItem on:click={exportApp} icon="Download">Export</MenuItem>
+      <MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem
+      >
     </ActionMenu>
   </div>
   <div class="status">
diff --git a/packages/builder/src/components/start/AppGridView.svelte b/packages/builder/src/components/start/AppGridView.svelte
index 947477b03e..c6267e4369 100644
--- a/packages/builder/src/components/start/AppGridView.svelte
+++ b/packages/builder/src/components/start/AppGridView.svelte
@@ -1,16 +1,16 @@
 <script>
   import AppCard from "./AppCard.svelte"
   import { apps } from "stores/portal"
+
+  export let exportApp
 </script>
 
 {#if $apps.length}
   <div class="appList">
     {#each $apps as app}
-      <AppCard {...app} />
+      <AppCard {exportApp} {app} />
     {/each}
   </div>
-{:else}
-  <div>No apps found.</div>
 {/if}
 
 <style>
diff --git a/packages/builder/src/components/start/AppTableView.svelte b/packages/builder/src/components/start/AppTableView.svelte
index 0886f3e1eb..57ab1f00e6 100644
--- a/packages/builder/src/components/start/AppTableView.svelte
+++ b/packages/builder/src/components/start/AppTableView.svelte
@@ -1,23 +1,105 @@
 <script>
-  import AppCard from "./AppCard.svelte"
   import { apps } from "stores/portal"
-  import { Table } from "@budibase/bbui"
+  import { gradient } from "actions"
+  import {
+    Heading,
+    Button,
+    Icon,
+    ActionMenu,
+    MenuItem,
+    Link,
+  } from "@budibase/bbui"
+  import { goto, url } from "@roxi/routify"
+
+  export let exportApp
+
+  const openApp = app => {
+    $goto(`../../app/${app._id}`)
+  }
 </script>
 
 {#if $apps.length}
-  <div class="appList">
+  <div class="appTable">
     {#each $apps as app}
-      <AppCard {...app} />
+      <div class="title">
+        <div class="preview" use:gradient />
+        <Link href={$url(`../../app/${app._id}`)}>
+          <Heading size="XS">
+            {app.name}
+          </Heading>
+        </Link>
+      </div>
+      <div>
+        Edited {Math.round(Math.random() * 10 + 1)} months ago
+      </div>
+      <div>
+        {#if Math.random() < 0.33}
+          <div class="status status--open" />
+          Open
+        {:else if Math.random() < 0.33}
+          <div class="status status--locked-other" />
+          Locked by Will Wheaton
+        {:else}
+          <div class="status status--locked-you" />
+          Locked by you
+        {/if}
+      </div>
+      <div class="actions">
+        <Button on:click={() => openApp(app)} size="S" secondary>Open</Button>
+        <ActionMenu align="right">
+          <Icon hoverable slot="control" name="More" />
+          <MenuItem on:click={() => exportApp(app)} icon="Download">
+            Export
+          </MenuItem>
+        </ActionMenu>
+      </div>
     {/each}
   </div>
-{:else}
-  <div>No apps found.</div>
 {/if}
 
 <style>
-  .appList {
+  .appTable {
     display: grid;
-    grid-gap: 50px;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr 1fr auto;
+    align-items: center;
+  }
+  .appTable > div {
+    border-bottom: var(--border-light);
+    height: 70px;
+    display: grid;
+    align-items: center;
+    gap: var(--spacing-xl);
+    grid-template-columns: auto 1fr;
+  }
+  .preview {
+    height: 40px;
+    width: 40px;
+    border-radius: var(--border-radius-s);
+  }
+  .title :global(a) {
+    text-decoration: none;
+  }
+  .title :global(h1:hover) {
+    color: var(--spectrum-global-color-blue-600);
+    cursor: pointer;
+    transition: color 130ms ease;
+  }
+  .status {
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+  }
+  .status--locked-you {
+    background-color: var(--spectrum-global-color-orange-600);
+  }
+  .status--locked-other {
+    background-color: var(--spectrum-global-color-red-600);
+  }
+  .status--open {
+    background-color: var(--spectrum-global-color-green-600);
+  }
+  .actions {
+    padding-right: 10px;
   }
 </style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index fcfea2d8cf..32774ff33c 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -13,6 +13,7 @@
   import { onMount } from "svelte"
   import Logo from "/assets/bb-logo.svg"
   import { capitalise } from "../../helpers"
+  import { goto } from "@roxi/routify"
 
   export let template
 
@@ -111,7 +112,7 @@
       }
       const userResp = await api.post(`/api/users/metadata/self`, user)
       await userResp.json()
-      window.location = `/builder/app/${appJson._id}`
+      $goto(`/builder/app/${appJson._id}`)
     } catch (error) {
       console.error(error)
       notifications.error(error)
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 09b179bdf1..b95e8bf5d2 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -9,6 +9,7 @@
     Select,
     Modal,
     Page,
+    notifications,
   } from "@budibase/bbui"
   import AppGridView from "components/start/AppGridView.svelte"
   import AppTableView from "components/start/AppTableView.svelte"
@@ -17,12 +18,13 @@
   import analytics from "analytics"
   import { onMount } from "svelte"
   import { apps } from "stores/portal"
+  import download from "downloadjs"
 
   let layout = "grid"
   let modal
   let template
 
-  async function checkKeys() {
+  const checkKeys = async () => {
     const response = await api.get(`/api/keys/`)
     const keys = await response.json()
     if (keys.userId) {
@@ -30,11 +32,25 @@
     }
   }
 
-  function initiateAppImport() {
+  const initiateAppImport = () => {
     template = { fromFile: true }
     modal.show()
   }
 
+  const exportApp = app => {
+    try {
+      download(
+        `/api/backups/export?appId=${app._id}&appname=${encodeURIComponent(
+          app.name
+        )}`
+      )
+      notifications.success("App export complete")
+    } catch (err) {
+      console.error(err)
+      notifications.error("App export failed")
+    }
+  }
+
   onMount(() => {
     checkKeys()
     apps.load()
@@ -70,9 +86,9 @@
       </ActionGroup>
     </div>
     {#if layout === "grid"}
-      <AppGridView />
+      <AppGridView {exportApp} />
     {:else}
-      <AppTableView />
+      <AppTableView {exportApp} />
     {/if}
   </Layout>
 </Page>

From be28fc2fb86aafc5d28880069e414480f5047650 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 7 May 2021 13:17:49 +0100
Subject: [PATCH 06/24] Add small horiztonal padding to app list table view to
 improve text overflow

---
 .../builder/src/components/start/AppTableView.svelte     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/start/AppTableView.svelte b/packages/builder/src/components/start/AppTableView.svelte
index 57ab1f00e6..1d4097efb8 100644
--- a/packages/builder/src/components/start/AppTableView.svelte
+++ b/packages/builder/src/components/start/AppTableView.svelte
@@ -44,7 +44,7 @@
           Locked by you
         {/if}
       </div>
-      <div class="actions">
+      <div>
         <Button on:click={() => openApp(app)} size="S" secondary>Open</Button>
         <ActionMenu align="right">
           <Icon hoverable slot="control" name="More" />
@@ -71,6 +71,10 @@
     align-items: center;
     gap: var(--spacing-xl);
     grid-template-columns: auto 1fr;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 5px;
   }
   .preview {
     height: 40px;
@@ -99,7 +103,4 @@
   .status--open {
     background-color: var(--spectrum-global-color-green-600);
   }
-  .actions {
-    padding-right: 10px;
-  }
 </style>

From b5dade2d501faa8e04aee84ed1dcefe217070278 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 7 May 2021 13:29:05 +0100
Subject: [PATCH 07/24] Handle long app names correctly in app grid view

---
 packages/bbui/src/Layout/Layout.svelte        |  2 +
 .../src/components/start/AppCard.svelte       | 61 ++++++++++++-------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte
index bf697f8499..acd064a16a 100644
--- a/packages/bbui/src/Layout/Layout.svelte
+++ b/packages/bbui/src/Layout/Layout.svelte
@@ -5,9 +5,11 @@
   export let noPadding = false
   export let gap = "M"
   export let noGap = false
+  export let alignContent = "normal"
 </script>
 
 <div
+  style="align-content:{alignContent};"
   class:horizontal
   class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
     paddingY} gap-{!noGap && gap}"
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index de01c125d6..0d8d6a1d83 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -17,31 +17,37 @@
   let appExportLoading = false
 </script>
 
-<Layout noPadding gap="XS">
-  <div class="preview" use:gradient />
-  <div class="title">
-    <Link href={$url(`../../app/${app._id}`)}>
-      <Heading size="XS">
-        {app.name}
-      </Heading>
-    </Link>
-    <ActionMenu>
-      <Icon slot="control" name="More" hoverable />
-      <MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem
-      >
-    </ActionMenu>
-  </div>
-  <div class="status">
-    <Body noPadding size="S">
-      Edited {Math.floor(1 + Math.random() * 10)} months ago
-    </Body>
-    {#if Math.random() > 0.5}
-      <Icon name="LockClosed" />
-    {/if}
-  </div>
-</Layout>
+<div class="wrapper">
+  <Layout noPadding gap="XS" alignContent="start">
+    <div class="preview" use:gradient />
+    <div class="title">
+      <Link href={$url(`../../app/${app._id}`)}>
+        <Heading size="XS">
+          {app.name}
+        </Heading>
+      </Link>
+      <ActionMenu align="right">
+        <Icon slot="control" name="More" hoverable />
+        <MenuItem on:click={() => exportApp(app)} icon="Download"
+          >Export</MenuItem
+        >
+      </ActionMenu>
+    </div>
+    <div class="status">
+      <Body noPadding size="S">
+        Edited {Math.floor(1 + Math.random() * 10)} months ago
+      </Body>
+      {#if Math.random() > 0.5}
+        <Icon name="LockClosed" />
+      {/if}
+    </div>
+  </Layout>
+</div>
 
 <style>
+  .wrapper {
+    overflow: hidden;
+  }
   .preview {
     height: 135px;
     border-radius: var(--border-radius-s);
@@ -58,6 +64,15 @@
 
   .title :global(a) {
     text-decoration: none;
+    flex: 1 1 auto;
+    width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: var(--spacing-m);
+  }
+  .title :global(h1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .title :global(h1:hover) {
     color: var(--spectrum-global-color-blue-600);

From f1b2fea3c035a2e49d44f00aa8dac77ab27720ce Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 7 May 2021 13:44:53 +0100
Subject: [PATCH 08/24] Adjust padding in app list table view

---
 packages/builder/src/components/start/AppTableView.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/start/AppTableView.svelte b/packages/builder/src/components/start/AppTableView.svelte
index 1d4097efb8..f83399154c 100644
--- a/packages/builder/src/components/start/AppTableView.svelte
+++ b/packages/builder/src/components/start/AppTableView.svelte
@@ -74,7 +74,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: 0 5px;
+    padding: 0 var(--spacing-s);
   }
   .preview {
     height: 40px;

From df607e78eb947645227e5c73173f124ce9958659 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 11:53:32 +0100
Subject: [PATCH 09/24] Add non-gallery option to dropzeon and update create
 app modal

---
 packages/bbui/src/Form/Core/Dropzone.svelte   |  97 +++---
 packages/bbui/src/Form/Core/TextField.svelte  |   1 +
 packages/bbui/src/Form/Dropzone.svelte        |   2 +
 packages/bbui/src/Form/Input.svelte           |   1 +
 packages/bbui/src/Layout/Page.svelte          |   3 +-
 .../components/start/CreateAppModal.svelte    | 289 ++++++++----------
 .../pages/builder/portal/apps/index.svelte    |  10 +-
 7 files changed, 202 insertions(+), 201 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 9dd2cbbc73..5b5c72b809 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -15,6 +15,8 @@
   export let fileSizeLimit = BYTES_IN_MB * 20
   export let processFiles = null
   export let handleFileTooLarge = null
+  export let gallery = true
+  export let error = null
 
   const dispatch = createEventDispatcher()
   const imageExtensions = [
@@ -52,6 +54,8 @@
       const newValue = [...value, ...processedFiles]
       dispatch("change", newValue)
       selectedImageIdx = newValue.length - 1
+    } else {
+      dispatch("change", fileList)
     }
   }
 
@@ -94,47 +98,68 @@
 
 <div class="container">
   {#if selectedImage}
-    <div class="gallery">
-      <div class="title">
-        <div class="filename">{selectedImage.name}</div>
-        <div class="filesize">
-          {#if selectedImage.size <= BYTES_IN_MB}
-            {`${selectedImage.size / BYTES_IN_KB} KB`}
-          {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
+    {#if gallery}
+      <div class="gallery">
+        <div class="title">
+          <div class="filename">{selectedImage.name}</div>
+          <div class="filesize">
+            {#if selectedImage.size <= BYTES_IN_MB}
+              {`${selectedImage.size / BYTES_IN_KB} KB`}
+            {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
+          </div>
+          {#if !disabled}
+            <div class="delete-button" on:click={removeFile}>
+              <Icon name="Close" />
+            </div>
+          {/if}
         </div>
-        {#if !disabled}
-          <div class="delete-button" on:click={removeFile}>
-            <Icon name="Close" />
+        {#if isImage}
+          <img alt="preview" src={selectedImage.url} />
+        {:else}
+          <div class="placeholder">
+            <div class="extension">{selectedImage.extension}</div>
+            <div>Preview not supported</div>
           </div>
         {/if}
-      </div>
-      {#if isImage}
-        <img alt="preview" src={selectedImage.url} />
-      {:else}
-        <div class="placeholder">
-          <div class="extension">{selectedImage.extension}</div>
-          <div>Preview not supported</div>
+        <div
+          class="nav left"
+          class:visible={selectedImageIdx > 0}
+          on:click={navigateLeft}
+        >
+          <Icon name="ChevronLeft" />
         </div>
-      {/if}
-      <div
-        class="nav left"
-        class:visible={selectedImageIdx > 0}
-        on:click={navigateLeft}
-      >
-        <Icon name="ChevronLeft" />
+        <div
+          class="nav right"
+          class:visible={selectedImageIdx < fileCount - 1}
+          on:click={navigateRight}
+        >
+          <Icon name="ChevronRight" />
+        </div>
+        <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
       </div>
-      <div
-        class="nav right"
-        class:visible={selectedImageIdx < fileCount - 1}
-        on:click={navigateRight}
-      >
-        <Icon name="ChevronRight" />
-      </div>
-      <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
-    </div>
+    {:else if value?.length}
+      {#each value as file}
+        <div class="gallery">
+          <div class="title">
+            <div class="filename">{file.name}</div>
+            <div class="filesize">
+              {#if file.size <= BYTES_IN_MB}
+                {`${file.size / BYTES_IN_KB} KB`}
+              {:else}{`${file.size / BYTES_IN_MB} MB`}{/if}
+            </div>
+            {#if !disabled}
+              <div class="delete-button" on:click={removeFile}>
+                <Icon name="Close" />
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    {/if}
   {/if}
   <div
     class="spectrum-Dropzone"
+    class:is-invalid={!!error}
     class:disabled
     role="region"
     tabindex="0"
@@ -245,6 +270,9 @@
   .spectrum-Dropzone {
     user-select: none;
   }
+  .spectrum-Dropzone.is-invalid {
+    border-color: var(--spectrum-global-color-red-400);
+  }
   input[type="file"] {
     display: none;
   }
@@ -276,7 +304,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: stretch;
+    align-items: center;
   }
   .filename {
     flex: 1 1 auto;
@@ -331,6 +359,7 @@
   .delete-button {
     transition: all 0.3s;
     margin-left: 10px;
+    display: flex;
   }
   .delete-button i {
     font-size: 2em;
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 18b9a6fe8a..1cf37f3468 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -37,6 +37,7 @@
     }
     focus = false
     updateValue(event.target.value)
+    dispatch("blur")
   }
 
   const updateValueOnEnter = event => {
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
index c8400ecc6a..76bcfd9db3 100644
--- a/packages/bbui/src/Form/Dropzone.svelte
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -11,6 +11,7 @@
   export let fileSizeLimit = undefined
   export let processFiles = undefined
   export let handleFileTooLarge = undefined
+  export let gallery = true
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -27,6 +28,7 @@
     {fileSizeLimit}
     {processFiles}
     {handleFileTooLarge}
+    {gallery}
     on:change={onChange}
   />
 </Field>
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index a768f16681..327fefa32c 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -30,5 +30,6 @@
     on:change={onChange}
     on:click
     on:input
+    on:blur
   />
 </Field>
diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
index d8c8cbfce4..f820364d0e 100644
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -18,6 +18,7 @@
   .wide {
     max-width: none;
     margin: 0;
-    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
+    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2)
+      calc(var(--spacing-xl) * 2) calc(var(--spacing-xl) * 2);
   }
 </style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 32774ff33c..97f63c77b2 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,58 +1,50 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Heading, Button } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Dropzone,
+    Body,
+    Checkbox,
+  } from "@budibase/bbui"
   import { store, automationStore, hostingStore } from "builderStore"
-  import { string, object } from "yup"
+  import { string, mixed, object } from "yup"
   import api, { get } from "builderStore/api"
-  import Spinner from "components/common/Spinner.svelte"
-  import { Info, User } from "./Steps"
-  import Indicator from "./Indicator.svelte"
-  import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
   import { onMount } from "svelte"
-  import Logo from "/assets/bb-logo.svg"
   import { capitalise } from "../../helpers"
   import { goto } from "@roxi/routify"
 
   export let template
 
-  const currentStep = writable(0)
-  const values = writable({ roleId: "ADMIN" })
+  const values = writable({ name: null })
   const errors = writable({})
   const touched = writable({})
-  const steps = [Info, User]
-  let validators = [
-    {
-      applicationName: string().required("Your application must have a name"),
-    },
-    {
-      roleId: string()
-        .nullable()
-        .required("You need to select a role for this app"),
-    },
-  ]
+  const validator = {
+    name: string().required("Your application must have a name"),
+    file: mixed().required("Please choose a file to import"),
+  }
 
   let submitting = false
   let valid = false
-  $: checkValidity($values, validators[$currentStep])
+  $: checkValidity($values, validator)
 
   onMount(async () => {
-    const hostingInfo = await hostingStore.actions.fetch()
-    if (hostingInfo.type === "self") {
-      await hostingStore.actions.fetchDeployedApps()
-      const existingAppNames = svelteGet(hostingStore).deployedAppNames
-      validators[0].applicationName = string()
-        .required("Your application must have a name.")
-        .test(
-          "non-existing-app-name",
-          "App with same name already exists. Please try another app name.",
-          value =>
-            !existingAppNames.some(
-              appName => appName.toLowerCase() === value.toLowerCase()
-            )
-        )
-    }
+    await hostingStore.actions.fetchDeployedApps()
+    const existingAppNames = svelteGet(hostingStore).deployedAppNames
+    validator.name = string()
+      .required("Your application must have a name")
+      .test(
+        "non-existing-app-name",
+        "Another app with the same name already exists",
+        value => {
+          return !existingAppNames.some(
+            appName => appName.toLowerCase() === value.toLowerCase()
+          )
+        }
+      )
   })
 
   const checkValidity = async (values, validator) => {
@@ -70,15 +62,24 @@
 
   async function createNewApp() {
     submitting = true
+
+    // Check a template exists if we are important
+    if (template && !$values.file) {
+      $errors.file = "Please choose a file to import"
+      valid = false
+      submitting = false
+      return false
+    }
+
     try {
       // Create form data to create app
       let data = new FormData()
-      data.append("name", $values.applicationName)
+      data.append("name", $values.name)
       data.append("useTemplate", template != null)
       if (template) {
         data.append("templateName", template.name)
         data.append("templateKey", template.key)
-        data.append("templateFile", template.file)
+        data.append("templateFile", $values.file)
       }
 
       // Create App
@@ -89,7 +90,7 @@
       }
 
       analytics.captureEvent("App Created", {
-        name: $values.applicationName,
+        name: $values.name,
         appId: appJson._id,
         template,
       })
@@ -121,129 +122,91 @@
   }
 </script>
 
-<div class="container">
-  <div class="sidebar">
-    <img src={Logo} alt="budibase icon" />
-    <div class="steps">
-      {#each steps as component, i}
-        <Indicator
-          active={$currentStep === i}
-          done={i < $currentStep}
-          step={i + 1}
-        />
-      {/each}
-    </div>
-  </div>
-  <div class="body">
-    <div class="heading">
-      <Heading size="L">Get started with Budibase</Heading>
-    </div>
-    <div class="step">
-      {#each steps as component, i (i)}
-        <div class:hidden={$currentStep !== i}>
-          <svelte:component
-            this={component}
-            {template}
-            {values}
-            {errors}
-            {touched}
-          />
-        </div>
-      {/each}
-    </div>
-    <div class="footer">
-      {#if $currentStep > 0}
-        <Button medium secondary on:click={() => $currentStep--}>Back</Button>
-      {/if}
-      {#if $currentStep < steps.length - 1}
-        <Button medium cta on:click={() => $currentStep++} disabled={!valid}>
-          Next
-        </Button>
-      {/if}
-      {#if $currentStep === steps.length - 1}
-        <Button
-          medium
-          cta
-          on:click={createNewApp}
-          disabled={!valid || submitting}
-        >
-          {submitting ? "Loading..." : "Submit"}
-        </Button>
-      {/if}
-    </div>
-  </div>
-  {#if submitting}
-    <div in:fade class="spinner-container">
-      <Spinner />
-      <span class="spinner-text">Creating your app...</span>
-    </div>
+<ModalContent
+  title={template ? "Import app" : "Create new app"}
+  confirmText={template ? "Import app" : "Create app"}
+  onConfirm={createNewApp}
+  disabled={!valid}
+>
+  {#if template}
+    <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}
-</div>
+  <Body size="S">
+    Give your new app a name, and choose which groups have access (paid plans
+    only).
+  </Body>
+  <Input
+    bind:value={$values.name}
+    error={$touched.name && $errors.name}
+    on:blur={() => ($touched.name = true)}
+    label="Name"
+  />
+  <Checkbox label="Group access" disabled value={true} text="All users" />
+</ModalContent>
 
-<style>
-  .container {
-    min-height: 600px;
-    display: grid;
-    grid-template-columns: 80px 1fr;
-    position: relative;
-  }
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    padding: 40px 0;
-    background: var(--grey-1);
-  }
-  .steps {
-    flex: 1 1 auto;
-    display: grid;
-    border-bottom-left-radius: 0.5rem;
-    border-top-left-radius: 0.5rem;
-    grid-gap: 30px;
-    align-content: center;
-  }
-  .heading {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-  .body {
-    padding: 40px 60px 40px 60px;
-    display: grid;
-    align-items: center;
-    grid-template-rows: auto 1fr auto;
-  }
-  .footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 15px;
-  }
-  .spinner-container {
-    background: var(--background);
-    position: absolute;
-    border-radius: 5px;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: grid;
-    justify-items: center;
-    align-content: center;
-    grid-gap: 50px;
-  }
-  .spinner-text {
-    font-size: 2em;
-  }
-
-  .hidden {
-    display: none;
-  }
-  img {
-    height: 40px;
-    margin-bottom: 20px;
-  }
-</style>
+<!--<div class="container">-->
+<!--  <div class="sidebar">-->
+<!--    <img src={Logo} alt="budibase icon" />-->
+<!--    <div class="steps">-->
+<!--      {#each steps as component, i}-->
+<!--        <Indicator-->
+<!--          active={$currentStep === i}-->
+<!--          done={i < $currentStep}-->
+<!--          step={i + 1}-->
+<!--        />-->
+<!--      {/each}-->
+<!--    </div>-->
+<!--  </div>-->
+<!--  <div class="body">-->
+<!--    <div class="heading">-->
+<!--      <Heading size="L">Get started with Budibase</Heading>-->
+<!--    </div>-->
+<!--    <div class="step">-->
+<!--      {#each steps as component, i (i)}-->
+<!--        <div class:hidden={$currentStep !== i}>-->
+<!--          <svelte:component-->
+<!--            this={component}-->
+<!--            {template}-->
+<!--            {values}-->
+<!--            {errors}-->
+<!--            {touched}-->
+<!--          />-->
+<!--        </div>-->
+<!--      {/each}-->
+<!--    </div>-->
+<!--    <div class="footer">-->
+<!--      {#if $currentStep > 0}-->
+<!--        <Button medium secondary on:click={() => $currentStep&#45;&#45;}>Back</Button>-->
+<!--      {/if}-->
+<!--      {#if $currentStep < steps.length - 1}-->
+<!--        <Button medium cta on:click={() => $currentStep++} disabled={!valid}>-->
+<!--          Next-->
+<!--        </Button>-->
+<!--      {/if}-->
+<!--      {#if $currentStep === steps.length - 1}-->
+<!--        <Button-->
+<!--          medium-->
+<!--          cta-->
+<!--          on:click={createNewApp}-->
+<!--          disabled={!valid || submitting}-->
+<!--        >-->
+<!--          {submitting ? "Loading..." : "Submit"}-->
+<!--        </Button>-->
+<!--      {/if}-->
+<!--    </div>-->
+<!--  </div>-->
+<!--  {#if submitting}-->
+<!--    <div in:fade class="spinner-container">-->
+<!--      <Spinner />-->
+<!--      <span class="spinner-text">Creating your app...</span>-->
+<!--    </div>-->
+<!--  {/if}-->
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index b95e8bf5d2..ee9e4b6c22 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -85,10 +85,14 @@
         />
       </ActionGroup>
     </div>
-    {#if layout === "grid"}
-      <AppGridView {exportApp} />
+    {#if $apps.length}
+      {#if layout === "grid"}
+        <AppGridView {exportApp} />
+      {:else}
+        <AppTableView {exportApp} />
+      {/if}
     {:else}
-      <AppTableView {exportApp} />
+      <div>No apps.</div>
     {/if}
   </Layout>
 </Page>

From 0b1b4d2aae548c6f490d61c24e52aec7332f9bdd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 12:28:54 +0100
Subject: [PATCH 10/24] Simplify app layout and add option to delete apps

---
 .../components/common/ConfirmDialog.svelte    |   9 +-
 .../src/components/start/AppCard.svelte       |  12 +-
 .../src/components/start/AppGridView.svelte   |  22 ----
 .../src/components/start/AppRow.svelte        |  80 ++++++++++++
 .../src/components/start/AppTableView.svelte  | 106 ---------------
 .../components/start/CreateAppModal.svelte    |   2 +-
 .../src/components/start/Indicator.svelte     |  83 ------------
 .../src/components/start/Steps/Info.svelte    | 121 ------------------
 .../src/components/start/Steps/User.svelte    |  29 -----
 .../src/components/start/Steps/index.js       |   2 -
 .../pages/builder/portal/apps/index.svelte    |  90 +++++++++++--
 11 files changed, 174 insertions(+), 382 deletions(-)
 delete mode 100644 packages/builder/src/components/start/AppGridView.svelte
 create mode 100644 packages/builder/src/components/start/AppRow.svelte
 delete mode 100644 packages/builder/src/components/start/AppTableView.svelte
 delete mode 100644 packages/builder/src/components/start/Indicator.svelte
 delete mode 100644 packages/builder/src/components/start/Steps/Info.svelte
 delete mode 100644 packages/builder/src/components/start/Steps/User.svelte
 delete mode 100644 packages/builder/src/components/start/Steps/index.js

diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 33a1d86b88..cf2bf989b9 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -7,6 +7,7 @@
   export let cancelText = "Cancel"
   export let onOk = undefined
   export let onCancel = undefined
+  export let warning = true
 
   let modal
 
@@ -19,7 +20,13 @@
 </script>
 
 <Modal bind:this={modal} on:hide={onCancel}>
-  <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
+  <ModalContent
+    onConfirm={onOk}
+    {title}
+    confirmText={okText}
+    {cancelText}
+    {warning}
+  >
     <Body size="S">
       {body}
       <slot />
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 0d8d6a1d83..b19416e0f3 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -13,8 +13,7 @@
 
   export let app
   export let exportApp
-
-  let appExportLoading = false
+  export let deleteApp
 </script>
 
 <div class="wrapper">
@@ -28,9 +27,12 @@
       </Link>
       <ActionMenu align="right">
         <Icon slot="control" name="More" hoverable />
-        <MenuItem on:click={() => exportApp(app)} icon="Download"
-          >Export</MenuItem
-        >
+        <MenuItem on:click={() => exportApp(app)} icon="Download">
+          Export
+        </MenuItem>
+        <MenuItem on:click={() => deleteApp(app)} icon="Delete">
+          Delete
+        </MenuItem>
       </ActionMenu>
     </div>
     <div class="status">
diff --git a/packages/builder/src/components/start/AppGridView.svelte b/packages/builder/src/components/start/AppGridView.svelte
deleted file mode 100644
index c6267e4369..0000000000
--- a/packages/builder/src/components/start/AppGridView.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import AppCard from "./AppCard.svelte"
-  import { apps } from "stores/portal"
-
-  export let exportApp
-</script>
-
-{#if $apps.length}
-  <div class="appList">
-    {#each $apps as app}
-      <AppCard {exportApp} {app} />
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .appList {
-    display: grid;
-    grid-gap: 50px;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  }
-</style>
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
new file mode 100644
index 0000000000..78fc3d25df
--- /dev/null
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -0,0 +1,80 @@
+<script>
+  import { gradient } from "actions"
+  import {
+    Heading,
+    Button,
+    Icon,
+    ActionMenu,
+    MenuItem,
+    Link,
+  } from "@budibase/bbui"
+  import { url } from "@roxi/routify"
+
+  export let app
+  export let openApp
+  export let exportApp
+  export let deleteApp
+  export let last
+</script>
+
+<div class="title" class:last>
+  <div class="preview" use:gradient />
+  <Link href={$url(`../../app/${app._id}`)}>
+    <Heading size="XS">
+      {app.name}
+    </Heading>
+  </Link>
+</div>
+<div class:last>
+  Edited {Math.round(Math.random() * 10 + 1)} months ago
+</div>
+<div class:last>
+  {#if Math.random() < 0.33}
+    <div class="status status--open" />
+    Open
+  {:else if Math.random() < 0.33}
+    <div class="status status--locked-other" />
+    Locked by Will Wheaton
+  {:else}
+    <div class="status status--locked-you" />
+    Locked by you
+  {/if}
+</div>
+<div class:last>
+  <Button on:click={() => openApp(app)} size="S" secondary>Open</Button>
+  <ActionMenu align="right">
+    <Icon hoverable slot="control" name="More" />
+    <MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem>
+    <MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
+  </ActionMenu>
+</div>
+
+<style>
+  .preview {
+    height: 40px;
+    width: 40px;
+    border-radius: var(--border-radius-s);
+  }
+  .title :global(a) {
+    text-decoration: none;
+  }
+  .title :global(h1:hover) {
+    color: var(--spectrum-global-color-blue-600);
+    cursor: pointer;
+    transition: color 130ms ease;
+  }
+  .status {
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+  }
+  .status--locked-you {
+    background-color: var(--spectrum-global-color-orange-600);
+  }
+  .status--locked-other {
+    background-color: var(--spectrum-global-color-red-600);
+  }
+  .status--open {
+    background-color: var(--spectrum-global-color-green-600);
+  }
+</style>
diff --git a/packages/builder/src/components/start/AppTableView.svelte b/packages/builder/src/components/start/AppTableView.svelte
deleted file mode 100644
index f83399154c..0000000000
--- a/packages/builder/src/components/start/AppTableView.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-  import { apps } from "stores/portal"
-  import { gradient } from "actions"
-  import {
-    Heading,
-    Button,
-    Icon,
-    ActionMenu,
-    MenuItem,
-    Link,
-  } from "@budibase/bbui"
-  import { goto, url } from "@roxi/routify"
-
-  export let exportApp
-
-  const openApp = app => {
-    $goto(`../../app/${app._id}`)
-  }
-</script>
-
-{#if $apps.length}
-  <div class="appTable">
-    {#each $apps as app}
-      <div class="title">
-        <div class="preview" use:gradient />
-        <Link href={$url(`../../app/${app._id}`)}>
-          <Heading size="XS">
-            {app.name}
-          </Heading>
-        </Link>
-      </div>
-      <div>
-        Edited {Math.round(Math.random() * 10 + 1)} months ago
-      </div>
-      <div>
-        {#if Math.random() < 0.33}
-          <div class="status status--open" />
-          Open
-        {:else if Math.random() < 0.33}
-          <div class="status status--locked-other" />
-          Locked by Will Wheaton
-        {:else}
-          <div class="status status--locked-you" />
-          Locked by you
-        {/if}
-      </div>
-      <div>
-        <Button on:click={() => openApp(app)} size="S" secondary>Open</Button>
-        <ActionMenu align="right">
-          <Icon hoverable slot="control" name="More" />
-          <MenuItem on:click={() => exportApp(app)} icon="Download">
-            Export
-          </MenuItem>
-        </ActionMenu>
-      </div>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .appTable {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr 1fr 1fr auto;
-    align-items: center;
-  }
-  .appTable > div {
-    border-bottom: var(--border-light);
-    height: 70px;
-    display: grid;
-    align-items: center;
-    gap: var(--spacing-xl);
-    grid-template-columns: auto 1fr;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0 var(--spacing-s);
-  }
-  .preview {
-    height: 40px;
-    width: 40px;
-    border-radius: var(--border-radius-s);
-  }
-  .title :global(a) {
-    text-decoration: none;
-  }
-  .title :global(h1:hover) {
-    color: var(--spectrum-global-color-blue-600);
-    cursor: pointer;
-    transition: color 130ms ease;
-  }
-  .status {
-    height: 10px;
-    width: 10px;
-    border-radius: 50%;
-  }
-  .status--locked-you {
-    background-color: var(--spectrum-global-color-orange-600);
-  }
-  .status--locked-other {
-    background-color: var(--spectrum-global-color-red-600);
-  }
-  .status--open {
-    background-color: var(--spectrum-global-color-green-600);
-  }
-</style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 97f63c77b2..7f166b04ae 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -14,7 +14,7 @@
   import { post } from "builderStore/api"
   import analytics from "analytics"
   import { onMount } from "svelte"
-  import { capitalise } from "../../helpers"
+  import { capitalise } from "helpers"
   import { goto } from "@roxi/routify"
 
   export let template
diff --git a/packages/builder/src/components/start/Indicator.svelte b/packages/builder/src/components/start/Indicator.svelte
deleted file mode 100644
index b77d2589fd..0000000000
--- a/packages/builder/src/components/start/Indicator.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script>
-  export let step, done, active
-</script>
-
-<div class="container" class:active class:done>
-  <div class="circle" class:active class:done>
-    {#if done}
-      <svg
-        width="12"
-        height="10"
-        viewBox="0 0 12 10"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M10.1212 0.319527C10.327 0.115582 10.6047 0.000803464 10.8944
-          4.20219e-06C11.1841 -0.00079506 11.4624 0.11245 11.6693
-          0.315256C11.8762 0.518062 11.9949 0.794134 11.9998 1.08379C12.0048
-          1.37344 11.8955 1.65339 11.6957 1.86313L5.82705 9.19893C5.72619
-          9.30757 5.60445 9.39475 5.46913 9.45527C5.3338 9.51578 5.18766 9.54839
-          5.03944 9.55113C4.89123 9.55388 4.74398 9.52671 4.60651
-          9.47124C4.46903 9.41578 4.34416 9.33316 4.23934 9.22833L0.350925
-          5.33845C0.242598 5.23751 0.155712 5.11578 0.0954499 4.98054C0.0351876
-          4.84529 0.00278364 4.69929 0.00017159 4.55124C-0.00244046 4.4032
-          0.024793 4.25615 0.0802466 4.11886C0.1357 3.98157 0.218238 3.85685
-          0.322937 3.75215C0.427636 3.64746 0.55235 3.56492 0.68964
-          3.50946C0.82693 3.45401 0.973983 3.42678 1.12203 3.42939C1.27007 3.432
-          1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182
-          1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482
-          10.1122 0.329679 10.1227 0.319527H10.1212Z"
-          fill="var(--background)"
-        />
-      </svg>
-    {:else}{step}{/if}
-  </div>
-</div>
-
-<style>
-  .container::before {
-    content: "";
-    position: absolute;
-    top: -30px;
-    width: 1px;
-    height: 30px;
-    background: var(--grey-5);
-  }
-  .container:first-child::before {
-    display: none;
-  }
-  .container {
-    position: relative;
-    height: 45px;
-    display: grid;
-    place-items: center;
-  }
-  .container.active {
-    box-shadow: inset 3px 0 0 0 var(--blue);
-  }
-  .circle.active {
-    background: var(--blue);
-    color: white;
-    border: none;
-  }
-  .circle.done {
-    background: var(--grey-5);
-    color: white;
-    border: none;
-  }
-  .circle {
-    color: var(--grey-5);
-    font-size: 14px;
-    font-weight: 500;
-    display: grid;
-    place-items: center;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    border: 1px solid var(--grey-5);
-    box-sizing: border-box;
-  }
-</style>
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
deleted file mode 100644
index 42cd5e1e2f..0000000000
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script>
-  import { Label, Heading, Input, notifications } from "@budibase/bbui"
-
-  const BYTES_IN_MB = 1000000
-  const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
-
-  export let template
-  export let values
-  export let errors
-  export let touched
-
-  let blurred = { appName: false }
-  let file
-
-  function handleFile(evt) {
-    const fileArray = Array.from(evt.target.files)
-    if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
-      notifications.error(
-        `Files cannot exceed ${
-          FILE_SIZE_LIMIT / BYTES_IN_MB
-        }MB. Please try again with smaller files.`
-      )
-      return
-    }
-    file = evt.target.files[0]
-    template.file = file
-  }
-</script>
-
-<div class="container">
-  {#if template?.fromFile}
-    <Heading size="L">Import your Web App</Heading>
-  {:else}
-    <Heading size="L">Create your Web App</Heading>
-  {/if}
-  {#if template?.fromFile}
-    <div class="template">
-      <Label extraSmall grey>Import File</Label>
-      <div class="dropzone">
-        <input
-          id="file-upload"
-          accept=".txt"
-          type="file"
-          on:change={handleFile}
-        />
-        <label for="file-upload" class:uploaded={file}>
-          {#if file}{file.name}{:else}Import{/if}
-        </label>
-      </div>
-    </div>
-  {:else if template}
-    <div class="template">
-      <Label extraSmall grey>Selected Template</Label>
-      <Heading size="S">{template.name}</Heading>
-    </div>
-  {/if}
-  <Input
-    on:change={() => ($touched.applicationName = true)}
-    bind:value={$values.applicationName}
-    label="Web App Name"
-    placeholder="Enter name of your web application"
-    error={$touched.applicationName && $errors.applicationName}
-  />
-</div>
-
-<style>
-  .container {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    margin-top: var(--spacing-xl);
-  }
-
-  .template :global(label) {
-    /*  Fix layout due to LH 0 on heading */
-    margin-bottom: 16px;
-  }
-
-  .dropzone {
-    text-align: center;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .uploaded {
-    color: var(--blue);
-  }
-
-  input[type="file"] {
-    display: none;
-  }
-
-  label {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 500;
-    box-sizing: border-box;
-    overflow: hidden;
-    border-radius: var(--border-radius-s);
-    color: var(--ink);
-    padding: var(--spacing-m) var(--spacing-l);
-    transition: all 0.2s ease 0s;
-    display: inline-flex;
-    text-rendering: optimizeLegibility;
-    min-width: auto;
-    outline: none;
-    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
-    -webkit-box-align: center;
-    user-select: none;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    background-color: var(--grey-2);
-    font-size: var(--font-size-xs);
-    line-height: normal;
-    border: var(--border-transparent);
-  }
-</style>
diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte
deleted file mode 100644
index b51e5faaff..0000000000
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-  import { Select, Heading } from "@budibase/bbui"
-
-  export let values
-  export let errors
-  export let touched
-</script>
-
-<div class="container">
-  <Heading size="L">What's your role for this app?</Heading>
-  <Select
-    bind:value={$values.roleId}
-    label="Role"
-    options={[
-      { label: "Admin", value: "ADMIN" },
-      { label: "Power User", value: "POWER_USER" },
-    ]}
-    getOptionLabel={option => option.label}
-    getOptionValue={option => option.value}
-    error={$errors.roleId}
-  />
-</div>
-
-<style>
-  .container {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/builder/src/components/start/Steps/index.js b/packages/builder/src/components/start/Steps/index.js
deleted file mode 100644
index a98357629e..0000000000
--- a/packages/builder/src/components/start/Steps/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Info } from "./Info.svelte"
-export { default as User } from "./User.svelte"
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index ee9e4b6c22..aaa4cdd1dc 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -11,18 +11,22 @@
     Page,
     notifications,
   } from "@budibase/bbui"
-  import AppGridView from "components/start/AppGridView.svelte"
-  import AppTableView from "components/start/AppTableView.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import api from "builderStore/api"
+  import api, { del } from "builderStore/api"
   import analytics from "analytics"
   import { onMount } from "svelte"
   import { apps } from "stores/portal"
   import download from "downloadjs"
+  import { goto } from "@roxi/routify"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import AppCard from "components/start/AppCard.svelte"
+  import AppRow from "components/start/AppRow.svelte"
 
   let layout = "grid"
-  let modal
   let template
+  let appToDelete
+  let creationModal
+  let deletionModal
 
   const checkKeys = async () => {
     const response = await api.get(`/api/keys/`)
@@ -34,7 +38,11 @@
 
   const initiateAppImport = () => {
     template = { fromFile: true }
-    modal.show()
+    creationModal.show()
+  }
+
+  const openApp = app => {
+    $goto(`../../app/${app._id}`)
   }
 
   const exportApp = app => {
@@ -51,6 +59,20 @@
     }
   }
 
+  const deleteApp = app => {
+    appToDelete = app
+    deletionModal.show()
+  }
+
+  const confirmDeleteApp = async () => {
+    if (!appToDelete) {
+      return
+    }
+    await del(`/api/applications/${appToDelete?._id}`)
+    await apps.load()
+    appToDelete = null
+  }
+
   onMount(() => {
     checkKeys()
     apps.load()
@@ -63,7 +85,7 @@
       <Heading>Apps</Heading>
       <ButtonGroup>
         <Button secondary on:click={initiateAppImport}>Import app</Button>
-        <Button cta on:click={modal.show}>Create new app</Button>
+        <Button cta on:click={creationModal.show}>Create new app</Button>
       </ButtonGroup>
     </div>
     <div class="filter">
@@ -86,24 +108,42 @@
       </ActionGroup>
     </div>
     {#if $apps.length}
-      {#if layout === "grid"}
-        <AppGridView {exportApp} />
-      {:else}
-        <AppTableView {exportApp} />
-      {/if}
+      <div
+        class:appGrid={layout === "grid"}
+        class:appTable={layout === "table"}
+      >
+        {#each $apps as app, idx}
+          <svelte:component
+            this={layout === "grid" ? AppCard : AppRow}
+            {app}
+            {openApp}
+            {exportApp}
+            {deleteApp}
+            last={idx === $apps.length - 1}
+          />
+        {/each}
+      </div>
     {:else}
       <div>No apps.</div>
     {/if}
   </Layout>
 </Page>
 <Modal
-  bind:this={modal}
+  bind:this={creationModal}
   padding={false}
   width="600px"
   on:hide={() => (template = null)}
 >
   <CreateAppModal {template} />
 </Modal>
+<ConfirmDialog
+  bind:this={deletionModal}
+  title="Confirm deletion"
+  okText="Delete app"
+  onOk={confirmDeleteApp}
+>
+  Are you sure you want to delete the app <b>{appToDelete?.name}</b>?
+</ConfirmDialog>
 
 <style>
   .title,
@@ -117,4 +157,30 @@
   .select {
     width: 110px;
   }
+
+  .appGrid {
+    display: grid;
+    grid-gap: 50px;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+  .appTable {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr 1fr auto;
+    align-items: center;
+  }
+  .appTable :global(> div) {
+    height: 70px;
+    display: grid;
+    align-items: center;
+    gap: var(--spacing-xl);
+    grid-template-columns: auto 1fr;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 var(--spacing-s);
+  }
+  .appTable :global(> div:not(.last)) {
+    border-bottom: var(--border-light);
+  }
 </style>

From 04dc9ca175b5609eca8ff7f2fc0746d62a7e498a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 12:36:15 +0100
Subject: [PATCH 11/24] Fix create app modal validation

---
 packages/builder/src/components/start/CreateAppModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 7f166b04ae..de51347972 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -24,7 +24,7 @@
   const touched = writable({})
   const validator = {
     name: string().required("Your application must have a name"),
-    file: mixed().required("Please choose a file to import"),
+    file: template ? mixed().required("Please choose a file to import") : null,
   }
 
   let submitting = false

From 99ff417aa810c34669ed5975eb95472bb10f1c0e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 12:36:32 +0100
Subject: [PATCH 12/24] Properly key each app card

---
 packages/builder/src/pages/builder/portal/apps/index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index aaa4cdd1dc..04f1196b01 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -112,7 +112,7 @@
         class:appGrid={layout === "grid"}
         class:appTable={layout === "table"}
       >
-        {#each $apps as app, idx}
+        {#each $apps as app, idx (app._id)}
           <svelte:component
             this={layout === "grid" ? AppCard : AppRow}
             {app}

From 77b4b206f7a6e35de68ae9172c6f5ebae3b085d1 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 10 May 2021 13:18:05 +0100
Subject: [PATCH 13/24] Other minor fixes after doing some initial setup
 testing.

---
 hosting/scripts/setup.js                      | 58 +++++++++++++++++++
 package.json                                  |  1 +
 .../components/common/ConfigChecklist.svelte  | 12 +---
 packages/server/src/api/index.js              |  3 +
 .../server/src/utilities/workerRequests.js    |  4 +-
 5 files changed, 66 insertions(+), 12 deletions(-)
 create mode 100755 hosting/scripts/setup.js

diff --git a/hosting/scripts/setup.js b/hosting/scripts/setup.js
new file mode 100755
index 0000000000..31fc9bec10
--- /dev/null
+++ b/hosting/scripts/setup.js
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+const os = require("os")
+const exec = require("child_process").exec
+const fs = require("fs")
+const platform = os.platform()
+
+const windows = platform === "win32"
+const mac = platform === "darwin"
+const linux = platform === "linux"
+
+function execute(command) {
+  return new Promise(resolve => {
+    exec(command, (err, stdout) => resolve(linux ? !!stdout : true))
+  })
+}
+
+async function commandExistsUnix (command) {
+  const unixCmd = `command -v ${command} 2>/dev/null && { echo >&1 ${command}; exit 0; }`
+  return execute(command)
+}
+
+async function commandExistsWindows (command) {
+  if (/[\x00-\x1f<>:"|?*]/.test(command)) {
+    return false
+  }
+  return execute(`where ${command}`)
+}
+
+function commandExists (command) {
+  return windows
+    ? commandExistsWindows(command)
+    : commandExistsUnix(command)
+}
+
+async function init() {
+  const docker = commandExists("docker")
+  const dockerCompose = commandExists("docker-compose")
+  if (docker && dockerCompose) {
+    console.log("Docker installed - continuing.")
+    return
+  }
+  if (mac) {
+    console.log("Please install docker by visiting: https://docs.docker.com/docker-for-mac/install/")
+  } else if (windows) {
+    console.log("Please install docker by visiting: https://docs.docker.com/docker-for-windows/install/")
+  } else if (linux) {
+    console.log("Beginning automated linux installation.")
+    await execute(`./hosting/scripts/linux/get-docker.sh`)
+    await execute(`./hosting/scripts/linux/get-docker-compose.sh`)
+  } else {
+    console.error("Platform unknown - please look online for information about installing docker for our OS.")
+  }
+  console.log("Once installation complete please re-run the setup script.")
+  process.exit(-1)
+}
+init()
+
diff --git a/package.json b/package.json
index 171f9510f3..ac03b4493e 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "svelte": "^3.37.0"
   },
   "scripts": {
+    "setup": "./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev",
     "bootstrap": "lerna link && lerna bootstrap",
     "build": "lerna run build",
     "initialise": "lerna run initialise",
diff --git a/packages/builder/src/components/common/ConfigChecklist.svelte b/packages/builder/src/components/common/ConfigChecklist.svelte
index 9652222ba2..b784656d23 100644
--- a/packages/builder/src/components/common/ConfigChecklist.svelte
+++ b/packages/builder/src/components/common/ConfigChecklist.svelte
@@ -1,22 +1,12 @@
 <script>
-  import { isActive, url, goto } from "@roxi/routify"
-  import { onMount } from "svelte"
   import {
     ActionMenu,
     Checkbox,
-    Body,
     MenuItem,
-    Icon,
     Heading,
-    Avatar,
-    Search,
-    Layout,
     ProgressCircle,
-    SideNavigation as Navigation,
-    SideNavigationItem as Item,
   } from "@budibase/bbui"
-  import api from "builderStore/api"
-  import { organisation, admin } from "stores/portal"
+  import { admin } from "stores/portal"
 
   const MESSAGES = {
     apps: "Create your first app",
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 2b26b8e783..332b917a76 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -67,4 +67,7 @@ for (let route of mainRoutes) {
 router.use(staticRoutes.routes())
 router.use(staticRoutes.allowedMethods())
 
+// add a redirect for when hitting server directly
+router.redirect("/", "/builder")
+
 module.exports = router
diff --git a/packages/server/src/utilities/workerRequests.js b/packages/server/src/utilities/workerRequests.js
index f96d48092e..cebd892b55 100644
--- a/packages/server/src/utilities/workerRequests.js
+++ b/packages/server/src/utilities/workerRequests.js
@@ -19,12 +19,14 @@ function request(ctx, request) {
   if (!request.headers) {
     request.headers = {}
   }
-  if (request.body) {
+  if (request.body && Object.keys(request.body).length > 0) {
     request.headers["Content-Type"] = "application/json"
     request.body =
       typeof request.body === "object"
         ? JSON.stringify(request.body)
         : request.body
+  } else {
+    delete request.body
   }
   if (ctx.headers) {
     request.headers.cookie = ctx.headers.cookie

From 502ae91aaeaed87b6557291db3ab9b27f321a2cf Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 10 May 2021 13:19:09 +0100
Subject: [PATCH 14/24] Formatting.

---
 hosting/scripts/setup.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/hosting/scripts/setup.js b/hosting/scripts/setup.js
index 31fc9bec10..c62ac14f29 100755
--- a/hosting/scripts/setup.js
+++ b/hosting/scripts/setup.js
@@ -15,22 +15,20 @@ function execute(command) {
   })
 }
 
-async function commandExistsUnix (command) {
+async function commandExistsUnix(command) {
   const unixCmd = `command -v ${command} 2>/dev/null && { echo >&1 ${command}; exit 0; }`
   return execute(command)
 }
 
-async function commandExistsWindows (command) {
+async function commandExistsWindows(command) {
   if (/[\x00-\x1f<>:"|?*]/.test(command)) {
     return false
   }
   return execute(`where ${command}`)
 }
 
-function commandExists (command) {
-  return windows
-    ? commandExistsWindows(command)
-    : commandExistsUnix(command)
+function commandExists(command) {
+  return windows ? commandExistsWindows(command) : commandExistsUnix(command)
 }
 
 async function init() {
@@ -41,18 +39,23 @@ async function init() {
     return
   }
   if (mac) {
-    console.log("Please install docker by visiting: https://docs.docker.com/docker-for-mac/install/")
+    console.log(
+      "Please install docker by visiting: https://docs.docker.com/docker-for-mac/install/"
+    )
   } else if (windows) {
-    console.log("Please install docker by visiting: https://docs.docker.com/docker-for-windows/install/")
+    console.log(
+      "Please install docker by visiting: https://docs.docker.com/docker-for-windows/install/"
+    )
   } else if (linux) {
     console.log("Beginning automated linux installation.")
     await execute(`./hosting/scripts/linux/get-docker.sh`)
     await execute(`./hosting/scripts/linux/get-docker-compose.sh`)
   } else {
-    console.error("Platform unknown - please look online for information about installing docker for our OS.")
+    console.error(
+      "Platform unknown - please look online for information about installing docker for our OS."
+    )
   }
   console.log("Once installation complete please re-run the setup script.")
   process.exit(-1)
 }
 init()
-

From d7b33e656733b4a2b16474e7c8e8c58cea150f6b Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 10 May 2021 13:27:35 +0100
Subject: [PATCH 15/24] Editting the contributing doc to explain how to use
 Budibase after the single stack update.

---
 .github/CONTRIBUTING.md | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 70120b92fc..6d39d2844d 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -92,6 +92,16 @@ then `cd ` into your local copy.
 
 ### 3.  Install and Build
 
+To develop the Budibase platform you'll need [Docker](https://www.docker.com/) and [Docker Compose](https://docs.docker.com/compose/) installed.
+
+#### Quick method
+
+`yarn setup` will check that all necessary components are installed and setup the repo for usage.
+
+#### Manual method
+
+The following commands can be executed to manually get Budibase up and running (assuming Docker/Docker Compose has been installed).
+
 `yarn` to install project dependencies
 
 `yarn bootstrap` will install all budibase modules and symlink them together using lerna.
@@ -112,10 +122,17 @@ To run the budibase server and builder in dev mode (i.e. with live reloading):
 
 1. Open a new console
 2. `yarn dev` (from root)
-3. Access the builder on http://localhost:4001/_builder/
+3. Access the builder on http://localhost:10000/builder
 
 This will enable watch mode for both the builder app, server, client library and any component libraries.
 
+### 5. Cleanup
+
+If you wish to delete all the apps created in development and reset the environment then run the following:
+
+1. `yarn nuke:docker` will wipe all the Budibase services
+2. `yarn dev` will restart all the services
+
 ## Data Storage
 
 When you are running locally, budibase stores data on disk using [PouchDB](https://pouchdb.com/), as well as some JSON on local files. After setting up budibase, you can find all of this data in the `~/.budibase` directory.

From 2421529ba866cd4c94eedb5bf507a5912338a056 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 15:28:52 +0100
Subject: [PATCH 16/24] Update gradient algorithm to use a seed value for
 predictable gradients and use app names for seeds

---
 packages/builder/src/actions.js               | 62 +++++++++++++------
 .../src/components/start/AppCard.svelte       |  2 +-
 .../src/components/start/AppRow.svelte        |  2 +-
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/actions.js b/packages/builder/src/actions.js
index cb5f61bd9c..c39f004af0 100644
--- a/packages/builder/src/actions.js
+++ b/packages/builder/src/actions.js
@@ -1,9 +1,10 @@
 export const gradient = (node, config = {}) => {
   const defaultConfig = {
-    points: 10,
-    saturation: 0.8,
+    points: 12,
+    saturation: 0.85,
     lightness: 0.7,
     softness: 0.9,
+    seed: null,
   }
 
   // Applies a gradient background
@@ -13,42 +14,67 @@ export const gradient = (node, config = {}) => {
       ...config,
     }
     const { saturation, lightness, softness, points } = config
+    const seed = config.seed || Math.random().toString(32).substring(2)
 
-    // Generates a random number between min and max
-    const rand = (min, max) => {
-      return Math.round(min + Math.random() * (max - min))
+    // Hash function which returns a fixed hash between specified limits
+    // for a given seed and a given version
+    const rangeHash = (seed, min = 0, max = 100, version = 0) => {
+      const range = max - min
+      let hash = range + version
+      for (let i = 0; i < seed.length * 2 + version; i++) {
+        hash = (hash << 5) - hash + seed.charCodeAt(i % seed.length)
+        hash = ((hash & hash) % range) + version
+      }
+      return min + (hash % range)
     }
 
     // Generates a random HSL colour using the options specified
-    const randomHSL = () => {
+    const randomHSL = (seed, version, alpha = 1) => {
       const lowerSaturation = Math.min(100, saturation * 100)
       const upperSaturation = Math.min(100, (saturation + 0.2) * 100)
       const lowerLightness = Math.min(100, lightness * 100)
       const upperLightness = Math.min(100, (lightness + 0.2) * 100)
-      const hue = rand(0, 360)
-      const sat = `${rand(lowerSaturation, upperSaturation)}%`
-      const light = `${rand(lowerLightness, upperLightness)}%`
-      return `hsl(${hue},${sat},${light})`
+      const hue = rangeHash(seed, 0, 360, version)
+      const sat = `${rangeHash(
+        seed,
+        lowerSaturation,
+        upperSaturation,
+        version
+      )}%`
+      const light = `${rangeHash(
+        seed,
+        lowerLightness,
+        upperLightness,
+        version
+      )}%`
+      return `hsla(${hue},${sat},${light},${alpha})`
     }
 
     // Generates a radial gradient stop point
-    const randomGradientPoint = () => {
+    const randomGradientPoint = (seed, version) => {
       const lowerTransparency = Math.min(100, softness * 100)
       const upperTransparency = Math.min(100, (softness + 0.2) * 100)
-      const transparency = rand(lowerTransparency, upperTransparency)
+      const transparency = rangeHash(
+        seed,
+        lowerTransparency,
+        upperTransparency,
+        version
+      )
       return (
-        `radial-gradient(` +
-        `at ${rand(10, 90)}% ${rand(10, 90)}%,` +
-        `${randomHSL()} 0,` +
+        `radial-gradient(at ` +
+        `${rangeHash(seed, 0, 100, version)}% ` +
+        `${rangeHash(seed, 0, 100, version + 1)}%,` +
+        `${randomHSL(seed, version, saturation)} 0,` +
         `transparent ${transparency}%)`
       )
     }
 
-    let css = `opacity:0.9;background-color:${randomHSL()};background-image:`
+    let css = `opacity:0.9;background:${randomHSL(seed, 0, 0.7)};`
+    css += "background-image:"
     for (let i = 0; i < points - 1; i++) {
-      css += `${randomGradientPoint()},`
+      css += `${randomGradientPoint(seed, i)},`
     }
-    css += `${randomGradientPoint()};`
+    css += `${randomGradientPoint(seed, points)};`
     node.style = css
   }
 
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index b19416e0f3..60f29cebae 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -18,7 +18,7 @@
 
 <div class="wrapper">
   <Layout noPadding gap="XS" alignContent="start">
-    <div class="preview" use:gradient />
+    <div class="preview" use:gradient={{ seed: app.name }} />
     <div class="title">
       <Link href={$url(`../../app/${app._id}`)}>
         <Heading size="XS">
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 78fc3d25df..ce534336ca 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <div class="title" class:last>
-  <div class="preview" use:gradient />
+  <div class="preview" use:gradient={{ seed: app.name }} />
   <Link href={$url(`../../app/${app._id}`)}>
     <Heading size="XS">
       {app.name}

From 47dbb4ddb3e817df6ec06c3a994e958273f61c78 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 16:14:12 +0100
Subject: [PATCH 17/24] Convert Page component to use flex to allow more
 flexibility

---
 packages/bbui/src/Layout/Page.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
index f820364d0e..69c9adda14 100644
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -8,8 +8,10 @@
 
 <style>
   div {
-    display: grid;
-    grid-template-columns: 1fr;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
     max-width: 80ch;
     margin: 0 auto;
     padding: calc(var(--spacing-xl) * 2);

From 0cd7dfa2966e4adab5eecbeb817e446d0d5c13a5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 16:14:39 +0100
Subject: [PATCH 18/24] Add inline prop for modals to allow them to be used as
 actual components on pages

---
 packages/bbui/src/Modal/Modal.svelte | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index f1a51d0ea1..4253da9b30 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -7,9 +7,10 @@
   import Context from "../context"
 
   export let fixed = false
+  export let inline = false
 
   const dispatch = createEventDispatcher()
-  let visible = !!fixed
+  let visible = fixed || inline
   $: dispatch(visible ? "show" : "hide")
 
   export function show() {
@@ -20,7 +21,7 @@
   }
 
   export function hide() {
-    if (!visible || fixed) {
+    if (!visible || fixed || inline) {
       return
     }
     visible = false
@@ -45,7 +46,13 @@
 
 <svelte:window on:keydown={handleKey} />
 
-{#if visible}
+<!-- These svelte if statements need to be defined like this. -->
+<!-- The modal transitions do not work if nested inside more than one "if" -->
+{#if visible && inline}
+  <div use:focusFirstInput class="spectrum-Modal is-open">
+    <slot />
+  </div>
+{:else if visible}
   <Portal target=".modal-container">
     <div
       class="spectrum-Underlay is-open"

From 6a2f711e77c2d7d28ed19d97065eff3eaf1adf22 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 16:15:00 +0100
Subject: [PATCH 19/24] Add empty state to apps screen

---
 .../src/pages/builder/portal/_layout.svelte   |   3 +-
 .../pages/builder/portal/apps/index.svelte    | 113 ++++++++++++------
 2 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index cd2b6ecccc..83657fb790 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -31,7 +31,6 @@
 
   onMount(() => {
     organisation.init()
-    apps.load()
     getInfo()
   })
 
@@ -162,5 +161,7 @@
   }
   .content {
     overflow: auto;
+    display: grid;
+    grid-template-rows: 1fr;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 04f1196b01..37d03a7efa 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -8,8 +8,10 @@
     ButtonGroup,
     Select,
     Modal,
+    ModalContent,
     Page,
     notifications,
+    Body,
   } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import api, { del } from "builderStore/api"
@@ -27,6 +29,8 @@
   let appToDelete
   let creationModal
   let deletionModal
+  let creatingApp = false
+  let loaded = false
 
   const checkKeys = async () => {
     const response = await api.get(`/api/keys/`)
@@ -36,9 +40,20 @@
     }
   }
 
+  const initiateAppCreation = () => {
+    creationModal.show()
+    creatingApp = true
+  }
+
   const initiateAppImport = () => {
     template = { fromFile: true }
     creationModal.show()
+    creatingApp = true
+  }
+
+  const stopAppCreation = () => {
+    template = null
+    creatingApp = false
   }
 
   const openApp = app => {
@@ -73,41 +88,42 @@
     appToDelete = null
   }
 
-  onMount(() => {
+  onMount(async () => {
     checkKeys()
-    apps.load()
+    await apps.load()
+    loaded = true
   })
 </script>
 
 <Page wide>
-  <Layout noPadding>
-    <div class="title">
-      <Heading>Apps</Heading>
-      <ButtonGroup>
-        <Button secondary on:click={initiateAppImport}>Import app</Button>
-        <Button cta on:click={creationModal.show}>Create new app</Button>
-      </ButtonGroup>
-    </div>
-    <div class="filter">
-      <div class="select">
-        <Select quiet placeholder="Filter by groups" />
+  {#if $apps.length}
+    <Layout noPadding>
+      <div class="title">
+        <Heading>Apps</Heading>
+        <ButtonGroup>
+          <Button secondary on:click={initiateAppImport}>Import app</Button>
+          <Button cta on:click={initiateAppCreation}>Create new app</Button>
+        </ButtonGroup>
+      </div>
+      <div class="filter">
+        <div class="select">
+          <Select quiet placeholder="Filter by groups" />
+        </div>
+        <ActionGroup>
+          <ActionButton
+            on:click={() => (layout = "grid")}
+            selected={layout === "grid"}
+            quiet
+            icon="ClassicGridView"
+          />
+          <ActionButton
+            on:click={() => (layout = "table")}
+            selected={layout === "table"}
+            quiet
+            icon="ViewRow"
+          />
+        </ActionGroup>
       </div>
-      <ActionGroup>
-        <ActionButton
-          on:click={() => (layout = "grid")}
-          selected={layout === "grid"}
-          quiet
-          icon="ClassicGridView"
-        />
-        <ActionButton
-          on:click={() => (layout = "table")}
-          selected={layout === "table"}
-          quiet
-          icon="ViewRow"
-        />
-      </ActionGroup>
-    </div>
-    {#if $apps.length}
       <div
         class:appGrid={layout === "grid"}
         class:appTable={layout === "table"}
@@ -123,16 +139,36 @@
           />
         {/each}
       </div>
-    {:else}
-      <div>No apps.</div>
-    {/if}
-  </Layout>
+    </Layout>
+  {/if}
+  {#if !$apps.length && !creatingApp && loaded}
+    <div class="empty-wrapper">
+      <Modal inline>
+        <ModalContent
+          title="Create your first app"
+          confirmText="Create app"
+          showCancelButton={false}
+          showCloseIcon={false}
+          onConfirm={initiateAppCreation}
+          size="M"
+        >
+          <div slot="footer">
+            <Button on:click={initiateAppImport} secondary>Import app</Button>
+          </div>
+          <Body size="S">
+            The purpose of the Budibase builder is to help you build beautiful,
+            powerful applications quickly and easily.
+          </Body>
+        </ModalContent>
+      </Modal>
+    </div>
+  {/if}
 </Page>
 <Modal
   bind:this={creationModal}
   padding={false}
   width="600px"
-  on:hide={() => (template = null)}
+  on:hide={stopAppCreation}
 >
   <CreateAppModal {template} />
 </Modal>
@@ -183,4 +219,13 @@
   .appTable :global(> div:not(.last)) {
     border-bottom: var(--border-light);
   }
+
+  .empty-wrapper {
+    flex: 1 1 auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 </style>

From 099e7648e36ca2627dc82a6efc4796ee64636486 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 16:52:09 +0100
Subject: [PATCH 20/24] Adjust modal background to proper background color and
 add border in lightest them to inline modals

---
 packages/bbui/src/Modal/Modal.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 4253da9b30..12c12e3717 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -49,7 +49,7 @@
 <!-- These svelte if statements need to be defined like this. -->
 <!-- The modal transitions do not work if nested inside more than one "if" -->
 {#if visible && inline}
-  <div use:focusFirstInput class="spectrum-Modal is-open">
+  <div use:focusFirstInput class="spectrum-Modal inline is-open">
     <slot />
   </div>
 {:else if visible}
@@ -105,6 +105,7 @@
   }
 
   .spectrum-Modal {
+    background: var(--background);
     overflow: visible;
     max-height: none;
     margin: 40px 0;
@@ -113,4 +114,7 @@
       --spectrum-global-dimension-size-100
     );
   }
+  :global(.spectrum--lightest .spectrum-Modal.inline) {
+    border: var(--border-light);
+  }
 </style>

From 0debc239a16fa0c9987b5b32acb161386d15f54f Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 10 May 2021 17:32:10 +0100
Subject: [PATCH 21/24] Fixing issue with cell renderer not falling back to
 string rendering when type unknown.

---
 packages/bbui/src/Table/CellRenderer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index d2198fac01..34113202b4 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -23,7 +23,7 @@
   }
   $: type = schema?.type ?? "string"
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
-  $: renderer = customRenderer?.component ?? typeMap[type]
+  $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
 </script>
 
 {#if renderer && (customRenderer || (value != null && value !== ""))}

From c1c04309d5001e5bafbfe23ad29b4aef1aafae85 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 17:39:14 +0100
Subject: [PATCH 22/24] Increase width of filter dropdown so that it doesn't
 overflow when the wrong font is used

---
 packages/builder/src/pages/builder/portal/apps/index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 37d03a7efa..ff60750f36 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -191,7 +191,7 @@
   }
 
   .select {
-    width: 110px;
+    width: 120px;
   }
 
   .appGrid {

From c220853891e645f9e5aecf73e0fd58821c4a0979 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 18:01:47 +0100
Subject: [PATCH 23/24] Allow tables to render header even when no data exists

---
 packages/bbui/src/Table/Table.svelte | 76 +++++++++++++++++++++-------
 1 file changed, 57 insertions(+), 19 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index e74a3a7e7d..048ded2b5b 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -214,7 +214,7 @@
     >
       <div style={contentStyle}>
         <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
-          {#if sortedRows?.length}
+          {#if fields.length}
             <thead class="spectrum-Table-head">
               <tr>
                 {#if showEditColumn}
@@ -269,7 +269,7 @@
             </thead>
           {/if}
           <tbody class="spectrum-Table-body">
-            {#if sortedRows?.length}
+            {#if sortedRows?.length && fields.length}
               {#each sortedRows as row, idx}
                 <tr
                   on:click={() => toggleSelectRow(row)}
@@ -316,15 +316,25 @@
                 </tr>
               {/each}
             {:else}
-              <div class="placeholder">
-                <svg
-                  class="spectrum-Icon spectrum-Icon--sizeXXL"
-                  focusable="false"
-                >
-                  <use xlink:href="#spectrum-icon-18-Table" />
-                </svg>
-                <div>No rows found</div>
-              </div>
+              <tr class="placeholder-row">
+                {#if showEditColumn}
+                  <td class="placeholder-offset" />
+                {/if}
+                {#each fields as field}
+                  <td />
+                {/each}
+                <div class="placeholder" class:has-fields={fields.length > 0}>
+                  <div class="placeholder-content">
+                    <svg
+                      class="spectrum-Icon spectrum-Icon--sizeXXL"
+                      focusable="false"
+                    >
+                      <use xlink:href="#spectrum-icon-18-Table" />
+                    </svg>
+                    <div>No rows found</div>
+                  </div>
+                </div>
+              </tr>
             {/if}
           </tbody>
         </table>
@@ -347,7 +357,7 @@
     overflow: auto;
   }
   .container.quiet {
-    border: none !important;
+    border: none;
   }
   table {
     width: 100%;
@@ -381,7 +391,7 @@
     z-index: 2;
     background-color: var(--spectrum-alias-background-color-secondary);
     border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
   }
   .spectrum-Table-headCell-content {
     white-space: nowrap;
@@ -396,7 +406,34 @@
     text-overflow: ellipsis;
   }
 
+  .placeholder-row {
+    position: relative;
+    height: 150px;
+  }
+  .placeholder-row td {
+    border-top: none !important;
+    border-bottom: none !important;
+  }
+  .placeholder-offset {
+    width: 1px;
+  }
   .placeholder {
+    top: 0;
+    height: 100%;
+    left: 0;
+    width: 100%;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .placeholder.has-fields {
+    top: var(--header-height);
+    height: calc(100% - var(--header-height));
+  }
+
+  .placeholder-content {
     padding: 20px;
     display: flex;
     flex-direction: column;
@@ -407,12 +444,13 @@
       var(--spectrum-alias-text-color)
     );
   }
-  .placeholder div {
+  .placeholder-content div {
     margin-top: 10px;
     font-size: var(
       --spectrum-table-cell-text-size,
       var(--spectrum-alias-font-size-default)
     );
+    text-align: center;
   }
 
   tbody {
@@ -431,17 +469,17 @@
   td {
     padding-top: 0;
     padding-bottom: 0;
-    border-bottom: none !important;
+    border-bottom: none;
     border-top: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-    border-radius: 0 !important;
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+    border-radius: 0;
   }
   tr:first-child td {
-    border-top: none !important;
+    border-top: none;
   }
   tr:last-child td {
     border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
   }
   td.spectrum-Table-cell--divider {
     width: 1px;

From 132cfce32846c528696dbf2516e2f75bc0a72a27 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 18:03:14 +0100
Subject: [PATCH 24/24] Remove commented out code

---
 .../components/start/CreateAppModal.svelte    | 58 -------------------
 1 file changed, 58 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index de51347972..c30cdfd449 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -152,61 +152,3 @@
   />
   <Checkbox label="Group access" disabled value={true} text="All users" />
 </ModalContent>
-
-<!--<div class="container">-->
-<!--  <div class="sidebar">-->
-<!--    <img src={Logo} alt="budibase icon" />-->
-<!--    <div class="steps">-->
-<!--      {#each steps as component, i}-->
-<!--        <Indicator-->
-<!--          active={$currentStep === i}-->
-<!--          done={i < $currentStep}-->
-<!--          step={i + 1}-->
-<!--        />-->
-<!--      {/each}-->
-<!--    </div>-->
-<!--  </div>-->
-<!--  <div class="body">-->
-<!--    <div class="heading">-->
-<!--      <Heading size="L">Get started with Budibase</Heading>-->
-<!--    </div>-->
-<!--    <div class="step">-->
-<!--      {#each steps as component, i (i)}-->
-<!--        <div class:hidden={$currentStep !== i}>-->
-<!--          <svelte:component-->
-<!--            this={component}-->
-<!--            {template}-->
-<!--            {values}-->
-<!--            {errors}-->
-<!--            {touched}-->
-<!--          />-->
-<!--        </div>-->
-<!--      {/each}-->
-<!--    </div>-->
-<!--    <div class="footer">-->
-<!--      {#if $currentStep > 0}-->
-<!--        <Button medium secondary on:click={() => $currentStep&#45;&#45;}>Back</Button>-->
-<!--      {/if}-->
-<!--      {#if $currentStep < steps.length - 1}-->
-<!--        <Button medium cta on:click={() => $currentStep++} disabled={!valid}>-->
-<!--          Next-->
-<!--        </Button>-->
-<!--      {/if}-->
-<!--      {#if $currentStep === steps.length - 1}-->
-<!--        <Button-->
-<!--          medium-->
-<!--          cta-->
-<!--          on:click={createNewApp}-->
-<!--          disabled={!valid || submitting}-->
-<!--        >-->
-<!--          {submitting ? "Loading..." : "Submit"}-->
-<!--        </Button>-->
-<!--      {/if}-->
-<!--    </div>-->
-<!--  </div>-->
-<!--  {#if submitting}-->
-<!--    <div in:fade class="spinner-container">-->
-<!--      <Spinner />-->
-<!--      <span class="spinner-text">Creating your app...</span>-->
-<!--    </div>-->
-<!--  {/if}-->