feat: enhance announcement banner with close button and visibility toggle

Author: deadlyjack

client/components/announcementBanner/index.js

@@ -37,9 +37,15 @@ export default function AnnouncementBanner() {
   const $subtitle = <span className='announcement-banner__subtitle' />;
   const $ctaText = <span className='announcement-banner__cta-text' />;
 
+  const $closeBtn = (
+    <button type='button' className='announcement-banner__close' aria-label='Close announcement'>
+      <span className='icon clear' />
+    </button>
+  );
+
   const $link = (
     // biome-ignore lint/a11y/useValidAnchor: URL is dynamic
-    <a target='_blank' rel='noopener noreferrer' className='announcement-banner'>
+    <a target='_blank' rel='noopener noreferrer' data-visible='true' className='announcement-banner'>
       <div className='announcement-banner__content'>
         <div className='announcement-banner__logo-wrapper'>{$logo}</div>
         <div className='announcement-banner__text'>
@@ -57,9 +63,42 @@ export default function AnnouncementBanner() {
           <span className={`announcement-banner__indicator ${index === 0 ? 'active' : ''}`} data-index={index} />
         ))}
       </div>
+      {$closeBtn}
     </a>
   );
 
+  let intervalId;
+
+  const updateHeaderTop = (bannerVisible) => {
+    const header = document.getElementById('main-header');
+    if (header) {
+      if (bannerVisible) {
+        const bannerHeight = $link.offsetHeight;
+        header.style.top = `${bannerHeight}px`;
+      } else {
+        header.style.top = '0';
+      }
+    }
+  };
+
+  $closeBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    $link.classList.add('hidden');
+    clearInterval(intervalId);
+    sessionStorage.setItem('announcement-banner-closed', 'true');
+    updateHeaderTop(false);
+    $link.removeAttribute('data-visible');
+  });
+
+  // Check if banner was closed in this session
+  if (sessionStorage.getItem('announcement-banner-closed') === 'true') {
+    $link.classList.add('hidden');
+  } else {
+    // Set header top after banner is rendered
+    requestAnimationFrame(() => updateHeaderTop(true));
+  }
+
   const $content = $link.querySelector('.announcement-banner__content');
 
   const updateBanner = (index, animate = false) => {
@@ -105,7 +144,7 @@ export default function AnnouncementBanner() {
   updateBanner(0);
 
   // Toggle banners periodically
-  setInterval(() => {
+  intervalId = setInterval(() => {
     currentIndex = (currentIndex + 1) % BANNERS.length;
     updateBanner(currentIndex, true);
   }, TOGGLE_INTERVAL);

client/components/announcementBanner/style.scss

@@ -1,12 +1,13 @@
 .announcement-banner {
-  z-index: 9;
+  z-index: 100;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
+  position: sticky;
+  top: 0;
   width: 100%;
-  padding: 12px 20px;
+  padding: 12px 50px 12px 20px;
   box-sizing: border-box;
   background: linear-gradient(135deg,
       #1a1a2e 0%,
@@ -21,6 +22,10 @@
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   transition: background 0.5s ease, background-size 0.3s ease;
 
+  &[data-visible='true']+header {
+    top: 60px;
+  }
+
   // Hanging Piece theme - chess-inspired dark green
   &--hangingpiece {
     background: linear-gradient(135deg,
@@ -74,6 +79,42 @@
     display: none;
   }
 
+  &__close {
+    position: absolute;
+    right: 12px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 2;
+    padding: 0;
+
+    .icon {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 0.9rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+
+      .icon {
+        color: #fff;
+      }
+    }
+  }
+
   @keyframes gradientShift {
     0% {
       background-position: 0% 50%;