From 9cecad0c3af4bc87914a8e96a0e070113a8def43 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Thu, 19 Jan 2023 08:36:05 +0100
Subject: [PATCH] Create new host button

---
 .../src/organisms/addressbar/hostmodal.svelte | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/organisms/addressbar/hostmodal.svelte b/frontend/src/organisms/addressbar/hostmodal.svelte
index 31fb4b2..d7e4ad6 100644
--- a/frontend/src/organisms/addressbar/hostmodal.svelte
+++ b/frontend/src/organisms/addressbar/hostmodal.svelte
@@ -14,6 +14,7 @@
   let error = '';
   let createHostModalOpen = false;
   $: host = hosts?.[activeHostKey];
+  $: hostCount = Object.keys(hosts).length;
 
   $: if (!modalOpen) {
     error = '';
@@ -47,13 +48,20 @@
   onMount(getHosts);
 </script>
 
-<Modal bind:show={modalOpen} title={Object.keys(hosts).length && 'Hosts'} width="60vw">
-  {#if error}
-    <p class="error">
-      <strong>Oops!</strong> {error}
+<Modal bind:show={modalOpen} title={hostCount && 'Hosts'} width="60vw">
+  <div class="status">
+    <p class:error>
+      {#if error}
+        <strong>Oops!</strong> {error}
+      {:else}
+        {hostCount} host{hostCount === 1 ? '' : 's'}
+      {/if}
     </p>
-  {/if}
-  {#if Object.keys(hosts).length}
+    <button class="btn" on:click={() => createHostModalOpen = true}>
+      Create new host
+    </button>
+  </div>
+  {#if hostCount}
     <ul class="hosts">
       {#each Object.entries(hosts) as [hostKey, host]}
         <li>
@@ -85,6 +93,11 @@
     gap: 0.5rem;
   }
 
+  .status {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
   .error {
     color: #c00;
   }