Id is a property that shoudl be copiable

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

www/src/ts/virtual_machine/controls.ts

@@ -1,8 +1,7 @@
 import { html, css } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, query } from "lit/decorators.js";
 import { BaseElement, defaultCss } from "../components";
 import { VMActiveICMixin } from "./base_device";
-import { structuralEqual } from "../utils";
 
 import "@shoelace-style/shoelace/dist/components/card/card.js";
 import "@shoelace-style/shoelace/dist/components/button-group/button-group.js";
@@ -38,10 +37,14 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
       }
       .device-id {
         margin-left: 2rem;
+        flex-grow: 1;
       }
       .button-group-toolbar sl-button-group:not(:last-of-type) {
         margin-right: var(--sl-spacing-x-small);
       }
+      .active-ic-select {
+        width: 100%;
+      }
       sl-divider {
         --spacing: 0.25rem;
       }
@@ -61,10 +64,7 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
     `,
   ];
 
-  constructor() {
-    super();
-    this.deviceID = window.App!.session.activeIC;
-  }
+  @query(".active-ic-select") accessor activeICSelect: SlSelect;
 
   protected render() {
     const ics = Array.from(window.VM!.ics);
@@ -116,13 +116,18 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
           <div class="device-id">
             <sl-select
               hoist
+              size="small"
               placement="bottom"
               value="${this.deviceID}"
               @sl-change=${this._handleChangeActiveIC}
+              class="active-ic-select"
             >
               ${ics.map(
                 ([id, device], _index) =>
-                  html`<sl-option value=${id}>
+                  html`<sl-option name=${device.name} prefabName=${device.prefabName} value=${id}>
+                    ${device.name
+                      ? html`<span slot="suffix">${device.prefabName}</span>`
+                      : ""}
                     Device:${id} ${device.name ?? device.prefabName}
                   </sl-option>`,
               )}
@@ -173,6 +178,18 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
     window.VM?.reset();
   }
 
+  updateIC(): void {
+    super.updateIC();
+    this.activeICSelect?.dispatchEvent(new Event("slotchange"));
+    // if (this.activeICSelect) {
+    //   const val = this.activeICSelect.value;
+    //   this.activeICSelect.value = "";
+    //   this.activeICSelect.requestUpdate();
+    //   this.activeICSelect.value = val;
+    //   this.activeICSelect.
+    // }
+  }
+
   _handleChangeActiveIC(e: CustomEvent) {
     const select = e.target as SlSelect;
     const icId = parseInt(select.value as string);

www/src/ts/virtual_machine/device.ts

@@ -55,6 +55,9 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
       .device-name::part(input) {
         width: 10rem;
       }
+      .device-id::part(input) {
+        width: 2rem;
+      }
       .device-name-hash::part(input) {
         width: 7rem;
       }
@@ -106,6 +109,17 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
         />
       </sl-tooltip>
       <div class="header-name">
+        <sl-input
+          id="vmDeviceCard${this.deviceID}Id"
+          class="device-id"
+          size="small"
+          pill
+          value=${this.deviceID}
+          disabled
+        >
+          <span slot="prefix">Id</span>
+          <sl-copy-button slot="suffix" value=${this.deviceID}></sl-copy-button>
+        </sl-input>
         <sl-input
           id="vmDeviceCard${this.deviceID}Name"
           class="device-name"
@@ -114,7 +128,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
           placeholder="${this.prefabName}"
           @sl-change=${this._handleChangeName}
         >
-          <span slot="prefix">Device ${this.deviceID}</span>
+          <span slot="prefix">Name</span>
           <sl-copy-button
             slot="suffix"
             from="vmDeviceCard${this.deviceID}Name.value"