convert modelcreator and vieweditor to new modal

packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel.svelte

@@ -8,3 +8,9 @@
 <section>
   <ModelView />
 </section>
+
+<style>
+  section {
+    padding: 30px;
+  }
+</style>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte

@@ -6,3 +6,9 @@
 <section>
   <IndexView />
 </section>
+
+<style>
+  section {
+    padding: 30px;
+  }
+</style>

packages/builder/src/components/nav/SchemaManagementDrawer.svelte

@@ -1,9 +1,16 @@
 <script>
+  import { getContext } from "svelte"
   import { store, backendUiStore } from "builderStore"
   import HierarchyRow from "./HierarchyRow.svelte"
   import DropdownButton from "components/common/DropdownButton.svelte"
   import NavItem from "./NavItem.svelte"
   import getIcon from "components/common/icon"
+  import {
+    CreateEditModelModal,
+    CreateEditViewModal,
+  } from "components/database/ModelDataTable/modals"
+
+  const { open, close } = getContext("simple-modal")
 
   function newModel() {
     if ($store.currentNode) {
@@ -11,12 +18,24 @@
     } else {
       store.newRootRecord()
     }
-    backendUiStore.actions.modals.show("MODEL")
+    open(
+      CreateEditModelModal,
+      {
+        onClosed: close,
+      },
+      { styleContent: { padding: "0" } }
+    )
   }
 
   function newView() {
     store.newRootIndex()
-    backendUiStore.actions.modals.show("VIEW")
+    open(
+      CreateEditViewModal,
+      {
+        onClosed: close,
+      },
+      { styleContent: { padding: "0" } }
+    )
   }
 </script>