From a56d8cf2a41a663c3ef1c12fa845cc24622f5d2c Mon Sep 17 00:00:00 2001
From: Samuel Berthe <dev@samuel-berthe.fr>
Date: Tue, 14 Apr 2026 20:30:08 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20refine=20star=20toast=20=E2=80=94=20bra?=
 =?UTF-8?q?nd=20orange,=20idle=20trigger,=2015s=20auto-hide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Style: brand orange background with white text (visible on any bg)
- Trigger: every 5 copies OR after 10 minutes of inactivity on page
- Auto-hide: 15s (reset if toast re-triggers before expiry)
- Idle timer resets on each copy
---
 site/src/components/StarToast.astro | 58 +++++++++++++++++------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/site/src/components/StarToast.astro b/site/src/components/StarToast.astro
index 941a5c7..a7121a7 100644
--- a/site/src/components/StarToast.astro
+++ b/site/src/components/StarToast.astro
@@ -9,25 +9,22 @@ import { GITHUB_URL } from '../data/site';
   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">
+  <div class="flex items-center gap-3 bg-brand rounded-xl shadow-xl px-4 py-3">
+    <svg class="w-4 h-4 text-white/80 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>
+    <p class="flex-1 text-sm text-white">
+      Useful? <a
+        href={GITHUB_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="font-semibold underline underline-offset-2 hover:no-underline transition-all"
+      >Star on GitHub</a> — it helps others discover it.
+    </p>
     <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"
+      class="flex-shrink-0 text-white/60 hover:text-white 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" />
@@ -39,21 +36,18 @@ import { GITHUB_URL } from '../data/site';
 <script>
   const COPY_COUNT_KEY = 'gh_star_copy_count';
   const SHOW_EVERY = 5;
+  const IDLE_MS = 10 * 60 * 1000; // 10 minutes
+
   const toast = document.getElementById('star-toast');
   const closeBtn = document.getElementById('star-toast-close');
   let autoHideTimer: ReturnType<typeof setTimeout> | null = null;
+  let idleTimer: ReturnType<typeof setTimeout> | null = null;
 
-  function showToast() {
+  function displayToast() {
     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);
+    autoHideTimer = setTimeout(hideToast, 15000);
   }
 
   function hideToast() {
@@ -61,6 +55,24 @@ import { GITHUB_URL } from '../data/site';
     if (autoHideTimer) { clearTimeout(autoHideTimer); autoHideTimer = null; }
   }
 
+  function resetIdleTimer() {
+    if (idleTimer) clearTimeout(idleTimer);
+    idleTimer = setTimeout(displayToast, IDLE_MS);
+  }
+
+  function onCopy() {
+    // Increment counter and show every 5th copy
+    const count = (parseInt(sessionStorage.getItem(COPY_COUNT_KEY) ?? '0', 10) || 0) + 1;
+    sessionStorage.setItem(COPY_COUNT_KEY, String(count));
+    if (count % SHOW_EVERY === 0) displayToast();
+
+    // Reset the idle timer on each copy
+    resetIdleTimer();
+  }
+
   closeBtn?.addEventListener('click', hideToast);
-  window.addEventListener('copy-success', showToast);
+  window.addEventListener('copy-success', onCopy);
+
+  // Start idle timer on page load
+  resetIdleTimer();
 </script>