Merge branch 'main' into feat/email-in-settings

src/pages/Dashboard.tsx

@@ -1,13 +1,8 @@
-import React, { Suspense } from 'react'
 import { Link } from 'react-router-dom'
 import { authClient } from '../lib/auth-client.ts'
-import { usePurchases, usePriceAlerts, usePriceHistory } from '../hooks/useApi.ts'
+import { usePurchases, usePriceAlerts } from '../hooks/useApi.ts'
 import { StoreIcon } from '../components/StoreIcon.tsx'
 
-const LazySparklineCard = React.lazy(() =>
-  import('../components/SparklineChart.tsx').then((mod) => ({ default: mod.SparklineCard }))
-)
-
 export function Dashboard() {
   const { data: session, isPending } = authClient.useSession()
 
@@ -44,19 +39,11 @@ export function Dashboard() {
 function AuthenticatedDashboard({ userName }: { userName: string }) {
   const { data: purchases = [], isLoading: purchasesLoading } = usePurchases()
   const { data: alerts = [], isLoading: alertsLoading } = usePriceAlerts()
-  const { data: eggHistory = [] } = usePriceHistory('prod10')
-  const { data: milkHistory = [] } = usePriceHistory('prod1')
 
   const triggeredAlerts = alerts.filter((a) => a.triggered)
   const watchingAlerts = alerts.filter((a) => !a.triggered)
   const recentPurchases = purchases.slice(0, 3)
 
-  const sparklineData = eggHistory.filter((p) => p.storeId === 'meijer').slice(-8)
-  const milkSparkline = milkHistory.filter((p) => p.storeId === 'kroger').slice(-8)
-
-  const eggCurrent = sparklineData.length > 0 ? `$${sparklineData[sparklineData.length - 1].price.toFixed(2)}` : '—'
-  const milkCurrent = milkSparkline.length > 0 ? `$${milkSparkline[milkSparkline.length - 1].price.toFixed(2)}` : '—'
-
   if (purchasesLoading || alertsLoading) {
     return <DashboardSkeleton />
   }
@@ -106,11 +93,8 @@ function AuthenticatedDashboard({ userName }: { userName: string }) {
       {/* Price trend sparklines */}
       <section className="mt-6">
         <h2 className="mb-3 text-lg font-semibold text-gray-700">Price Trends</h2>
-        <div className="space-y-3">
-          <Suspense fallback={<SparklinePlaceholder />}>
-            <LazySparklineCard label="Eggs (dozen)" data={sparklineData} current={eggCurrent} />
-            <LazySparklineCard label="Whole Milk (1 gal)" data={milkSparkline} current={milkCurrent} />
-          </Suspense>
+        <div className="rounded-xl bg-white p-4 shadow-sm text-center text-sm text-gray-400">
+          Connect a store to see price trends
         </div>
       </section>
 
@@ -173,6 +157,7 @@ function AuthenticatedDashboard({ userName }: { userName: string }) {
 function DashboardSkeleton() {
   return (
     <div className="animate-pulse">
+      <h1 className="sr-only">Loading CartSnitch…</h1>
       <div className="h-8 w-40 rounded bg-gray-200" />
       <div className="mt-4 grid grid-cols-2 gap-3">
         <div className="h-24 rounded-xl bg-gray-200" />
@@ -186,15 +171,3 @@ function DashboardSkeleton() {
     </div>
   )
 }
-
-function SparklinePlaceholder() {
-  return (
-    <div className="flex items-center gap-4 rounded-xl bg-white p-4 shadow-sm animate-pulse">
-      <div className="min-w-0 flex-1">
-        <div className="h-4 w-24 rounded bg-gray-200" />
-        <div className="mt-2 h-6 w-16 rounded bg-gray-200" />
-      </div>
-      <div className="h-10 w-24 rounded bg-gray-100" />
-    </div>
-  )
-}

src/pages/Login.tsx

@@ -31,8 +31,14 @@ export function Login() {
         throw new Error(authError.message ?? 'Sign in failed')
       }
 
-      setAuthenticated(true)
-      navigate('/')
+      // After successful signIn, force a session fetch to confirm the cookie is set
+      // before navigating to the protected route
+      const sessionResult = await authClient.getSession()
+      if (sessionResult.data) {
+        navigate('/')
+      } else {
+        setError('Sign in failed. Please try again.')
+      }
     } catch {
       if (import.meta.env.VITE_MOCK_AUTH === 'true') {
         setAuthenticated(true)
@@ -46,7 +52,7 @@ export function Login() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+    <main className="flex min-h-screen flex-col items-center justify-center px-4">
       <h1 className="mb-2 text-3xl font-bold text-gray-900">CartSnitch</h1>
       <p className="mb-8 text-sm text-gray-500">Track prices. Save money.</p>
 
@@ -88,10 +94,10 @@ export function Login() {
 
       <p className="mt-6 text-sm text-gray-500">
         Don't have an account?{' '}
-        <Link to="/register" className="text-brand-blue">
+        <Link to="/register" className="text-brand-blue underline">
           Sign up
         </Link>
       </p>
-    </div>
+    </main>
   )
 }

src/pages/Register.tsx

@@ -38,8 +38,15 @@ export function Register() {
         throw new Error(authError.message ?? 'Registration failed')
       }
 
-      setAuthenticated(true)
-      navigate('/')
+      // After successful signUp, force a session fetch to confirm the cookie is set
+      // before navigating to the protected route
+      const sessionResult = await authClient.getSession()
+      if (sessionResult.data) {
+        navigate('/')
+      } else {
+        // Session not established — show success message and link to login
+        setError('Account created! Please sign in.')
+      }
     } catch {
       if (import.meta.env.VITE_MOCK_AUTH === 'true') {
         setAuthenticated(true)