From 7df188b3fd158f392e5ce5f91546387a1171251f Mon Sep 17 00:00:00 2001
From: ReaperOfVeriod <reaperofveriod@gmail.com>
Date: Sun, 25 Oct 2026 05:52:51 +0100
Subject: [PATCH] Add editable follow alert starter

---
 src/App.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 693843e..1f4d618 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -979,9 +979,9 @@
     selectedOverlayId = '';
     overlayName = 'New Overlay';
     overlaySlug = `overlay-${Date.now()}`;
-    overlayHtml = '<div class="alert">Hello ${username}</div>';
-    overlayCss = '.alert { color: white; font: 32px sans-serif; }';
-    overlayJavascript = '';
+    overlayHtml = '<div id="trixie-follow-alert" class="alert" role="status" aria-live="polite"><span id="trixie-follow-name"></span> followed!</div>';
+    overlayCss = '.alert { opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease; color: white; font: 700 32px sans-serif; padding: 18px 24px; border-radius: 8px; background: rgba(25, 18, 40, 0.92); } .alert.visible { opacity: 1; transform: translateY(0); }';
+    overlayJavascript = "const alertBox = document.getElementById('trixie-follow-alert'); const alertName = document.getElementById('trixie-follow-name'); window.addEventListener('trixie-alert', (event) => { const detail = event.detail || {}; const payload = detail.payload || {}; if (detail.event_type !== 'follow') return; alertName.textContent = String(payload.user_name || payload.user_login || 'Someone'); alertBox.classList.add('visible'); clearTimeout(window.trixieAlertTimer); window.trixieAlertTimer = setTimeout(() => alertBox.classList.remove('visible'), 6000); });";
     overlayEnabled = true;
     overlayDisabledDesign = 'transparent';
   }