move modal view to backend page layout

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

@@ -1,12 +1,61 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { store, backendUiStore } from "builderStore"
+  import * as api from "components/database/ModelDataTable/api"
 
   import BackendNav from "components/nav/BackendNav.svelte"
   import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte"
-  import UserInterface from "components/userInterface/UserInterfaceRoot.svelte"
-  import ComingSoon from "components/common/ComingSoon.svelte"
+  import Modal from "components/common/Modal.svelte"
+  import {
+    CreateEditRecordModal,
+    CreateEditModelModal,
+    CreateEditViewModal,
+    CreateDatabaseModal,
+    DeleteRecordModal,
+    CreateUserModal,
+  } from "components/database/ModelDataTable/modals"
+
+  let selectedRecord
+
+  async function selectRecord(record) {
+    selectedRecord = await api.loadRecord(record.key, {
+      appname: $store.appname,
+      instanceId: $backendUiStore.selectedDatabase.id,
+    })
+  }
+
+  function onClosed() {
+    backendUiStore.actions.modals.hide()
+  }
+
+  $: recordOpen = $backendUiStore.visibleModal === "RECORD"
+  $: modelOpen = $backendUiStore.visibleModal === "MODEL"
+  $: viewOpen = $backendUiStore.visibleModal === "VIEW"
+  $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
+  $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
+  $: userOpen = $backendUiStore.visibleModal === "USER"
 </script>
 
+<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
+  {#if recordOpen}
+    <CreateEditRecordModal record={selectedRecord} {onClosed} />
+  {/if}
+  {#if modelOpen}
+    <CreateEditModelModal {onClosed} />
+  {/if}
+  {#if viewOpen}
+    <CreateEditViewModal {onClosed} />
+  {/if}
+  {#if databaseOpen}
+    <CreateDatabaseModal {onClosed} />
+  {/if}
+  {#if deleteRecordOpen}
+    <DeleteRecordModal record={selectedRecord} {onClosed} />
+  {/if}
+  {#if userOpen}
+    <CreateUserModal {onClosed} />
+  {/if}
+</Modal>
+
 <div class="root">
   <div class="nav">
     <BackendNav />

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

@@ -1,65 +1,6 @@
-<script>
-  import ModelDataTable from "components/database/ModelDataTable"
-  import { store, backendUiStore } from "builderStore"
-  import getIcon from "components/common/icon"
-  import DropdownButton from "components/common/DropdownButton.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import Modal from "components/common/Modal.svelte"
-  import * as api from "components/database/ModelDataTable/api"
-  import {
-    CreateEditRecordModal,
-    CreateEditModelModal,
-    CreateEditViewModal,
-    CreateDatabaseModal,
-    DeleteRecordModal,
-    CreateUserModal,
-  } from "components/database/ModelDataTable/modals"
-
-  let selectedRecord
-
-  async function selectRecord(record) {
-    selectedRecord = await api.loadRecord(record.key, {
-      appname: $store.appname,
-      instanceId: $backendUiStore.selectedDatabase.id,
-    })
-  }
-
-  function onClosed() {
-    backendUiStore.actions.modals.hide()
-  }
-
-  $: recordOpen = $backendUiStore.visibleModal === "RECORD"
-  $: modelOpen = $backendUiStore.visibleModal === "MODEL"
-  $: viewOpen = $backendUiStore.visibleModal === "VIEW"
-  $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
-  $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
-  $: userOpen = $backendUiStore.visibleModal === "USER"
-</script>
-
-<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
-  {#if recordOpen}
-    <CreateEditRecordModal record={selectedRecord} {onClosed} />
-  {/if}
-  {#if modelOpen}
-    <CreateEditModelModal {onClosed} />
-  {/if}
-  {#if viewOpen}
-    <CreateEditViewModal {onClosed} />
-  {/if}
-  {#if databaseOpen}
-    <CreateDatabaseModal {onClosed} />
-  {/if}
-  {#if deleteRecordOpen}
-    <DeleteRecordModal record={selectedRecord} {onClosed} />
-  {/if}
-  {#if userOpen}
-    <CreateUserModal {onClosed} />
-  {/if}
-</Modal>
-
 <div class="root">
   <div class="node-view">
-
+    <slot />
   </div>
 </div>
 
@@ -73,5 +14,4 @@
     overflow-y: auto;
     flex: 1 1 auto;
   }
-
 </style>