Add GitHub/Email/Phone auth, fix smoking aids borders, improve desktop layout

- Add GitHub OAuth, email, and phone login buttons to login page
- Update workos.ts with GitHubOAuth provider and getAuthKitUrl function
- Update /api/auth/login route to support new auth methods
- Remove colored borders from SmokingAidsContent cards
- Fix calendar/quote desktop layout with balanced 50/50 widths
- Add h-full to MoodTracker for proper height alignment
- Add compressed icon copies for PWA

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

@@ -1,16 +1,14 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { getAuthorizationUrl } from '@/lib/workos';
+import { getAuthorizationUrl, getAuthKitUrl, OAuthProvider } from '@/lib/workos';
 import { cookies } from 'next/headers';
 
+const VALID_PROVIDERS = ['GoogleOAuth', 'AppleOAuth', 'GitHubOAuth'];
+
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
-  const provider = searchParams.get('provider') as 'GoogleOAuth' | 'AppleOAuth';
+  const provider = searchParams.get('provider') as OAuthProvider | 'authkit' | null;
   const stayLoggedIn = searchParams.get('stayLoggedIn') === 'true';
 
-  if (!provider || !['GoogleOAuth', 'AppleOAuth'].includes(provider)) {
-    return NextResponse.json({ error: 'Invalid provider' }, { status: 400 });
-  }
-
   // Store the stay logged in preference in a cookie
   const cookieStore = await cookies();
   cookieStore.set('stay_logged_in', stayLoggedIn.toString(), {
@@ -21,6 +19,17 @@ export async function GET(request: NextRequest) {
     path: '/',
   });
 
+  // If no provider or 'authkit', redirect to hosted AuthKit (email/password, phone)
+  if (!provider || provider === 'authkit') {
+    const authUrl = getAuthKitUrl();
+    return NextResponse.redirect(authUrl);
+  }
+
+  // Validate OAuth provider
+  if (!VALID_PROVIDERS.includes(provider)) {
+    return NextResponse.json({ error: 'Invalid provider' }, { status: 400 });
+  }
+
   const authUrl = getAuthorizationUrl(provider);
   return NextResponse.redirect(authUrl);
 }

src/app/login/page.tsx

@@ -5,11 +5,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
+import { Mail, Phone } from 'lucide-react';
+
+type AuthProvider = 'GoogleOAuth' | 'AppleOAuth' | 'GitHubOAuth' | 'authkit';
 
 export default function LoginPage() {
   const [stayLoggedIn, setStayLoggedIn] = useState(false);
 
-  const handleLogin = (provider: 'GoogleOAuth' | 'AppleOAuth') => {
+  const handleLogin = (provider: AuthProvider) => {
     window.location.href = `/api/auth/login?provider=${provider}&stayLoggedIn=${stayLoggedIn}`;
   };
 
@@ -34,6 +37,7 @@ export default function LoginPage() {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-6 pb-8">
+            {/* OAuth Providers */}
             <div className="space-y-3">
               <Button
                 variant="outline"
@@ -71,6 +75,48 @@ export default function LoginPage() {
                 </svg>
                 Continue with Apple
               </Button>
+
+              <Button
+                variant="outline"
+                className="w-full h-14 text-base font-bold rounded-xl border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/50 hover:scale-[1.02] transition-all shadow-sm"
+                onClick={() => handleLogin('GitHubOAuth')}
+              >
+                <svg className="mr-3 h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+                Continue with GitHub
+              </Button>
+            </div>
+
+            {/* Divider */}
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-slate-200 dark:border-slate-700" />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-white dark:bg-slate-900 px-3 text-slate-400 font-bold tracking-widest">or</span>
+              </div>
+            </div>
+
+            {/* Email & Phone Options */}
+            <div className="space-y-3">
+              <Button
+                variant="outline"
+                className="w-full h-14 text-base font-bold rounded-xl border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/50 hover:scale-[1.02] transition-all shadow-sm"
+                onClick={() => handleLogin('authkit')}
+              >
+                <Mail className="mr-3 h-5 w-5" />
+                Continue with Email
+              </Button>
+
+              <Button
+                variant="outline"
+                className="w-full h-14 text-base font-bold rounded-xl border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/50 hover:scale-[1.02] transition-all shadow-sm"
+                onClick={() => handleLogin('authkit')}
+              >
+                <Phone className="mr-3 h-5 w-5" />
+                Continue with Phone
+              </Button>
             </div>
 
             <div className="flex items-center space-x-3 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl border border-slate-100 dark:border-slate-700/50">

src/components/MoodTracker.tsx

@@ -200,7 +200,7 @@ function MoodTrackerComponent() {
 
     return (
         <Card className={cn(
-            "overflow-hidden transition-all duration-700 ease-in-out backdrop-blur-xl border shadow-xl",
+            "overflow-hidden transition-all duration-700 ease-in-out backdrop-blur-xl border shadow-xl h-full",
             "bg-gradient-to-br",
             gradientClass
         )}>

src/components/SmokingAidsContent.tsx

@@ -21,7 +21,7 @@ const smokingAids = [
         color: 'text-sky-400',
         themeColor: 'sky',
         gradient: 'from-sky-500/20 to-indigo-500/20',
-        borderColor: 'border-sky-500/30',
+        borderColor: 'border-white/10',
     },
     {
         id: 'nicotine-lozenge',
@@ -36,7 +36,7 @@ const smokingAids = [
         color: 'text-rose-400',
         themeColor: 'rose',
         gradient: 'from-rose-500/20 to-pink-500/20',
-        borderColor: 'border-rose-500/30',
+        borderColor: 'border-white/10',
     },
     {
         id: 'recovery-complex',
@@ -51,7 +51,7 @@ const smokingAids = [
         color: 'text-amber-400',
         themeColor: 'amber',
         gradient: 'from-amber-500/20 to-orange-500/20',
-        borderColor: 'border-amber-500/30',
+        borderColor: 'border-white/10',
     },
     {
         id: 'mullein-tea',
@@ -66,7 +66,7 @@ const smokingAids = [
         color: 'text-emerald-400',
         themeColor: 'emerald',
         gradient: 'from-emerald-500/20 to-teal-500/20',
-        borderColor: 'border-emerald-500/30',
+        borderColor: 'border-white/10',
     },
 ];
 
@@ -101,10 +101,9 @@ export function SmokingAidsContent() {
                             style={{ animationDelay: `${index * 150}ms` }}
                         >
                             <Card
-                                className="h-full flex flex-col overflow-hidden border-border/40 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_20px_50px_rgba(0,0,0,0.4)] hover:-translate-y-2 backdrop-blur-xl relative group"
+                                className="h-full flex flex-col overflow-hidden border-0 !p-0 !bg-transparent transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_20px_50px_rgba(0,0,0,0.4)] hover:-translate-y-2 backdrop-blur-xl relative group rounded-2xl"
                                 style={{
-                                    background: cardBackground,
+                                    background: cardBackground
-                                    borderColor: `rgba(var(--${item.themeColor}-500), 0.3)`
                                 }}
                             >
                                 {/* Specific card glow on hover */}

src/components/UnifiedQuitPlanCard.tsx

@@ -4,7 +4,7 @@ import React, { useState, useMemo } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { QuitPlan, UsageEntry, UserPreferences } from '@/lib/storage';
-import { Target, TrendingDown, ChevronDown, ChevronUp, Cigarette, Leaf } from 'lucide-react';
+import { Target, TrendingDown, ChevronDown, ChevronUp, Cigarette, Leaf, AlertTriangle, XCircle } from 'lucide-react';
 import { useTheme } from '@/lib/theme-context';
 import { getTodayString } from '@/lib/date-utils';
 import { cn } from '@/lib/utils';
@@ -173,19 +173,59 @@ function SubstancePlanSection({
                             </div>
 
                             {/* Progress Bar Detail */}
-                            <div className="space-y-1.5">
+                            <div className="space-y-1.5 pb-5">
                                 <div className="flex justify-between text-[10px] uppercase font-bold opacity-60">
                                     <span>Usage Progress</span>
                                     <span>{Math.round(usagePercent)}%</span>
                                 </div>
-                                <div className="w-full bg-black/10 rounded-full h-3 overflow-hidden">
+                                <div className="relative">
+                                    <div className="w-full bg-black/10 rounded-full h-3 overflow-hidden">
+                                        <div
+                                            className={cn("h-full transition-all duration-500", progressColor)}
+                                            style={{ width: `${Math.min(100, usagePercent)}%` }}
+                                        />
+                                    </div>
+                                    {/* Positioned puff count indicator */}
                                     <div
-                                        className={cn("h-full transition-all duration-500", progressColor)}
+                                        className="absolute top-full mt-1 transition-all duration-500"
-                                        style={{ width: `${Math.min(100, usagePercent)}%` }}
+                                        style={{
-                                    />
+                                            left: `${Math.min(100, usagePercent)}%`,
+                                            transform: usagePercent > 10 ? 'translateX(-100%)' : 'translateX(0)'
+                                        }}
+                                    >
+                                        <span className={cn(
+                                            "text-xs font-bold whitespace-nowrap",
+                                            todayUsage >= currentTarget ? "text-red-500" : accentColor
+                                        )}>
+                                            {todayUsage} {isNicotine ? 'puffs' : 'hits'}
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
 
+                            {/* Warning/Exceeded Status Messages */}
+                            {todayUsage >= currentTarget && currentTarget > 0 && (
+                                <div className="flex items-center gap-3 p-3 rounded-lg bg-red-500/20 border border-red-500/30">
+                                    <XCircle className="h-5 w-5 text-red-500 shrink-0" />
+                                    <div>
+                                        <p className="text-sm font-bold text-red-500">Daily limit exceeded</p>
+                                        <p className="text-xs opacity-70">You've gone over today's goal. No worries — try again tomorrow!</p>
+                                    </div>
+                                </div>
+                            )}
+
+                            {todayUsage < currentTarget && currentTarget - todayUsage <= 5 && currentTarget > 0 && (
+                                <div className="flex items-center gap-3 p-3 rounded-lg bg-orange-500/20 border border-orange-500/30">
+                                    <AlertTriangle className="h-5 w-5 text-orange-500 shrink-0" />
+                                    <div>
+                                        <p className="text-sm font-bold text-orange-500">Approaching your limit</p>
+                                        <p className="text-xs opacity-70">
+                                            Only <strong>{currentTarget - todayUsage}</strong> {isNicotine ? 'puffs' : 'hits'} remaining today. Pace yourself!
+                                        </p>
+                                    </div>
+                                </div>
+                            )}
+
                             {/* Weekly Matrix */}
                             <div className="grid grid-cols-4 gap-2">
                                 {activePlan.weeklyTargets.map((target, idx) => {

src/components/UsageCalendar.tsx

@@ -258,11 +258,11 @@ function UsageCalendarComponent({ usageData, onDataUpdate, religion, onReligionU
             </div>
           </div>
 
-          <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-center lg:items-stretch justify-center max-w-6xl mx-auto">
+          <div className="flex flex-col lg:flex-row gap-8 lg:gap-8 items-center lg:items-stretch justify-center max-w-6xl mx-auto">
-            {/* Calendar - Focused Container */}
+            {/* Calendar - Give it proper width on desktop */}
-            <div className="w-full lg:w-auto flex flex-col items-center">
+            <div className="w-full lg:w-1/2 flex flex-col items-center">
               <div className={cn(
-                "rounded-2xl p-2 sm:p-4 border shadow-inner transition-all duration-500",
+                "rounded-2xl p-2 sm:p-4 border shadow-inner transition-all duration-500 w-full",
                 theme === 'light' ? "bg-slate-50/50 border-slate-200/60" : "bg-black/20 border-white/5"
               )}>
                 <DayPicker
@@ -270,7 +270,7 @@ function UsageCalendarComponent({ usageData, onDataUpdate, religion, onReligionU
                   selected={selectedDate}
                   onSelect={handleDateSelect}
                   className={cn(
-                    "p-0 sm:p-2",
+                    "p-0 sm:p-2 w-full [&_.rdp-month]:w-full [&_.rdp-table]:w-full",
                     theme === 'light' ? "text-slate-900" : "text-white"
                   )}
                   showOutsideDays={false}
@@ -306,8 +306,8 @@ function UsageCalendarComponent({ usageData, onDataUpdate, religion, onReligionU
             {/* Desktop Vertical Divider */}
             <div className="hidden lg:block w-px self-stretch bg-gradient-to-b from-transparent via-white/10 to-transparent" />
 
-            {/* Daily Inspiration - Centered vertically on desktop */}
+            {/* Daily Inspiration - Matching width on desktop */}
-            <div className="flex-1 w-full max-w-2xl flex flex-col justify-center">
+            <div className="w-full lg:w-1/2 flex flex-col justify-center">
               <DailyInspirationCard
                 initialReligion={religion}
                 onReligionChange={onReligionUpdate}

src/lib/workos.ts

@@ -4,10 +4,20 @@ export const workos = new WorkOS(process.env.WORKOS_API_KEY!);
 
 export const clientId = process.env.WORKOS_CLIENT_ID!;
 
-export function getAuthorizationUrl(provider: 'GoogleOAuth' | 'AppleOAuth') {
+export type OAuthProvider = 'GoogleOAuth' | 'AppleOAuth' | 'GitHubOAuth';
+
+export function getAuthorizationUrl(provider: OAuthProvider) {
   return workos.userManagement.getAuthorizationUrl({
     provider,
     clientId,
     redirectUri: process.env.WORKOS_REDIRECT_URI!,
   });
 }
+
+// Get AuthKit hosted login URL (for email/password and phone)
+export function getAuthKitUrl() {
+  return workos.userManagement.getAuthorizationUrl({
+    clientId,
+    redirectUri: process.env.WORKOS_REDIRECT_URI!,
+  });
+}