Website: respect dismissed/subscribed newsletter

- Add unified localStorage state: `newsletter-subscribed`
  and `newsletter-dismissed` (+ legacy `newsletter-cta-dismissed`
  read support)
- Replace X dismiss button with "Not interested" text link
  to prevent accidental dismissal
- Show inline confirmation: "Hidden across the site. Changed
  your mind? There's a signup in the footer."
- Hide header nav button (desktop + mobile) when
  dismissed/subscribed
- Show "You're on the list" on download/roadmap/changelog
  when subscribed
- Footer always stays visible as a fallback
- New `NewsletterInlineWrapper.astro` reusable component
- E2E tests for all states and cross-page propagation

Author: vdavid

apps/website/e2e/blog.spec.ts

@@ -105,4 +105,51 @@ test.describe('Blog', () => {
         const blogLink = page.getByRole('navigation').getByRole('link', { name: 'Blog' })
         await expect(blogLink).toBeVisible()
     })
+
+    test('individual post shows newsletter CTA with signup form', async ({ page }) => {
+        await page.goto(`/blog/${slug}`)
+        const cta = page.locator('[data-newsletter-cta]')
+        await expect(cta).toBeVisible()
+        await expect(cta.locator('form[data-newsletter-form]')).toBeVisible()
+        await expect(cta.locator('input[type="email"]')).toBeVisible()
+        await expect(cta.locator('button[type="submit"]')).toBeVisible()
+    })
+
+    test('newsletter CTA "Not interested" hides it and persists across reload', async ({ page }) => {
+        await page.goto(`/blog/${slug}`)
+        const cta = page.locator('[data-newsletter-cta]')
+        await expect(cta).toBeVisible()
+
+        // Click "Not interested"
+        await page.locator('[data-newsletter-cta-dismiss]').click()
+
+        // Content should be hidden, confirmation should show
+        await expect(page.locator('[data-newsletter-cta-content]')).toBeHidden()
+        await expect(page.locator('[data-newsletter-cta-confirmation]')).toBeVisible()
+
+        // Verify localStorage was set with new key
+        const dismissed = await page.evaluate(() => localStorage.getItem('newsletter-dismissed'))
+        expect(dismissed).toBe('true')
+
+        // Reload and verify CTA is completely hidden
+        await page.reload()
+        await expect(page.locator('[data-newsletter-cta]')).toBeHidden()
+    })
+
+    test('newsletter CTA is hidden when newsletter-subscribed is set', async ({ page }) => {
+        // Set state before navigating
+        await page.goto(`/blog/${slug}`)
+        await page.evaluate(() => localStorage.setItem('newsletter-subscribed', 'true'))
+        await page.reload()
+        await page.waitForLoadState('domcontentloaded')
+        await expect(page.locator('[data-newsletter-cta]')).toBeHidden()
+    })
+
+    test('newsletter CTA respects legacy newsletter-cta-dismissed key', async ({ page }) => {
+        await page.goto(`/blog/${slug}`)
+        await page.evaluate(() => localStorage.setItem('newsletter-cta-dismissed', 'true'))
+        await page.reload()
+        await page.waitForLoadState('domcontentloaded')
+        await expect(page.locator('[data-newsletter-cta]')).toBeHidden()
+    })
 })

apps/website/e2e/newsletter.spec.ts

@@ -45,6 +45,33 @@ test.describe('Newsletter signup', () => {
             await expect(panel.locator('input[type="email"]')).toBeVisible()
             await expect(panel.getByRole('button', { name: 'Sign up' })).toBeVisible()
         })
+
+        test('Newsletter button is hidden when dismissed', async ({ page }) => {
+            await page.goto('/')
+            await page.evaluate(() => localStorage.setItem('newsletter-dismissed', 'true'))
+            await page.reload()
+
+            const toggle = page.locator('[data-newsletter-toggle]')
+            await expect(toggle).toBeHidden()
+        })
+
+        test('Newsletter button is hidden when subscribed', async ({ page }) => {
+            await page.goto('/')
+            await page.evaluate(() => localStorage.setItem('newsletter-subscribed', 'true'))
+            await page.reload()
+
+            const toggle = page.locator('[data-newsletter-toggle]')
+            await expect(toggle).toBeHidden()
+        })
+
+        test('Newsletter button is hidden with legacy dismissed key', async ({ page }) => {
+            await page.goto('/')
+            await page.evaluate(() => localStorage.setItem('newsletter-cta-dismissed', 'true'))
+            await page.reload()
+
+            const toggle = page.locator('[data-newsletter-toggle]')
+            await expect(toggle).toBeHidden()
+        })
     })
 
     test.describe('Footer form', () => {
@@ -56,6 +83,16 @@ test.describe('Newsletter signup', () => {
             await expect(footer.locator('input[type="email"]')).toBeVisible()
             await expect(footer.getByRole('button', { name: 'Sign up' })).toBeVisible()
         })
+
+        test('footer newsletter is visible even when dismissed', async ({ page }) => {
+            await page.goto('/')
+            await page.evaluate(() => localStorage.setItem('newsletter-dismissed', 'true'))
+            await page.reload()
+
+            const footer = page.locator('footer')
+            await expect(footer.getByText('Stay in the loop')).toBeVisible()
+            await expect(footer.locator('input[type="email"]')).toBeVisible()
+        })
     })
 
     test.describe('Download section form', () => {
@@ -67,6 +104,35 @@ test.describe('Newsletter signup', () => {
             await expect(download.locator('input[type="email"]')).toBeVisible()
             await expect(download.getByRole('button', { name: 'Sign up' })).toBeVisible()
         })
+
+        test('download section has "Not interested" dismiss link', async ({ page }) => {
+            await page.goto('/')
+
+            const download = page.locator('#download')
+            const dismissBtn = download.locator('[data-newsletter-inline-dismiss]')
+            await expect(dismissBtn).toBeVisible()
+            await expect(dismissBtn).toHaveText('Not interested')
+        })
+
+        test('download section hides when dismissed', async ({ page }) => {
+            await page.goto('/')
+            await page.evaluate(() => localStorage.setItem('newsletter-dismissed', 'true'))
+            await page.reload()
+
+            const download = page.locator('#download')
+            const content = download.locator('[data-newsletter-inline-content]')
+            await expect(content).toBeHidden()
+        })
+
+        test('download section shows "You\'re on the list" when subscribed', async ({ page }) => {
+            await page.goto('/')
+            await page.evaluate(() => localStorage.setItem('newsletter-subscribed', 'true'))
+            await page.reload()
+
+            const download = page.locator('#download')
+            await expect(download.locator('[data-newsletter-inline-subscribed]')).toBeVisible()
+            await expect(download.locator('[data-newsletter-inline-content]')).toBeHidden()
+        })
     })
 
     test.describe('Client-side validation', () => {

apps/website/src/components/BlogNewsletterCta.astro

@@ -0,0 +1,183 @@
+---
+import NewsletterForm from './NewsletterForm.astro'
+---
+
+<aside class="newsletter-cta" data-newsletter-cta aria-label="Newsletter signup">
+    <div data-newsletter-cta-content>
+        <p class="newsletter-cta__headline">Enjoying this? Get Cmdr updates in your inbox.</p>
+        <p class="newsletter-cta__subline">Product news, tips, and behind-the-scenes stories. No spam, ever.</p>
+
+        <div class="newsletter-cta__form">
+            <NewsletterForm variant="inline" />
+        </div>
+
+        <div class="newsletter-cta__dismiss-row">
+            <button type="button" class="newsletter-cta__not-interested" data-newsletter-cta-dismiss>
+                Not interested
+            </button>
+        </div>
+    </div>
+
+    <p class="newsletter-cta__confirmation" data-newsletter-cta-confirmation>
+        Hidden across the site. Changed your mind? There's a signup in the footer.
+    </p>
+</aside>
+
+<style>
+    .newsletter-cta {
+        position: relative;
+        margin: 2rem 0;
+        padding: 1.5rem;
+        border-radius: 0.75rem;
+        border: 1px solid var(--color-border);
+        border-top: 2px solid var(--color-accent);
+        background: var(--color-surface);
+    }
+
+    .newsletter-cta[data-dismissed] {
+        display: none;
+    }
+
+    .newsletter-cta__headline {
+        margin: 0 0 0.25rem;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--color-text-primary);
+    }
+
+    .newsletter-cta__subline {
+        margin: 0 0 1rem;
+        font-size: 0.875rem;
+        color: var(--color-text-secondary);
+    }
+
+    .newsletter-cta__form {
+        max-width: 28rem;
+    }
+
+    .newsletter-cta__dismiss-row {
+        margin-top: 0.75rem;
+        text-align: right;
+    }
+
+    .newsletter-cta__not-interested {
+        background: none;
+        border: none;
+        color: var(--color-text-tertiary);
+        font-size: 0.8125rem;
+        cursor: pointer;
+        padding: 0.25rem 0.5rem;
+        text-decoration: none;
+        transition: text-decoration var(--duration-normal);
+    }
+
+    .newsletter-cta__not-interested:hover {
+        text-decoration: underline;
+        text-underline-offset: 2px;
+    }
+
+    .newsletter-cta__not-interested:focus-visible {
+        outline: 2px solid var(--color-accent);
+        outline-offset: 2px;
+    }
+
+    .newsletter-cta__confirmation {
+        display: none;
+        font-size: 0.8125rem;
+        color: var(--color-text-secondary);
+        margin: 0;
+        transition: opacity var(--duration-slow);
+    }
+
+    .newsletter-cta__confirmation[data-visible] {
+        display: block;
+    }
+
+    .newsletter-cta__confirmation[data-fading] {
+        opacity: 0;
+    }
+
+    [data-newsletter-cta-content][data-hidden] {
+        display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .newsletter-cta,
+        .newsletter-cta__confirmation {
+            transition: none !important;
+        }
+    }
+</style>
+
+<script>
+    function isNewsletterHidden(): boolean {
+        return (
+            localStorage.getItem('newsletter-subscribed') === 'true' ||
+            localStorage.getItem('newsletter-dismissed') === 'true' ||
+            localStorage.getItem('newsletter-cta-dismissed') === 'true'
+        )
+    }
+
+    function hideConfirmationAfterDelay(confirmation: HTMLElement) {
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        if (prefersReducedMotion) {
+            confirmation.removeAttribute('data-visible')
+            return
+        }
+
+        setTimeout(() => {
+            confirmation.setAttribute('data-fading', '')
+            setTimeout(() => {
+                confirmation.removeAttribute('data-visible')
+                confirmation.removeAttribute('data-fading')
+            }, 500)
+        }, 3000)
+    }
+
+    document.addEventListener('astro:page-load', () => {
+        const ctas = document.querySelectorAll<HTMLElement>('[data-newsletter-cta]')
+
+        if (isNewsletterHidden()) {
+            ctas.forEach((cta) => {
+                cta.dataset.dismissed = ''
+            })
+            return
+        }
+
+        ctas.forEach((cta) => {
+            const dismissButton = cta.querySelector<HTMLButtonElement>('[data-newsletter-cta-dismiss]')
+            if (!dismissButton || dismissButton.dataset.bound) return
+            dismissButton.dataset.bound = 'true'
+
+            dismissButton.addEventListener('click', () => {
+                localStorage.setItem('newsletter-dismissed', 'true')
+
+                // Hide content, show confirmation in this CTA
+                const content = cta.querySelector<HTMLElement>('[data-newsletter-cta-content]')
+                const confirmation = cta.querySelector<HTMLElement>('[data-newsletter-cta-confirmation]')
+                if (content) content.setAttribute('data-hidden', '')
+                if (confirmation) {
+                    confirmation.setAttribute('data-visible', '')
+                    hideConfirmationAfterDelay(confirmation)
+                }
+
+                // Hide all other CTAs on the page immediately
+                const allCtas = document.querySelectorAll<HTMLElement>('[data-newsletter-cta]')
+                allCtas.forEach((el) => {
+                    if (el !== cta) {
+                        el.dataset.dismissed = ''
+                    }
+                })
+
+                // Also hide any inline newsletter wrappers and header nav items
+                document.querySelectorAll<HTMLElement>('[data-newsletter-inline]').forEach((el) => {
+                    const otherContent = el.querySelector<HTMLElement>('[data-newsletter-inline-content]')
+                    if (otherContent) otherContent.setAttribute('data-hidden', '')
+                })
+                document.querySelectorAll<HTMLElement>('[data-newsletter-nav]').forEach((el) => {
+                    el.style.display = 'none'
+                })
+            })
+        })
+    })
+</script>

apps/website/src/components/Download.astro

@@ -1,6 +1,6 @@
 ---
 import { version, dmgUrl } from '../lib/release'
-import NewsletterForm from './NewsletterForm.astro'
+import NewsletterInlineWrapper from './NewsletterInlineWrapper.astro'
 ---
 
 <section id="download" class="relative px-6 py-32">
@@ -67,13 +67,8 @@ import NewsletterForm from './NewsletterForm.astro'
         </div>
 
         <!-- Other platforms -->
-        <div class="mt-8 text-center">
-            <p class="mb-3 text-[var(--color-text-tertiary)]">
-                Windows and Linux coming soon. Get notified when they're ready:
-            </p>
-            <div class="mx-auto max-w-sm">
-                <NewsletterForm variant="inline" />
-            </div>
+        <div class="mt-8">
+            <NewsletterInlineWrapper label="Windows and Linux coming soon. Get notified when they're ready:" />
         </div>
     </div>
 </section>

apps/website/src/components/Header.astro

@@ -36,6 +36,7 @@ const navLinks = [
                 aria-expanded="false"
                 aria-controls="newsletter-panel"
                 data-newsletter-toggle
+                data-newsletter-nav
             >
                 Newsletter
             </button>
@@ -139,7 +140,7 @@ const navLinks = [
             </a>
 
             <!-- Newsletter section (mobile) -->
-            <div class="mobile-menu__newsletter">
+            <div class="mobile-menu__newsletter" data-newsletter-nav>
                 <p class="mobile-menu__newsletter-label">Newsletter</p>
                 <p class="mobile-menu__newsletter-desc">Get Cmdr news in your inbox. No spam, we promise.</p>
                 <NewsletterForm variant="inline" />
@@ -336,11 +337,29 @@ const navLinks = [
 
 <script>
     document.addEventListener('astro:page-load', () => {
+        // Check if newsletter should be hidden site-wide
+        const newsletterHidden =
+            localStorage.getItem('newsletter-subscribed') === 'true' ||
+            localStorage.getItem('newsletter-dismissed') === 'true' ||
+            localStorage.getItem('newsletter-cta-dismissed') === 'true'
+
         // Desktop newsletter toggle
         const desktopToggle = document.querySelector<HTMLButtonElement>('[data-newsletter-toggle]')
         const newsletterPanel = document.getElementById('newsletter-panel')
 
-        if (desktopToggle && newsletterPanel) {
+        if (newsletterHidden) {
+            // Hide all newsletter nav elements
+            document.querySelectorAll<HTMLElement>('[data-newsletter-nav]').forEach((el) => {
+                el.style.display = 'none'
+            })
+            // Close the panel if it's open
+            if (newsletterPanel && newsletterPanel.getAttribute('aria-hidden') === 'false') {
+                newsletterPanel.setAttribute('aria-hidden', 'true')
+                if (desktopToggle) desktopToggle.setAttribute('aria-expanded', 'false')
+            }
+        }
+
+        if (desktopToggle && newsletterPanel && !newsletterHidden) {
             if (!desktopToggle.dataset.bound) {
                 desktopToggle.dataset.bound = 'true'