Nice blank state messages

frontend/public/empty.svg

@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="647.63626" height="632.17383" viewBox="0 0 647.63626 632.17383" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z" transform="translate(-276.18187 -133.91309)" fill="#f2f2f2"/><path d="M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z" transform="translate(-276.18187 -133.91309)" fill="#3f3d56"/><path d="M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z" transform="translate(-276.18187 -133.91309)" fill="#00008b"/><circle cx="190.15351" cy="24.95465" r="20" fill="#00008b"/><circle cx="190.15351" cy="24.95465" r="12.66462" fill="#fff"/><path d="M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z" transform="translate(-276.18187 -133.91309)" fill="#e6e6e6"/><path d="M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z" transform="translate(-276.18187 -133.91309)" fill="#3f3d56"/><path d="M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z" transform="translate(-276.18187 -133.91309)" fill="#00008b"/><circle cx="433.63626" cy="105.17383" r="20" fill="#00008b"/><circle cx="433.63626" cy="105.17383" r="12.18187" fill="#fff"/></svg>

frontend/src/app.svelte

@@ -8,6 +8,7 @@
   import ContextMenu from './components/contextmenu.svelte';
   import Modal from './components/modal.svelte';
   import { input } from './actions';
+  import BlankState from './components/blankstate.svelte';
 
   const connections = {};
   let hosts = {};
@@ -106,7 +107,7 @@
   });
 </script>
 
-<main>
+<main class:empty={!host || !connection}>
   <AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
 
   {#if host && connection}
@@ -162,6 +163,8 @@
         collectionKey={activeCollKey}
       />
     </div>
+  {:else}
+    <BlankState label="A database client is nothing without a host" image="/fish.svg" />
   {/if}
 </main>
 
@@ -203,6 +206,10 @@
     gap: 0.5rem;
     padding: 0.5rem;
   }
+  main.empty {
+    grid-template: 3rem auto / 1fr;
+  }
+
   main > :global(.addressbar) {
     grid-column: 1 / 3;
   }

frontend/src/components/blankstate.svelte

@@ -0,0 +1,33 @@
+<script>
+  export let label = 'No items';
+  export let image = '/empty.svg';
+</script>
+
+<div class="blankstate">
+  <div class="content">
+    <img src={image} alt="">
+    <p>{label}</p>
+  </div>
+</div>
+
+<style>
+  .blankstate {
+    display: flex;
+  }
+  .content {
+    margin: auto;
+    text-align: center;
+  }
+
+  img {
+    height: 100px;
+    width: auto;
+    filter: grayscale(1);
+    opacity: 0.4;
+  }
+
+  p {
+    margin-top: 2rem;
+    color: #777;
+  }
+</style>

frontend/src/organisms/collection-detail/index.svelte

@@ -1,4 +1,5 @@
 <script>
+  import BlankState from '../../components/blankstate.svelte';
   import { tick } from 'svelte';
   import TabBar from '../../components/tabbar.svelte';
   import Find from './find.svelte';
@@ -50,7 +51,7 @@
       </div>
     {/key}
   {:else}
-    No collection selected
+    <BlankState label="Select a collection to continue" />
   {/if}
 </div>
 
@@ -61,6 +62,9 @@
     grid-template: auto 1fr / 1fr;
     gap: 0.5rem;
   }
+  .collection.empty {
+    grid-template: 1fr / 1fr;
+  }
 
   .container {
     padding: 0 0.5rem;