Redesign Month view with heatmap calendar and bar chart stats

- Replace circles with heatmap-style grid (tight 2pt spacing, rounded squares)
- Add weekday header labels (S M T W T F S)
- Replace number stats with mini horizontal bar charts
- Add collapsible stats section with chevron toggle
- Modern card layout with 16pt rounded corners
- Months sorted newest first

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Shared/Views/MonthView/MonthView.swift

@@ -13,6 +13,7 @@ struct MonthView: View {
     @AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
 
     @AppStorage(UserDefaultsStore.Keys.moodTint.rawValue, store: GroupUserDefaults.groupDefaults) private var moodTint: MoodTints = .Default
+    @AppStorage(UserDefaultsStore.Keys.moodImages.rawValue, store: GroupUserDefaults.groupDefaults) private var imagePack: MoodImages = .FontAwesome
     @AppStorage(UserDefaultsStore.Keys.textColor.rawValue, store: GroupUserDefaults.groupDefaults) private var textColor: Color = DefaultTextColor.textColor
 
     @AppStorage(UserDefaultsStore.Keys.shape.rawValue, store: GroupUserDefaults.groupDefaults) private var shape: BGShape = .circle
@@ -33,15 +34,10 @@ struct MonthView: View {
         @Published var showFuckingSheet = false
     }
 
-    let columns = [
+    // Heatmap-style grid with tight spacing
-        GridItem(.flexible(minimum: 5, maximum: 400)),
+    private let heatmapColumns = Array(repeating: GridItem(.flexible(), spacing: 2), count: 7)
-        GridItem(.flexible(minimum: 5, maximum: 400)),
+
-        GridItem(.flexible(minimum: 5, maximum: 400)),
+    private let weekdayLabels = ["S", "M", "T", "W", "T", "F", "S"]
-        GridItem(.flexible(minimum: 5, maximum: 400)),
-        GridItem(.flexible(minimum: 5, maximum: 400)),
-        GridItem(.flexible(minimum: 5, maximum: 400)),
-        GridItem(.flexible(minimum: 5, maximum: 400))
-    ]
 
     @ObservedObject var viewModel: DayViewViewModel
     @State private var trialWarningHidden = false
@@ -54,26 +50,35 @@ struct MonthView: View {
                     .padding()
             } else {
                 ScrollView {
-                    VStack(spacing: 5) {
+                    VStack(spacing: 16) {
-                        ForEach(viewModel.grouped.sorted(by: { $0.key < $1.key }), id: \.key) { year, months in
+                        ForEach(viewModel.grouped.sorted(by: { $0.key > $1.key }), id: \.key) { year, months in
-
+                            // for each month
-                            // for reach month
+                            ForEach(months.sorted(by: { $0.key > $1.key }), id: \.key) { month, entries in
-                            ForEach(months.sorted(by: { $0.key < $1.key }), id: \.key) { month, entries in
+                                MonthCard(
-                                Section() {
+                                    month: month,
-                                    homeViewTwoMonthListView(month: month, year: year, entries: entries)
+                                    year: year,
-                                }
+                                    entries: entries,
-                            }
+                                    moodTint: moodTint,
-                            .padding(.bottom)
+                                    imagePack: imagePack,
-                        }
+                                    textColor: textColor,
-                        .padding()
+                                    theme: theme,
-                        .background(
+                                    filteredDays: filteredDays.currentFilters,
-                            RoundedRectangle(cornerRadius: 10)
+                                    onTap: {
-                                .foregroundColor(
+                                        let detailView = MonthDetailView(
-                                    theme.currentTheme.secondaryBGColor
+                                            monthInt: month,
+                                            yearInt: year,
+                                            entries: entries,
+                                            parentViewModel: viewModel
+                                        )
+                                        selectedDetail.fuckingWrapped = detailView
+                                        selectedDetail.showFuckingSheet = true
+                                    }
                                 )
-                        )
+                            }
+                        }
                     }
-                    .padding([.leading, .trailing])
+                    .padding(.horizontal)
+                    .padding(.bottom, 100)
                     .background(
                         GeometryReader { proxy in
                             let offset = proxy.frame(in: .named("scroll")).minY
@@ -84,6 +89,10 @@ struct MonthView: View {
                 .disabled(iapManager.shouldShowPaywall)
             }
 
+            // Hidden text to trigger updates when custom tint changes
+            Text(String(customMoodTintUpdateNumber))
+                .hidden()
+
             if iapManager.shouldShowPaywall {
                 // Paywall overlay - tap to show subscription store
                 Color.black.opacity(0.3)
@@ -149,6 +158,165 @@ struct MonthView: View {
     }
 }
 
+// MARK: - Month Card Component
+struct MonthCard: View {
+    let month: Int
+    let year: Int
+    let entries: [MoodEntry]
+    let moodTint: MoodTints
+    let imagePack: MoodImages
+    let textColor: Color
+    let theme: Theme
+    let filteredDays: [Int]
+    let onTap: () -> Void
+
+    @State private var showStats = true
+
+    private let weekdayLabels = ["S", "M", "T", "W", "T", "F", "S"]
+    private let heatmapColumns = Array(repeating: GridItem(.flexible(), spacing: 2), count: 7)
+
+    private var metrics: [MoodMetrics] {
+        let (startDate, endDate) = Date.dateRange(monthInt: month, yearInt: year)
+        let monthEntries = PersistenceController.shared.getData(startDate: startDate, endDate: endDate, includedDays: [1,2,3,4,5,6,7])
+        return Random.createTotalPerc(fromEntries: monthEntries)
+    }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            // Month Header
+            Button(action: { withAnimation(.easeInOut(duration: 0.2)) { showStats.toggle() } }) {
+                HStack {
+                    Text("\(Random.monthName(fromMonthInt: month)) \(String(year))")
+                        .font(.title3.bold())
+                        .foregroundColor(textColor)
+
+                    Spacer()
+
+                    Image(systemName: showStats ? "chevron.up" : "chevron.down")
+                        .font(.caption.weight(.semibold))
+                        .foregroundColor(textColor.opacity(0.5))
+                }
+                .padding(.horizontal, 16)
+                .padding(.vertical, 12)
+            }
+            .buttonStyle(.plain)
+
+            // Weekday Labels
+            HStack(spacing: 2) {
+                ForEach(weekdayLabels, id: \.self) { day in
+                    Text(day)
+                        .font(.caption2.weight(.medium))
+                        .foregroundColor(textColor.opacity(0.5))
+                        .frame(maxWidth: .infinity)
+                }
+            }
+            .padding(.horizontal, 16)
+            .padding(.bottom, 6)
+
+            // Heatmap Grid
+            LazyVGrid(columns: heatmapColumns, spacing: 2) {
+                ForEach(entries, id: \.self) { entry in
+                    HeatmapCell(
+                        entry: entry,
+                        moodTint: moodTint,
+                        isFiltered: filteredDays.contains(Int(entry.weekDay))
+                    )
+                }
+            }
+            .padding(.horizontal, 16)
+            .padding(.bottom, 12)
+
+            // Bar Chart Stats (collapsible)
+            if showStats {
+                Divider()
+                    .padding(.horizontal, 16)
+
+                MoodBarChart(metrics: metrics, moodTint: moodTint, imagePack: imagePack)
+                    .padding(.horizontal, 16)
+                    .padding(.vertical, 12)
+                    .transition(.opacity.combined(with: .move(edge: .top)))
+            }
+        }
+        .background(
+            RoundedRectangle(cornerRadius: 16)
+                .fill(theme.currentTheme.secondaryBGColor)
+        )
+        .contentShape(Rectangle())
+        .onTapGesture {
+            onTap()
+        }
+    }
+}
+
+// MARK: - Heatmap Cell
+struct HeatmapCell: View {
+    let entry: MoodEntry
+    let moodTint: MoodTints
+    let isFiltered: Bool
+
+    var body: some View {
+        RoundedRectangle(cornerRadius: 4)
+            .fill(cellColor)
+            .aspectRatio(1, contentMode: .fit)
+    }
+
+    private var cellColor: Color {
+        if entry.mood == .placeholder {
+            return Color.gray.opacity(0.1)
+        } else if entry.mood == .missing {
+            return Color.gray.opacity(0.25)
+        } else if !isFiltered {
+            return Color.gray.opacity(0.1)
+        } else {
+            return moodTint.color(forMood: entry.mood)
+        }
+    }
+}
+
+// MARK: - Mini Bar Chart
+struct MoodBarChart: View {
+    let metrics: [MoodMetrics]
+    let moodTint: MoodTints
+    let imagePack: MoodImages
+
+    var body: some View {
+        VStack(spacing: 8) {
+            ForEach(metrics.filter { $0.total > 0 }) { metric in
+                HStack(spacing: 10) {
+                    // Mood icon
+                    imagePack.icon(forMood: metric.mood)
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(width: 18, height: 18)
+                        .foregroundColor(moodTint.color(forMood: metric.mood))
+
+                    // Bar
+                    GeometryReader { geo in
+                        ZStack(alignment: .leading) {
+                            // Background track
+                            RoundedRectangle(cornerRadius: 4)
+                                .fill(Color.gray.opacity(0.15))
+
+                            // Filled bar
+                            RoundedRectangle(cornerRadius: 4)
+                                .fill(moodTint.color(forMood: metric.mood))
+                                .frame(width: max(4, geo.size.width * CGFloat(metric.percent / 100)))
+                        }
+                    }
+                    .frame(height: 10)
+
+                    // Count and percentage
+                    Text("\(metric.total)")
+                        .font(.caption.weight(.semibold))
+                        .foregroundColor(moodTint.color(forMood: metric.mood))
+                        .frame(width: 28, alignment: .trailing)
+                }
+            }
+        }
+    }
+}
+
+// MARK: - Legacy support for settings button
 extension MonthView {
     private var settingsButtonView: some View {
         HStack {
@@ -171,104 +339,6 @@ extension MonthView {
     }
 }
 
-// view that make up the list body
-extension MonthView {
-    private func monthCountView(forMonth month: Int, year: Int) -> [MoodMetrics] {
-        let (startDate, endDate) = Date.dateRange(monthInt: month, yearInt: year)
-        let entries = PersistenceController.shared.getData(startDate: startDate, endDate: endDate, includedDays: [1,2,3,4,5,6,7])
-        return Random.createTotalPerc(fromEntries: entries)
-    }
-    
-    
-    private func homeViewTwoSectionHeaderView(month: Int, year: Int) -> some View {
-        ZStack {
-            HStack {
-                Text("\(Random.monthName(fromMonthInt: month)) \(String(year))")
-                    .font(.body)
-                    .foregroundColor(textColor)
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                
-                Spacer()
-                
-                
-                ForEach(monthCountView(forMonth: month, year: year)) {
-                    Text("\($0.total)")
-                        .font(.body)
-                        .fontWeight(.bold)
-                        .foregroundColor($0.mood.color)
-                }
-            }
-            Text(String(customMoodTintUpdateNumber))
-                .hidden()
-        }
-    }
-    
-    private func shareViewImage(month: Int, year: Int, entries: [MoodEntry]) -> some View {
-        ZStack {
-            VStack {
-                HStack {
-                    homeViewTwoSectionHeaderView(month: month, year: year)
-                }
-                Divider()
-                LazyVGrid(columns: columns, spacing: 15) {
-                    ForEach(entries, id: \.self) { entry in
-                        shape.view(withText: Text(""), bgColor: entry.mood == .placeholder ? .clear : moodTint.color(forMood: entry.mood),
-                                   textColor: .clear)
-                        .frame(minHeight: 25, idealHeight: 25, maxHeight: 50, alignment: .center)
-                    }
-                }
-                Spacer()
-            }
-            .padding()
-            .background(
-                RoundedRectangle(cornerRadius: 10)
-                    .foregroundColor(
-                        theme.currentTheme.secondaryBGColor
-                    )
-            )
-            .padding()
-        }
-        .background(
-            theme.currentTheme.bg
-        )
-        .padding(.bottom, 55)
-    }
-    
-    private func homeViewTwoMonthListView(month: Int, year: Int, entries: [MoodEntry]) -> some View {
-        VStack {
-            HStack {
-                homeViewTwoSectionHeaderView(month: month, year: year)
-            }
-            Divider()
-            LazyVGrid(columns: columns, spacing: 15) {
-                ForEach(entries, id: \.self) { entry in
-                    if filteredDays.currentFilters.contains(Int(entry.weekDay)) {
-                        shape.view(withText: Text(""),
-                                   bgColor: entry.mood == .placeholder ? .clear : moodTint.color(forMood: entry.mood),
-                                   textColor: .clear)
-                        .frame(minHeight: 25, idealHeight: 25, maxHeight: 50, alignment: .center)
-                    } else {
-                        shape.view(withText: Text(""),
-                                   bgColor: .clear,
-                                   textColor: .clear)
-                        .frame(minHeight: 25, idealHeight: 25, maxHeight: 50, alignment: .center)
-                    }
-                }
-            }
-        }
-        .contentShape(Rectangle())
-        .onTapGesture{
-            let deailView = MonthDetailView(monthInt: month,
-                                            yearInt: year,
-                                            entries: entries,
-                                            parentViewModel: viewModel)
-            
-            selectedDetail.fuckingWrapped = deailView
-            selectedDetail.showFuckingSheet = true
-        }
-    }
-}
-
 struct MonthView_Previews: PreviewProvider {
     static var previews: some View {
         MonthView(viewModel: DayViewViewModel(addMonthStartWeekdayPadding: true))