show version in grey box for every screen

index.html

@@ -193,6 +193,22 @@
       top: 156px
     }
 
+   #version {
+    position: fixed;
+    top: 95vh;
+    font-size: 75%;
+    background: #5c5c5c;
+    color: black;
+    opacity: 1;
+    padding: 10px;
+    padding-top: 5px;
+    padding-bottom: 0px;
+    border-radius: 8px;
+   }
+
+   #version:hover {
+    top: 90vh;
+   }
 
     a:visited,
     a:active,
@@ -272,8 +288,17 @@
     <section>
       <div class="col"><developer-tooling></devtools></div>
     </section>
+    <section id="version">
+      <p id="platform-version"></p>
+      <p id="app-version"></p>
+    </section>
     <script>
       process.env.WS_NO_BUFFER_UTIL = false // Squashing an error from the 'ws' module
+      const { versions } = Pear
+      versions().then(({ app, platform }) => {
+        document.querySelector('#platform-version').innerText = `Pear version: ${platform.fork}.${platform.length}.${platform.key}`
+        document.querySelector('#app-version').innerText = `App version: ${app.fork}.${app.length}.${app.key}`
+      })
     </script>
     <script type='module' src='./lib/devtools.js'></script>
   </app-router>

lib/system-status.js

@@ -3,7 +3,7 @@ import os from 'os'
 import fs from 'fs'
 import path from 'path'
 import { spawn } from 'child_process'
-const { config, versions } = Pear
+const { config } = Pear
 
 const BIN = path.join(config.pearDir, 'bin')
 const isWin = process.platform === 'win32'
@@ -27,13 +27,6 @@ customElements.define('pear-welcome', class extends HTMLElement {
           font-family: 'overpass-mono';
           border-radius: 1px;
         }
-        #version {
-          position: fixed;
-          top: 90vh;
-          font-size: 75%;
-          color: #efeaea;
-          opacity: 0.5;
-        }
       </style>
       <blockquote>
         <p> Pear is in the system PATH and ready to go .</p>
@@ -47,22 +40,11 @@ customElements.define('pear-welcome', class extends HTMLElement {
       <video width="420" height="390" autoplay muted>
         <source src="./assets/usage.mp4" type="video/mp4">
       </video>
-      <section id="version">
-        <p id="platform-version"></p>
-        <p id="app-version"></p>
-      </section>
     `
     this.root = this.attachShadow({ mode: 'open' })
 
     this.root.appendChild(this.template.content.cloneNode(true))
   }
-
-  connectedCallback () {
-    versions().then(({ app, platform }) => {
-      this.root.querySelector('#platform-version').innerText = 'Pear version: ' + platform.key + '_' + platform.length
-      this.root.querySelector('#app-version').innerText = 'App version: ' + app.key + '_' + app.length
-    })
-  }
 })
 
 customElements.define('system-status', class extends HTMLElement {