stablize device order, fix UI desync when devices are added or removed

www/src/ts/virtual_machine/base_device.ts

@@ -47,8 +47,18 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
   superClass: T,
 ) => {
   class VMDeviceMixinClass extends superClass {
-    @property({ type: Number }) accessor deviceID: number;
-    @state() accessor device: DeviceRef;
+
+    _deviceID: number;
+    get deviceID() {
+      return this._deviceID;
+    }
+    @property({ type: Number })
+    set deviceID(val: number) {
+      this._deviceID = val;
+      this.updateDevice();
+    }
+
+    device: DeviceRef;
 
     @state() accessor name: string | null = null;
     @state() accessor nameHash: number | null = null;
@@ -69,7 +79,6 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
 
     connectedCallback(): void {
       const root = super.connectedCallback();
-      this.device = window.VM!.devices.get(this.deviceID)!;
       window.VM?.addEventListener(
         "vm-device-modified",
         this._handleDeviceModified.bind(this),
@@ -97,6 +106,8 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
     }
 
     updateDevice() {
+      this.device = window.VM!.devices.get(this.deviceID)!;
+
       const name = this.device.name ?? null;
       if (this.name !== name) {
         this.name = name;

www/src/ts/virtual_machine/device.ts

@@ -416,7 +416,7 @@ export class VMDeviceList extends BaseElement {
 
   constructor() {
     super();
-    this.devices = window.VM!.deviceIds;
+    this.devices = [...window.VM!.deviceIds];
   }
 
   connectedCallback(): void {
@@ -432,6 +432,7 @@ export class VMDeviceList extends BaseElement {
     const ids = e.detail;
     if (!structuralEqual(this.devices, ids)) {
       this.devices = ids;
+      this.devices.sort();
     }
   }
 

www/src/ts/virtual_machine/index.ts

@@ -52,7 +52,9 @@ class VirtualMachine extends EventTarget {
   }
 
   get deviceIds() {
-    return Array.from(this.ic10vm.devices);
+    const ids = Array.from(this.ic10vm.devices);
+    ids.sort();
+    return ids;
   }
 
   get ics() {
@@ -113,9 +115,11 @@ class VirtualMachine extends EventTarget {
     }
 
     if (update_flag) {
+      const ids = Array.from(device_ids);
+      ids.sort()
       this.dispatchEvent(
         new CustomEvent("vm-devices-update", {
-          detail: Array.from(device_ids),
+          detail: ids,
         }),
       );
     }