Started work on remove feature

frontend/src/organisms/connection/collection/remove.svelte

@@ -1,24 +1,43 @@
 <script>
+  import { RemoveItems } from '../../../../wailsjs/go/app/App';
   import CodeExample from '../../../components/code-example.svelte';
 
   export let collection;
 
-  let remove = '';
-  $: code = `db.${collection.key}.remove(${remove});`;
+  let json = '';
+  let many = true;
+  let result = undefined;
+  $: code = `db.${collection.key}.remove(${json});`;
 
-  function performRemove() {}
+  async function removeItems() {
+    result = await RemoveItems(collection.hostKey, collection.dbKey, collection.key, json, many);
+  }
 </script>
 
-<form on:submit|preventDefault={performRemove}>
-  <CodeExample {code} />
+<form on:submit|preventDefault={removeItems}>
+  <div class="options">
+    <CodeExample {code} />
+    <label class="field">
+      <span class="label">Many</span>
+      <span class="checkbox">
+        <input type="checkbox" bind:checked={many} />
+      </span>
+    </label>
+  </div>
 
   <label class="field">
-    <textarea cols="30" rows="10" bind:value={remove} placeholder={'{}'} class="code"></textarea>
+    <textarea cols="30" rows="10" bind:value={json} placeholder={'{}'} class="code"></textarea>
   </label>
 
   <div class="flex">
-    <div></div>
-    <button type="submit" class="btn" disabled={!remove}>Remove</button>
+    <div>
+      {#key result}
+        {#if typeof result === 'number'}
+          <span class="flash-green">Removed {result} item{result === 1 ? '' : 's'}</span>
+        {/if}
+      {/key}
+    </div>
+    <button type="submit" class="btn">Remove</button>
   </div>
 </form>
 
@@ -29,6 +48,12 @@
     gap: 0.5rem;
   }
 
+  .options {
+    display: grid;
+    gap: 0.5rem;
+    grid-template: 1fr / 1fr auto;
+  }
+
   .flex {
     display: flex;
     justify-content: space-between;

frontend/src/reset.css

@@ -61,6 +61,8 @@ button {
 /* Inputs */
 input {
 	font: inherit;
+}
+input:not([type="checkbox"]) {
 	min-width: 100px;
 	width: 100%;
 }

frontend/src/style.css

@@ -55,6 +55,7 @@ p strong {
     border-right: none;
     display: inline-block;
     margin: 0;
+    background-color: #fff;
 }
 .field .label {
     background-color: #eee;
@@ -85,6 +86,10 @@ p strong {
     background-color: rgba(255, 80, 80, 0.3);
     border-color: rgb(255, 80, 80);
 }
+.field > span.checkbox {
+    text-align: center;
+    min-width: 75px;
+}
 
 .btn {
     background-color: #00008b;