exchange quantity input for clear button

- slight speed up, prevent unneeded deviceMixin updates

In future need to let Mixin component subscribe to changes they care
about

Signed-off-by: Rachel Powers <508861+Ryex@users.noreply.github.com>

www/src/ts/virtual_machine/base_device.ts

@@ -112,9 +112,10 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
 
     _handleDeviceModified(e: CustomEvent) {
       const id = e.detail;
+      const activeIc = window.VM.vm.activeIC;
       if (this.deviceID === id) {
         this.updateDevice();
-      } else {
+      } else if (id === activeIc.id) {
         this.requestUpdate();
       }
     }

www/src/ts/virtual_machine/device/slot.ts

@@ -45,6 +45,16 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
       .quantity-input sl-input::part(input) {
         width: 3rem;
       }
+      .clear-occupant::part(base) {
+        color: var(--sl-color-warning-500);
+      }
+      .clear-occupant::part(base):hover,
+      .clear-occupant::part(base):focus {
+        color: var(--sl-color-warning-400);
+      }
+      .clear-occupant::part(base):active {
+        color: var(--sl-color-warning-500);
+      }
     `,
   ];
 
@@ -90,6 +100,11 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
     />`;
     const template = this.slotOcccupantTemplate();
 
+    const activeIc = window.VM.vm.activeIC;
+    const thisIsActiveIc = activeIc.id === this.deviceID;
+
+    const enableQuantityInput = false;
+
     return html`
       <div class="flex flex-row me-2">
         <div
@@ -141,6 +156,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
           typeof slot.occupant !== "undefined",
           () => html`
             <div class="quantity-input ms-auto pl-2 mt-auto mb-auto me-2">
+              ${ enableQuantityInput ? html`
               <sl-input
                 type="number"
                 size="small"
@@ -152,7 +168,11 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
                 <div slot="help-text">
                   <span>Max Quantity: ${slot.occupant.max_quantity}</span>
                 </div>
-              </sl-input>
+              </sl-input>` : "" }
+              <sl-tooltip content=${thisIsActiveIc ? "Removing the selected Active IC is disabled" : "Remove Occupant" }>
+                <sl-icon-button class="clear-occupant" name="x-octagon" label="Remove" ?disabled=${thisIsActiveIc}
+                  @click=${this._handleSlotOccupantRemove}></sl-icon-button>
+              </sl-tooltip>
             </div>
           `,
           () => html``,
@@ -161,6 +181,10 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
     `;
   }
 
+  _handleSlotOccupantRemove() {
+    window.VM.vm.removeDeviceSlotOccupant(this.deviceID, this.slotIndex);
+  }
+
   _handleSlotClick(_e: Event) {
     this.dispatchEvent(
       new CustomEvent<SlotModifyEvent>("device-modify-slot", {

www/src/ts/virtual_machine/device/slot_add_dialog.ts

@@ -131,18 +131,22 @@ export class VMSlotAddDialog extends VMDeviceDBMixin(BaseElement) {
   }
 
   renderSearchResults() {
-    return html`
-      <div class="mt-2 max-h-48 overflow-y-auto w-full">
-        <div class="cursor-pointer hover:bg-neutral-600 rounded px-2 me-1" @click=${this._handleClickNone}>
+    const enableNone = false;
+    const none = html`
+        <div class="cursor-pointer hover:bg-neutral-600 rounded px-2 py-1 me-1" @click=${this._handleClickNone}>
           None
         </div>
+    `;
+    return html`
+      <div class="mt-2 max-h-48 overflow-y-auto w-full">
+        ${enableNone ? none : ""}
         ${this._searchResults.map((result) => {
         const imgSrc = `img/stationpedia/${result.entry.name}.png`;
         const img = html`
         <img class="w-8 h-8 mr-2" src=${imgSrc} onerror="this.src = '${VMDeviceCard.transparentImg}'" />
         `;
         return html`
-        <div class="cursor-pointer hover:bg-neutral-600 rounded px-2 me-1 flex flex-row" key=${result.entry.name} @click=${this._handleClickItem}>
+        <div class="cursor-pointer hover:bg-neutral-600 rounded px-2 py-1 me-1 flex flex-row" key=${result.entry.name} @click=${this._handleClickItem}>
           ${img}
           <div>${result.entry.title}</div>
         </div>