Redesign Year view with heatmap grid and donut chart stats

Complete visual overhaul matching Month view style:
- GitHub-style heatmap grid (12 columns for months, days as rows)
- Donut chart showing mood distribution with total days in center
- Bar chart stats alongside donut chart
- Collapsible stats section with chevron toggle
- YearCard, YearHeatmapGrid, MonthColumn, YearHeatmapCell components
- Consistent styling with Month view redesign

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

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

Shared/Views/YearView/YearView.swift

@@ -10,16 +10,17 @@ import CoreData
 
 struct YearView: View {
     let months = [(0, "J"), (1, "F"), (2,"M"), (3,"A"), (4,"M"), (5, "J"), (6,"J"), (7,"A"), (8,"S"), (9,"O"), (10, "N"), (11,"D")]
-    
+
     @State private var toggle = true
-    
+
     @FetchRequest(
         sortDescriptors: [NSSortDescriptor(keyPath: \MoodEntry.forDate, ascending: false)],
         animation: .spring())
     private var items: FetchedResults<MoodEntry>
-    
+
     @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
 
     @EnvironmentObject var iapManager: IAPManager
@@ -27,25 +28,10 @@ struct YearView: View {
     @StateObject private var filteredDays = DaysFilterClass.shared
     @State private var trialWarningHidden = false
     @State private var showSubscriptionStore = false
-    //[
+
-    //  2001: [0: [], 1: [], 2: []],
+    // Heatmap-style grid: 12 columns for months
-    //  2002: [0: [], 1: [], 2: []]
+    private let heatmapColumns = Array(repeating: GridItem(.flexible(), spacing: 2), count: 12)
-    // ]
+
-    let columns = [
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-        GridItem(.flexible(minimum: 5, maximum: 50)),
-    ]
-    
     var body: some View {
         ZStack {
             if self.viewModel.data.keys.isEmpty {
@@ -53,20 +39,32 @@ struct YearView: View {
                     .padding()
             } else {
                 ScrollView {
-                    gridView
+                    VStack(spacing: 16) {
-                        .background(
+                        ForEach(Array(self.viewModel.data.keys.sorted(by: >)), id: \.self) { yearKey in
-                            GeometryReader { proxy in
+                            YearCard(
-                                let offset = proxy.frame(in: .named("scroll")).minY
+                                year: yearKey,
-                                Color.clear.preference(key: ViewOffsetKey.self, value: offset)
+                                yearData: self.viewModel.data[yearKey]!,
-                            }
+                                moodTint: moodTint,
-                        )
+                                imagePack: imagePack,
+                                textColor: textColor,
+                                theme: theme,
+                                filteredDays: filteredDays.currentFilters
+                            )
+                        }
+                    }
+                    .padding(.horizontal)
+                    .padding(.bottom, 100)
+                    .background(
+                        GeometryReader { proxy in
+                            let offset = proxy.frame(in: .named("scroll")).minY
+                            Color.clear.preference(key: ViewOffsetKey.self, value: offset)
+                        }
+                    )
                 }
                 .disabled(iapManager.shouldShowPaywall)
-                .padding(.bottom, 5)
             }
 
             if iapManager.shouldShowPaywall {
-                // Paywall overlay - tap to show subscription store
                 Color.black.opacity(0.3)
                     .ignoresSafeArea()
                     .onTapGesture {
@@ -113,116 +111,261 @@ struct YearView: View {
         }
         .padding([.top])
     }
+}
 
-    private var monthsHeader: some View {
+// MARK: - Year Card Component
-        LazyVGrid(columns: columns, spacing: 0) {
+struct YearCard: View {
-            ForEach(months, id: \.self.0) { item in
+    let year: Int
-                Text(item.1)
+    let yearData: [Int: [DayChartView]]
-                    .textCase(.uppercase)
+    let moodTint: MoodTints
-                    .foregroundColor(textColor)
+    let imagePack: MoodImages
-            }
+    let textColor: Color
-        }.padding([.leading, .trailing, .top])
+    let theme: Theme
+    let filteredDays: [Int]
+
+    @State private var showStats = true
+
+    private let months = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"]
+    private let heatmapColumns = Array(repeating: GridItem(.flexible(), spacing: 2), count: 12)
+
+    private var yearEntries: [MoodEntry] {
+        let firstOfYear = Calendar.current.date(from: DateComponents(year: year, month: 1, day: 1))!
+        let lastOfYear = Calendar.current.date(from: DateComponents(year: year + 1, month: 1, day: 1))!
+        return PersistenceController.shared.getData(startDate: firstOfYear, endDate: lastOfYear, includedDays: filteredDays)
     }
-    
+
-    private var gridView: some View {
+    private var metrics: [MoodMetrics] {
-        VStack {
+        return Random.createTotalPerc(fromEntries: yearEntries)
-           VStack {
+    }
-                ForEach(Array(self.viewModel.data.keys.sorted(by: >)), id: \.self) { yearKey in
+
-                    let yearData = self.viewModel.data[yearKey]!
+    private var totalEntries: Int {
-                    
+        yearEntries.filter { ![Mood.missing, Mood.placeholder].contains($0.mood) }.count
-                    let firstOfYear = Calendar.current.date(from: DateComponents(year: Int(yearKey), month: 1, day: 1))!
+    }
-                    let lastOfYear = Calendar.current.date(from: DateComponents(year: Int(yearKey)+1, month: 1, day: 1))!
+
-                
+    var body: some View {
-                    let yearEntries = PersistenceController.shared.getData(startDate: firstOfYear,
+        VStack(spacing: 0) {
-                                                                           endDate: lastOfYear,
+            // Year Header
-                                                                           includedDays: filteredDays.currentFilters)
+            Button(action: { withAnimation(.easeInOut(duration: 0.2)) { showStats.toggle() } }) {
-                    Text(String(yearKey))
+                HStack {
-                        .font(.title)
+                    Text(String(year))
+                        .font(.title2.bold())
                         .foregroundColor(textColor)
-                    
+
-                    ZStack {
+                    Spacer()
-                        theme.currentTheme.secondaryBGColor
+
-                        
+                    Text("\(totalEntries) days")
-                        HStack {
+                        .font(.subheadline)
-                            Spacer()
+                        .foregroundColor(textColor.opacity(0.6))
-                            ForEach(Mood.allValues, id: \.self) { mood in
+
-                                VStack {
+                    Image(systemName: showStats ? "chevron.up" : "chevron.down")
-                                    Text(String(Stats.getCountFor(moodType: mood,
+                        .font(.caption.weight(.semibold))
-                                                                  inData: yearEntries)))
+                        .foregroundColor(textColor.opacity(0.5))
-                                    .font(.title)
+                        .padding(.leading, 4)
-                                    .foregroundColor(textColor)
+                }
-                                    Text(mood.strValue)
+                .padding(.horizontal, 16)
-                                        .foregroundColor(moodTint.color(forMood: mood))
+                .padding(.vertical, 12)
+            }
+            .buttonStyle(.plain)
+
+            // Stats Section (collapsible)
+            if showStats {
+                HStack(spacing: 16) {
+                    // Donut Chart
+                    MoodDonutChart(metrics: metrics, moodTint: moodTint)
+                        .frame(width: 100, height: 100)
+
+                    // Bar Chart
+                    VStack(spacing: 6) {
+                        ForEach(metrics.filter { $0.total > 0 }) { metric in
+                            HStack(spacing: 8) {
+                                imagePack.icon(forMood: metric.mood)
+                                    .resizable()
+                                    .aspectRatio(contentMode: .fit)
+                                    .frame(width: 16, height: 16)
+                                    .foregroundColor(moodTint.color(forMood: metric.mood))
+
+                                GeometryReader { geo in
+                                    ZStack(alignment: .leading) {
+                                        RoundedRectangle(cornerRadius: 3)
+                                            .fill(Color.gray.opacity(0.15))
+                                        RoundedRectangle(cornerRadius: 3)
+                                            .fill(moodTint.color(forMood: metric.mood))
+                                            .frame(width: max(4, geo.size.width * CGFloat(metric.percent / 100)))
+                                    }
                                 }
-                                Spacer()
+                                .frame(height: 8)
+
+                                Text("\(Int(metric.percent))%")
+                                    .font(.caption2.weight(.medium))
+                                    .foregroundColor(textColor.opacity(0.7))
+                                    .frame(width: 32, alignment: .trailing)
                             }
                         }
                     }
-                    .cornerRadius(10)
+                    .frame(maxWidth: .infinity)
-                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90, maxHeight: 90)
+                }
-                    .cornerRadius(10)
+                .padding(.horizontal, 16)
-                    .padding()
+                .padding(.bottom, 12)
-                    
+                .transition(.opacity.combined(with: .move(edge: .top)))
-                    Text(String(localized: "filter_view_total") + ":  \(yearEntries.count)")
+            }
-                        .font(.title2)
+
-                        .foregroundColor(textColor)
+            Divider()
-                    monthsHeader
+                .padding(.horizontal, 16)
-                        .cornerRadius(10)
+
-                    yearGridView(yearData: yearData, columns: columns)
+            // Month Labels
-                        .background(
+            HStack(spacing: 2) {
-                            theme.currentTheme.secondaryBGColor
+                ForEach(months, id: \.self) { month in
-                        )
+                    Text(month)
-                        .cornerRadius(10)
+                        .font(.system(size: 9, weight: .medium))
+                        .foregroundColor(textColor.opacity(0.5))
+                        .frame(maxWidth: .infinity)
+                }
+            }
+            .padding(.horizontal, 16)
+            .padding(.top, 10)
+            .padding(.bottom, 4)
+
+            // Heatmap Grid
+            YearHeatmapGrid(
+                yearData: yearData,
+                moodTint: moodTint,
+                filteredDays: filteredDays
+            )
+            .padding(.horizontal, 16)
+            .padding(.bottom, 16)
+        }
+        .background(
+            RoundedRectangle(cornerRadius: 16)
+                .fill(theme.currentTheme.secondaryBGColor)
+        )
+    }
+}
+
+// MARK: - Year Heatmap Grid
+struct YearHeatmapGrid: View {
+    let yearData: [Int: [DayChartView]]
+    let moodTint: MoodTints
+    let filteredDays: [Int]
+
+    private let heatmapColumns = Array(repeating: GridItem(.flexible(), spacing: 2), count: 12)
+
+    var body: some View {
+        LazyVGrid(columns: heatmapColumns, spacing: 2) {
+            ForEach(Array(yearData.keys.sorted(by: <)), id: \.self) { monthKey in
+                if let monthData = yearData[monthKey] {
+                    MonthColumn(
+                        monthData: monthData,
+                        moodTint: moodTint,
+                        filteredDays: filteredDays
+                    )
                 }
-                .padding([.top, .leading, .trailing])
             }
         }
     }
-    
+}
-    private struct yearGridView: View {
+
-        let yearData: [Int: [DayChartView]]
+// MARK: - Month Column (Vertical stack of days)
-        let columns: [GridItem]
+struct MonthColumn: View {
-        
+    let monthData: [DayChartView]
-        var body: some View {
+    let moodTint: MoodTints
-            VStack {
+    let filteredDays: [Int]
-                LazyVGrid(columns: columns, spacing: 0) {
+
-                    ForEach(Array(yearData.keys.sorted(by: <)), id: \.self) { monthKey in
+    var body: some View {
-                        let monthData = yearData[monthKey]!
+        VStack(spacing: 2) {
-                        VStack {
+            ForEach(monthData, id: \.self) { dayView in
-                            monthGridView(monthData: monthData)
+                YearHeatmapCell(
-                        }
+                    color: dayView.color,
-                    }
+                    weekDay: dayView.weekDay,
-                }
+                    isFiltered: filteredDays.contains(dayView.weekDay)
-                .padding([.leading, .trailing, .top, .bottom])
+                )
             }
-            .cornerRadius(10)
         }
     }
-    
+}
-    private struct monthGridView: View {
+
-        @StateObject private var filteredDays = DaysFilterClass.shared
+// MARK: - Year Heatmap Cell
-        
+struct YearHeatmapCell: View {
-        let monthData: [DayChartView]
+    let color: Color
-        
+    let weekDay: Int
-        var body: some View {
+    let isFiltered: Bool
-            VStack {
+
-                ForEach(monthData, id: \.self) { view in
+    var body: some View {
-                    if filteredDays.currentFilters.contains(view.weekDay) {
+        RoundedRectangle(cornerRadius: 2)
-                        view
+            .fill(cellColor)
-                    } else {
+            .aspectRatio(1, contentMode: .fit)
-                        view.filteredDaysView
+    }
-                    }
+
+    private var cellColor: Color {
+        if !isFiltered {
+            return Color.gray.opacity(0.1)
+        } else if color == Mood.placeholder.color || color == Mood.missing.color {
+            return Color.gray.opacity(0.2)
+        } else {
+            return color
+        }
+    }
+}
+
+// MARK: - Donut Chart
+struct MoodDonutChart: View {
+    let metrics: [MoodMetrics]
+    let moodTint: MoodTints
+
+    private var filteredMetrics: [MoodMetrics] {
+        metrics.filter { $0.total > 0 }
+    }
+
+    private var total: Int {
+        metrics.reduce(0) { $0 + $1.total }
+    }
+
+    var body: some View {
+        GeometryReader { geo in
+            let size = min(geo.size.width, geo.size.height)
+            let lineWidth = size * 0.2
+
+            ZStack {
+                // Background ring
+                Circle()
+                    .stroke(Color.gray.opacity(0.15), lineWidth: lineWidth)
+
+                // Mood segments
+                ForEach(Array(filteredMetrics.enumerated()), id: \.element.id) { index, metric in
+                    Circle()
+                        .trim(from: startAngle(for: index), to: endAngle(for: index))
+                        .stroke(moodTint.color(forMood: metric.mood), style: StrokeStyle(lineWidth: lineWidth, lineCap: .butt))
+                        .rotationEffect(.degrees(-90))
+                }
+
+                // Center text
+                VStack(spacing: 0) {
+                    Text("\(total)")
+                        .font(.system(size: size * 0.22, weight: .bold, design: .rounded))
+                    Text("days")
+                        .font(.system(size: size * 0.12, weight: .medium))
+                        .foregroundColor(.secondary)
                 }
             }
+            .frame(width: size, height: size)
         }
     }
+
+    private func startAngle(for index: Int) -> CGFloat {
+        let precedingTotal = filteredMetrics.prefix(index).reduce(0) { $0 + $1.total }
+        return CGFloat(precedingTotal) / CGFloat(max(1, total))
+    }
+
+    private func endAngle(for index: Int) -> CGFloat {
+        let includingCurrent = filteredMetrics.prefix(index + 1).reduce(0) { $0 + $1.total }
+        return CGFloat(includingCurrent) / CGFloat(max(1, total))
+    }
 }
 
 struct YearView_Previews: PreviewProvider {
     static var previews: some View {
         Group {
             YearView(viewModel: YearViewModel())
-            
+
             YearView(viewModel: YearViewModel())
                 .preferredColorScheme(.dark)
         }