Host edit UI

frontend/src/components/icon.svelte

@@ -22,4 +22,6 @@
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
 {:else if name === 'clipboard'}
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+{:else if name === 'edit'}
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
 {/if}

frontend/src/organisms/addressbar/hostmodal.svelte

@@ -0,0 +1,80 @@
+<script>
+  import Modal from '../../components/modal.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import Icon from '../../components/icon.svelte';
+
+  export let hosts = {};
+  export let activeHostKey = '';
+  export let modalOpen = false;
+
+  const dispatch = createEventDispatcher();
+  $: host = hosts?.[activeHostKey];
+
+  function select(hostKey) {
+    activeHostKey = hostKey;
+    dispatch('select', hostKey);
+  }
+</script>
+
+<Modal bind:show={modalOpen} title="Hosts">
+  {#if Object.keys(hosts).length}
+    <ul class="hosts">
+      {#each Object.entries(hosts) as [hostKey, host]}
+        <li>
+          <div class="host">
+            <!-- <div class="name">{host.name}</div> -->
+            <button class="btn" on:click={() => select(hostKey)} title="Connect to {host.name}">
+              {host.name}
+            </button>
+            <button class="btn" title="Edit {host.name}">
+              <Icon name="edit" />
+            </button>
+            <button class="btn" title="Remove {host.name}">
+              <Icon name="x" />
+            </button>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</Modal>
+
+<style>
+  .hosts {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.5rem;
+  }
+
+  .host {
+    display: grid;
+    grid-template: 1fr 1fr / 1fr auto;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid #ccc;
+  }
+  .host button {
+    border-radius: 0;
+    background: #eee;
+    color: inherit;
+    border-left: 1px solid #ccc;
+  }
+  .host button:hover {
+    background-color: #ddd;
+  }
+  .host button:first-child {
+    grid-row: 1 / 3;
+    height: 100%;
+    border: none;
+    background-color: #fff;
+  }
+  .host button:first-child:hover {
+    background-color: #eee;
+  }
+  .host button:last-child {
+    border-top: 1px solid #ccc;
+  }
+</style>

frontend/src/organisms/addressbar/index.svelte

@@ -1,19 +1,12 @@
 <script>
-  import Modal from '../../components/modal.svelte';
   import Icon from '../../components/icon.svelte';
-  import { createEventDispatcher } from 'svelte';
+  import HostModal from './hostmodal.svelte';
 
   export let hosts = {};
   export let activeHostKey = '';
   export let modalOpen = false;
 
-  const dispatch = createEventDispatcher();
   $: host = hosts?.[activeHostKey];
-
-  function select(hostKey) {
-    activeHostKey = hostKey;
-    dispatch('select', hostKey);
-  }
 </script>
 
 <div class="addressbar">
@@ -34,19 +27,7 @@
   </div>
 </div>
 
-<Modal bind:show={modalOpen} title="Hosts">
+<HostModal bind:modalOpen on:select {hosts} />
-  {#if Object.keys(hosts).length}
-    <ul class="hosts">
-      {#each Object.entries(hosts) as [hostKey, host]}
-        <li>
-          <button on:click={() => select(hostKey)}>
-            {host.name}
-          </button>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</Modal>
 
 <style>
   .addressbar {
@@ -65,21 +46,4 @@
   .address .empty {
     opacity: 0.6;
   }
-
-  .hosts {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 0.5rem;
-  }
-  .hosts li button {
-    display: block;
-    width: 100%;
-    height: 100%;
-    padding: 1rem;
-    background-color: #ddd;
-    border-radius: 10px;
-  }
-  .hosts li button:hover {
-    background-color: #ccc;
-  }
 </style>