Display sb stats generated by dbStats command (#15)

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

@@ -0,0 +1,60 @@
+<script>
+  import BlankState from '$components/blankstate.svelte';
+  import TabBar from '$components/tabbar.svelte';
+  import { EventsOn } from '$wails/runtime/runtime';
+  import Stats from './stats.svelte';
+
+  export let database;
+  export let hostKey;
+  export let dbKey;
+
+  let tab = 'stats';
+
+  $: if (database) {
+    database.hostKey = hostKey;
+    database.dbKey = dbKey;
+  }
+
+  $: if (hostKey || dbKey) {
+    tab = 'stats';
+  }
+
+  EventsOn('OpenStatsTab', name => (tab = name || tab));
+</script>
+
+<div class="view" class:empty={!database}>
+  {#if database}
+    {#key database}
+      <TabBar tabs={[ { key: 'stats', icon: 'chart', title: 'Stats' } ]} bind:selectedKey={tab} />
+      <div class="container">
+        {#if tab === 'stats'} <Stats {database} />
+        {/if}
+      </div>
+    {/key}
+  {:else}
+    <BlankState label="Select a database to continue" />
+  {/if}
+</div>
+
+<style>
+  .view {
+    height: 100%;
+    display: grid;
+    grid-template: auto 1fr / 1fr;
+  }
+  .view.empty {
+    grid-template: 1fr / 1fr;
+  }
+
+  .container {
+    padding: 0.5rem;
+    display: flex;
+    align-items: stretch;
+    overflow: auto;
+    min-height: 0;
+    min-width: 0;
+  }
+  .container > :global(*) {
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,45 @@
+<script>
+  import Icon from '$components/icon.svelte';
+  import ObjectGrid from '$components/objectgrid.svelte';
+
+  export let database;
+
+  let copySucceeded = false;
+
+  async function copy() {
+    const json = JSON.stringify(collection.stats, undefined, '\t');
+    await navigator.clipboard.writeText(json);
+    copySucceeded = true;
+    setTimeout(() => copySucceeded = false, 1500);
+  }
+</script>
+
+<div class="stats">
+  <!-- <CodeExample code="db.stats()" /> -->
+
+  <div class="grid">
+    <ObjectGrid data={database.stats} />
+  </div>
+
+  <div class="buttons">
+    <button class="btn secondary" on:click={copy}>
+      <Icon name={copySucceeded ? 'check' : 'clipboard'} />
+      Copy JSON
+    </button>
+  </div>
+</div>
+
+<style>
+  .stats {
+    display: grid;
+    gap: 0.5rem;
+    grid-template: 1fr auto / 1fr;
+  }
+
+  .stats .grid {
+    overflow: auto;
+    min-height: 0;
+    min-width: 0;
+    border: 1px solid #ccc;
+  }
+</style>