From b5b3885d195c653a83b7fd5e346149faa444acd0 Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Fri, 19 Jun 2026 10:40:40 +0200
Subject: [PATCH] feat(extension): finish onboarding tour with closing step &
 cleaner welcome

- Add the previously-orphaned 5th onboarding step (ONBOARDING_5) so the tour ends on a closing card instead of stopping at the username field
- Make step 1 a centered welcome card instead of spotlighting the logo; guard querySelector for target-less steps
- Fix stale static placeholders in popup.html (Step 1 of 3 -> 5, progress 33% -> 20%)

Verified ONBOARDING_5/DONE exist across all 13 locales; rendered with the longest (German) copy.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 extension/popup.html |  4 ++--
 extension/popup.js   | 15 +++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/extension/popup.html b/extension/popup.html
index 74c7180..dc2e31a 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -659,14 +659,14 @@
         <div id="onboarding-card" style="position:fixed; background:var(--card); padding:16px 20px; border-radius:12px; width:280px; box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:1002; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing:border-box; border:1px solid #334155; opacity:0; transform: scale(0.9); display:none;">
             <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                 <span id="onboarding-icon" style="font-size:24px;">👋</span>
-                <span id="onboarding-step-indicator" style="font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px;">Step 1 of 3</span>
+                <span id="onboarding-step-indicator" style="font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px;">Step 1 of 5</span>
             </div>
             <h2 id="onboarding-title" style="color:var(--accent); margin:0 0 6px; font-size:14px; font-weight:700; text-align:left;">Welcome to KoalaSync!</h2>
             <p id="onboarding-text" style="color:var(--text-muted); font-size:12px; margin:0 0 16px; line-height:1.4; text-align:left;">Let's get you started.</p>
             
             <!-- Progress Bar -->
             <div id="onboarding-progress-container" style="height:4px; background:#334155; border-radius:2px; margin-bottom:16px; overflow:hidden;">
-                <div id="onboarding-progress-bar" style="height:100%; width:33%; background:var(--accent); transition:width 0.3s ease;"></div>
+                <div id="onboarding-progress-bar" style="height:100%; width:20%; background:var(--accent); transition:width 0.3s ease;"></div>
             </div>
             
             <div style="display:flex; gap:8px; justify-content:space-between; align-items:center;">
diff --git a/extension/popup.js b/extension/popup.js
index 4c39bc9..6b0a07e 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -2119,9 +2119,9 @@ const onboardingSteps = [
     { 
         icon: '👋', 
         get title() { return getMessage('ONBOARDING_1_TITLE'); }, 
-        get text() { return getMessage('ONBOARDING_1_TEXT'); }, 
+        get text() { return getMessage('ONBOARDING_1_TEXT'); },
         targetTab: 'tab-room',
-        targetSelector: 'h1'
+        targetSelector: null
     },
     { 
         icon: '🏠', 
@@ -2140,9 +2140,16 @@ const onboardingSteps = [
     { 
         icon: '⚙️', 
         get title() { return getMessage('ONBOARDING_4_TITLE'); }, 
-        get text() { return getMessage('ONBOARDING_4_TEXT'); }, 
+        get text() { return getMessage('ONBOARDING_4_TEXT'); },
         targetTab: 'tab-settings',
         targetSelector: '#username'
+    },
+    {
+        icon: '🍿',
+        get title() { return getMessage('ONBOARDING_5_TITLE'); },
+        get text() { return getMessage('ONBOARDING_5_TEXT'); },
+        targetTab: 'tab-room',
+        targetSelector: null
     }
 ];
 
@@ -2316,7 +2323,7 @@ function renderOnboardingStep() {
     }
 
     onboardingTimeout = setTimeout(() => {
-        const targetEl = document.querySelector(step.targetSelector);
+        const targetEl = step.targetSelector ? document.querySelector(step.targetSelector) : null;
         if (targetEl && targetEl.offsetParent !== null) {
             positionSpotlightAndCard(targetEl);
         } else {