added driverjs onboarding

src/pages/HistoryPage.tsx

@@ -4,6 +4,7 @@ import { getUserEntries, type JournalEntry } from '../lib/api'
 import { decryptEntry } from '../lib/crypto'
 import { formatIST, getISTDateComponents } from '../lib/timezone'
 import BottomNav from '../components/BottomNav'
+import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
 
 interface DecryptedEntry extends JournalEntry {
   decryptedTitle?: string
@@ -19,6 +20,16 @@ export default function HistoryPage() {
   const [loadingEntries, setLoadingEntries] = useState(false)
   const [selectedEntry, setSelectedEntry] = useState<DecryptedEntry | null>(null)
 
+  const { continueTourOnHistory } = useOnboardingTour()
+
+  // Continue onboarding tour if navigated here from the home page tour
+  useEffect(() => {
+    if (hasPendingTourStep() === 'history') {
+      clearPendingTourStep()
+      continueTourOnHistory()
+    }
+  }, [])
+
   // Fetch entries on mount and when userId changes
   useEffect(() => {
     if (!user || !userId) return
@@ -189,7 +200,7 @@ export default function HistoryPage() {
       </header>
 
       <main className="history-container">
-        <div className="calendar-card">
+        <div id="tour-calendar" className="calendar-card">
           <div className="calendar-header">
             <h2 className="calendar-month">{monthName}</h2>
             <div className="calendar-nav">
@@ -239,7 +250,7 @@ export default function HistoryPage() {
           </div>
         </div>
 
-        <section className="recent-entries">
+        <section id="tour-entries-list" className="recent-entries">
           <h3 className="recent-entries-title">
             {selectedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase()}
           </h3>

src/pages/HomePage.tsx

@@ -1,9 +1,11 @@
 import { useAuth } from '../contexts/AuthContext'
 import { Link } from 'react-router-dom'
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { createEntry } from '../lib/api'
 import { encryptEntry } from '../lib/crypto'
 import BottomNav from '../components/BottomNav'
+import WelcomeModal from '../components/WelcomeModal'
+import { useOnboardingTour, hasSeenOnboarding, markOnboardingDone } from '../hooks/useOnboardingTour'
 
 export default function HomePage() {
   const { user, userId, secretKey, loading } = useAuth()
@@ -11,10 +13,30 @@ export default function HomePage() {
   const [title, setTitle] = useState('')
   const [saving, setSaving] = useState(false)
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
-  
+  const [showWelcome, setShowWelcome] = useState(false)
+
   const titleInputRef = useRef<HTMLInputElement>(null)
   const contentTextareaRef = useRef<HTMLTextAreaElement>(null)
 
+  const { startTour } = useOnboardingTour()
+
+  // Check if onboarding should be shown after login
+  useEffect(() => {
+    if (!loading && user && userId && !hasSeenOnboarding()) {
+      setShowWelcome(true)
+    }
+  }, [loading, user, userId])
+
+  const handleStartTour = () => {
+    setShowWelcome(false)
+    startTour()
+  }
+
+  const handleSkipTour = () => {
+    setShowWelcome(false)
+    markOnboardingDone()
+  }
+
   if (loading) {
     return (
       <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center' }}>
@@ -106,6 +128,9 @@ export default function HomePage() {
 
   return (
     <div className="home-page">
+      {showWelcome && (
+        <WelcomeModal onStart={handleStartTour} onSkip={handleSkipTour} />
+      )}
       <main className="journal-container">
         <div className="journal-card">
           <div className="journal-date">{dateString}</div>
@@ -115,6 +140,7 @@ export default function HomePage() {
           <div className="journal-writing-area">
             <input
               type="text"
+              id="tour-title-input"
               className="journal-title-input"
               placeholder="Title your thoughts..."
               value={title}
@@ -125,6 +151,7 @@ export default function HomePage() {
               disabled={saving}
             />
             <textarea
+              id="tour-content-textarea"
               className="journal-entry-textarea"
               placeholder="Start writing your entry here..."
               value={entry}
@@ -151,6 +178,7 @@ export default function HomePage() {
 
           <div style={{ marginTop: '1.5rem', display: 'flex', gap: '0.75rem' }}>
             <button
+              id="tour-save-btn"
               className="journal-write-btn"
               onClick={handleWrite}
               disabled={saving || !title.trim() || !entry.trim()}

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>