refactor: auto-prompt for notification permission, drop OT alerts button
CI / Lint (push) Successful in 7s
CI / Test (push) Successful in 10s
CI / Build & Push (push) Successful in 19s

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>
This commit is contained in:
2026-04-19 13:12:01 -04:00
parent 4ea6b87326
commit 64b2e4b5e1
3 changed files with 5 additions and 58 deletions
+5 -24
View File
@@ -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) {
-31
View File
@@ -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;