feat(webui): 🚧 allow selection removal

webui/src/components/EntitySelect.svelte

@@ -43,11 +43,13 @@
     let selecting = false;
     let selectAllArea: DOMRect | undefined = undefined;
     let selectAllAddress: string | undefined = undefined;
+    let addressesToRemove = new Set();
     document.addEventListener("mousedown", (ev) => {
       if (ev.ctrlKey) {
         ev.preventDefault();
 
         selecting = true;
+        addressesToRemove = new Set();
 
         const el = document.elementFromPoint(
           ev.clientX,
@@ -115,13 +117,18 @@
           | undefined;
         if (addressElement) {
           const address = addressElement.dataset.address;
-          selected.update((selected) => {
-            if (!selected.includes(address)) {
-              return [...selected, address];
-            } else {
-              return selected;
-            }
-          });
+          const selectMode = addressElement.dataset.selectMode;
+          if (selectMode === "add" || selectMode === undefined) {
+            selected.update((selected) => {
+              if (!selected.includes(address)) {
+                return [...selected, address];
+              } else {
+                return selected;
+              }
+            });
+          } else if (selectMode === "remove") {
+            addressesToRemove.add(address);
+          }
         }
 
         ctx.lineTo(ev.clientX, ev.clientY);
@@ -140,6 +147,11 @@
       selectAllAddress = undefined;
       selecting = false;
       ctx.clearRect(0, 0, canvas.width, canvas.height);
+      for (const address of addressesToRemove) {
+        selected.update((selected) => {
+          return selected.filter((a) => a !== address);
+        });
+      }
     }
   });
 </script>

webui/src/components/SelectedColumn.svelte

@@ -14,7 +14,7 @@
           props: {
             entities,
             thumbnails: false,
-            selectable: false,
+            select: "remove"
           },
         },
       ],
@@ -28,7 +28,7 @@
           props: {
             entities,
             thumbnails: true,
-            selectable: false,
+            select: "remove"
           },
         },
       ],

webui/src/components/widgets/EntityList.svelte

@@ -18,7 +18,7 @@
 
   export let entities: Address[];
   export let thumbnails = true;
-  export let selectable = true;
+  export let select: "add" | "remove" = "add";
   export let sort = true;
   export let address: Address | undefined = undefined;
 
@@ -172,9 +172,10 @@
     {#each sortedEntities as entity (entity)}
       <div
         data-address={entity}
+        data-select-mode={select}
         use:observe
         class="item"
-        class:selected={selectable && $selected.includes(entity)}
+        class:selected={select === "add" && $selected.includes(entity)}
       >
         {#if visible.has(entity)}
           {#if thumbnails}