feat: email verification, auto-save settings, calendar UX improvements

- Email verification: 6-digit code + one-click link on signup
- SMTP integration with nodemailer (lazy-init, auto-detect TLS)
- Verify-email page with 6 input boxes, paste support, auto-submit
- Resend verification with 60s rate limiting
- Block login for unverified email accounts

- Auto-save settings: debounced 800ms save on all profile changes
- Redirect to calendar settings after OAuth connection
- Fix Google Calendar connection display after connecting
- Task actions hover toolbar: fix z-index/overflow clipping on first row
- Make day header sticky with proper stacking context

package-lock.json

@@ -12,6 +12,7 @@
         "@auth/prisma-adapter": "^2.11.1",
         "@prisma/client": "^5.22.0",
         "@types/bcryptjs": "^2.4.6",
+        "@types/nodemailer": "^7.0.11",
         "bcryptjs": "^3.0.3",
         "date-fns": "^2.30.0",
         "googleapis": "^170.1.0",
@@ -19,6 +20,7 @@
         "lucide-react": "^0.563.0",
         "next": "^14.0.0",
         "next-auth": "^4.24.13",
+        "nodemailer": "^7.0.13",
         "postcss-cli": "^11.0.1",
         "prisma": "^5.0.0",
         "react": "^18.2.0",
@@ -2463,12 +2465,20 @@
       "version": "20.19.34",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.34.tgz",
       "integrity": "sha512-by3/Z0Qp+L9cAySEsSNNwZ6WWw8ywgGLPQGgbQDhNRSitqYgkgp4pErd23ZSCavbtUA2CN4jQtoB3T8nk4j3Rg==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.11.tgz",
+      "integrity": "sha512-E+U4RzR2dKrx+u3N4DlsmLaDC6mMZOM/TPROxA0UAPiTgI0y4CEFBmZE+coGWTjakDriRsXG368lNk1u9Q0a2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -8805,6 +8815,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nodemailer": {
+      "version": "7.0.13",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.13.tgz",
+      "integrity": "sha512-PNDFSJdP+KFgdsG3ZzMXCgquO7I6McjY2vlqILjtJd0hy8wEvtugS9xKRF2NWlPNGxvLCXlTNIae4serI7dinw==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -11306,7 +11325,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/universalify": {

package.json

@@ -24,6 +24,7 @@
     "@auth/prisma-adapter": "^2.11.1",
     "@prisma/client": "^5.22.0",
     "@types/bcryptjs": "^2.4.6",
+    "@types/nodemailer": "^7.0.11",
     "bcryptjs": "^3.0.3",
     "date-fns": "^2.30.0",
     "googleapis": "^170.1.0",
@@ -31,6 +32,7 @@
     "lucide-react": "^0.563.0",
     "next": "^14.0.0",
     "next-auth": "^4.24.13",
+    "nodemailer": "^7.0.13",
     "postcss-cli": "^11.0.1",
     "prisma": "^5.0.0",
     "react": "^18.2.0",

prisma/schema.prisma

@@ -5,6 +5,7 @@ generator client {
 datasource db {
   provider  = "postgresql"
   url       = env("DATABASE_URL")
+  directUrl = env("DIRECT_URL")
 }
 
 model User {
@@ -16,6 +17,7 @@ model User {
   emailVerified            DateTime?
   verifiedAt               DateTime?
   emailVerificationToken   String?
+  emailVerificationCode    String?
   emailVerificationExpires DateTime?
   passwordResetToken       String?
   passwordResetExpires     DateTime?

scripts/lxc-setup.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+# My-Weekly-ToDo-List LXC Setup Script
+# Run this inside your Ubuntu/Debian LXC container
+
+set -e
+
+echo "Updating system..."
+apt update && apt upgrade -y
+
+echo "Installing dependencies..."
+apt install -y curl openssl git build-essential ufw
+
+# Install Node.js 18
+echo "Installing Node.js 18..."
+curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
+apt install -y nodejs
+
+# Configure Firewall
+echo "Configuring firewall..."
+ufw allow 22/tcp
+ufw allow 3000/tcp
+ufw --force enable
+
+echo "Installing PM2..."
+npm install -g pm2
+
+echo "Setup complete!"
+echo "Next steps:"
+echo "1. git clone <your-repo-url>"
+echo "2. cd My-Weekly-ToDo-List"
+echo "3. npm install"
+echo "4. Create .env.production with your Supabase credentials"
+echo "5. npm run build"
+echo "6. pm2 start npm --name 'my-weekly-todo' -- start"

scripts/supabase-setup.sh

@@ -0,0 +1,36 @@
+#!/bash
+# Setup script for Supabase via Docker on LXC/VM
+# Run this on a NEW LXC/VM (Ubuntu/Debian)
+
+# 1. Update and install dependencies
+sudo apt update && sudo apt upgrade -y
+sudo apt install -y git curl docker.io docker-compose-v2
+
+# 2. Clone Supabase Docker
+git clone --depth 1 https://github.com/supabase/supabase
+cd supabase/docker
+
+# 3. Setup environment variables
+cp .env.example .env
+
+# Generate secure random strings for secrets
+JWT_SECRET=$(openssl rand -base64 32)
+ANON_KEY=$(openssl rand -base64 32)
+SERVICE_ROLE_KEY=$(openssl rand -base64 32)
+POSTGRES_PASSWORD=$(openssl rand -base64 16)
+
+# Update .env (Basic replacement)
+sed -i "s/JWT_SECRET=.*/JWT_SECRET=$JWT_SECRET/" .env
+sed -i "s/ANON_KEY=.*/ANON_KEY=$ANON_KEY/" .env
+sed -i "s/SERVICE_ROLE_KEY=.*/SERVICE_ROLE_KEY=$SERVICE_ROLE_KEY/" .env
+sed -i "s/POSTGRES_PASSWORD=.*/POSTGRES_PASSWORD=$POSTGRES_PASSWORD/" .env
+
+# 4. Start Supabase
+sudo docker compose up -d
+
+echo "--------------------------------------------------"
+echo "Supabase is starting up!"
+echo "Postgres Password: $POSTGRES_PASSWORD"
+echo "API URL: http://$(hostname -I | awk '{print $1}'):8000"
+echo "Studio (Dashboard): http://$(hostname -I | awk '{print $1}'):8001"
+echo "--------------------------------------------------"

src/app/api/auth/resend-verification/route.ts

@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { prisma } from '@/lib/prisma';
+import { sendVerificationEmail, generateVerificationCode, generateVerificationToken } from '@/lib/email';
+
+export async function POST(request: NextRequest) {
+    try {
+        const { email } = await request.json();
+
+        if (!email) {
+            return NextResponse.json(
+                { error: 'Email is required' },
+                { status: 400 }
+            );
+        }
+
+        const user = await prisma.user.findUnique({
+            where: { email },
+            select: {
+                id: true,
+                emailVerified: true,
+                emailVerificationExpires: true,
+            },
+        });
+
+        if (!user) {
+            // Don't reveal whether user exists
+            return NextResponse.json({ message: 'If an account exists, a new code has been sent.' });
+        }
+
+        if (user.emailVerified) {
+            return NextResponse.json({ message: 'Email is already verified.' });
+        }
+
+        // Rate limit: don't resend if last code was sent less than 60 seconds ago
+        if (user.emailVerificationExpires) {
+            const lastSent = new Date(user.emailVerificationExpires.getTime() - 15 * 60 * 1000);
+            if (Date.now() - lastSent.getTime() < 60 * 1000) {
+                return NextResponse.json(
+                    { error: 'Please wait before requesting a new code.' },
+                    { status: 429 }
+                );
+            }
+        }
+
+        const code = generateVerificationCode();
+        const token = generateVerificationToken();
+        const expires = new Date(Date.now() + 15 * 60 * 1000);
+
+        await prisma.user.update({
+            where: { id: user.id },
+            data: {
+                emailVerificationCode: code,
+                emailVerificationToken: token,
+                emailVerificationExpires: expires,
+            },
+        });
+
+        try {
+            await sendVerificationEmail(email, code, token);
+        } catch (emailError) {
+            console.error('Failed to resend verification email:', emailError);
+            return NextResponse.json(
+                { error: 'Failed to send email. Please try again later.' },
+                { status: 500 }
+            );
+        }
+
+        return NextResponse.json({ message: 'A new verification code has been sent.' });
+    } catch (error) {
+        console.error('Resend verification error:', error);
+        return NextResponse.json(
+            { error: 'Something went wrong' },
+            { status: 500 }
+        );
+    }
+}

src/app/api/auth/signup/route.ts

@@ -1,12 +1,13 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { PrismaClient } from '@prisma/client';
 import { hash } from 'bcryptjs';
+import { sendVerificationEmail, generateVerificationCode, generateVerificationToken } from '@/lib/email';
 
 const prisma = new PrismaClient();
 
 export async function POST(request: NextRequest) {
   try {
-    const { email, password } = await request.json();
+    const { name, email, password } = await request.json();
 
     if (!email || !password) {
       return NextResponse.json(
@@ -28,6 +29,33 @@ export async function POST(request: NextRequest) {
     });
 
     if (existingUser) {
+      // If user exists but isn't verified, resend verification
+      if (!existingUser.emailVerified) {
+        const code = generateVerificationCode();
+        const token = generateVerificationToken();
+        const expires = new Date(Date.now() + 15 * 60 * 1000); // 15 minutes
+
+        await prisma.user.update({
+          where: { id: existingUser.id },
+          data: {
+            emailVerificationCode: code,
+            emailVerificationToken: token,
+            emailVerificationExpires: expires,
+          },
+        });
+
+        try {
+          await sendVerificationEmail(email, code, token);
+        } catch (emailError) {
+          console.error('Failed to send verification email:', emailError);
+        }
+
+        return NextResponse.json({
+          message: 'Verification email resent',
+          requiresVerification: true,
+        });
+      }
+
       return NextResponse.json(
         { error: 'User already exists' },
         { status: 400 }
@@ -37,12 +65,21 @@ export async function POST(request: NextRequest) {
     // Hash password
     const passwordHash = await hash(password, 12);
 
-    // Create user
+    // Generate verification code and token
+    const code = generateVerificationCode();
+    const token = generateVerificationToken();
+    const expires = new Date(Date.now() + 15 * 60 * 1000); // 15 minutes
+
+    // Create user (NOT verified)
     const user = await prisma.user.create({
       data: {
+        name: name || undefined,
         email,
         passwordHash,
-        emailVerified: new Date(), // Auto-verify for now
+        emailVerificationCode: code,
+        emailVerificationToken: token,
+        emailVerificationExpires: expires,
+        // emailVerified is NOT set — user must verify
       },
       select: {
         id: true,
@@ -51,9 +88,18 @@ export async function POST(request: NextRequest) {
       }
     });
 
+    // Send verification email
+    try {
+      await sendVerificationEmail(email, code, token);
+    } catch (emailError) {
+      console.error('Failed to send verification email:', emailError);
+      // User is created but email failed — they can use "resend" later
+    }
+
     return NextResponse.json({
-      message: 'User created successfully',
+      message: 'Account created. Please check your email for a verification code.',
-      user
+      requiresVerification: true,
+      user,
     });
   } catch (error) {
     console.error('Signup error:', error);

src/app/api/auth/verify-email/route.ts

@@ -1,31 +1,125 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { prisma } from '@/lib/prisma';
 
+// POST: Verify via 6-digit code
 export async function POST(request: NextRequest) {
   try {
-    const { token } = await request.json();
+    const { email, code } = await request.json();
 
-    // Basic validation
+    if (!email || !code) {
-    if (!token) {
       return NextResponse.json(
-        { error: 'Token is required' },
+        { error: 'Email and code are required' },
         { status: 400 }
       );
     }
 
-    // In a real app, you would:
+    const user = await prisma.user.findUnique({
-    // 1. Look up user by emailVerificationToken
+      where: { email },
-    // 2. Verify the token against stored token and expiration
+      select: {
-    // 3. Set user.verified to true
+        id: true,
-    // 4. Clear the verification token
+        emailVerified: true,
-    console.log('Verifying email with token:', token);
+        emailVerificationCode: true,
+        emailVerificationExpires: true,
+      },
+    });
+
+    if (!user) {
+      return NextResponse.json(
+        { error: 'User not found' },
+        { status: 404 }
+      );
+    }
+
+    if (user.emailVerified) {
+      return NextResponse.json({ message: 'Email already verified' });
+    }
+
+    if (!user.emailVerificationCode || !user.emailVerificationExpires) {
+      return NextResponse.json(
+        { error: 'No verification code found. Please request a new one.' },
+        { status: 400 }
+      );
+    }
+
+    if (new Date() > user.emailVerificationExpires) {
+      return NextResponse.json(
+        { error: 'Verification code expired. Please request a new one.' },
+        { status: 400 }
+      );
+    }
+
+    if (user.emailVerificationCode !== code) {
+      return NextResponse.json(
+        { error: 'Invalid verification code' },
+        { status: 400 }
+      );
+    }
+
+    // Verify the user
+    await prisma.user.update({
+      where: { id: user.id },
+      data: {
+        emailVerified: new Date(),
+        verifiedAt: new Date(),
+        emailVerificationCode: null,
+        emailVerificationToken: null,
+        emailVerificationExpires: null,
+      },
+    });
 
-    // Mock successful verification
     return NextResponse.json({ message: 'Email verified successfully' });
   } catch (error) {
-    console.error('Email verification error:', error);
+    console.error('Verification error:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      { error: 'Failed to verify email' },
       { status: 500 }
     );
   }
 }
+
+// GET: Verify via one-click link
+export async function GET(request: NextRequest) {
+  try {
+    const token = request.nextUrl.searchParams.get('token');
+
+    if (!token) {
+      return NextResponse.redirect(
+        new URL('/auth/verify-email?error=missing_token', request.url)
+      );
+    }
+
+    const user = await prisma.user.findFirst({
+      where: {
+        emailVerificationToken: token,
+        emailVerificationExpires: { gt: new Date() },
+      },
+    });
+
+    if (!user) {
+      return NextResponse.redirect(
+        new URL('/auth/verify-email?error=invalid_token', request.url)
+      );
+    }
+
+    // Verify the user
+    await prisma.user.update({
+      where: { id: user.id },
+      data: {
+        emailVerified: new Date(),
+        verifiedAt: new Date(),
+        emailVerificationCode: null,
+        emailVerificationToken: null,
+        emailVerificationExpires: null,
+      },
+    });
+
+    return NextResponse.redirect(
+      new URL('/auth/login?verified=true', request.url)
+    );
+  } catch (error) {
+    console.error('Token verification error:', error);
+    return NextResponse.redirect(
+      new URL('/auth/verify-email?error=server_error', request.url)
+    );
+  }
+}

src/app/api/calendar/google/oauth/route.ts

@@ -155,8 +155,8 @@ export async function GET(request: NextRequest) {
       });
     }
 
-    // Redirect to tasks page with success message
+    // Redirect to tasks page with settings open to calendar section
-    return NextResponse.redirect(new URL('/tasks?calendar=connected', appBaseUrl));
+    return NextResponse.redirect(new URL('/tasks?calendar=connected&openSettings=calendars', appBaseUrl));
   } catch (error) {
     console.error('Google OAuth error:', error);
     const appBaseUrl = process.env.NEXTAUTH_URL || request.url;

src/app/auth/oauth-complete/page.tsx

@@ -18,7 +18,7 @@ function OAuthCompleteContent() {
             await update();
 
             if (status === "connected") {
-                router.replace(`/tasks?calendar=${provider}_connected`);
+                router.replace(`/tasks?calendar=${provider}_connected&openSettings=calendars`);
             } else {
                 const message = searchParams.get("message") || "connection_failed";
                 router.replace(`/tasks?error=${message}`);

src/app/auth/signup/page.tsx

@@ -48,7 +48,13 @@ export default function SignupPage() {
         return;
       }
 
-      // Auto sign in after successful signup
+      // Redirect to verification page
+      if (data.requiresVerification) {
+        router.push(`/auth/verify-email?email=${encodeURIComponent(email)}`);
+        return;
+      }
+
+      // Fallback: Auto sign in after successful signup
       await signIn('credentials', {
         email,
         password,

src/app/auth/verify-email/page.tsx

@@ -1,130 +1,265 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
 
-const VerifyEmailPage = () => {
+export default function VerifyEmailPage() {
-  const [token, setToken] = useState('');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const email = searchParams.get('email') || '';
+  const error = searchParams.get('error');
+  const [code, setCode] = useState(['', '', '', '', '', '']);
   const [isLoading, setIsLoading] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
-  const [showSuccess, setShowSuccess] = useState(false);
+  const [isResending, setIsResending] = useState(false);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
-  // Get token from URL query parameter
   useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
+    if (error === 'invalid_token') {
-    const tokenParam = urlParams.get('token');
+      setErrorMsg('Verification link is invalid or expired. Please enter your code manually or request a new one.');
-    if (tokenParam) {
+    } else if (error === 'missing_token') {
-      setToken(tokenParam);
+      setErrorMsg('Invalid verification link.');
+    } else if (error === 'server_error') {
+      setErrorMsg('Something went wrong. Please try again.');
     }
+  }, [error]);
+
+  // Auto-focus first input
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
   }, []);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleInput = (index: number, value: string) => {
-    e.preventDefault();
+    // Handle paste of full code
-    setIsLoading(true);
+    if (value.length > 1) {
-    setMessage(null);
+      const digits = value.replace(/\D/g, '').slice(0, 6).split('');
-    setError(null);
+      const newCode = [...code];
-    
+      digits.forEach((digit, i) => {
-    try {
+        if (index + i < 6) newCode[index + i] = digit;
-      // Simulate API call
-      const response = await fetch('/api/auth/verify-email', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ token }),
       });
-      
+      setCode(newCode);
-      const result = await response.json();
+      const nextIndex = Math.min(index + digits.length, 5);
-      
+      inputRefs.current[nextIndex]?.focus();
-      if (!response.ok) {
+      // Auto-submit if all 6 digits entered
-        throw new Error(result.error || 'Failed to verify email');
+      if (newCode.every(d => d !== '')) {
+        submitCode(newCode.join(''));
+      }
+      return;
     }
 
-      setMessage('Email verified successfully!');
+    const digit = value.replace(/\D/g, '');
-      setShowSuccess(true);
+    const newCode = [...code];
-    } catch (err) {
+    newCode[index] = digit;
-      setError(err instanceof Error ? err.message : 'An unknown error occurred');
+    setCode(newCode);
-      console.error('Email verification error:', err);
+
-    } finally {
+    if (digit && index < 5) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Auto-submit if all 6 digits entered
+    if (newCode.every(d => d !== '')) {
+      submitCode(newCode.join(''));
+    }
+  };
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
+    if (e.key === 'Backspace' && !code[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const submitCode = async (fullCode: string) => {
+    setIsLoading(true);
+    setErrorMsg(null);
+    setMessage(null);
+
+    try {
+      const response = await fetch('/api/auth/verify-email', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, code: fullCode }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setErrorMsg(data.error || 'Verification failed');
+        setCode(['', '', '', '', '', '']);
+        inputRefs.current[0]?.focus();
+        setIsLoading(false);
+        return;
+      }
+
+      setMessage('Email verified! Redirecting to login...');
+      setTimeout(() => {
+        router.push('/auth/login?verified=true');
+      }, 1500);
+    } catch {
+      setErrorMsg('Something went wrong. Please try again.');
       setIsLoading(false);
     }
   };
 
-  if (showSuccess) {
+  const handleResend = async () => {
+    setIsResending(true);
+    setErrorMsg(null);
+    setMessage(null);
+
+    try {
+      const response = await fetch('/api/auth/resend-verification', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setErrorMsg(data.error || 'Failed to resend code');
+      } else {
+        setMessage('A new verification code has been sent to your email.');
+      }
+    } catch {
+      setErrorMsg('Failed to resend code. Please try again.');
+    } finally {
+      setIsResending(false);
+    }
+  };
+
   return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+    <div className="weekly-auth-container">
-        <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow">
+      <div className="weekly-auth-card">
-          <div className="text-center">
+        {/* Logo */}
-            <h2 className="text-2xl font-bold text-gray-900">Email Verified Successfully!</h2>
+        <div className="weekly-auth-logo">
-            <p className="mt-2 text-gray-600">
+          My Weekly ToDo&apos;s
-              Your email has been verified. You can now <a href="/auth/login" className="font-medium text-indigo-600 hover:text-indigo-500">sign in</a> to your account.
+        </div>
+
+        {/* Title */}
+        <h2 style={{ color: '#333', fontSize: '1.25rem', fontWeight: 600, textAlign: 'center', margin: '0 0 8px' }}>
+          Verify your email
+        </h2>
+        <p style={{ color: '#666', fontSize: '0.875rem', textAlign: 'center', margin: '0 0 24px' }}>
+          We sent a 6-digit code to <strong style={{ color: '#667eea' }}>{email}</strong>
         </p>
+
+        {/* Messages */}
+        {errorMsg && (
+          <div className="weekly-auth-error">
+            {errorMsg}
+          </div>
+        )}
+        {message && (
+          <div style={{
+            background: 'rgba(52, 211, 153, 0.1)',
+            border: '1px solid rgba(52, 211, 153, 0.3)',
+            borderRadius: '8px',
+            padding: '12px 16px',
+            color: '#059669',
+            fontSize: '0.875rem',
+            marginBottom: '16px',
+            textAlign: 'center',
+          }}>
+            {message}
+          </div>
+        )}
+
+        {/* Code Input */}
+        <div style={{
+          display: 'flex',
+          gap: '8px',
+          justifyContent: 'center',
+          marginBottom: '24px',
+        }}>
+          {code.map((digit, index) => (
+            <input
+              key={index}
+              ref={el => { inputRefs.current[index] = el; }}
+              type="text"
+              inputMode="numeric"
+              maxLength={1}
+              value={digit}
+              onChange={e => handleInput(index, e.target.value)}
+              onKeyDown={e => handleKeyDown(index, e)}
+              onPaste={e => {
+                e.preventDefault();
+                const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);
+                if (pasted) handleInput(index, pasted);
+              }}
+              disabled={isLoading}
+              style={{
+                width: '48px',
+                height: '56px',
+                textAlign: 'center',
+                fontSize: '1.5rem',
+                fontWeight: 700,
+                fontFamily: "'Courier New', monospace",
+                background: '#f8f9fa',
+                border: digit ? '2px solid #667eea' : '2px solid #d0d5dd',
+                borderRadius: '10px',
+                color: '#667eea',
+                outline: 'none',
+                transition: 'border-color 0.2s, box-shadow 0.2s',
+                caretColor: '#667eea',
+                boxSizing: 'border-box',
+              }}
+              onFocus={e => {
+                e.target.style.borderColor = '#667eea';
+                e.target.style.boxShadow = '0 0 0 3px rgba(102, 126, 234, 0.15)';
+              }}
+              onBlur={e => {
+                e.target.style.borderColor = digit ? '#667eea' : '#d0d5dd';
+                e.target.style.boxShadow = 'none';
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Verify Button */}
+        <button
+          onClick={() => submitCode(code.join(''))}
+          disabled={isLoading || code.some(d => d === '')}
+          className="weekly-auth-button primary"
+          style={{ marginBottom: '16px' }}
+        >
+          {isLoading ? 'Verifying...' : 'Verify Email'}
+        </button>
+
+        {/* Resend */}
+        <div style={{ textAlign: 'center', marginBottom: '16px' }}>
+          <span style={{ color: '#666', fontSize: '0.875rem' }}>
+            Didn&apos;t receive the code?{' '}
+          </span>
+          <button
+            onClick={handleResend}
+            disabled={isResending}
+            style={{
+              background: 'none',
+              border: 'none',
+              color: '#667eea',
+              cursor: 'pointer',
+              fontSize: '0.875rem',
+              fontWeight: 500,
+              textDecoration: 'underline',
+              opacity: isResending ? 0.5 : 1,
+            }}
+          >
+            {isResending ? 'Sending...' : 'Resend code'}
+          </button>
+        </div>
+
+        {/* Back to login */}
+        <div className="weekly-auth-links">
+          <Link href="/auth/login" className="weekly-auth-link">
+            ← Back to login
+          </Link>
         </div>
       </div>
+
+      <footer className="weekly-auth-footer">
+        <p>Simple. Beautiful. Yours.</p>
+      </footer>
     </div>
   );
 }
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="flex flex-col items-center justify-center min-h-screen py-12 px-4 sm:px-6 lg:px-8">
-        <div className="w-full max-w-md">
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-900">Weekly To Do List</h1>
-            <p className="mt-2 text-gray-600">Verify your email address</p>
-          </div>
-          
-          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-            {error && (
-              <div className="rounded-md bg-red-50 p-4">
-                <div className="text-sm text-red-700">{error}</div>
-              </div>
-            )}
-            
-            <div className="rounded-md shadow-sm -space-y-px">
-              <div>
-                <label htmlFor="token" className="sr-only">
-                  Verification Token
-                </label>
-                <input
-                  id="token"
-                  name="token"
-                  type="text"
-                  required
-                  value={token}
-                  onChange={(e) => setToken(e.target.value)}
-                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                  placeholder="Verification Token"
-                />
-              </div>
-            </div>
-
-            <div>
-              <button
-                type="submit"
-                disabled={isLoading}
-                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
-              >
-                {isLoading ? (
-                  <span>Verifying...</span>
-                ) : (
-                  <span>Verify Email</span>
-                )}
-              </button>
-            </div>
-          </form>
-          
-          <div className="mt-6 text-center">
-            <p className="text-sm text-gray-600">
-              <a href="/auth/login" className="font-medium text-indigo-600 hover:text-indigo-500">
-                Back to login
-              </a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default VerifyEmailPage;

src/app/globals.css

@@ -668,6 +668,10 @@ h3 {
   text-align: left;
   min-height: 50px;
   box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--weekly-bg, white);
 }
 
 .weekly-day-date {
@@ -721,6 +725,7 @@ h3 {
 
 .weekly-task-item:hover {
   background-color: rgba(0,0,0,0.02);
+  z-index: 10;
 }
 
 .weekly-task-item.completed {
@@ -965,19 +970,19 @@ h3 {
   color: var(--weekly-text);
 }
 
-/* Action Buttons Styling - Float above task on hover to avoid overlap */
+/* Action Buttons Styling - Float above task on hover */
 .task-actions {
   display: flex;
   align-items: center;
   gap: 2px;
   position: absolute;
   right: 0;
-  top: -26px; /* Position above the task item */
+  top: -26px;
   background: var(--weekly-bg, white);
   border: 1px solid var(--weekly-border, #e0e0e0);
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-  z-index: 100;
+  z-index: 20;
   padding: 2px 4px;
   flex-wrap: nowrap;
   pointer-events: auto;
@@ -2024,8 +2029,8 @@ h3 {
 }
 
 .time-grid-wrapper .time-slots-container {
-  overflow-y: auto;
+  overflow-y: visible;
-  overflow-x: hidden;
+  overflow-x: visible;
 }
 
 /* All-Day Events Section */

src/components/WeeklyView.tsx

@@ -1074,6 +1074,22 @@ export default function WeeklyView() {
         }
     }, [session, fetchMotivationalQuote]);
 
+    // Auto-open settings to calendar tab after OAuth redirect
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        if (params.get('openSettings') === 'calendars') {
+            setShowSettings(true);
+            setActiveTab('calendar');
+            // Clean up URL
+            const url = new URL(window.location.href);
+            url.searchParams.delete('openSettings');
+            url.searchParams.delete('calendar');
+            window.history.replaceState({}, '', url.pathname);
+            // Refresh connections to pick up the new one
+            fetchConnections();
+        }
+    }, []);
+
     // Periodic pull-sync from Google Tasks (every 2 minutes)
     useEffect(() => {
         if (!session) return;
@@ -5465,6 +5481,7 @@ export default function WeeklyView() {
             {/* Settings Sidebar */}
             {showSettings && (
                 <SettingsSidebar
+                    initialTab={activeTab}
                     onRemoveConnection={handleRemoveConnection}
                     onClose={() => setShowSettings(false)}
                     onSettingsChanged={handleSettingsChanged}
@@ -6425,6 +6442,7 @@ interface SettingsSidebarProps {
     fetchAvailableTaskLists: (
         provider: "google" | "apple" | "outlook",
     ) => Promise<void>;
+    initialTab?: "calendar" | "general" | "account" | "styling" | "motivation" | "about";
 }
 // Notes Sidebar Component
 interface NotesSidebarProps {
@@ -6593,10 +6611,11 @@ function SettingsSidebar({
     somedayLists,
     handleToggleTaskList,
     fetchAvailableTaskLists,
+    initialTab,
 }: SettingsSidebarProps) {
     const [activeTab, setActiveTab] = useState<
         "calendar" | "general" | "account" | "styling" | "motivation" | "about"
-    >("general");
+    >(initialTab || "general");
     const [isLoading, setIsLoading] = useState(true);
     const [isSyncing, setIsSyncing] = useState(false);
     const [exportStartDate, setExportStartDate] = useState("");
@@ -6781,7 +6800,30 @@ function SettingsSidebar({
     };
 
     // Live preview: propagate styling changes immediately without Save
+    // Auto-save: debounce profile changes to the database
     const profileLoadedRef = useRef(false);
+    const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        if (!profileLoadedRef.current) return; // Skip initial load from API
+        // Debounce: save after 800ms of no changes
+        if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+        autoSaveTimerRef.current = setTimeout(async () => {
+            try {
+                await fetch("/api/user/profile", {
+                    method: "PATCH",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(profile),
+                });
+                console.log("[SETTINGS] Auto-saved profile");
+            } catch (err) {
+                console.error("[SETTINGS] Auto-save failed:", err);
+            }
+        }, 800);
+        return () => {
+            if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+        };
+    }, [profile]);
     useEffect(() => {
         if (!profileLoadedRef.current) return;
         if (!onSettingsChanged) return;

src/lib/auth.ts

@@ -40,6 +40,11 @@ export const authOptions: NextAuthOptions = {
           throw new Error("Invalid credentials");
         }
 
+        // Block login if email is not verified
+        if (!user.emailVerified) {
+          throw new Error("email_not_verified");
+        }
+
         const isPasswordValid = await compare(
           credentials.password,
           user.passwordHash

src/lib/email.ts

@@ -0,0 +1,128 @@
+import nodemailer from 'nodemailer';
+
+let _transporter: nodemailer.Transporter | null = null;
+
+function getTransporter() {
+  if (!_transporter) {
+    const host = process.env.SMTP_HOST || 'smtp.gmail.com';
+    const port = parseInt(process.env.SMTP_PORT || '587');
+    const secure = port === 465; // Port 465 = TLS, Port 587 = STARTTLS
+    const user = process.env.SMTP_USERNAME || process.env.SMTP_USER || '';
+    const pass = process.env.SMTP_PASSWORD || process.env.SMTP_PASS || '';
+
+    console.log(`[EMAIL] Creating SMTP transport: ${host}:${port} (secure=${secure}, user=${user})`);
+
+    _transporter = nodemailer.createTransport({
+      host,
+      port,
+      secure,
+      auth: { user, pass },
+      tls: { rejectUnauthorized: false },
+    });
+  }
+  return _transporter;
+}
+
+export async function sendVerificationEmail(
+  email: string,
+  code: string,
+  token: string
+) {
+  const baseUrl = process.env.NEXTAUTH_URL || 'http://localhost:3001';
+  const verifyLink = `${baseUrl}/auth/verify-email?token=${token}`;
+
+  const html = `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body style="margin: 0; padding: 0; background-color: #0a0a0f; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
+      <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #0a0a0f; padding: 40px 20px;">
+        <tr>
+          <td align="center">
+            <table width="480" cellpadding="0" cellspacing="0" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08);">
+              <!-- Header -->
+              <tr>
+                <td style="padding: 32px 40px 16px; text-align: center;">
+                  <h1 style="margin: 0; font-size: 24px; font-weight: 700; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
+                    My Weekly ToDo's
+                  </h1>
+                </td>
+              </tr>
+
+              <!-- Body -->
+              <tr>
+                <td style="padding: 16px 40px;">
+                  <p style="color: #e0e0e0; font-size: 16px; line-height: 1.6; margin: 0 0 24px;">
+                    Welcome! Please verify your email address to complete your registration.
+                  </p>
+
+                  <!-- Code Box -->
+                  <div style="background: rgba(102, 126, 234, 0.1); border: 2px dashed rgba(102, 126, 234, 0.3); border-radius: 12px; padding: 24px; text-align: center; margin: 0 0 24px;">
+                    <p style="color: #a0a0b0; font-size: 13px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 1px;">
+                      Your verification code
+                    </p>
+                    <p style="color: #667eea; font-size: 36px; font-weight: 700; letter-spacing: 8px; margin: 0; font-family: 'Courier New', monospace;">
+                      ${code}
+                    </p>
+                  </div>
+
+                  <p style="color: #a0a0b0; font-size: 14px; text-align: center; margin: 0 0 24px;">
+                    Or click the button below to verify instantly:
+                  </p>
+
+                  <!-- Button -->
+                  <table width="100%" cellpadding="0" cellspacing="0">
+                    <tr>
+                      <td align="center" style="padding: 0 0 24px;">
+                        <a href="${verifyLink}" style="display: inline-block; background: linear-gradient(135deg, #667eea, #764ba2); color: #ffffff; text-decoration: none; padding: 14px 40px; border-radius: 8px; font-size: 16px; font-weight: 600; letter-spacing: 0.5px;">
+                          ✓ Verify Email
+                        </a>
+                      </td>
+                    </tr>
+                  </table>
+
+                  <p style="color: #606070; font-size: 12px; text-align: center; margin: 0;">
+                    This code expires in 15 minutes. If you didn't create an account, you can safely ignore this email.
+                  </p>
+                </td>
+              </tr>
+
+              <!-- Footer -->
+              <tr>
+                <td style="padding: 24px 40px; border-top: 1px solid rgba(255,255,255,0.05);">
+                  <p style="color: #404050; font-size: 12px; text-align: center; margin: 0;">
+                    Simple. Beautiful. Yours.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </table>
+    </body>
+    </html>
+  `;
+
+  const from = process.env.SMTP_FROM || '"My Weekly ToDo\'s" <noreply@example.com>';
+  console.log(`[EMAIL] Sending verification email to ${email} from ${from}`);
+
+  const result = await getTransporter().sendMail({
+    from,
+    to: email,
+    subject: `${code} – Verify your email for My Weekly ToDo's`,
+    html,
+  });
+
+  console.log(`[EMAIL] Email sent successfully: ${result.messageId}`);
+}
+
+export function generateVerificationCode(): string {
+  return Math.floor(100000 + Math.random() * 900000).toString();
+}
+
+export function generateVerificationToken(): string {
+  return crypto.randomUUID();
+}