fixed setup ui button click (#68)

* fixed setup ui button click

* system-status css tweaks

* system status html tweaks

* system status re-renders after installation

* system-status init button inside render logic

* simplified system-status button logic

* system-status css tweaks

---------

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

lib/system-status.js

@@ -71,15 +71,18 @@ customElements.define('system-status', class extends HTMLElement {
     this.statement = `export PATH="${BIN}":$PATH`
     this.stmtrx = new RegExp(`^export PATH="${BIN}":\\$PATH$`, 'm')
     this.shellProfiles = null
-    this.installed = this.#installed()
+    this.root = this.attachShadow({ mode: 'open' })
-    this.template = document.createElement('template')
+    this.#render()
-    this.template.innerHTML = `
+  }
+
+  #render () {
+    this.shadowRoot.innerHTML = `
     <div id="panel">
       <style>
         #panel { user-select: none; }
         blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem; border-radius: 2px; }
         blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
-        button { background: #151517; color: #B0D944; border: 1px solid; padding: .575em .65em; cursor: pointer; margin-top: 2rem; font-size: 1.25rem; }
+        button { background: #151517; color: #B0D944; border: 1px solid; padding: .575em .65em; cursor: pointer; margin-top: 2rem; font-size: 1.20rem; }
         #tip { text-indent: 4px; margin-top: -.25rem }
         code {
           background: #3a4816;
@@ -89,8 +92,9 @@ customElements.define('system-status', class extends HTMLElement {
           padding-bottom: 0.15rem;
           font-family: 'overpass-mono';
           border-radius: 1px;
+          user-select: text;
         }
-        #tip > p { margin: 0; padding: 0}
+        #tip > p { margin-top: 6px; margin-bottom: 6px; padding: 0}
         #tip {
           margin-top: 3rem;
         }
@@ -107,36 +111,23 @@ customElements.define('system-status', class extends HTMLElement {
       </style>
       <h1>System Status</h1>
       ${
-        this.installed
+        this.#installed()
-? '<pear-welcome></pear-welcome>'
+        ? '<pear-welcome></pear-welcome>'
-: `
+        : `
           <blockquote>
            <p>Pear setup is nearly complete.</p>
           </blockquote>
-      <p id=tip><small>To finish installing Pear Runtime set your system path to <code>${BIN}</code>${!isWin? ' or click the button bellow.' : '.'}</small></p>
+          <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>' : ''}
         `
       }
     </div>
     `
-    this.root = this.attachShadow({ mode: 'open' })
+    this.shadowRoot.querySelector('button')?.addEventListener('click', () => {
-
+      this.#install().then(() => this.#render()).catch((err) => this.#error(err))
-    this.root.appendChild(this.template.content.cloneNode(true))
+    })
-
-    this.button = this.root.querySelector('button')
-
-    if (this.button) {
-      const listener = () => {
-        this.button.removeEventListener('click', listener)
-        this.#install()
-          .then(() => {
-            this.replaceWith(new this.constructor())
-            console.log('now show version info, and a gif showing pear command line help output run through')
-          })
-          .catch((err) => this.#error(err))
-      }
-      this.button.addEventListener('click', listener)
-    }
   }
 
   #error (err) {