added driverjs onboarding

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()}