open create model dialog if no models

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

@@ -1,5 +1,13 @@
 import { writable } from "svelte/store"
 import api from "../api"
+import { getContext } from "svelte"
+
+/** TODO: DEMO SOLUTION
+ * this section should not be here, it is a quick fix for a demo
+ * when we reorg the backend UI, this should disappear
+ *  **/
+import { CreateEditModelModal } from "components/database/ModelDataTable/modals"
+/** DEMO SOLUTION  END **/
 
 export const getBackendUiStore = () => {
   const INITIAL_BACKEND_UI_STATE = {
@@ -28,6 +36,18 @@ export const getBackendUiStore = () => {
           state.views = views
           return state
         })
+        /** TODO: DEMO SOLUTION**/
+        if (!models || models.length === 0) {
+          const { open, close } = getContext("simple-modal")
+          open(
+            CreateEditModelModal,
+            {
+              onClosed: close,
+            },
+            { styleContent: { padding: "0" } }
+          )
+        }
+        /** DEMO SOLUTION  END **/
       },
     },
     records: {

packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte

@@ -43,7 +43,7 @@
 {#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
   <ModelDataTable {selectRecord} />
 {:else}
-  <h3>Start building - create your first model  >>> </h3>
+  <i style="color: var(--grey-dark)">create your first model to start building</i>
 {/if}
 
 <style>