From 25418c5db2d5f6a7c7f422541c443909a8bf6b5a Mon Sep 17 00:00:00 2001
From: Samuel Berthe <dev@samuel-berthe.fr>
Date: Tue, 14 Apr 2026 20:09:30 +0200
Subject: [PATCH] feat: add star nudge toast after every 5 rule copies

Show a dismissible toast (bottom-right, 20s auto-hide) nudging users
to star the GitHub repo. Fires every 5 copies via a sessionStorage
counter. CopyButton dispatches a copy-success custom event; StarToast
listens for it and manages display logic.
---
 site/src/components/CopyButton.astro |  2 +
 site/src/components/StarToast.astro  | 66 ++++++++++++++++++++++++++++
 site/src/layouts/BaseLayout.astro    |  2 +
 3 files changed, 70 insertions(+)
 create mode 100644 site/src/components/StarToast.astro

diff --git a/site/src/components/CopyButton.astro b/site/src/components/CopyButton.astro
index a9aa149..5a2e54e 100644
--- a/site/src/components/CopyButton.astro
+++ b/site/src/components/CopyButton.astro
@@ -86,5 +86,7 @@ const btnId = `copy-btn-${targetId}`;
       copyLabel?.classList.remove('hidden');
       copiedLabel?.classList.add('hidden');
     }, 2000);
+
+    window.dispatchEvent(new CustomEvent('copy-success'));
   });
 </script>
diff --git a/site/src/components/StarToast.astro b/site/src/components/StarToast.astro
new file mode 100644
index 0000000..941a5c7
--- /dev/null
+++ b/site/src/components/StarToast.astro
@@ -0,0 +1,66 @@
+---
+import { GITHUB_URL } from '../data/site';
+---
+
+<!-- Star nudge toast — shown every 5 copies -->
+<div
+  id="star-toast"
+  role="status"
+  aria-live="polite"
+  class="fixed bottom-6 right-6 z-50 hidden max-w-sm w-full"
+>
+  <div class="flex items-start gap-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl shadow-lg px-4 py-3">
+    <svg class="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+    </svg>
+    <div class="flex-1 min-w-0">
+      <p class="text-sm text-slate-700 dark:text-slate-200">
+        Rule copied! If this saved you time,
+        <a
+          href={GITHUB_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="font-medium text-brand dark:text-brand-dark hover:underline"
+        >star the project on GitHub</a>.
+      </p>
+    </div>
+    <button
+      id="star-toast-close"
+      aria-label="Dismiss"
+      class="flex-shrink-0 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
+    >
+      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+</div>
+
+<script>
+  const COPY_COUNT_KEY = 'gh_star_copy_count';
+  const SHOW_EVERY = 5;
+  const toast = document.getElementById('star-toast');
+  const closeBtn = document.getElementById('star-toast-close');
+  let autoHideTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function showToast() {
+    if (!toast) return;
+
+    const count = (parseInt(sessionStorage.getItem(COPY_COUNT_KEY) ?? '0', 10) || 0) + 1;
+    sessionStorage.setItem(COPY_COUNT_KEY, String(count));
+
+    if (count % SHOW_EVERY !== 0) return;
+
+    if (autoHideTimer) clearTimeout(autoHideTimer);
+    toast.classList.remove('hidden');
+    autoHideTimer = setTimeout(hideToast, 20000);
+  }
+
+  function hideToast() {
+    toast?.classList.add('hidden');
+    if (autoHideTimer) { clearTimeout(autoHideTimer); autoHideTimer = null; }
+  }
+
+  closeBtn?.addEventListener('click', hideToast);
+  window.addEventListener('copy-success', showToast);
+</script>
diff --git a/site/src/layouts/BaseLayout.astro b/site/src/layouts/BaseLayout.astro
index 243d1d7..ee04246 100644
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -2,6 +2,7 @@
 import '../styles/global.css';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import StarToast from '../components/StarToast.astro';
 import SEO from '../components/SEO.astro';
 import { SITE_ORIGIN, AUTHOR_NAME } from '../data/site';
 
@@ -96,5 +97,6 @@ const canonical = canonicalUrl ?? `${SITE_ORIGIN}${base}${Astro.url.pathname.rep
   </main>
 
   <Footer base={base} />
+  <StarToast />
 </body>
 </html>