averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure desktop dashboard layout

Browse Source 
- Separate desktop and mobile layouts completely
- Desktop: Mood+Plan, Calendar, Achievements+Health, Savings+Stats
- Mobile: Keep original 4-slide swipe layout unchanged
This commit is contained in:
Avery Felts 2026-02-01 22:41:33 -07:00
parent d957f7525f
commit 371c1e4618
1 changed files with 75 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/Dashboard.tsx
View File

@ -365,21 +365,85 @@ export function Dashboard({ user }: DashboardProps) {
)}
</div>
{/* SECTION: Mobile Swipe Ecosystem */}
{/* DESKTOP LAYOUT - Hidden on mobile */}
<div className="hidden sm:block space-y-8">
{/* Row 1: Mood + Quit Plan */}
<div className="grid grid-cols-2 gap-6">
<MoodTracker />
<UnifiedQuitPlanCard
preferences={preferences}
usageData={usageData}
onGeneratePlan={handleGeneratePlan}
refreshKey={refreshKey}
/>
</div>
{/* Row 2: Calendar/Quote */}
<div id="calendar-section">
<UsageCalendar
key={refreshKey}
usageData={usageData}
onDataUpdate={loadData}
userId={user.id}
religion={preferences.religion}
onReligionUpdate={async (religion: 'christian' | 'secular') => {
const updatedPrefs = { ...preferences, religion };
setPreferences(updatedPrefs);
await savePreferencesAsync(updatedPrefs);
}}
preferences={preferences}
onPreferencesUpdate={async (updatedPrefs: UserPreferences) => {
await savePreferencesAsync(updatedPrefs);
setPreferences(updatedPrefs);
}}
/>
</div>
{/* Row 3: Achievements + Health Recovery */}
<div className="grid grid-cols-2 gap-6">
<AchievementsCard
key={`achievements-${refreshKey}`}
achievements={achievements}
substance={preferences.substance}
/>
<HealthTimelineCard
key={`health-${refreshKey}`}
usageData={usageData}
preferences={preferences}
/>
</div>
{/* Row 4: Savings + Stats */}
<div className="grid grid-cols-2 gap-6">
<SavingsTrackerCard
key={`savings-${refreshKey}`}
savingsConfig={savingsConfig}
usageData={usageData}
trackingStartDate={preferences.trackingStartDate}
onSavingsConfigChange={handleSavingsConfigChange}
onModalStateChange={handleModalStateChange}
/>
<div className="grid grid-cols-2 gap-4">
<StatsCard key={`stats-nicotine-${refreshKey}`} usageData={usageData} substance="nicotine" />
<StatsCard key={`stats-weed-${refreshKey}`} usageData={usageData} substance="weed" />
</div>
</div>
</div>
{/* MOBILE SWIPE LAYOUT - Hidden on desktop */}
<div
ref={swipeContainerRef}
onScroll={handleScroll}
className="swipe-container sm:space-y-12 sm:block"
className="swipe-container sm:hidden"
>
{/* SLIDE 1: Mindset (Mood & Personalized Plan) */}
<div className="swipe-item space-y-4">
<div className="sm:hidden flex items-center justify-between mb-2 px-1">
<div className="flex items-center justify-between mb-2 px-1">
<h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Daily Mindset</h2>
</div>
<div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
<div className="space-y-4">
<MoodTracker />
{/* Unified Quit Plan Placard */}
<UnifiedQuitPlanCard
preferences={preferences}
usageData={usageData}
@ -391,11 +455,11 @@ export function Dashboard({ user }: DashboardProps) {
{/* SLIDE 2: Stats & Recovery (Side-by-side Stats + Health) */}
<div className="swipe-item space-y-4">
<div className="sm:hidden flex items-center justify-between mb-2 px-1">
<div className="flex items-center justify-between mb-2 px-1">
<h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Usage & Recovery</h2>
</div>
<div className="space-y-4">
<div className="grid grid-cols-2 gap-3 sm:gap-6">
<div className="grid grid-cols-2 gap-3">
<StatsCard key={`stats-nicotine-${refreshKey}`} usageData={usageData} substance="nicotine" />
<StatsCard key={`stats-weed-${refreshKey}`} usageData={usageData} substance="weed" />
</div>
@ -409,10 +473,10 @@ export function Dashboard({ user }: DashboardProps) {
{/* SLIDE 3: Achievements & Money (Insights) */}
<div className="swipe-item space-y-4">
<div className="sm:hidden flex items-center justify-between mb-2 px-1">
<div className="flex items-center justify-between mb-2 px-1">
<h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Achievements & Savings</h2>
</div>
<div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
<div className="space-y-4">
<AchievementsCard
key={`achievements-${refreshKey}`}
achievements={achievements}
@ -430,8 +494,8 @@ export function Dashboard({ user }: DashboardProps) {
</div>
{/* SLIDE 4: Calendar */}
<div id="calendar-section" className="swipe-item">
<div className="sm:hidden flex items-center justify-between mb-2 px-1">
<div id="calendar-section-mobile" className="swipe-item">
<div className="flex items-center justify-between mb-2 px-1">
<h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Usage Calendar</h2>
</div>
<UsageCalendar