Show fancier version comparison in update dialog (#1916)

Related tiny-pilot/tinypilot-pro#1620

This PR backports the version comparison UI from Pro's update-dialog
(based on our [discussion
here](#1914 (comment))).

Note that Community version strings look something like this
`0.0.0-0+aaaaaaa` (where `aaaaaaa` is the git commit short hash). We
purposefully strip the commit hash from being displayed because it
doesn't look as nice.

End result:
- <img width="522" height="339" alt="Screenshot 2025-09-23 at 16 41 11"
src="https://github.com/user-attachments/assets/6dfc5e11-424b-46e7-96a1-7fa234e53df8"
/>
- <img width="380" height="301" alt="Screenshot 2025-09-23 at 16 40 53"
src="https://github.com/user-attachments/assets/b7824acf-0ca0-42c3-a81e-69e1e248f68d"
/>
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1916"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

Author: jdeanwallace

app/static/css/icons.css

@@ -18,3 +18,30 @@
   border-right: var(--width) solid transparent;
   border-top: var(--height) solid var(--brand-creme-light);
 }
+
+.icon-long-arrow {
+  position: relative;
+  width: 20px;
+}
+
+.icon-long-arrow:before {
+  position: absolute;
+  content: "";
+  top: -1px;
+  left: 0;
+  width: 90%;
+  height: 2px;
+  background: #000;
+}
+
+.icon-long-arrow:after {
+  position: absolute;
+  content: "";
+  top: -5px;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 10px solid #000;
+}

app/templates/custom-elements/update-dialog.html

@@ -1,6 +1,7 @@
 <template id="update-dialog-template">
   <style>
     @import "css/style.css";
+    @import "css/icons.css";
 
     #checking,
     #update-available,
@@ -43,6 +44,29 @@
       margin: 1rem 0;
     }
 
+    .versions-info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .version {
+      border: 1px solid black;
+      border-radius: 0.2rem;
+      padding: 0.5rem 1rem;
+      margin: 0 0.5rem;
+    }
+
+    .version-number {
+      font-size: 1rem;
+    }
+
+    .version-label {
+      font-size: 0.8rem;
+      color: #444;
+      text-transform: uppercase;
+    }
+
     #update-container details {
       margin-top: 1rem;
     }
@@ -73,6 +97,17 @@ <h3>Checking for Updates</h3>
 
   <div id="update-available">
     <h3>Update TinyPilot</h3>
+    <div class="versions-info">
+      <div class="version version-local">
+        <div class="version-number monospace"></div>
+        <div class="version-label">Your version</div>
+      </div>
+      <div class="icon-long-arrow"></div>
+      <div class="version version-latest">
+        <div class="version-number monospace"></div>
+        <div class="version-label">Latest version</div>
+      </div>
+    </div>
     <update-prompt-automatic
       id="update-prompt-automatic"
     ></update-prompt-automatic>
@@ -81,6 +116,12 @@ <h3>Update TinyPilot</h3>
 
   <div id="latest">
     <h3>No Updates Available</h3>
+    <div class="versions-info">
+      <div class="version version-local">
+        <div class="version-number monospace"></div>
+        <div class="version-label">Your version</div>
+      </div>
+    </div>
     <p>You are running the latest version of TinyPilot.</p>
     <button id="ok-latest" type="button">Close</button>
   </div>
@@ -226,12 +267,14 @@ <h3>Update Complete</h3>
               this.shadowRoot
                 .querySelectorAll(".version-local .version-number")
                 .forEach((e) => {
-                  e.innerText = localVersion.version;
+                  // Strip commit hash from version string.
+                  e.innerText = localVersion.version.split("+", 1)[0];
                 });
               this.shadowRoot
                 .querySelectorAll(".version-latest .version-number")
                 .forEach((e) => {
-                  e.innerText = latestRelease.version;
+                  // Strip commit hash from version string.
+                  e.innerText = latestRelease.version.split("+", 1)[0];
                 });
 
               if (localVersion.version === latestRelease.version) {