feat: add close and dismiss buttons to announcement banner

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/options/general.css

@@ -129,7 +129,18 @@ input:focus {
   opacity: 1;
 }
 
-#announcement_banner button {
+#dismiss_announcement {
+  cursor: pointer;
+  opacity: 0.7;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+#dismiss_announcement:hover {
+  opacity: 1;
+}
+
+#close_announcement {
   background: none;
   border: none;
   font-size: 18px;
@@ -139,6 +150,6 @@ input:focus {
   line-height: 1;
 }
 
-#announcement_banner button:hover {
+#close_announcement:hover {
   opacity: 1;
 }

src/options/main.html

@@ -233,7 +233,8 @@
     <div id="announcement_banner" hidden>
       <span>Premium features coming soon.</span>
       <a href="https://lawrencehook.com/rys/premium" target="_blank">Learn more</a>
-      <button id="dismiss_announcement" aria-label="Dismiss">&times;</button>
+      <a id="dismiss_announcement">Don't show again</a>
+      <button id="close_announcement" aria-label="Close">&times;</button>
     </div>
 
     <div id="main_container">

src/options/main.js

@@ -412,7 +412,8 @@ const ANNOUNCEMENT_KEY = 'announcement_dismissed_premium_coming';
 function initAnnouncementBanner() {
   const banner = document.getElementById('announcement_banner');
   const dismissBtn = document.getElementById('dismiss_announcement');
-  if (!banner || !dismissBtn) return;
+  const closeBtn = document.getElementById('close_announcement');
+  if (!banner) return;
 
   browser.storage.local.get(ANNOUNCEMENT_KEY, result => {
     if (!result[ANNOUNCEMENT_KEY]) {
@@ -420,8 +421,12 @@ function initAnnouncementBanner() {
     }
   });
 
-  dismissBtn.addEventListener('click', () => {
+  dismissBtn?.addEventListener('click', () => {
     banner.setAttribute('hidden', '');
     browser.storage.local.set({ [ANNOUNCEMENT_KEY]: true });
   });
+
+  closeBtn?.addEventListener('click', () => {
+    banner.setAttribute('hidden', '');
+  });
 }