From 371c1e46182d8f04012401baad0e9105bc897c8a Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sun, 1 Feb 2026 22:41:33 -0700
Subject: [PATCH] Restructure desktop dashboard layout

- Separate desktop and mobile layouts completely
- Desktop: Mood+Plan, Calendar, Achievements+Health, Savings+Stats
- Mobile: Keep original 4-slide swipe layout unchanged
---
 src/components/Dashboard.tsx | 86 +++++++++++++++++++++++++++++++-----
 1 file changed, 75 insertions(+), 11 deletions(-)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index ecaa87e..a99f089 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -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