Implement OOP hosttree (#32)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

frontend/src/components/grid-items.svelte

@@ -66,7 +66,7 @@
 
     activeKey = itemKey;
     activePath = [ ...path.slice(0, level), itemKey ];
-    dispatch('select', { level, itemKey, index });
+    dispatch('select', { level, itemKey, index, path: activePath });
   }
 
   function closeAll() {

frontend/src/components/modal.svelte

@@ -4,15 +4,17 @@
 
 <script>
   import { Beep } from '$wails/go/ui/UI';
+  import { createEventDispatcher } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import Icon from './icon.svelte';
 
-  export let show = false;
+  export let show = true;
   export let title = undefined;
   export let contentPadding = true;
   export let width = '80vw';
   export let overflow = true;
 
+  const dispatch = createEventDispatcher();
   const level = numberOfModalsOpen + 1;
   let isNew = true;
 
@@ -29,9 +31,13 @@
   function keydown(event) {
     if ((event.key === 'Escape') && (level === numberOfModalsOpen)) {
       event.preventDefault();
-      show = false;
+      close();
     }
   }
+
+  function close() {
+    dispatch('close');
+  }
 </script>
 
 <svelte:window on:keydown={keydown} />
@@ -42,7 +48,7 @@
       {#if title}
         <header>
           <div class="title">{title}</div>
-          <button class="btn close" on:click={() => show = false} title="close" type="button">
+          <button class="btn close" on:click={close} title="close" type="button">
             <Icon name="x" />
           </button>
         </header>
@@ -69,6 +75,7 @@
     background-color: rgba(0, 0, 0, 0.5);
     margin: 0;
     padding-top: 50px;
+    --wails-draggable: drag;
   }
   :global(#root.platform-darwin) .outer {
     margin-top: var(--darwin-titlebar-height);
@@ -86,6 +93,7 @@
     flex-flow: column;
     cursor: auto;
     overflow: hidden;
+    --wails-draggable: nodrag;
   }
   .inner > :global(*:first-child) {
     margin-top: 0;

frontend/src/components/objectviewer.svelte

@@ -1,10 +1,10 @@
 <script>
   import { looseJsonIsValid } from '$lib/strings';
+  import { EJSON } from 'bson';
   import { createEventDispatcher, onDestroy } from 'svelte';
   import Icon from './icon.svelte';
   import Modal from './modal.svelte';
   import ObjectEditor from './objecteditor.svelte';
-  import { EJSON } from 'bson';
 
   export let data;
   export let saveable = false;