Added UI to indicate a new version (#222)

assets/js/alpine_helpers.js

@@ -0,0 +1,31 @@
+window.copyTextToClipboard = async (text) => {
+  // Navigator clipboard api needs a secure context (https)
+  if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(text)
+  } else {
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    // Move textarea out of the viewport so it's not visible
+    textArea.style.position = 'absolute'
+    textArea.style.left = '-999999px'
+
+    document.body.prepend(textArea)
+    textArea.select()
+
+    try {
+      document.execCommand('copy')
+    } catch (error) {
+      console.error(error)
+    } finally {
+      textArea.remove()
+    }
+  }
+}
+
+window.markVersionAsSeen = (versionString) => {
+  localStorage.setItem('seenVersion', versionString)
+}
+
+window.isVersionSeen = (versionString) => {
+  return localStorage.getItem('seenVersion') === versionString
+}

assets/js/app.js

@@ -23,6 +23,7 @@ import { LiveSocket } from 'phoenix_live_view'
 import topbar from '../vendor/topbar'
 import Alpine from 'alpinejs'
 import './tabs'
+import './alpine_helpers'
 
 window.Alpine = Alpine
 Alpine.start()
@@ -50,30 +51,6 @@ let liveSocket = new LiveSocket('/live', Socket, {
   }
 })
 
-window.copyTextToClipboard = async (text) => {
-  // Navigator clipboard api needs a secure context (https)
-  if (navigator.clipboard && window.isSecureContext) {
-    await navigator.clipboard.writeText(text)
-  } else {
-    const textArea = document.createElement('textarea')
-    textArea.value = text
-    // Move textarea out of the viewport so it's not visible
-    textArea.style.position = 'absolute'
-    textArea.style.left = '-999999px'
-
-    document.body.prepend(textArea)
-    textArea.select()
-
-    try {
-      document.execCommand('copy')
-    } catch (error) {
-      console.error(error)
-    } finally {
-      textArea.remove()
-    }
-  }
-}
-
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })
 window.addEventListener('phx:page-loading-start', (_info) => topbar.show(300))

lib/pinchflat_web/components/layouts/partials/sidebar.html.heex

@@ -54,10 +54,22 @@
           </span>
         </li>
         <li>
-          <span class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm">
-            Pinchflat v<%= Application.spec(:pinchflat)[:vsn] %>
+          <span
+            class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm"
+            x-on:click={"markVersionAsSeen('#{Application.spec(:pinchflat)[:vsn]}')"}
+          >
+            <span>Pinchflat v<%= Application.spec(:pinchflat)[:vsn] %></span>
+            <a
+              href="https://github.com/kieraneglin/pinchflat/releases"
+              target="_blank"
+              class="bg-meta-2 text-boxdark px-1.5 rounded-full text-xs"
+              x-cloak
+              x-show={"!isVersionSeen('#{Application.spec(:pinchflat)[:vsn]}')"}
+            >
+              NEW
+            </a>
           </span>
-          <span class="group relative flex items-center gap-2.5 px-4 text-sm">
+          <span class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm">
             yt-dlp <%= Settings.get!(:yt_dlp_version) %>
           </span>
         </li>