feat: update login with plan selection and subscription state

Login reads ?plan= query param, stores in context/localStorage.
Sidebar reads plan from context. Login page uses CSS variable theming.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Sonra0

src/app/login/page.tsx

@@ -1,21 +1,36 @@
 "use client";
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { signInWithPopup, GoogleAuthProvider, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth";
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import {
+  signInWithPopup,
+  GoogleAuthProvider,
+  signInWithEmailAndPassword,
+  createUserWithEmailAndPassword,
+} from "firebase/auth";
 import { auth } from "@/lib/firebase";
 import { useAuth } from "@/contexts/AuthContext";
-import { useEffect } from "react";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/Button";
 
 export default function LoginPage() {
-  const { user, loading } = useAuth();
+  const { user, loading, setPlan } = useAuth();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isSignUp, setIsSignUp] = useState(false);
   const [error, setError] = useState("");
   const [submitting, setSubmitting] = useState(false);
 
+  // Read plan from URL param
+  useEffect(() => {
+    const planParam = searchParams.get("plan");
+    if (planParam === "premium" || planParam === "free") {
+      setPlan(planParam);
+    }
+  }, [searchParams, setPlan]);
+
   useEffect(() => {
     if (!loading && user) {
       router.replace("/dashboard");
@@ -27,8 +42,8 @@ export default function LoginPage() {
       setError("");
       await signInWithPopup(auth, new GoogleAuthProvider());
       router.replace("/dashboard");
-    } catch (err: any) {
-      setError(err.message || "Google sign-in failed");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Google sign-in failed");
     }
   };
 
@@ -43,102 +58,138 @@ export default function LoginPage() {
         await signInWithEmailAndPassword(auth, email, password);
       }
       router.replace("/dashboard");
-    } catch (err: any) {
-      setError(err.message || "Authentication failed");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Authentication failed");
     } finally {
       setSubmitting(false);
     }
   };
 
   if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-gray-50">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-indigo-600 border-t-transparent" />
+      <div className="flex min-h-screen items-center justify-center bg-[var(--bg-secondary)]">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-[var(--accent)] border-t-transparent" />
       </div>
     );
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-purple-50 px-4">
-      <div className="w-full max-w-md space-y-8">
+    <div className="flex min-h-screen items-center justify-center bg-[var(--bg-secondary)] px-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+        className="w-full max-w-md space-y-8"
+      >
         <div className="text-center">
-          <h1 className="text-3xl font-bold text-indigo-600">Seniora</h1>
-          <p className="mt-2 text-sm text-gray-600">
-            {isSignUp ? "Create your account" : "Sign in to your account"}
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-[var(--accent)] text-white font-bold text-xl mb-4">
+            S
+          </div>
+          <h1 className="text-2xl font-bold text-[var(--text-primary)]">
+            {isSignUp ? "Create your account" : "Welcome back"}
+          </h1>
+          <p className="mt-1 text-sm text-[var(--text-secondary)]">
+            {isSignUp
+              ? "Get started with Seniora"
+              : "Sign in to continue to Seniora"}
           </p>
         </div>
 
-        <div className="rounded-xl border border-gray-200 bg-white p-8 shadow-sm space-y-6">
+        <div className="rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-8 shadow-[var(--card-shadow)] space-y-6">
           {error && (
-            <p className="rounded-lg bg-red-50 p-3 text-sm text-red-600">{error}</p>
+            <p className="rounded-xl bg-[var(--danger-light)] p-3 text-sm text-red-700">
+              {error}
+            </p>
           )}
 
           <button
             onClick={handleGoogle}
-            className="flex w-full items-center justify-center gap-3 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+            className="flex w-full items-center justify-center gap-3 rounded-xl border border-[var(--border-default)] px-4 py-2.5 text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors"
           >
             <svg className="h-5 w-5" viewBox="0 0 24 24">
-              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
-              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
-              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
-              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+              <path
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+                fill="#4285F4"
+              />
+              <path
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                fill="#34A853"
+              />
+              <path
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                fill="#FBBC05"
+              />
+              <path
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                fill="#EA4335"
+              />
             </svg>
             Continue with Google
           </button>
 
           <div className="relative">
             <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-gray-200" />
+              <div className="w-full border-t border-[var(--border-default)]" />
             </div>
             <div className="relative flex justify-center text-sm">
-              <span className="bg-white px-4 text-gray-500">or</span>
+              <span className="bg-[var(--card-bg)] px-4 text-[var(--text-muted)]">
+                or
+              </span>
             </div>
           </div>
 
           <form onSubmit={handleEmailAuth} className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-1">
+                Email
+              </label>
               <input
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                className="w-full rounded-xl border border-[var(--border-default)] bg-[var(--bg-primary)] px-3 py-2.5 text-sm text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)]"
                 placeholder="you@example.com"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-1">
+                Password
+              </label>
               <input
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 required
                 minLength={6}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                className="w-full rounded-xl border border-[var(--border-default)] bg-[var(--bg-primary)] px-3 py-2.5 text-sm text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)]"
                 placeholder="••••••••"
               />
             </div>
-            <button
+            <Button
               type="submit"
-              disabled={submitting}
-              className="w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition-colors disabled:opacity-50"
+              loading={submitting}
+              className="w-full"
+              size="lg"
             >
-              {submitting ? "Please wait..." : isSignUp ? "Create Account" : "Sign In"}
-            </button>
+              {isSignUp ? "Create Account" : "Sign In"}
+            </Button>
           </form>
 
-          <p className="text-center text-sm text-gray-500">
+          <p className="text-center text-sm text-[var(--text-secondary)]">
             {isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
             <button
-              onClick={() => { setIsSignUp(!isSignUp); setError(""); }}
-              className="font-medium text-indigo-600 hover:text-indigo-500"
+              onClick={() => {
+                setIsSignUp(!isSignUp);
+                setError("");
+              }}
+              className="font-medium text-[var(--accent)] hover:underline"
             >
               {isSignUp ? "Sign In" : "Sign Up"}
             </button>
           </p>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }

src/components/layout/Sidebar.tsx

@@ -8,8 +8,6 @@ import { auth } from "@/lib/firebase";
 import { useAuth } from "@/contexts/AuthContext";
 import { Badge } from "@/components/ui/Badge";
 
-// TODO: fetch real subscription plan from API
-const plan = "premium";
 
 const navItems = [
   {
@@ -36,7 +34,7 @@ const navItems = [
 export function Sidebar() {
   const [collapsed, setCollapsed] = useState(false);
   const pathname = usePathname();
-  const { user } = useAuth();
+  const { user, plan } = useAuth();
 
   const displayName = user?.displayName || user?.email?.split("@")[0] || "User";
   const initial = displayName.charAt(0).toUpperCase();

src/contexts/AuthContext.tsx

@@ -4,21 +4,35 @@ import { createContext, useContext, useEffect, useState, ReactNode } from "react
 import { User, onAuthStateChanged } from "firebase/auth";
 import { auth } from "@/lib/firebase";
 
+type Plan = "free" | "premium";
+
 interface AuthContextType {
   user: User | null;
   loading: boolean;
+  plan: Plan;
+  setPlan: (plan: Plan) => void;
   getIdToken: () => Promise<string | null>;
 }
 
 const AuthContext = createContext<AuthContextType>({
   user: null,
   loading: true,
+  plan: "free",
+  setPlan: () => {},
   getIdToken: async () => null,
 });
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [plan, setPlanState] = useState<Plan>("free");
+
+  useEffect(() => {
+    const stored = localStorage.getItem("seniora_plan");
+    if (stored === "premium" || stored === "free") {
+      setPlanState(stored);
+    }
+  }, []);
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (user) => {
@@ -28,13 +42,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return unsubscribe;
   }, []);
 
+  const setPlan = (p: Plan) => {
+    setPlanState(p);
+    localStorage.setItem("seniora_plan", p);
+  };
+
   const getIdToken = async () => {
     if (!user) return null;
     return user.getIdToken();
   };
 
   return (
-    <AuthContext.Provider value={{ user, loading, getIdToken }}>
+    <AuthContext.Provider value={{ user, loading, plan, setPlan, getIdToken }}>
       {children}
     </AuthContext.Provider>
   );