implemented update button (#75)

* implemented update button

* update button changes text on hover

* fixed update button functionality

---------

Co-authored-by: rafapaezbas <rafa@holepunch.com>

lib/system-status.js

@@ -72,6 +72,7 @@ customElements.define('system-status', class extends HTMLElement {
     this.stmtrx = new RegExp(`^export PATH="${BIN}":\\$PATH$`, 'm')
     this.shellProfiles = null
     this.root = this.attachShadow({ mode: 'open' })
+    this.update = null
     this.#render()
   }
 
@@ -98,6 +99,12 @@ customElements.define('system-status', class extends HTMLElement {
         #tip {
           margin-top: 3rem;
         }
+        #update-button {
+          position: fixed;
+          left: 893px;
+          top: 170px;
+          width: 171px;
+        }
         h1 {
           padding: 0.5rem;
           display: inline-block;
@@ -110,6 +117,7 @@ customElements.define('system-status', class extends HTMLElement {
         }
       </style>
       <h1>System Status</h1>
+      <button id="update-button"> Update Available </button>
       ${
         this.#installed()
         ? '<pear-welcome></pear-welcome>'
@@ -120,14 +128,37 @@ customElements.define('system-status', class extends HTMLElement {
           <p>To finish installing Pear Runtime set your system path to</p>
           <p><code>${BIN}</code></p>
           <p>${!isWin ? ' or click the button.' : ''}</p>
-          ${!isWin ? '<p><button> Automatic Setup Completion </button><p>' : ''}
+          ${!isWin ? '<p><button id="setup-button"> Automatic Setup Completion </button><p>' : ''}
         `
       }
     </div>
     `
-    this.shadowRoot.querySelector('button')?.addEventListener('click', () => {
+
+    this.updateButton = this.shadowRoot.querySelector('#update-button')
+    this.updateButton.style.display = 'none'
+
+    this.updateButton.addEventListener('mouseenter', (e) => {
+      e.target.innerText = 'Click to Restart'
+    })
+    this.updateButton.addEventListener('mouseout', (e) => {
+      e.target.innerText = 'Update Available'
+    })
+
+    this.shadowRoot.querySelector('#setup-button')?.addEventListener('click', () => {
       this.#install().then(() => this.#render()).catch((err) => this.#error(err))
     })
+
+    Pear.updates((update) => {
+      this.update = update
+      this.updateButton.style.display = ''
+
+      if (this.updateButtonListener) {
+        this.updateButton.removeEventListener('click', this.updateButtonListener)
+      }
+
+      this.updateButtonListener = () => Pear.restart({ platform: this.update.app === false }).catch(console.error)
+      this.updateButton.addEventListener('click', this.updateButtonListener)
+    })
   }
 
   #error (err) {