Added a nice welcome screen for first-time users

frontend/src/app.svelte

@@ -1,4 +1,5 @@
 <script>
+  import BlankState from '$components/blankstate.svelte';
   import ContextMenu from '$components/contextmenu.svelte';
   import { connections } from '$lib/stores/connections';
   import contextMenu from '$lib/stores/contextmenu';
@@ -7,7 +8,8 @@
   import About from '$organisms/about.svelte';
   import Connection from '$organisms/connection/index.svelte';
   import Settings from '$organisms/settings/index.svelte';
-  import { EventsOn } from '$wails/runtime';
+  import { EventsEmit, EventsOn } from '$wails/runtime';
+  import { tick } from 'svelte';
 
   const hosts = {};
   const activeHostKey = '';
@@ -15,11 +17,18 @@
   let activeCollKey = '';
   let settingsModalOpen = false;
   let aboutModalOpen = false;
+  let connectionManager;
+  let showWelcomeScreen = false;
 
   $: host = hosts[activeHostKey];
   $: connection = $connections[activeHostKey];
-  $: database = connection?.databases[activeDbKey];
-  $: collection = database?.collections?.[activeCollKey];
+  $: showWelcomeScreen = !Object.keys(hosts).length;
+
+  async function createFirstHost() {
+    showWelcomeScreen = false;
+    await tick();
+    connectionManager.createHost();
+  }
 
   EventsOn('OpenPrefrences', () => settingsModalOpen = true);
   EventsOn('OpenAboutModal', () => aboutModalOpen = true);
@@ -31,8 +40,14 @@
   <div class="titlebar"></div>
 
   {#if $applicationInited}
-    <main class:empty={!host || !connection}>
-      <Connection {hosts} bind:activeCollKey bind:activeDbKey {activeHostKey} />
+    <main class:empty={showWelcomeScreen}>
+      {#if showWelcomeScreen}
+        <BlankState label="Welcome to Rolens!" image="/logo.png" pale={false} big={true}>
+          <button class="btn" on:click={createFirstHost}>Add your first host</button>
+        </BlankState>
+      {:else}
+        <Connection {hosts} {activeHostKey} bind:activeCollKey bind:activeDbKey bind:this={connectionManager} />
+      {/if}
     </main>
 
     {#key $contextMenu}
@@ -59,6 +74,9 @@
     display: grid;
     grid-template: 1fr / minmax(300px, 0.3fr) 1fr;
   }
+  main.empty {
+    grid-template: 1fr / 1fr;
+  }
   #root.platform-darwin main {
     height: calc(100vh - var(--darwin-titlebar-height));
   }

frontend/src/components/blankstate.svelte

@@ -1,12 +1,15 @@
 <script>
   export let label = 'No items';
   export let image = '/empty.svg';
+  export let pale = true;
+  export let big = false;
 </script>
 
-<div class="blankstate">
+<div class="blankstate" class:pale class:big>
   <div class="content">
-    <img src={image} alt="">
+    <img src={image} alt="" />
     <p>{label}</p>
+    <slot />
   </div>
 </div>
 
@@ -14,20 +17,38 @@
   .blankstate {
     display: flex;
   }
+
   .content {
     margin: auto;
     text-align: center;
   }
 
   img {
-    height: 100px;
+    height: 150px;
     width: auto;
-    filter: grayscale(1);
-    opacity: 0.4;
   }
 
   p {
-    margin-top: 2rem;
+    margin: 2.85rem 0;
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+  }
+
+  .blankstate :global(.btn) {
+    font-size: 1.35rem;
+    padding: 1rem;
+  }
+
+  .big p {
+    font-size: 1.9rem;
+    line-height: 1.9rem;
+  }
+
+  .pale img {
+    filter: grayscale(1);
+    opacity: 0.4;
+  }
+  .pale p {
     color: #777;
   }
 </style>

frontend/src/components/modal.svelte

@@ -85,6 +85,7 @@
     display: flex;
     flex-flow: column;
     cursor: auto;
+    overflow: hidden;
   }
   .inner > :global(*:first-child) {
     margin-top: 0;
@@ -98,6 +99,7 @@
     display: flex;
     align-items: center;
     padding: 0.75rem;
+    background-color: #eee;
   }
   header .title {
     font-size: 1.5rem;

frontend/src/organisms/connection/index.svelte

@@ -29,7 +29,7 @@
     hosts = await Hosts();
   }
 
-  function createHost() {
+  export function createHost() {
     hostDetailKey = '';
     showHostDetail = true;
   }
@@ -39,7 +39,7 @@
     showHostDetail = true;
   }
 
-  async function createDatabase() {
+  export async function createDatabase() {
     const name = await EnterText('Create a database', 'Enter the database name. 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.');
     if (name) {
       $connections[activeHostKey].databases[name] = { collections: {} };
@@ -59,7 +59,7 @@
     }
   }
 
-  async function createCollection() {
+  export async function createCollection() {
     const name = await EnterText('Create a collection', '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.');
     if (name) {
       $connections[activeHostKey].databases[activeDbKey].collections[name] = {};