Split app.svelte

frontend/src/app.svelte

@@ -1,16 +1,12 @@
 <script>
-  import { onMount, tick } from 'svelte';
-  import { DropCollection, DropDatabase, Hosts, OpenCollection, OpenConnection, OpenDatabase } from '../wailsjs/go/app/App';
-  import AddressBar from './organisms/addressbar/index.svelte';
-  import Grid from './components/grid.svelte';
-  import CollectionDetail from './organisms/collection-detail/index.svelte';
-  import { busy, contextMenu } from './stores';
-  import ContextMenu from './components/contextmenu.svelte';
-  import Modal from './components/modal.svelte';
-  import { input } from './actions';
+  import { onMount } from 'svelte';
+  import { Hosts, OpenConnection } from '../wailsjs/go/app/App';
   import BlankState from './components/blankstate.svelte';
+  import ContextMenu from './components/contextmenu.svelte';
+  import AddressBar from './organisms/addressbar/index.svelte';
+  import Connection from './organisms/connection/index.svelte';
+  import { busy, contextMenu, connections } from './stores';
 
-  const connections = {};
   let hosts = {};
   let environment;
 
@@ -20,90 +16,28 @@
 
   let addressBarModalOpen = true;
 
-  let newDb;
-  let newDbInput;
-
-  let newColl;
-  let newCollInput;
-
   $: host = hosts[activeHostKey];
-  $: connection = connections[activeHostKey];
+  $: connection = $connections[activeHostKey];
   $: database = connection?.databases[activeDbKey];
   $: collection = database?.collections?.[activeCollKey];
 
-  $: if (newDb) {
-    tick().then(() => newDbInput.focus());
-  }
-
   async function openConnection(hostKey) {
     busy.start();
     const databases = await OpenConnection(hostKey);
 
     if (databases) {
-      connections[hostKey] = { databases: {} };
+      $connections[hostKey] = { databases: {} };
       databases.forEach(dbKey => {
-        connections[hostKey].databases[dbKey] = { collections: {} };
+        $connections[hostKey].databases[dbKey] = { collections: {} };
       });
       activeHostKey = hostKey;
       addressBarModalOpen = false;
-      window.runtime.WindowSetTitle(`${host.name} - Mongodup`);
+      window.runtime.WindowSetTitle(`${hosts[activeHostKey].name} - Mongodup`);
     }
 
     busy.end();
   }
 
-  function createDatabase() {
-    busy.start();
-    connections[activeHostKey].databases[newDb.name] = { collections: {} };
-    newDb = undefined;
-    busy.end();
-  }
-
-  async function openDatabase(dbKey) {
-    busy.start();
-    const collections = await OpenDatabase(activeHostKey, dbKey);
-
-    for (const collKey of collections || []) {
-      connections[activeHostKey].databases[dbKey].collections[collKey] = {};
-    }
-
-    busy.end();
-  }
-
-  async function dropDatabase(dbKey) {
-    busy.start();
-    await DropDatabase(activeHostKey, dbKey);
-    await reload();
-    busy.end();
-  }
-
-  function createCollection() {
-    busy.start();
-    connections[activeHostKey].databases[activeDbKey].collections[newColl.name] = {};
-    newColl = undefined;
-    busy.end();
-  }
-
-  async function openCollection(collKey) {
-    busy.start();
-    const stats = await OpenCollection(activeHostKey, activeDbKey, collKey);
-    connections[activeHostKey].databases[activeDbKey].collections[collKey].stats = stats;
-    busy.end();
-  }
-
-  async function dropCollection(dbKey, collKey) {
-    busy.start();
-    await DropCollection(activeHostKey, dbKey, collKey);
-    await reload();
-    busy.end();
-  }
-
-  async function reload() {
-    activeHostKey && await openConnection(activeHostKey);
-    activeDbKey && await openDatabase(activeDbKey);
-    activeCollKey && await openCollection(activeCollKey);
-  }
-
   onMount(() => {
     window.runtime.Environment().then(e => environment = e);
     Hosts().then(h => hosts = h);
@@ -112,97 +46,18 @@
 
 <div id="app" class="platform-{environment?.platform}">
   {#if environment}
-    {#if environment.platform === 'darwin'}
-      <div class="darwin-titlebar"></div>
-    {/if}
+    <div class="titlebar"></div>
 
     <main class:empty={!host || !connection}>
       <AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
 
       {#if host && connection}
-        <div class="databaselist">
-          <Grid
-            columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
-            items={Object.keys(connection.databases).map(dbKey => ({
-              id: dbKey,
-              collCount: Object.keys(connection.databases[dbKey].collections || {}).length || '',
-              children: Object.keys(connection.databases[dbKey].collections).map(collKey => ({
-                id: collKey,
-                menu: [ { label: `Drop ${collKey}`, fn: () => dropCollection(dbKey, collKey) } ],
-              })).sort((a, b) => a.id.localeCompare(b)) || [],
-              menu: [ { label: `Drop ${dbKey}`, fn: () => dropDatabase(dbKey) } ],
-            }))}
-            actions={[
-              { icon: 'reload', fn: reload },
-              { icon: '+', fn: evt => {
-                if (activeDbKey) {
-                  contextMenu.show(evt, [
-                    { label: 'New database', fn: () => newDb = {} },
-                    { label: 'New collection', fn: () => newColl = {} },
-                  ]);
-                }
-                else {
-                  newDb = {};
-                }
-              } },
-              { icon: '-', fn: evt => {
-                if (activeCollKey) {
-                  contextMenu.show(evt, [
-                    { label: 'Drop database', fn: () => dropDatabase(activeDbKey) },
-                    { label: 'Drop collection', fn: () => dropCollection(activeDbKey, activeCollKey) },
-                  ]);
-                }
-                else {
-                  dropDatabase(activeDbKey);
-                }
-              }, disabled: !activeDbKey },
-            ]}
-            bind:activeKey={activeDbKey}
-            bind:activeChildKey={activeCollKey}
-            on:select={e => openDatabase(e.detail)}
-            on:selectChild={e => openCollection(e.detail)}
-          />
-        </div>
-
-        <div class="collection">
-          <CollectionDetail
-            {collection}
-            hostKey={activeHostKey}
-            dbKey={activeDbKey}
-            collectionKey={activeCollKey}
-          />
-        </div>
+        <Connection {hosts} bind:activeCollKey bind:activeDbKey {activeHostKey} />
       {:else}
         <BlankState label="A database client is nothing without a host" image="/fish.svg" />
       {/if}
     </main>
 
-    {#if newDb}
-      <Modal bind:show={newDb}>
-        <p><strong>Create a database</strong></p>
-        <p>Note: databases in MongoDB do not exist until they have a collection and an item. Your new database will not persist on the server; fill it to have it created.</p>
-        <form on:submit|preventDefault={createDatabase}>
-          <label class="field">
-            <input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
-          </label>
-          <button class="btn create" type="submit">Create database</button>
-        </form>
-      </Modal>
-    {/if}
-
-    {#if newColl}
-      <Modal bind:show={newColl}>
-        <p><strong>Create a collections</strong></p>
-        <p>Note: collections in MongoDB do not exist until they have at least one item. Your new collection will not persist on the server; fill it to have it created.</p>
-        <form on:submit|preventDefault={createCollection}>
-          <label class="field">
-            <input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
-          </label>
-          <button class="btn create" type="submit">Create collection</button>
-        </form>
-      </Modal>
-    {/if}
-
     {#key $contextMenu}
       <ContextMenu {...$contextMenu} on:close={contextMenu.hide} />
     {/key}
@@ -210,10 +65,13 @@
 </div>
 
 <style>
-  .darwin-titlebar {
-    --wails-draggable: drag;
-    height: var(--darwin-titlebar-height, 36px);
+  .titlebar {
+    height: 0;
     background-color: #00002a;
+    --wails-draggable: drag;
+  }
+  #app.platform-darwin .titlebar {
+    height: var(--darwin-titlebar-height, 36px);
   }
 
   main {

frontend/src/components/contextmenu.svelte

@@ -62,4 +62,10 @@
     background-color: #00008b;
     color: #fff;
   }
+
+  hr {
+    border: none;
+    border-top: 1px solid #aaa;
+    margin: 5px;
+  }
 </style>

frontend/src/components/modal.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { onMount } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import Icon from './icon.svelte';
 

frontend/src/organisms/connection/collection/find.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { PerformFind } from '../../../wailsjs/go/app/App';
-  import CodeExample from '../../components/code-example.svelte';
+  import { PerformFind } from '../../../../wailsjs/go/app/App';
+  import CodeExample from '../../../components/code-example.svelte';
   import { onMount } from 'svelte';
-  import { input } from '../../actions';
-  import ObjectGrid from '../../components/objectgrid.svelte';
-  import Icon from '../../components/icon.svelte';
-  import CodeViewer from '../../components/codeviewer.svelte';
+  import { input } from '../../../actions';
+  import ObjectGrid from '../../../components/objectgrid.svelte';
+  import Icon from '../../../components/icon.svelte';
+  import CodeViewer from '../../../components/codeviewer.svelte';
 
   export let collection;
 

frontend/src/organisms/connection/collection/index.svelte

@@ -1,7 +1,7 @@
 <script>
-  import BlankState from '../../components/blankstate.svelte';
+  import BlankState from '../../../components/blankstate.svelte';
   import { tick } from 'svelte';
-  import TabBar from '../../components/tabbar.svelte';
+  import TabBar from '../../../components/tabbar.svelte';
   import Find from './find.svelte';
   import Indexes from './indexes.svelte';
   import Insert from './insert.svelte';

frontend/src/organisms/connection/collection/insert.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { input } from '../../actions';
+  import { input } from '../../../actions';
   import { createEventDispatcher } from 'svelte';
-  import { PerformInsert } from '../../../wailsjs/go/app/App';
+  import { PerformInsert } from '../../../../wailsjs/go/app/App';
 
   export let collection;
 

frontend/src/organisms/connection/collection/remove.svelte

@@ -1,5 +1,5 @@
 <script>
-  import CodeExample from '../../components/code-example.svelte';
+  import CodeExample from '../../../components/code-example.svelte';
 
   export let collection;
 

frontend/src/organisms/connection/collection/stats.svelte

@@ -1,6 +1,6 @@
 <script>
-  import ObjectGrid from '../../components/objectgrid.svelte';
-  import CodeExample from '../../components/code-example.svelte';
+  import ObjectGrid from '../../../components/objectgrid.svelte';
+  import CodeExample from '../../../components/code-example.svelte';
 
   export let collection;
 </script>

frontend/src/organisms/connection/dblist.svelte

@@ -0,0 +1,127 @@
+<script>
+  import { busy, contextMenu, connections } from '../../stores';
+  import { createEventDispatcher } from 'svelte';
+  import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase } from '../../../wailsjs/go/app/App';
+  import Grid from '../../components/grid.svelte';
+
+  export let hosts = {};
+  export let activeHostKey = '';
+  export let activeDbKey = '';
+  export let activeCollKey = '';
+
+  const dispatch = createEventDispatcher();
+  $: host = hosts[activeHostKey];
+  $: connection = $connections[activeHostKey];
+  $: database = connection?.databases[activeDbKey];
+  $: collection = database?.collections?.[activeCollKey];
+
+  export async function reload() {
+    activeHostKey && await openConnection(activeHostKey);
+    activeDbKey && await openDatabase(activeDbKey);
+    activeCollKey && await openCollection(activeCollKey);
+  }
+
+  async function openConnection(hostKey) {
+    busy.start();
+    const databases = await OpenConnection(hostKey);
+
+    if (databases) {
+      $connections[hostKey] = { databases: {} };
+      databases.forEach(dbKey => {
+        $connections[hostKey].databases[dbKey] = { collections: {} };
+      });
+      activeHostKey = hostKey;
+      dispatch('connected', hostKey);
+      window.runtime.WindowSetTitle(`${hosts[activeHostKey].name} - Mongodup`);
+    }
+
+    busy.end();
+  }
+
+  async function openDatabase(dbKey) {
+    busy.start();
+    const collections = await OpenDatabase(activeHostKey, dbKey);
+
+    for (const collKey of collections || []) {
+      $connections[activeHostKey].databases[dbKey].collections[collKey] = {};
+    }
+
+    busy.end();
+  }
+
+  async function dropDatabase(dbKey) {
+    busy.start();
+    await DropDatabase(activeHostKey, dbKey);
+    await reload();
+    busy.end();
+  }
+
+  async function openCollection(collKey) {
+    busy.start();
+    const stats = await OpenCollection(activeHostKey, activeDbKey, collKey);
+    $connections[activeHostKey].databases[activeDbKey].collections[collKey].stats = stats;
+    busy.end();
+  }
+
+  async function dropCollection(dbKey, collKey) {
+    busy.start();
+    await DropCollection(activeHostKey, dbKey, collKey);
+    await reload();
+    busy.end();
+  }
+</script>
+
+{#if host && connection}
+  <Grid
+    columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
+    items={Object.keys(connection.databases).map(dbKey => ({
+      id: dbKey,
+      collCount: Object.keys(connection.databases[dbKey].collections || {}).length || '',
+      children: Object.keys(connection.databases[dbKey].collections).map(collKey => ({
+        id: collKey,
+        menu: [
+          { label: `Drop ${collKey}`, fn: () => dropCollection(dbKey, collKey) },
+          { label: `Drop ${dbKey}`, fn: () => dropDatabase(dbKey) },
+          { separator: true },
+          { label: 'New database', fn: () => dispatch('newDatabase') },
+          { label: 'New collection', fn: () => dispatch('newCollection') },
+        ],
+      })).sort((a, b) => a.id.localeCompare(b)) || [],
+      menu: [
+        { label: `Drop ${dbKey}`, fn: () => dropDatabase(dbKey) },
+        { separator: true },
+        { label: 'New database', fn: () => dispatch('newDatabase') },
+        { label: 'New collection', fn: () => dispatch('newCollection') },
+      ],
+    }))}
+    actions={[
+      { icon: 'reload', fn: reload },
+      { icon: '+', fn: evt => {
+        if (activeDbKey) {
+          contextMenu.show(evt, [
+            { label: 'New database', fn: () => dispatch('newDatabase') },
+            { label: 'New collection', fn: () => dispatch('newCollection') },
+          ]);
+        }
+        else {
+          dispatch('newDatabase');
+        }
+      } },
+      { icon: '-', fn: evt => {
+        if (activeCollKey) {
+          contextMenu.show(evt, [
+            { label: 'Drop database', fn: () => dropDatabase(activeDbKey) },
+            { label: 'Drop collection', fn: () => dropCollection(activeDbKey, activeCollKey) },
+          ]);
+        }
+        else {
+          dropDatabase(activeDbKey);
+        }
+      }, disabled: !activeDbKey },
+    ]}
+    bind:activeKey={activeDbKey}
+    bind:activeChildKey={activeCollKey}
+    on:select={e => openDatabase(e.detail)}
+    on:selectChild={e => openCollection(e.detail)}
+  />
+{/if}

frontend/src/organisms/connection/index.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { onMount, tick } from 'svelte';
+  import { Hosts } from '../../../wailsjs/go/app/App';
+  import { input } from '../../actions';
+  import Modal from '../../components/modal.svelte';
+  import DatabaseList from './dblist.svelte';
+  import { busy, connections } from '../../stores';
+  import CollectionDetail from './collection/index.svelte';
+
+  export let hosts = {};
+  export let activeHostKey = '';
+  export let activeDbKey = '';
+  export let activeCollKey = '';
+
+  let environment;
+  let addressBarModalOpen = true;
+  let dbList;
+
+  let newDb;
+  let newDbInput;
+  let newColl;
+  let newCollInput;
+
+  $: if (newDb) {
+    tick().then(() => newDbInput.focus());
+  }
+
+  async function createDatabase() {
+    busy.start();
+    $connections[activeHostKey].databases[newDb.name] = { collections: {} };
+    newDb = undefined;
+    await dbList.reload();
+    busy.end();
+  }
+
+  async function createCollection() {
+    busy.start();
+    $connections[activeHostKey].databases[activeDbKey].collections[newColl.name] = {};
+    newColl = undefined;
+    await dbList.reload();
+    busy.end();
+  }
+
+  onMount(() => {
+    window.runtime.Environment().then(e => environment = e);
+    Hosts().then(h => hosts = h);
+  });
+</script>
+
+<DatabaseList
+  {hosts}
+  bind:activeHostKey
+  bind:activeCollKey
+  bind:activeDbKey
+  bind:this={dbList}
+  on:connected={() => addressBarModalOpen = false}
+  on:newDatabase={() => newDb = {}}
+  on:newCollection={() => newColl = {}}
+/>
+
+<CollectionDetail
+  collection={$connections[activeHostKey]?.databases[activeDbKey]?.collections?.[activeCollKey]}
+  hostKey={activeHostKey}
+  dbKey={activeDbKey}
+  collectionKey={activeCollKey}
+/>
+
+{#if newDb}
+  <Modal bind:show={newDb}>
+    <p><strong>Create a database</strong></p>
+    <p>Note: databases in MongoDB do not exist until they have a collection and an item. Your new database will not persist on the server; fill it to have it created.</p>
+    <form on:submit|preventDefault={createDatabase}>
+      <label class="field">
+        <input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
+      </label>
+      <button class="btn create" type="submit">Create database</button>
+    </form>
+  </Modal>
+{/if}
+
+{#if newColl}
+  <Modal bind:show={newColl}>
+    <p><strong>Create a collections</strong></p>
+    <p>Note: collections in MongoDB do not exist until they have at least one item. Your new collection will not persist on the server; fill it to have it created.</p>
+    <form on:submit|preventDefault={createCollection}>
+      <label class="field">
+        <input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
+      </label>
+      <button class="btn create" type="submit">Create collection</button>
+    </form>
+  </Modal>
+{/if}

frontend/src/stores.js

@@ -30,3 +30,5 @@ export const contextMenu = (() => {
     subscribe,
   };
 })();
+
+export const connections = writable({});