Optimize performance, fix theme consistency, and improve notification UX
This commit is contained in:
Avery Felts
parent
359908caf5
commit
edfc978217
14
prisma.config.ts
Normal file
14
prisma.config.ts
Normal file
@ -0,0 +1,14 @@
|
||||
// This file was generated by Prisma, and assumes you have installed the following:
|
||||
// npm install --save-dev prisma dotenv
|
||||
import "dotenv/config";
|
||||
import { defineConfig } from "prisma/config";
|
||||
|
||||
export default defineConfig({
|
||||
schema: "prisma/schema.prisma",
|
||||
migrations: {
|
||||
path: "prisma/migrations",
|
||||
},
|
||||
datasource: {
|
||||
url: process.env["DATABASE_URL"],
|
||||
},
|
||||
});
|
||||
@ -163,25 +163,33 @@
|
||||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
||||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
||||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
||||
|
||||
/* Background gradients */
|
||||
--bg-main: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 20%, #bbf7d0 40%, #dcfce7 60%, #f0fdf4 80%, #dcfce7 100%);
|
||||
--bg-orbs:
|
||||
radial-gradient(ellipse at 15% 10%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 85% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 35%),
|
||||
radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 20% 80%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 80% 85%, rgba(239, 68, 68, 0.05) 0%, transparent 35%);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply text-foreground;
|
||||
font-family: var(--font-sans);
|
||||
letter-spacing: var(--tracking-normal);
|
||||
background: linear-gradient(135deg,
|
||||
#0f0f1a 0%,
|
||||
#1a1a2e 20%,
|
||||
#16213e 40%,
|
||||
#1a1a2e 60%,
|
||||
#0f0f1a 80%,
|
||||
#1a1a2e 100%);
|
||||
background-attachment: fixed;
|
||||
background-color: transparent;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
@ -191,14 +199,21 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
background: var(--bg-orbs), var(--bg-main);
|
||||
background-size: cover;
|
||||
pointer-events: none;
|
||||
z-index: -50;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
.dark {
|
||||
--bg-main: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 20%, #16213e 40%, #1a1a2e 60%, #0f0f1a 80%, #1a1a2e 100%);
|
||||
--bg-orbs:
|
||||
radial-gradient(ellipse at 15% 10%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 85% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 35%),
|
||||
radial-gradient(ellipse at 50% 50%, rgba(45, 55, 72, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 20% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 80% 85%, rgba(239, 68, 68, 0.08) 0%, transparent 35%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Calendar styling - reduce overall size */
|
||||
@ -217,8 +232,13 @@
|
||||
|
||||
/* Animation keyframes */
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
@ -226,6 +246,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@ -237,6 +258,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@ -248,6 +270,7 @@
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
@ -259,6 +282,7 @@
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
@ -270,6 +294,7 @@
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
@ -277,23 +302,49 @@
|
||||
}
|
||||
|
||||
@keyframes pulse-subtle {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes confetti {
|
||||
@ -301,6 +352,7 @@
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(720deg);
|
||||
opacity: 0;
|
||||
@ -349,15 +401,34 @@
|
||||
}
|
||||
|
||||
/* Stagger delay utilities */
|
||||
.delay-100 { animation-delay: 100ms; }
|
||||
.delay-200 { animation-delay: 200ms; }
|
||||
.delay-300 { animation-delay: 300ms; }
|
||||
.delay-400 { animation-delay: 400ms; }
|
||||
.delay-500 { animation-delay: 500ms; }
|
||||
.delay-600 { animation-delay: 600ms; }
|
||||
.delay-100 {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
.delay-200 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
.delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.delay-400 {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
|
||||
.delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
.delay-600 {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
|
||||
/* Start hidden for animations */
|
||||
.opacity-0 { opacity: 0; }
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
.transition-smooth {
|
||||
@ -474,4 +545,4 @@
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
@ -187,13 +187,11 @@ export function Dashboard({ user }: DashboardProps) {
|
||||
);
|
||||
}
|
||||
|
||||
const pageBackground = theme === 'dark'
|
||||
? 'linear-gradient(135deg, #0a0a14 0%, #141e3c 50%, #0f1932 100%)'
|
||||
: 'linear-gradient(135deg, #ffffff 0%, #f0f4f8 50%, #e8ecf0 100%)';
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ background: pageBackground }}>
|
||||
<UserHeader user={user} />
|
||||
<div className="min-h-screen">
|
||||
<UserHeader user={user} preferences={preferences} />
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
{preferences && (
|
||||
|
||||
@ -85,7 +85,7 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
|
||||
|
||||
const cardBackground =
|
||||
theme === 'light'
|
||||
? 'linear-gradient(135deg, rgba(6, 95, 70, 0.85) 0%, rgba(4, 120, 87, 0.9) 100%)'
|
||||
? 'linear-gradient(135deg, rgba(236, 253, 245, 0.9) 0%, rgba(209, 250, 229, 0.8) 100%)'
|
||||
: 'linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(6, 182, 212, 0.15) 100%)';
|
||||
|
||||
const substanceLabel = substance === 'nicotine' ? 'Nicotine' : 'Marijuana';
|
||||
@ -98,11 +98,11 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
|
||||
<div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-br from-teal-500/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2 pointer-events-none" />
|
||||
|
||||
<CardHeader className="relative z-10 pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-white text-shadow-sm">
|
||||
<Heart className="h-5 w-5 text-teal-400" />
|
||||
<CardTitle className={`flex items-center gap-2 ${theme === 'light' ? 'text-teal-900' : 'text-white'} text-shadow-sm`}>
|
||||
<Heart className="h-5 w-5 text-teal-500" />
|
||||
<span>Health Recovery</span>
|
||||
</CardTitle>
|
||||
<p className="text-sm text-white/70">
|
||||
<p className={`text-sm ${theme === 'light' ? 'text-teal-700' : 'text-white/70'}`}>
|
||||
{substanceLabel}-free for {formatDuration(minutesSinceQuit)}
|
||||
</p>
|
||||
</CardHeader>
|
||||
@ -110,10 +110,10 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
|
||||
<CardContent className="relative z-10">
|
||||
{/* Progress to next milestone */}
|
||||
{nextMilestone && (
|
||||
<div className="mb-4 p-3 bg-teal-500/20 rounded-xl border border-teal-500/30">
|
||||
<div className="mb-4 p-3 bg-teal-500/10 rounded-xl border border-teal-500/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-white/80">Next milestone</span>
|
||||
<span className="text-sm text-teal-300 font-medium">
|
||||
<span className={`text-sm ${theme === 'light' ? 'text-teal-900' : 'text-white/80'}`}>Next milestone</span>
|
||||
<span className="text-sm text-teal-600 font-medium">
|
||||
{formatTimeRemaining(minutesSinceQuit, nextMilestone.timeMinutes)}
|
||||
</span>
|
||||
</div>
|
||||
@ -123,7 +123,7 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
|
||||
style={{ width: `${progressToNext}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-white/60 mt-2">{nextMilestone.title}</p>
|
||||
<p className={`text-xs ${theme === 'light' ? 'text-teal-700' : 'text-white/60'} mt-2`}>{nextMilestone.title}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -137,19 +137,17 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
|
||||
return (
|
||||
<div
|
||||
key={milestone.id}
|
||||
className={`flex items-start gap-3 p-2 rounded-lg transition-all ${
|
||||
isAchieved
|
||||
? 'bg-teal-500/20'
|
||||
: 'bg-white/5 opacity-60'
|
||||
} ${isCurrent ? 'ring-2 ring-teal-400/50' : ''}`}
|
||||
className={`flex items-start gap-3 p-2 rounded-lg transition-all ${isAchieved
|
||||
? 'bg-teal-500/20'
|
||||
: 'bg-black/5 opacity-60 dark:bg-white/5'
|
||||
} ${isCurrent ? 'ring-2 ring-teal-500/50' : ''}`}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={`p-2 rounded-full shrink-0 ${
|
||||
isAchieved
|
||||
? 'bg-teal-500/30 text-teal-300'
|
||||
: 'bg-white/10 text-white/40'
|
||||
}`}
|
||||
className={`p-2 rounded-full shrink-0 ${isAchieved
|
||||
? 'bg-teal-500/20 text-teal-600 dark:text-teal-300'
|
||||
: 'bg-black/5 text-black/40 dark:bg-white/10 dark:text-white/40'
|
||||
}`}
|
||||
>
|
||||
{isAchieved ? (
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
@ -161,9 +159,9 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p
|
||||
className={`text-sm font-medium ${
|
||||
isAchieved ? 'text-white' : 'text-white/60'
|
||||
<p className={`text-sm font-medium ${isAchieved
|
||||
? (theme === 'light' ? 'text-teal-900' : 'text-white')
|
||||
: (theme === 'light' ? 'text-teal-900/60' : 'text-white/60')
|
||||
}`}
|
||||
>
|
||||
{milestone.title}
|
||||
@ -178,8 +176,8 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
|
||||
{milestone.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<Clock className="h-3 w-3 text-white/40" />
|
||||
<span className="text-[10px] text-white/40">
|
||||
<Clock className={`h-3 w-3 ${theme === 'light' ? 'text-teal-700/40' : 'text-white/40'}`} />
|
||||
<span className={`text-[10px] ${theme === 'light' ? 'text-teal-700/40' : 'text-white/40'}`}>
|
||||
{formatDuration(milestone.timeMinutes)}
|
||||
</span>
|
||||
</div>
|
||||
@ -189,6 +187,6 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Card >
|
||||
);
|
||||
}
|
||||
|
||||
@ -79,7 +79,7 @@ export function SavingsSetupDialog({
|
||||
costPerUnit: cost,
|
||||
unitsPerDay: units,
|
||||
currency,
|
||||
substance,
|
||||
substance: substance as 'nicotine' | 'weed',
|
||||
savingsGoal: savingsGoal ? parseFloat(savingsGoal) : null,
|
||||
goalName: goalName.trim() || null,
|
||||
};
|
||||
@ -97,13 +97,13 @@ export function SavingsSetupDialog({
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
|
||||
<DialogContent className="sm:max-w-md bg-emerald-950 border-emerald-800 text-white">
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-white">
|
||||
<DollarSign className="h-5 w-5 text-emerald-400" />
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<DollarSign className="h-5 w-5 text-emerald-500" />
|
||||
{existingConfig ? 'Edit Savings Tracker' : 'Set Up Savings Tracker'}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-emerald-200">
|
||||
<DialogDescription>
|
||||
Enter your usage costs to track how much you're saving
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
@ -111,9 +111,9 @@ export function SavingsSetupDialog({
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Substance Selection */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white">What are you tracking?</Label>
|
||||
<Label>What are you tracking?</Label>
|
||||
<Select value={substance} onValueChange={(v) => setSubstance(v as 'nicotine' | 'weed')}>
|
||||
<SelectTrigger className="border-emerald-700 bg-emerald-900/50 text-white">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select substance" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -125,9 +125,9 @@ export function SavingsSetupDialog({
|
||||
|
||||
{/* Currency Selection */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white">Currency</Label>
|
||||
<Label>Currency</Label>
|
||||
<Select value={currency} onValueChange={setCurrency}>
|
||||
<SelectTrigger className="border-emerald-700 bg-emerald-900/50 text-white">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -142,11 +142,11 @@ export function SavingsSetupDialog({
|
||||
|
||||
{/* Cost Per Unit */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="costPerUnit" className="text-white">
|
||||
<Label htmlFor="costPerUnit">
|
||||
Cost per pack/cartridge/unit
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-300">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
{CURRENCIES.find((c) => c.code === currency)?.symbol || '$'}
|
||||
</span>
|
||||
<Input
|
||||
@ -156,18 +156,18 @@ export function SavingsSetupDialog({
|
||||
step="0.01"
|
||||
value={costPerUnit}
|
||||
onChange={(e) => setCostPerUnit(e.target.value)}
|
||||
className="pl-8 border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
|
||||
className="pl-8"
|
||||
placeholder="10.00"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-emerald-300">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
How much does one pack or cartridge cost?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Units Per Week */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="unitsPerDay" className="text-white">
|
||||
<Label htmlFor="unitsPerDay">
|
||||
Packs/vapes per week (before quitting)
|
||||
</Label>
|
||||
<Input
|
||||
@ -178,24 +178,23 @@ export function SavingsSetupDialog({
|
||||
value={unitsPerDay}
|
||||
onChange={(e) => setUnitsPerDay(e.target.value)}
|
||||
placeholder="1"
|
||||
className="border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
|
||||
/>
|
||||
<p className="text-xs text-emerald-300">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
How many packs/vapes did you typically use per week?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Optional: Savings Goal */}
|
||||
<div className="pt-4 border-t border-emerald-800 space-y-4">
|
||||
<div className="flex items-center gap-2 text-sm text-emerald-300">
|
||||
<div className="pt-4 border-t space-y-4">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Target className="h-4 w-4" />
|
||||
<span>See your real time savings:</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="savingsGoal" className="text-white">Target amount</Label>
|
||||
<Label htmlFor="savingsGoal">Target amount</Label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-300">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
{CURRENCIES.find((c) => c.code === currency)?.symbol || '$'}
|
||||
</span>
|
||||
<Input
|
||||
@ -205,34 +204,33 @@ export function SavingsSetupDialog({
|
||||
step="1"
|
||||
value={savingsGoal}
|
||||
onChange={(e) => setSavingsGoal(e.target.value)}
|
||||
className="pl-8 border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
|
||||
className="pl-8"
|
||||
placeholder="500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="goalName" className="text-white">What are you saving for?</Label>
|
||||
<Label htmlFor="goalName">What are you saving for?</Label>
|
||||
<Input
|
||||
id="goalName"
|
||||
type="text"
|
||||
value={goalName}
|
||||
onChange={(e) => setGoalName(e.target.value)}
|
||||
placeholder="e.g., New Phone, Vacation"
|
||||
className="border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button onClick={onClose} className="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white">
|
||||
<Button onClick={onClose} variant="outline" className="flex-1">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!isValid}
|
||||
className="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white"
|
||||
className="flex-1"
|
||||
>
|
||||
{existingConfig ? 'Update' : 'Save'}
|
||||
</Button>
|
||||
|
||||
@ -232,7 +232,7 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
|
||||
|
||||
const calendarBackground = theme === 'light'
|
||||
? 'linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(30, 30, 45, 0.9) 100%)'
|
||||
: undefined;
|
||||
: 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 245, 0.9) 100%)';
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -248,8 +248,8 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
|
||||
mode="single"
|
||||
selected={selectedDate}
|
||||
onSelect={handleDateSelect}
|
||||
className={`rounded-md border p-3 ${theme === 'light' ? 'text-white' : 'bg-background/50'}`}
|
||||
style={theme === 'light' ? { background: calendarBackground } : undefined}
|
||||
className={`rounded-md border p-3 ${theme === 'light' ? 'text-white' : 'text-slate-900 bg-background/50'}`}
|
||||
style={{ background: calendarBackground }}
|
||||
showOutsideDays={false}
|
||||
components={{
|
||||
DayButton: CustomDayButton,
|
||||
|
||||
@ -18,7 +18,7 @@ import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { User } from '@/lib/session';
|
||||
import { fetchPreferences, fetchReminderSettings, saveReminderSettings, ReminderSettings } from '@/lib/storage';
|
||||
import { fetchPreferences, fetchReminderSettings, saveReminderSettings, ReminderSettings, UserPreferences } from '@/lib/storage';
|
||||
import { useNotifications } from '@/hooks/useNotifications';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@ -27,9 +27,10 @@ import { useTheme } from '@/lib/theme-context';
|
||||
|
||||
interface UserHeaderProps {
|
||||
user: User;
|
||||
preferences?: UserPreferences | null;
|
||||
}
|
||||
|
||||
export function UserHeader({ user }: UserHeaderProps) {
|
||||
export function UserHeader({ user, preferences }: UserHeaderProps) {
|
||||
const [userName, setUserName] = useState<string | null>(null);
|
||||
const [reminderSettings, setReminderSettings] = useState<ReminderSettings>({ enabled: false, reminderTime: '09:00' });
|
||||
const [showReminderDialog, setShowReminderDialog] = useState(false);
|
||||
@ -40,16 +41,22 @@ export function UserHeader({ user }: UserHeaderProps) {
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
// If preferences passed from parent, use them. Otherwise fetch.
|
||||
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
|
||||
const [prefs, reminders] = await Promise.all([
|
||||
fetchPreferences(),
|
||||
preferences ? Promise.resolve(preferences) : fetchPreferences(),
|
||||
fetchReminderSettings(),
|
||||
]);
|
||||
setUserName(prefs.userName);
|
||||
|
||||
if (prefs) {
|
||||
setUserName(prefs.userName);
|
||||
}
|
||||
|
||||
setReminderSettings(reminders);
|
||||
setLocalTime(reminders.reminderTime);
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
}, [preferences]);
|
||||
|
||||
const handleToggleReminders = async () => {
|
||||
if (!reminderSettings.enabled && permission !== 'granted') {
|
||||
@ -82,8 +89,10 @@ export function UserHeader({ user }: UserHeaderProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-white/10" style={{
|
||||
background: 'linear-gradient(135deg, rgba(10, 10, 20, 0.98) 0%, rgba(20, 30, 60, 0.95) 50%, rgba(15, 25, 50, 0.98) 100%)',
|
||||
<header className="sticky top-0 z-50 border-b border-border/10 transition-colors duration-300" style={{
|
||||
background: theme === 'light'
|
||||
? 'rgba(255, 255, 255, 0.8)'
|
||||
: 'linear-gradient(135deg, rgba(10, 10, 20, 0.98) 0%, rgba(20, 30, 60, 0.95) 50%, rgba(15, 25, 50, 0.98) 100%)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
}}>
|
||||
<div className="container mx-auto px-4 py-3 sm:py-4 flex items-center justify-between">
|
||||
@ -101,7 +110,7 @@ export function UserHeader({ user }: UserHeaderProps) {
|
||||
QuitTraq
|
||||
</h1>
|
||||
{userName && (
|
||||
<p className="text-white/90 text-lg hidden sm:block ml-4">
|
||||
<p className="text-foreground/90 text-lg hidden sm:block ml-4">
|
||||
Welcome {userName}, you got this!
|
||||
</p>
|
||||
)}
|
||||
@ -110,23 +119,22 @@ export function UserHeader({ user }: UserHeaderProps) {
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<button
|
||||
onClick={() => setShowReminderDialog(true)}
|
||||
className={`p-2.5 sm:p-2 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/30 hover:scale-110 active:scale-95 ${
|
||||
reminderSettings.enabled
|
||||
? 'bg-indigo-500/30 hover:bg-indigo-500/40'
|
||||
: 'bg-white/10 hover:bg-white/20'
|
||||
}`}
|
||||
className={`p-2.5 sm:p-2 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/30 hover:scale-110 active:scale-95 ${reminderSettings.enabled
|
||||
? 'bg-indigo-500/30 hover:bg-indigo-500/40'
|
||||
: 'bg-muted hover:bg-muted/80'
|
||||
}`}
|
||||
aria-label="Reminder settings"
|
||||
title={reminderSettings.enabled ? `Reminders on at ${reminderSettings.reminderTime}` : 'Reminders off'}
|
||||
>
|
||||
{reminderSettings.enabled ? (
|
||||
<BellRing className="h-5 w-5 text-indigo-300 transition-transform duration-300" />
|
||||
) : (
|
||||
<Bell className="h-5 w-5 text-white/70 transition-transform duration-300" />
|
||||
<Bell className="h-5 w-5 text-muted-foreground transition-transform duration-300" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2.5 sm:p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/30 hover:scale-110 active:scale-95"
|
||||
className="p-2.5 sm:p-2 rounded-full bg-muted hover:bg-muted/80 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/30 hover:scale-110 active:scale-95"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
{theme === 'dark' ? (
|
||||
@ -137,17 +145,17 @@ export function UserHeader({ user }: UserHeaderProps) {
|
||||
</button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="flex items-center gap-2 px-3 py-2 rounded-full bg-white/10 hover:bg-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-white/30">
|
||||
<Avatar className="h-8 w-8 ring-2 ring-white/30">
|
||||
<button className="flex items-center gap-2 px-3 py-2 rounded-full bg-muted hover:bg-muted/80 transition-all focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<Avatar className="h-8 w-8 ring-2 ring-primary/30">
|
||||
<AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
|
||||
<AvatarFallback className="bg-white/20 text-white text-sm">{initials}</AvatarFallback>
|
||||
<AvatarFallback className="bg-primary/20 text-primary text-sm">{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<ChevronDown className="h-4 w-4 text-white" />
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" sideOffset={8}>
|
||||
<DropdownMenuItem onClick={() => handleNavigate('/')}>
|
||||
<Home className="mr-3 h-4 w-4 text-white/70" />
|
||||
<Home className="mr-3 h-4 w-4 text-muted-foreground" />
|
||||
<span>Dashboard</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
@ -170,7 +178,7 @@ export function UserHeader({ user }: UserHeaderProps) {
|
||||
</div>
|
||||
{userName && (
|
||||
<div className="sm:hidden container mx-auto px-4 pb-2">
|
||||
<p className="text-white/90 text-sm">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Welcome {userName}, you got this!
|
||||
</p>
|
||||
</div>
|
||||
@ -187,19 +195,7 @@ export function UserHeader({ user }: UserHeaderProps) {
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Permission Status */}
|
||||
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
||||
<span className="text-sm text-muted-foreground">Notifications</span>
|
||||
<span className={`text-sm font-medium ${
|
||||
!isSupported ? 'text-red-400' :
|
||||
permission === 'granted' ? 'text-green-400' :
|
||||
permission === 'denied' ? 'text-red-400' : 'text-yellow-400'
|
||||
}`}>
|
||||
{!isSupported ? 'Not supported' :
|
||||
permission === 'granted' ? 'Enabled' :
|
||||
permission === 'denied' ? 'Blocked' : 'Not set'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Enable/Disable Toggle */}
|
||||
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
||||
@ -215,15 +211,13 @@ export function UserHeader({ user }: UserHeaderProps) {
|
||||
</div>
|
||||
<button
|
||||
onClick={handleToggleReminders}
|
||||
disabled={!isSupported || permission === 'denied'}
|
||||
className={`relative w-12 h-6 rounded-full transition-all duration-300 ${
|
||||
reminderSettings.enabled ? 'bg-indigo-500' : 'bg-muted-foreground/30'
|
||||
} ${!isSupported || permission === 'denied' ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
disabled={!isSupported || (permission === 'denied' && !reminderSettings.enabled)}
|
||||
className={`relative w-12 h-6 rounded-full transition-all duration-300 ${reminderSettings.enabled ? 'bg-indigo-500' : 'bg-muted-foreground/30'
|
||||
} ${!isSupported || (permission === 'denied' && !reminderSettings.enabled) ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all duration-300 ${
|
||||
reminderSettings.enabled ? 'left-7' : 'left-1'
|
||||
}`}
|
||||
className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all duration-300 ${reminderSettings.enabled ? 'left-7' : 'left-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -123,6 +123,7 @@ export function getCurrentUserId(): string | null {
|
||||
|
||||
// Async API functions
|
||||
export async function fetchPreferences(): Promise<UserPreferences> {
|
||||
if (preferencesCache) return preferencesCache;
|
||||
try {
|
||||
const response = await fetch('/api/preferences');
|
||||
if (!response.ok) {
|
||||
@ -154,6 +155,7 @@ export async function savePreferencesAsync(preferences: UserPreferences): Promis
|
||||
}
|
||||
|
||||
export async function fetchUsageData(): Promise<UsageEntry[]> {
|
||||
if (usageDataCache) return usageDataCache;
|
||||
try {
|
||||
const response = await fetch('/api/usage');
|
||||
if (!response.ok) {
|
||||
@ -216,6 +218,7 @@ export async function clearDayDataAsync(
|
||||
// ============ ACHIEVEMENTS FUNCTIONS ============
|
||||
|
||||
export async function fetchAchievements(): Promise<Achievement[]> {
|
||||
if (achievementsCache) return achievementsCache;
|
||||
try {
|
||||
const response = await fetch('/api/achievements');
|
||||
if (!response.ok) return [];
|
||||
@ -264,6 +267,7 @@ export function getAchievements(): Achievement[] {
|
||||
// ============ REMINDERS FUNCTIONS ============
|
||||
|
||||
export async function fetchReminderSettings(): Promise<ReminderSettings> {
|
||||
if (reminderSettingsCache) return reminderSettingsCache;
|
||||
try {
|
||||
const response = await fetch('/api/reminders');
|
||||
if (!response.ok) return { enabled: false, reminderTime: '09:00' };
|
||||
@ -298,6 +302,7 @@ export function getReminderSettings(): ReminderSettings {
|
||||
// ============ SAVINGS FUNCTIONS ============
|
||||
|
||||
export async function fetchSavingsConfig(): Promise<SavingsConfig | null> {
|
||||
if (savingsConfigCache) return savingsConfigCache;
|
||||
try {
|
||||
const response = await fetch('/api/savings');
|
||||
if (!response.ok) return null;
|
||||
@ -403,7 +408,7 @@ export function getMinutesSinceQuit(
|
||||
const now = new Date();
|
||||
const todayStr = now.toISOString().split('T')[0];
|
||||
const lastUsageDateStr = substanceData[0].date;
|
||||
|
||||
|
||||
// If the last usage was today, reset to 0 (just used)
|
||||
if (lastUsageDateStr === todayStr) {
|
||||
return 0;
|
||||
|
||||
@ -21,6 +21,15 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (theme === 'dark') {
|
||||
root.classList.add('dark');
|
||||
} else {
|
||||
root.classList.remove('dark');
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newTheme = theme === 'dark' ? 'light' : 'dark';
|
||||
setTheme(newTheme);
|
||||
|
||||
9
src/proxy 2.ts
Normal file
9
src/proxy 2.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { authkitMiddleware } from "@workos-inc/authkit-nextjs";
|
||||
|
||||
export const proxy = authkitMiddleware();
|
||||
|
||||
export const config = {
|
||||
matcher: [
|
||||
"/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
|
||||
],
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user