Add fallback UI when no screens exist and add custom theme metadata to new apps

packages/builder/src/components/design/_old/[assetType]/_layout.svelte

@@ -13,7 +13,6 @@
   import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
   import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte"
   import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte"
-  import Logo from "assets/bb-space-man.svg"
   import ScreenWizard from "components/design/navigation/ScreenWizard.svelte"
 
   // Cache previous values so we don't update the URL more than necessary
@@ -150,28 +149,7 @@
     <FrontendNavigatePane {showModal} />
   </div>
 
-  <div class="preview-pane">
+  <div class="preview-pane" />
-    {#if $currentAsset}{:else}
-      <div class="centered">
-        <div class="main">
-          <Layout gap="S" justifyItems="center">
-            <img class="img-size" alt="logo" src={Logo} />
-            <div class="new-screen-text">
-              <Detail size="M">LET’S BRING THIS APP TO LIFE</Detail>
-            </div>
-            <Button on:click={() => showModal()} size="M" cta>
-              <div class="new-screen-button">
-                <div class="background-icon" style="color: white;">
-                  <Icon name="Add" />
-                </div>
-                Add Screen
-              </div></Button
-            >
-          </Layout>
-        </div>
-      </div>
-    {/if}
-  </div>
 
   {#if $selectedComponent != null}
     <div class="components-pane">
@@ -192,30 +170,7 @@
     flex: 1 1 auto;
     height: 0;
   }
-  .new-screen-text {
-    width: 160px;
-    text-align: center;
-    color: #2c2c2c;
-    font-weight: 600;
-  }
 
-  .new-screen-button {
-    margin-left: 5px;
-    height: 20px;
-    width: 100px;
-    display: flex;
-    align-items: center;
-  }
-
-  .background-icon {
-    margin-top: 4px;
-    margin-right: 4px;
-  }
-
-  .img-size {
-    width: 160px;
-    height: 160px;
-  }
   .ui-nav {
     grid-column: 1;
     background-color: var(--background);
@@ -236,18 +191,4 @@
     border-left: var(--border-light);
     overflow-x: hidden;
   }
-
-  .centered {
-    width: calc(100% - 350px);
-    height: calc(100% - 100px);
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .main {
-    width: 300px;
-  }
 </style>

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

@@ -2,9 +2,28 @@
   import { store, selectedScreen } from "builderStore"
   import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
+  import { Layout, Button, Detail, notifications } from "@budibase/bbui"
+  import Logo from "assets/bb-space-man.svg"
+  import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
+  import { Roles } from "constants/backend"
 
   let loaded = false
 
+  const createFirstScreen = async () => {
+    let screen = createFromScratchScreen.create()
+    screen.routing.route = "/home"
+    screen.routing.roldId = Roles.BASIC
+    screen.routing.homeScreen = true
+    try {
+      const savedScreen = await store.actions.screens.save(screen)
+      notifications.success("Screen created successfully")
+      $redirect(`./${savedScreen._id}`)
+    } catch (err) {
+      console.error("Could not create screen", err)
+      notifications.error("Error creating screen")
+    }
+  }
+
   onMount(() => {
     if ($selectedScreen) {
       $redirect(`./${$selectedScreen._id}`)
@@ -17,5 +36,32 @@
 </script>
 
 {#if loaded}
-  You need to create a screen!
+  <div class="centered">
+    <Layout gap="S" justifyItems="center">
+      <img class="img-size" alt="logo" src={Logo} />
+      <div class="new-screen-text">
+        <Detail size="L">LET’S BRING THIS APP TO LIFE</Detail>
+      </div>
+      <Button on:click={createFirstScreen} size="M" cta icon="Add">
+        Create first screen
+      </Button>
+    </Layout>
+  </div>
 {/if}
+
+<style>
+  .centered {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
+  .new-screen-text {
+    width: 150px;
+    text-align: center;
+    font-weight: 600;
+  }
+  .img-size {
+    width: 170px;
+  }
+</style>

packages/server/src/api/controllers/application.ts

@@ -277,8 +277,17 @@ const performAppCreate = async (ctx: any) => {
       title: name,
       navWidth: "Large",
       navBackground: "var(--spectrum-global-color-gray-50)",
+      links: [
+        {
+          url: "/home",
+          text: "Home",
+        },
+      ],
     },
     theme: "spectrum--light",
+    customTheme: {
+      buttonBorderRadius: "16px",
+    },
   }
   const response = await db.put(newApplication, { force: true })
   newApplication._rev = response.rev