From ff188f935196b8ce8ed0c546b9928ff6a6dd4f5b Mon Sep 17 00:00:00 2001
From: Kieran <kieran.eglin@gmail.com>
Date: Thu, 2 May 2024 11:39:12 -0700
Subject: [PATCH] Added UI to indicate a new version (#222)

---
 assets/js/alpine_helpers.js                   | 31 +++++++++++++++++++
 assets/js/app.js                              | 25 +--------------
 .../layouts/partials/sidebar.html.heex        | 18 +++++++++--
 3 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 assets/js/alpine_helpers.js

diff --git a/assets/js/alpine_helpers.js b/assets/js/alpine_helpers.js
new file mode 100644
index 0000000..eaf5cc0
--- /dev/null
+++ b/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
+}
diff --git a/assets/js/app.js b/assets/js/app.js
index 90fa638..de05354 100644
--- a/assets/js/app.js
+++ b/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))
diff --git a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
index deae097..11e778c 100644
--- a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
+++ b/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>