From be8b7a5cb49a6efef628f8b482ea39ecc6c72dd5 Mon Sep 17 00:00:00 2001
From: floriankilian <34104015+floriankilian@users.noreply.github.com>
Date: Wed, 9 Jul 2025 20:29:29 +0200
Subject: [PATCH] feat(news-button): highlight button when new version is
 available (#1385)

Introduced a visual indicator for the NewsButton component to notify
users about new content upon version update. This change adds an
`isActive` state to the NewsButton that checks against the version
stored in localStorage. If a new version is detected, the button is
highlighted with specific styling defined in styles.css, including a
pulsing notification effect to draw user attention. The state resets to
inactive upon button click. This enhancement improves user engagement by
ensuring they are aware of new updates.

Fixes #1369

## Description:

![CleanShot Google Chrome 2025-07-09 at 15 38
19@2x](https://github.com/user-attachments/assets/68928e61-6ec5-472a-9933-0732e88788b5)
![CleanShot Google Chrome 2025-07-09 at 15 38
50](https://github.com/user-attachments/assets/bec96517-e4a3-4dce-a8fa-3d405ce62337)


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

[UN]nvm
---
 src/client/components/NewsButton.ts | 34 +++++++++++++++++++++++++----
 src/client/styles.css               | 34 +++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/client/components/NewsButton.ts b/src/client/components/NewsButton.ts
index 52ecf5479..ba7411a34 100644
--- a/src/client/components/NewsButton.ts
+++ b/src/client/components/NewsButton.ts
@@ -1,15 +1,36 @@
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import megaphone from "../../../resources/images/Megaphone.svg";
+import version from "../../../resources/version.txt";
 import { NewsModal } from "../NewsModal";
 import { translateText } from "../Utils";
 
 @customElement("news-button")
 export class NewsButton extends LitElement {
-  @property({ type: Boolean })
-  hidden = false;
+  @property({ type: Boolean }) hidden = false;
+  @state() private isActive = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.checkForNewVersion();
+  }
+
+  private checkForNewVersion() {
+    try {
+      const lastSeenVersion = localStorage.getItem(
+        "news-button-last-seen-version",
+      );
+      this.isActive = lastSeenVersion !== version;
+    } catch (error) {
+      // Fallback to NOT showing notification if localStorage fails
+      this.isActive = false;
+    }
+  }
 
   private handleClick() {
+    localStorage.setItem("news-button-last-seen-version", version);
+    this.isActive = false;
+
     const newsModal = document.querySelector("news-modal") as NewsModal;
     if (newsModal) {
       newsModal.open();
@@ -18,7 +39,12 @@ export class NewsButton extends LitElement {
 
   render() {
     return html`
-      <div class="flex relative ${this.hidden ? "parent-hidden" : ""}">
+      <div
+        class="flex relative ${this.hidden ? "parent-hidden" : ""} ${this
+          .isActive
+          ? "active"
+          : ""}"
+      >
         <button
           class="border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]"
           @click=${this.handleClick}
diff --git a/src/client/styles.css b/src/client/styles.css
index 05950fe70..26fa47658 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -624,3 +624,37 @@ label.option-card:hover {
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
+
+/* News Button Notification */
+.news-button .active button {
+  position: relative;
+  border-color: #2563eb !important;
+  border-width: 2px !important;
+  box-shadow:
+    0 0 0 1px rgba(37, 99, 235, 0.5),
+    0 0 8px rgba(37, 99, 235, 0.4);
+}
+
+news-button .active button::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  background: #f59e0b;
+  border: 2px solid white;
+  border-radius: 50%;
+  animation: newsPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes newsPulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.4);
+  }
+}