Add auto-update workflow

src/electron/frontend/assets/css/custom.css

@@ -0,0 +1,51 @@
+/* Update Notification Box */
+#update-available:not(:empty) {
+    margin-top: 15px;
+    background-color: #ffe5d2;
+    color: black;
+    padding: 15px 10px;
+    border: 1px solid #f6c39c;
+    border-radius: 5px;
+}
+
+#update-available .update-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+#update-available .update-container::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    margin-left: 5px;
+    background-color: #d17128;
+    border-radius: 50%;
+}
+
+#update-available .header {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+#update-available h4 {
+    margin: 0;
+}
+
+#update-available span {
+    color: gray;
+    font-size: 80%;
+}
+
+#update-available .header svg {
+    height: 15px;
+    width: auto;
+    cursor: pointer;
+}
+
+#update-available .controls {
+    margin-left: auto;
+    display: flex;
+    gap: 10px;
+}

src/electron/frontend/assets/css/nav.css

@@ -158,8 +158,10 @@ a[data-toggle="collapse"] {
 
 #main-nav .sidebar-body a {
     font-size: 14px;
-    display: block;
-    line-height: 45px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 15px 0px;
     padding-left: 20px;
     margin-bottom: 5px;
     text-align: left;
@@ -170,6 +172,19 @@ a[data-toggle="collapse"] {
     border-left: 4px solid transparent;
 }
 
+[data-update-available] [data-id="settings"] > div {
+    display: flex;
+    flex-direction: column;
+}
+
+[data-update-available] [data-id="settings"] > div::after {
+    content: "Update Available";
+    color: gray;
+    font-size: 70%;
+    font-weight: normal;
+    line-height: 1.5;
+}
+
 #main-nav .sidebar-body svg {
     fill: #000;
 }

src/electron/frontend/core/components/Dashboard.js

@@ -5,6 +5,9 @@ import { Main, checkIfPageIsSkipped } from "./Main.js";
 import { Sidebar } from "./sidebar.js";
 import { NavigationSidebar } from "./NavigationSidebar.js";
 
+// Defined by Garrett late in GUIDE development to clearly separate global styles unrelated to SODA (May 20th, 2024)
+import "../../assets/css/custom.css";
+
 // Global styles to apply with the dashboard
 import "../../assets/css/variables.css";
 import "../../assets/css/nativize.css";
@@ -31,7 +34,6 @@ import "../../../../../node_modules/@sweetalert2/theme-bulma/bulma.css";
 import "../../assets/css/guided.css";
 import { isElectron } from "../../utils/electron.js";
 import { isStorybook, reloadPageToHome } from "../globals.js";
-
 import { getCurrentProjectName, updateAppProgress } from "../progress/index.js";
 
 // import "https://jsuites.net/v4/jsuites.js"
@@ -295,7 +297,12 @@ export class Dashboard extends LitElement {
                 const section = info.section;
 
                 let state = globalState.sections[section];
-                if (!state) state = globalState.sections[section] = { open: false, active: false, pages: {} };
+                if (!state)
+                    state = globalState.sections[section] = {
+                        open: false,
+                        active: false,
+                        pages: {},
+                    };
 
                 let pageState = state.pages[id];
                 if (!pageState)

src/electron/frontend/core/components/ProgressBar.ts

@@ -5,13 +5,37 @@ import { LitElement, html, css, unsafeCSS } from 'lit';
 export type ProgressProps = {
     size?: string,
 
+    isBytes?: boolean,
+
     format?: {
         n: number,
         total: number,
         [key: string]: any,
-    },
+    }
 }
 
+export function humanReadableBytes(size: number | string) {
+
+    // Define the units
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    // Initialize the index to 0
+    let index = 0;
+
+    // Convert the size to a floating point number
+    size = parseFloat(size);
+
+    // Loop until the size is less than 1024 and increment the unit
+    while (size >= 1000 && index < units.length - 1) {
+        size /= 1000;
+        index += 1;
+    }
+
+    // Return the size formatted with 2 decimal places and the appropriate unit
+    return `${size.toFixed(2)} ${units[index]}`;
+}
+
+
 const animationDuration = 500 // ms
 
 export class ProgressBar extends LitElement {
@@ -88,12 +112,14 @@ export class ProgressBar extends LitElement {
 
     declare format: any
     declare size: string
+    declare isBytes: boolean
 
 
     constructor(props: ProgressProps = {}) {
         super();
         this.size = props.size ?? 'medium'
         this.format = props.format ?? {}
+        this.isBytes = props.isBytes ?? false
         if (!('n' in this.format)) this.format.n = 0
         if (!('total' in this.format)) this.format.total = 0
     }
@@ -103,6 +129,17 @@ export class ProgressBar extends LitElement {
         const percent = this.format.total ? 100 * (this.format.n / this.format.total) : 0;
         const remaining = this.format.rate && this.format.total ? (this.format.total - this.format.n) / this.format.rate : 0; // Seconds
 
+        const numerator = this.isBytes ? humanReadableBytes(this.format.n) : this.format.n
+        const denominator = this.isBytes ? humanReadableBytes(this.format.total) : this.format.total
+
+
+        const elapsed = this.format.elapsed
+
+        let subMessage = ''
+        if ('elapsed' in this.format && 'rate' in this.format) subMessage = `${elapsed?.toFixed(1)}s elapsed, ${remaining.toFixed(1)}s remaining`
+        else if ('elapsed' in this.format) subMessage = `${elapsed?.toFixed(1)}s elapsed`
+        else if ('rate' in this.format) subMessage = `${remaining.toFixed(1)}s remaining`
+
         return html`
         <div class="bar">
             ${this.format.prefix ? html`<div>
@@ -112,10 +149,10 @@ export class ProgressBar extends LitElement {
                 <div class="progress">
                     <div style="width: ${percent}%"></div>
                 </div>
-                <small>${this.format.n} / ${this.format.total} (${percent.toFixed(1)}%)</small>
+                <small>${numerator} / ${denominator} (${percent.toFixed(1)}%)</small>
             </div>
             <div>
-            ${'elapsed' in this.format && 'rate' in this.format ? html`<small>${this.format.elapsed?.toFixed(1)}s elapsed, ${remaining.toFixed(1)}s remaining</small>` : ''}
+            ${subMessage ? html`<small>${subMessage}</small>` : ''}
             </div>
         </div>
         `;