added driverjs onboarding

src/pages/SettingsPage.tsx

@@ -2,7 +2,9 @@ import { useState, useEffect, useCallback } from 'react'
 import { useAuth } from '../contexts/AuthContext'
 import { deleteUser as deleteUserApi } from '../lib/api'
 import { clearDeviceKey, clearEncryptedSecretKey } from '../lib/crypto'
+import { useNavigate } from 'react-router-dom'
 import BottomNav from '../components/BottomNav'
+import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
 
 export default function SettingsPage() {
   const { user, userId, signOut, loading } = useAuth()
@@ -18,6 +20,23 @@ export default function SettingsPage() {
   const [confirmEmail, setConfirmEmail] = useState('')
   const [deleting, setDeleting] = useState(false)
 
+  const { continueTourOnSettings } = useOnboardingTour()
+  const navigate = useNavigate()
+
+  // Continue onboarding tour if navigated here from the history page tour
+  useEffect(() => {
+    if (hasPendingTourStep() === 'settings') {
+      clearPendingTourStep()
+      continueTourOnSettings()
+    }
+  }, [])
+
+  const handleSeeTutorial = () => {
+    localStorage.removeItem('gj-onboarding-done')
+    localStorage.removeItem('gj-tour-pending-step')
+    navigate('/')
+  }
+
   const displayName = user?.displayName || 'User'
 
   // Apply theme to DOM
@@ -203,7 +222,7 @@ export default function SettingsPage() {
             <div className="settings-divider"></div>
             */}
 
-            <div className="settings-item">
+            <div id="tour-theme-switcher" className="settings-item">
               <div className="settings-item-icon settings-item-icon-blue">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                   <circle cx="13.5" cy="6.5" r=".5"></circle>
@@ -249,6 +268,16 @@ export default function SettingsPage() {
           </div>
         )}
 
+        {/* See Tutorial */}
+        <button type="button" className="settings-tutorial-btn" onClick={handleSeeTutorial}>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+          </svg>
+          <span>See Tutorial</span>
+        </button>
+
         {/* Clear Data */}
         <button type="button" className="settings-clear-btn" onClick={handleClearData}>
           <span>Clear All Data</span>