add more hover-pop info to app header

src/kiri/init.js

@@ -1779,6 +1779,8 @@
         $('mode-sla').onclick = () => { API.mode.set('SLA') };
         $('mode-cam').onclick = () => { API.mode.set('CAM') };
         $('mode-laser').onclick = () => { API.mode.set('LASER') };
+
+        $('app-info').innerText = KIRI.version;
     }
 
     // if a language needs to load, the script is injected and loaded

src/kiri/main.js

@@ -1431,6 +1431,8 @@
         }
         API.conf.save();
         platform.update_stock();
+        $('mode-device').innerText = settings.device.deviceName;
+        $('mode-profile').innerText = settings.process.processName;
     }
 
     function saveSettings() {
@@ -1890,7 +1892,7 @@
             DBUG.log("invalid mode: "+mode);
             mode = 'FDM';
         }
-        $('app-mode').innerHTML = mode;
+        $('app-mode-name').innerHTML = mode;
         $('set-tools').style.display = mode === 'CAM' ? '' : 'none';
         settings.mode = mode;
         // restore cached device profile for this mode

web/kiri/index.css

@@ -204,6 +204,49 @@ th, tr, td {
 #app-mode, #app-acct {
     width: 125px;
 }
+#app-mode:hover #mode-info {
+    display: flex;
+}
+#mode-info {
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    font-size: smaller;
+    font-family: sans-serif;
+    margin-top: 5px;
+    padding: 5px;
+    left: -6px;
+    top: 100%;
+    color: var(--fg-gray);
+    border-radius: 3px;
+    border: 1px solid #ddd;
+    background-color: white;
+}
+#mode-info > div {
+    padding: 2px 0 2px 0;
+}
+#mode-info label {
+    font-weight: bold;
+    padding-right: 5px;
+}
+
+#app-name:hover #app-info {
+    display: flex;
+}
+#app-info {
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    font-size: smaller;
+    font-family: sans-serif;
+    margin-top: 5px;
+    padding: 5px;
+    top: 100%;
+    color: var(--fg-gray);
+    border-radius: 3px;
+    border: 1px solid #ddd;
+    background-color: white;
+}
 
 #app-acct {
     justify-content: flex-end;

web/kiri/index.html

@@ -26,9 +26,18 @@
     <div id="container"></div>
     <div id="tracker"></div>
     <div id="top" class="row">
-        <div id="app-mode"></div>
+        <div id="app-mode">
+            <div id="app-mode-name"></div>
+            <div id="mode-info" class="col">
+                <div><label>Device:</label><div id="mode-device">123</div></div>
+                <div><label>Profile:</label><div id="mode-profile">456</div></div>
+            </div>
+        </div>
         <div class="grow"></div>
-        <div id="app-name">Kiri:Moto</div>
+        <div id="app-name" class="col a-center">
+            <div>Kiri:Moto</div>
+            <div id="app-info">version</div>
+        </div>
         <div class="grow"></div>
         <div id="app-acct">
             <i class="fas fa-user-cog"></i>