From 64b2e4b5e183789f3652a44811ca1c3df16e9a6b Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sun, 19 Apr 2026 13:12:01 -0400
Subject: [PATCH] refactor: auto-prompt for notification permission, drop OT
 alerts button

Browsers already gate Notification.requestPermission behind a native
prompt, so a dedicated button was redundant UI clutter. Prompting on
load (only when permission state is "default") keeps the flow and
clears space in the banner for future notification types.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/script.js     | 29 +++++------------------------
 app/static/styles.css    | 31 -------------------------------
 app/templates/index.html |  3 ---
 3 files changed, 5 insertions(+), 58 deletions(-)

diff --git a/app/static/script.js b/app/static/script.js
index 49b30da..ae301a9 100644
--- a/app/static/script.js
+++ b/app/static/script.js
@@ -394,29 +394,10 @@ function maybeNotifyOT(data) {
     if (changed) persistSeenOT(seen);
 }
 
-function wireOTButton() {
-    const btn = document.querySelector('.banner-notify');
-    if (!btn) return;
-    if (!('Notification' in window)) {
-        btn.disabled = true;
-        btn.title = 'Notifications not supported in this browser';
-        return;
-    }
-    reflectOTPermission(btn);
-    btn.addEventListener('click', async () => {
-        if (Notification.permission === 'default') {
-            await Notification.requestPermission();
-        }
-        reflectOTPermission(btn);
-    });
-}
-
-function reflectOTPermission(btn) {
-    const state = Notification.permission;
-    btn.dataset.perm = state;
-    if (state === 'granted')      btn.title = 'OT alerts enabled';
-    else if (state === 'denied')  btn.title = 'OT alerts blocked in browser settings';
-    else                          btn.title = 'Enable OT alerts';
+function requestNotificationPermission() {
+    if (!('Notification' in window)) return;
+    if (Notification.permission !== 'default') return;
+    Notification.requestPermission().catch(() => {});
 }
 
 // ── Init ─────────────────────────────────────────────
@@ -427,7 +408,7 @@ function autoRefresh() {
 }
 
 window.addEventListener('load', () => {
-    wireOTButton();
+    requestNotificationPermission();
     autoRefresh();
     setInterval(tickClocks, 1000);
     if ('serviceWorker' in navigator) {
diff --git a/app/static/styles.css b/app/static/styles.css
index 608ba9b..811d32b 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -453,37 +453,6 @@ main {
     font-weight: 700;
 }
 
-.banner-notify {
-    background: rgba(212, 175, 55, 0.08);
-    border: 1px solid var(--cup-gold-dim);
-    color: var(--cup-gold-2);
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    padding: 0.45rem 0.7rem;
-    border-radius: 999px;
-    cursor: pointer;
-    white-space: nowrap;
-    transition: background 120ms ease, border-color 120ms ease;
-}
-
-.banner-notify:hover {
-    background: rgba(212, 175, 55, 0.18);
-    border-color: var(--cup-gold-1);
-}
-
-.banner-notify[data-perm="granted"] {
-    background: rgba(212, 175, 55, 0.2);
-    border-color: var(--cup-gold-1);
-    color: var(--cup-gold-2);
-}
-
-.banner-notify[data-perm="denied"] {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
 @media (min-width: 900px) {
     .playoff-banner {
         padding: 1.125rem 2rem;
diff --git a/app/templates/index.html b/app/templates/index.html
index c8ea56f..3328ccb 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -46,9 +46,6 @@
         </div>
         <div class="banner-actions">
             <a class="banner-bracket-link" href="/bracket">Bracket</a>
-            <button class="banner-notify" type="button" title="Notify me on playoff OT" aria-label="Enable OT notifications">
-                <span class="bell-label">OT alerts</span>
-            </button>
         </div>
     </section>
     <main>