fix: make device states clearer

#259 (reply in thread)

Author: jakobrosenberg

src/Device.js

@@ -56,7 +56,7 @@ class Device {
     const { subscribe, set } = writable(this);
     this.busy = writable(false, { lazy: true });
 
-    /** @type {Writable<import('./utils/blockingProxy').BlockingProxyQueueItem>} */
+    /** @type {Writable<string|import('./utils/blockingProxy').BlockingProxyQueueItem>} */
     this.action = writable(null, { lazy: true });
     this.online = writable(false, { lazy: true });
     this.connected = writable(false, { lazy: true });
@@ -192,10 +192,12 @@ class Device {
       if (!this.connected.get()) throw new DeviceOfflineError();
 
       this.log.info("safe booting...");
+      this.action.set("safeboot");
       this.busy.set(true);
       this.busy.subscribe((isBusy, unsub) => {
         if (!isBusy) {
           unsub();
+          this.action.set(null);
           this.log.info("safe booting complete!", isBusy);
           resolve();
         }

src/providers/DevicesProvider.js

@@ -46,21 +46,9 @@ class DeviceTreeItem extends vscode.TreeItem {
     this.device = device;
     const state = device.connected.get() ? (device.busy.get() ? "busy" : "idle") : "offline";
     this.contextValue = `${state}#none#device`;
-    const filename = device.connected.get() ? "lightning.svg" : "lightning-muted.svg";
 
-    this.tooltip = device.pymakr.vscodeHelpers.deviceSummary(device)
-
-    this.iconPath = device.busy.get()
-      ? new vscode.ThemeIcon("sync~spin")
-      : {
-          dark: path.join(__dirname + "..", "..", "..", "media", "dark", filename),
-          light: path.join(__dirname + "..", "..", "..", "media", "light", filename),
-        };
-    device.busy.subscribe((isBusy) =>
-      setTimeout(() => {
-        if (device.busy.get() === isBusy) tree.refresh();
-      }, 100)
-    );
+    this.tooltip = device.pymakr.vscodeHelpers.deviceSummary(device);
+    this.iconPath = device.pymakr.vscodeHelpers.deviceStateIcon(device);
   }
 }
 

src/providers/ProjectsProvider.js

@@ -86,19 +86,9 @@ class ProjectDeviceTreeItem extends vscode.TreeItem {
     this.device = device;
     const state = device.connected.get() ? (device.busy.get() ? "busy" : "idle") : "offline";
     this.contextValue = `${state}#project#device`;
-    const filename = device.connected.get() ? "lightning.svg" : "lightning-muted.svg";
+    
     this.tooltip = device.pymakr.vscodeHelpers.deviceSummary(device);
-    this.iconPath = device.busy.get()
-      ? new vscode.ThemeIcon("sync~spin")
-      : {
-          dark: path.join(__dirname + "..", "..", "..", "media", "dark", filename),
-          light: path.join(__dirname + "..", "..", "..", "media", "light", filename),
-        };
-    device.busy.subscribe((isBusy) =>
-      setTimeout(() => {
-        if (device.busy.get() === isBusy) tree.refresh();
-      }, 100)
-    );
+    this.iconPath = device.pymakr.vscodeHelpers.deviceStateIcon(device);
   }
 }
 

src/utils/vscodeHelpers.js

@@ -1,3 +1,4 @@
+const path = require("path");
 const vscode = require("vscode");
 const { Project } = require("../Project.js");
 const { ProjectDeviceTreeItem, ProjectTreeItem } = require("../providers/ProjectsProvider.js");
@@ -134,6 +135,26 @@ const createVSCodeHelpers = (pymakr) => {
       else if (typeof device.info === "string") mdString.appendMarkdown(device.info);
       return mdString;
     },
+
+    /**
+     * @param {Device} device
+     */
+    deviceStateIcon: (device) => {
+      const icons = {
+        offline: new vscode.ThemeIcon("debug-disconnect", { id: "disabledForeground" }),
+        disconnected: {
+          dark: path.join(__dirname + "..", "..", "..", "media", "dark", "lightning-muted.svg"),
+          light: path.join(__dirname + "..", "..", "..", "media", "light", "lightning-muted.svg"),
+        },
+        idle: {
+          dark: path.join(__dirname + "..", "..", "..", "media", "dark", "lightning.svg"),
+          light: path.join(__dirname + "..", "..", "..", "media", "light", "lightning.svg"),
+        },
+        script: new vscode.ThemeIcon("github-action"), // or pulse
+        action: new vscode.ThemeIcon("sync~spin"),
+      };
+      return icons[device.state.main.get()];
+    },
   };
   return helpers;
 };