feat: add do-not-show option to onboarding reopen tip

Author: alvin000009238

frontend/onboarding-bootstrap.js

@@ -1,5 +1,6 @@
 const ONBOARDING_COMPLETED_KEY = 'onboardingCompleted';
 const ONBOARDING_PROMPT_DISMISSED_KEY = 'onboardingPromptDismissed';
+const ONBOARDING_REOPEN_TIP_DISABLED_KEY = 'onboardingReopenTipDisabled';
 const ONBOARDING_SESSION_ENDED_EVENT = 'onboarding:session-ended';
 
 let startPromptEl = null;
@@ -82,19 +83,25 @@ function removeStartPrompt() {
 }
 
 function showReopenTip() {
+    if (localStorage.getItem(ONBOARDING_REOPEN_TIP_DISABLED_KEY) === 'true') return;
     if (onboardingRunning || startPromptEl || reopenTipEl) return;
 
     reopenTipEl = document.createElement('div');
     reopenTipEl.className = 'onboarding-reopen-tip';
     reopenTipEl.innerHTML = `
         <span class="onboarding-reopen-text">要重新跑一次使用教學嗎？</span>
+        <button type="button" class="onboarding-reopen-disable" data-role="disable">不再提示</button>
         <button type="button" class="onboarding-reopen-start" data-role="start">開始教學</button>
         <button type="button" class="onboarding-reopen-close" data-role="close" aria-label="關閉提示">×</button>
     `;
 
     reopenTipEl.querySelector('[data-role="close"]')?.addEventListener('click', () => {
         removeReopenTip();
     });
+    reopenTipEl.querySelector('[data-role="disable"]')?.addEventListener('click', () => {
+        localStorage.setItem(ONBOARDING_REOPEN_TIP_DISABLED_KEY, 'true');
+        removeReopenTip();
+    });
     reopenTipEl.querySelector('[data-role="start"]')?.addEventListener('click', () => {
         startOnboarding('manual');
     });

public/style.css

@@ -1915,6 +1915,7 @@ body.read-only-mode .header {
     display: flex;
     align-items: center;
     gap: 8px;
+    flex-wrap: wrap;
 }
 
 .onboarding-reopen-close {
@@ -1941,13 +1942,24 @@ body.read-only-mode .header {
     white-space: nowrap;
 }
 
+
+.onboarding-reopen-disable,
 .onboarding-reopen-start {
     border: 1px solid var(--color-primary);
-    background: var(--color-primary);
-    color: var(--md-sys-color-on-primary);
     border-radius: var(--radius-pill);
     font-size: 12px;
     padding: 5px 10px;
     line-height: 1.2;
     cursor: pointer;
 }
+
+.onboarding-reopen-disable {
+    background: transparent;
+    color: var(--color-text-main);
+    border-color: var(--color-border-strong);
+}
+
+.onboarding-reopen-start {
+    background: var(--color-primary);
+    color: var(--md-sys-color-on-primary);
+}