wip: add back root routify index page

packages/builder/src/App.svelte

@@ -1,11 +1,8 @@
 <script>
-  import NoPackage from "./NoPackage.svelte"
-  import PackageRoot from "./PackageRoot.svelte"
-  import Settings from "./Settings.svelte"
-  import { store, initialise } from "builderStore"
   import { onMount } from "svelte"
-  import IconButton from "components/common/IconButton.svelte"
-  import Spinner from "components/common/Spinner.svelte"
+  import { Router } from "@sveltech/routify"
+  import { routes } from "@sveltech/routify/tmp/routes"
+  import { store, initialise } from "builderStore"
   import AppNotification, {
     showAppNotification,
   } from "components/common/AppNotification.svelte"
@@ -26,55 +23,6 @@
   })
 </script>
 
-<main>
-  <AppNotification />
-  {#await init}
-    <div class="spinner-container">
-      <Spinner />
-    </div>
-  {:then result}
+<AppNotification />
 
-    {#if $store.hasAppPackage}
-      <PackageRoot />
-    {:else}
-      <NoPackage />
-    {/if}
-
-  {:catch err}
-    <h1 style="color:red">{err}</h1>
-  {/await}
-
-  <!--
-    <div class="settings">
-      <IconButton icon="settings"
-                  on:click={store.showSettings}/>
-    </div>
-
-
-    {#if $store.useAnalytics}
-      <iframe src="https://marblekirby.github.io/bb-analytics.html" width="0" height="0" style="visibility:hidden;display:none"/>
-    {/if}
-  -->
-</main>
-
-<style>
-  main {
-    height: 100%;
-    width: 100%;
-    font-family: "Roboto", Helvetica, Arial, sans-serif;
-  }
-
-  .settings {
-    position: absolute;
-    bottom: 25px;
-    right: 25px;
-  }
-
-  .spinner-container {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
+<Router {routes} />

packages/builder/src/builderStore/index.js

@@ -10,20 +10,8 @@ export const initialise = async () => {
     if (process.env.NODE_ENV === "production") {
       LogRocket.init("knlald/budibase")
     }
-    setupRouter(store)
     await store.initialise()
   } catch (err) {
     console.log(err)
   }
 }
-
-const setupRouter = writable => {
-  const pushState = history.pushState
-  history.pushState = () => {
-    pushState.apply(history, [writable])
-    writable.initialise()
-  }
-  window.addEventListener("hashchange", () => {
-    writable.initialise()
-  })
-}

packages/builder/src/builderStore/store/index.js

@@ -1,3 +1,4 @@
+//
 import { filter, cloneDeep, last, concat, isEmpty, values } from "lodash/fp"
 import { pipe, getNode, constructHierarchy } from "components/common/core"
 import * as backendStoreActions from "./backend"
@@ -101,10 +102,6 @@ export const getStore = () => {
 export default getStore
 
 const initialise = (store, initial) => async () => {
-  appname = window.location.hash
-    ? last(window.location.hash.substr(1).split("/"))
-    : ""
-
   if (!appname) {
     initial.apps = await api.get(`/_builder/api/apps`).then(r => r.json())
     initial.hasAppPackage = false

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

@@ -0,0 +1,52 @@
+<script>
+  import Button from "components/common/Button.svelte"
+  export let apps
+</script>
+
+<div class="root">
+  <div class="inner">
+    <img
+      src="/_builder/assets/budibase-logo.png"
+      class="logo"
+      alt="budibase logo" />
+    <div>
+      <div>
+        <h4 style="margin-bottom: 20px">Choose an Application</h4>
+        {#each apps as app}
+          <a href={`/${app}`} class="app-link">{app}</a>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .root {
+    position: fixed;
+    margin: 0 auto;
+    text-align: center;
+    top: 20%;
+    /*color: #333333;
+    background-color: #fdfdfd;*/
+    width: 100%;
+  }
+
+  .inner {
+    display: inline-block;
+    margin: auto;
+  }
+
+  .logo {
+    width: 300px;
+    margin-bottom: 40px;
+  }
+
+  .root :global(.option) {
+    width: 250px;
+  }
+
+  .app-link {
+    margin-top: 10px;
+    display: block;
+  }
+</style>

packages/builder/src/pages/[application]/_layout.svelte

@@ -2,8 +2,8 @@
   import { fade } from "svelte/transition"
   import { isActive, goto, url, context } from "@sveltech/routify"
 
-  import { SettingsIcon, PreviewIcon } from "../../common/Icons/"
-  import IconButton from "../../common/IconButton.svelte"
+  import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
+  import IconButton from "components/common/IconButton.svelte"
 
   $: ({ component } = $context)
   $: list = component.parent.children.filter(child => child.isIndexable)

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -1,11 +1,11 @@
 <script>
-  import BackendNav from "../../../nav/BackendNav.svelte"
-  import SchemaManagementDrawer from "../../../nav/SchemaManagementDrawer.svelte"
-  import Database from "../../../database/DatabaseRoot.svelte"
-  import UserInterface from "../../../userInterface/UserInterfaceRoot.svelte"
-  import ActionsAndTriggers from "../../../actionsAndTriggers/ActionsAndTriggersRoot.svelte"
-  import AccessLevels from "../../../accessLevels/AccessLevelsRoot.svelte"
-  import ComingSoon from "../../../common/ComingSoon.svelte"
+  import BackendNav from "components/nav/BackendNav.svelte"
+  import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte"
+  import Database from "components/database/DatabaseRoot.svelte"
+  import UserInterface from "components/userInterface/UserInterfaceRoot.svelte"
+  import ActionsAndTriggers from "components/actionsAndTriggers/ActionsAndTriggersRoot.svelte"
+  import AccessLevels from "components/accessLevels/AccessLevelsRoot.svelte"
+  import ComingSoon from "components/common/ComingSoon.svelte"
 </script>
 
 <div class="root">

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

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  $goto("../backend")
+  // $goto("../backend")
 </script>
 
 <!-- routify:options $index=false -->

packages/builder/src/pages/index.svelte

@@ -1,10 +1,8 @@
 <script>
-  import AppList from "../AppList.svelte"
-  import PackageRoot from "../PackageRoot.svelte"
-  import Settings from "../Settings.svelte"
+  import AppList from "components/start/AppList.svelte"
   import { onMount } from "svelte"
-  import IconButton from "../common/IconButton.svelte"
-  import Spinner from "../common/Spinner.svelte"
+  import IconButton from "components/common/IconButton.svelte"
+  import Spinner from "components/common/Spinner.svelte"
 
   let promise = getApps()
 
@@ -21,7 +19,6 @@
 </script>
 
 <main>
-
   {#await promise}
     <div class="spinner-container">
       <Spinner />