fix: Stats section collapse header + content (manual fix)

dashboard/habits.html

@@ -901,6 +901,52 @@
             margin-bottom: var(--space-4);
         }
         
+        .stats-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--space-3);
+            background: var(--bg-surface);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-lg);
+            cursor: pointer;
+            margin-bottom: var(--space-3);
+            transition: background var(--transition-base);
+        }
+        
+        .stats-header:hover {
+            background: var(--bg-elevated);
+        }
+        
+        .stats-title {
+            font-size: var(--text-lg);
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 0;
+        }
+        
+        .stats-chevron {
+            width: 20px;
+            height: 20px;
+            color: var(--text-muted);
+            transition: transform var(--transition-base);
+        }
+        
+        .stats-chevron.expanded {
+            transform: rotate(180deg);
+        }
+        
+        .stats-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        
+        .stats-content.visible {
+            max-height: 2000px;
+            transition: max-height 0.3s ease-in;
+        }
+        
         .stats-row {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -1124,35 +1170,41 @@
         
         <!-- Stats Section -->
         <div id="statsSection" class="stats-section" style="display: none;">
-            <div class="stats-row">
+            <div class="stats-header" onclick="toggleStats()">
-                <div class="stat-card">
+                <h3 class="stats-title">Stats</h3>
-                    <div class="stat-label">Total Habits</div>
+                <i data-lucide="chevron-down" class="stats-chevron" id="statsChevron"></i>
-                    <div class="stat-value" id="statTotalHabits">0</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Avg Completion (30d)</div>
-                    <div class="stat-value" id="statAvgCompletion">0%</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Best Streak 🏆</div>
-                    <div class="stat-value" id="statBestStreak">0</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Total Lives</div>
-                    <div class="stat-value" id="statTotalLives">0</div>
-                </div>
             </div>
-            
+            <div class="stats-content" id="statsContent">
-            <div class="weekly-summary">
+                <div class="stats-row">
-                <div class="weekly-summary-header" onclick="toggleWeeklySummary()">
+                    <div class="stat-card">
-                    <div class="weekly-summary-title">Weekly Summary</div>
+                        <div class="stat-label">Total Habits</div>
-                    <i data-lucide="chevron-down" class="weekly-summary-chevron" id="weeklySummaryChevron"></i>
+                        <div class="stat-value" id="statTotalHabits">0</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-label">Avg Completion (30d)</div>
+                        <div class="stat-value" id="statAvgCompletion">0%</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-label">Best Streak 🏆</div>
+                        <div class="stat-value" id="statBestStreak">0</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-label">Total Lives</div>
+                        <div class="stat-value" id="statTotalLives">0</div>
+                    </div>
                 </div>
-                <div class="weekly-summary-content" id="weeklySummaryContent">
+                
-                    <div class="weekly-chart" id="weeklyChart"></div>
+                <div class="weekly-summary">
-                    <div class="weekly-stats" id="weeklyStats">
+                    <div class="weekly-summary-header" onclick="toggleWeeklySummary()">
-                        <span id="weeklyCompletedText">0 completed this week</span>
+                        <div class="weekly-summary-title">Weekly Summary</div>
-                        <span id="weeklySkippedText">0 skipped this week</span>
+                        <i data-lucide="chevron-down" class="weekly-summary-chevron" id="weeklySummaryChevron"></i>
+                    </div>
+                    <div class="weekly-summary-content" id="weeklySummaryContent">
+                        <div class="weekly-chart" id="weeklyChart"></div>
+                        <div class="weekly-stats" id="weeklyStats">
+                            <span id="weeklyCompletedText">0 completed this week</span>
+                            <span id="weeklySkippedText">0 skipped this week</span>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -1778,6 +1830,36 @@
             lucide.createIcons();
         }
         
+        function toggleStats() {
+            const content = document.getElementById('statsContent');
+            const chevron = document.getElementById('statsChevron');
+            
+            if (content.classList.contains('visible')) {
+                content.classList.remove('visible');
+                chevron.classList.remove('expanded');
+                localStorage.setItem('habits-stats-main-collapsed', 'true');
+            } else {
+                content.classList.add('visible');
+                chevron.classList.add('expanded');
+                localStorage.setItem('habits-stats-main-collapsed', 'false');
+            }
+        }
+        
+        function restoreStatsState() {
+            const content = document.getElementById('statsContent');
+            const chevron = document.getElementById('statsChevron');
+            const isCollapsed = localStorage.getItem('habits-stats-main-collapsed');
+            
+            // Default is collapsed
+            if (isCollapsed === 'false') {
+                content.classList.add('visible');
+                chevron.classList.add('expanded');
+            } else {
+                content.classList.remove('visible');
+                chevron.classList.remove('expanded');
+            }
+        }
+        
         function toggleWeeklySummary() {
             const content = document.getElementById('weeklySummaryContent');
             const chevron = document.getElementById('weeklySummaryChevron');
@@ -2644,6 +2726,7 @@
         });
         
         // Restore collapsed/expanded state from localStorage
+        restoreStatsState();
         restoreWeeklySummaryState();
         
         loadHabits();