ed8205cd88
Exhaustive file-by-file audit of every Swift file in the project (iOS app, Watch app, Widget extension). Every interactive UI element — buttons, toggles, pickers, links, menus, tap gestures, text editors, color pickers, photo pickers — now has an accessibilityIdentifier for XCUITest automation. 46 files changed across Shared/, Onboarding/, Watch App/, and Widget targets. Added ~100 new ID definitions covering settings debug controls, export/photo views, sharing templates, customization subviews, onboarding flows, tip modals, widget voting buttons, and watch mood buttons.
885 lines
36 KiB
Swift
885 lines
36 KiB
Swift
//
|
|
// HomeViewTwo.swift
|
|
// Reflect (iOS)
|
|
//
|
|
// Created by Trey Tartt on 2/18/22.
|
|
//
|
|
|
|
import SwiftUI
|
|
|
|
struct MonthView: View {
|
|
@AppStorage(UserDefaultsStore.Keys.needsOnboarding.rawValue, store: GroupUserDefaults.groupDefaults) private var needsOnboarding = true
|
|
|
|
@AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
|
|
|
|
private var labelColor: Color { theme.currentTheme.labelColor }
|
|
|
|
@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.shape.rawValue, store: GroupUserDefaults.groupDefaults) private var shape: BGShape = .circle
|
|
|
|
@StateObject private var shareImage = ShareImageStateViewModel()
|
|
@State private var sharePickerData: SharePickerData? = nil
|
|
|
|
@EnvironmentObject var iapManager: IAPManager
|
|
@StateObject private var selectedDetail = DetailViewStateViewModel()
|
|
@State private var showingSheet = false
|
|
@StateObject private var onboardingData = OnboardingDataDataManager.shared
|
|
@StateObject private var filteredDays = DaysFilterClass.shared
|
|
|
|
class DetailViewStateViewModel: ObservableObject {
|
|
@Published var selectedItem: MonthDetailView? = nil
|
|
@Published var showSheet = false
|
|
}
|
|
|
|
// Heatmap-style grid with tight spacing
|
|
private let heatmapColumns = Array(repeating: GridItem(.flexible(), spacing: 2), count: 7)
|
|
|
|
private let weekdayLabels = ["S", "M", "T", "W", "T", "F", "S"]
|
|
|
|
@ObservedObject var viewModel: DayViewViewModel
|
|
@State private var trialWarningHidden = false
|
|
@State private var showSubscriptionStore = false
|
|
|
|
/// Cached sorted year/month data to avoid recalculating in ForEach
|
|
@State private var cachedSortedData: [(year: Int, months: [(month: Int, entries: [MoodEntryModel])])] = []
|
|
@State private var cachedDemoSortedData: [(year: Int, months: [(month: Int, entries: [MoodEntryModel])])] = []
|
|
|
|
// MARK: - Demo Animation
|
|
@StateObject private var demoManager = DemoAnimationManager.shared
|
|
|
|
/// Generate fake demo data for the past 12 months
|
|
private func computeDemoSortedData() -> [(year: Int, months: [(month: Int, entries: [MoodEntryModel])])] {
|
|
var result: [(year: Int, months: [(month: Int, entries: [MoodEntryModel])])] = []
|
|
let calendar = Calendar.current
|
|
let now = Date()
|
|
|
|
// Group months by year
|
|
var yearDict: [Int: [(month: Int, entries: [MoodEntryModel])]] = [:]
|
|
|
|
for monthOffset in 0..<12 {
|
|
guard let monthDate = calendar.date(byAdding: .month, value: -monthOffset, to: now) else { continue }
|
|
let year = calendar.component(.year, from: monthDate)
|
|
let month = calendar.component(.month, from: monthDate)
|
|
|
|
let entries = generateDemoMonthEntries(year: year, month: month)
|
|
if yearDict[year] == nil {
|
|
yearDict[year] = []
|
|
}
|
|
yearDict[year]?.append((month: month, entries: entries))
|
|
}
|
|
|
|
// Sort years descending, months descending within each year
|
|
for year in yearDict.keys.sorted(by: >) {
|
|
if let months = yearDict[year] {
|
|
result.append((year: year, months: months.sorted { $0.month > $1.month }))
|
|
}
|
|
}
|
|
|
|
return result
|
|
}
|
|
|
|
/// Generate fake entries for a demo month
|
|
private func generateDemoMonthEntries(year: Int, month: Int) -> [MoodEntryModel] {
|
|
let calendar = Calendar.current
|
|
var entries: [MoodEntryModel] = []
|
|
|
|
// Get first day of month
|
|
var components = DateComponents()
|
|
components.year = year
|
|
components.month = month
|
|
components.day = 1
|
|
guard let firstOfMonth = calendar.date(from: components) else { return entries }
|
|
|
|
// Get the weekday of first day (1 = Sunday, 7 = Saturday)
|
|
let firstWeekday = calendar.component(.weekday, from: firstOfMonth)
|
|
|
|
// Add placeholder entries for days before the first
|
|
for i in 1..<firstWeekday {
|
|
// Create a date before the month starts for placeholder
|
|
if let placeholderDate = calendar.date(byAdding: .day, value: -(firstWeekday - i), to: firstOfMonth) {
|
|
let entry = MoodEntryModel(
|
|
forDate: placeholderDate,
|
|
mood: .placeholder,
|
|
entryType: .listView,
|
|
canEdit: false,
|
|
canDelete: false
|
|
)
|
|
entries.append(entry)
|
|
}
|
|
}
|
|
|
|
// Get number of days in month
|
|
guard let range = calendar.range(of: .day, in: .month, for: firstOfMonth) else { return entries }
|
|
|
|
// Add entries for each day
|
|
for day in 1...range.count {
|
|
components.day = day
|
|
if let date = calendar.date(from: components) {
|
|
// Create a fake entry with random positive mood for demo
|
|
let entry = MoodEntryModel(
|
|
forDate: date,
|
|
mood: DemoAnimationManager.randomPositiveMood(),
|
|
entryType: .listView,
|
|
canEdit: false,
|
|
canDelete: false
|
|
)
|
|
entries.append(entry)
|
|
}
|
|
}
|
|
|
|
return entries
|
|
}
|
|
|
|
/// Filters month data to only current month when subscription/trial expired
|
|
private func computeFilteredMonthData() -> [Int: [Int: [MoodEntryModel]]] {
|
|
guard iapManager.shouldShowPaywall else {
|
|
return viewModel.grouped
|
|
}
|
|
|
|
// Only show current month when paywall should show
|
|
let currentMonth = Calendar.current.component(.month, from: Date())
|
|
let currentYear = Calendar.current.component(.year, from: Date())
|
|
|
|
var filtered: [Int: [Int: [MoodEntryModel]]] = [:]
|
|
if let yearData = viewModel.grouped[currentYear],
|
|
let monthData = yearData[currentMonth] {
|
|
filtered[currentYear] = [currentMonth: monthData]
|
|
}
|
|
return filtered
|
|
}
|
|
|
|
/// Sorts the filtered month data - called only when source data changes
|
|
private func computeSortedYearMonthData() -> [(year: Int, months: [(month: Int, entries: [MoodEntryModel])])] {
|
|
computeFilteredMonthData()
|
|
.sorted { $0.key > $1.key }
|
|
.map { (year: $0.key, months: $0.value.sorted { $0.key > $1.key }.map { (month: $0.key, entries: $0.value) }) }
|
|
}
|
|
|
|
/// Data to display - uses demo data when in demo mode, otherwise cached real data
|
|
private var displayData: [(year: Int, months: [(month: Int, entries: [MoodEntryModel])])] {
|
|
demoManager.isDemoMode ? cachedDemoSortedData : cachedSortedData
|
|
}
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
if viewModel.hasNoData && !demoManager.isDemoMode {
|
|
EmptyHomeView(showVote: false, viewModel: nil)
|
|
.padding()
|
|
} else {
|
|
ScrollViewReader { scrollProxy in
|
|
ScrollView {
|
|
VStack(spacing: 16) {
|
|
let allMonths = displayData.flatMap { yearData in
|
|
yearData.months.map { (year: yearData.year, month: $0.month, entries: $0.entries) }
|
|
}
|
|
ForEach(Array(allMonths.enumerated()), id: \.element.month) { monthIndex, monthData in
|
|
MonthCard(
|
|
month: monthData.month,
|
|
year: monthData.year,
|
|
entries: monthData.entries,
|
|
moodTint: moodTint,
|
|
imagePack: imagePack,
|
|
theme: theme,
|
|
filteredDays: filteredDays.currentFilters,
|
|
monthIndex: monthIndex,
|
|
onTap: {
|
|
let detailView = MonthDetailView(
|
|
monthInt: monthData.month,
|
|
yearInt: monthData.year,
|
|
entries: monthData.entries,
|
|
parentViewModel: viewModel
|
|
)
|
|
selectedDetail.selectedItem = detailView
|
|
selectedDetail.showSheet = true
|
|
},
|
|
onShare: { metrics, entries, month in
|
|
sharePickerData = SharePickerData(
|
|
title: Random.monthName(fromMonthInt: month),
|
|
designs: [
|
|
SharingDesign(
|
|
name: "Clean Calendar",
|
|
shareView: AnyView(MonthTotalV1(moodMetrics: metrics, moodEntries: entries, month: month)),
|
|
image: { MonthTotalV1(moodMetrics: metrics, moodEntries: entries, month: month).image }
|
|
),
|
|
SharingDesign(
|
|
name: "Stacked Bars",
|
|
shareView: AnyView(MonthTotalV5(moodMetrics: metrics, moodEntries: entries, month: month)),
|
|
image: { MonthTotalV5(moodMetrics: metrics, moodEntries: entries, month: month).image }
|
|
),
|
|
]
|
|
)
|
|
}
|
|
)
|
|
.id("month-\(monthIndex)")
|
|
}
|
|
|
|
// Scroll anchor at the very bottom
|
|
Color.clear.frame(height: 1).id("scroll-end")
|
|
}
|
|
.padding(.horizontal)
|
|
.padding(.bottom, 100)
|
|
.id(moodTint) // Force complete refresh when mood tint changes
|
|
.background(
|
|
GeometryReader { proxy in
|
|
let offset = proxy.frame(in: .named("scroll")).minY
|
|
Color.clear.preference(key: ViewOffsetKey.self, value: offset)
|
|
}
|
|
)
|
|
}
|
|
.accessibilityIdentifier(AccessibilityID.MonthView.grid)
|
|
.onChange(of: demoManager.animationProgress) { _, progress in
|
|
guard demoManager.isDemoMode && demoManager.animationStarted else { return }
|
|
|
|
// Start slow scroll once first month is 50% done
|
|
let halfwayPoint = demoManager.monthAnimationDuration * 0.5
|
|
if progress >= halfwayPoint && progress < halfwayPoint + 0.1 {
|
|
// Trigger once: scroll to bottom with long duration for smooth constant speed
|
|
let totalMonths = displayData.flatMap { $0.months }.count
|
|
let totalDuration = Double(totalMonths) * demoManager.monthAnimationDuration
|
|
withAnimation(.linear(duration: totalDuration)) {
|
|
scrollProxy.scrollTo("scroll-end", anchor: .bottom)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scrollDisabled(iapManager.shouldShowPaywall && !demoManager.isDemoMode)
|
|
.mask(
|
|
// Fade effect when paywall should show: 100% at top, 0% halfway down (disabled in demo mode)
|
|
(iapManager.shouldShowPaywall && !demoManager.isDemoMode) ?
|
|
AnyView(
|
|
LinearGradient(
|
|
gradient: Gradient(stops: [
|
|
.init(color: .black, location: 0),
|
|
.init(color: .black, location: 0.3),
|
|
.init(color: .clear, location: 0.5)
|
|
]),
|
|
startPoint: .top,
|
|
endPoint: .bottom
|
|
)
|
|
) : AnyView(Color.black)
|
|
)
|
|
}
|
|
|
|
if iapManager.shouldShowPaywall && !demoManager.isDemoMode {
|
|
// Premium month history prompt - bottom half (hidden in demo mode)
|
|
VStack(spacing: 20) {
|
|
// Icon
|
|
ZStack {
|
|
Circle()
|
|
.fill(
|
|
LinearGradient(
|
|
colors: [.purple.opacity(0.2), .pink.opacity(0.2)],
|
|
startPoint: .topLeading,
|
|
endPoint: .bottomTrailing
|
|
)
|
|
)
|
|
.frame(width: 80, height: 80)
|
|
|
|
Image(systemName: "calendar.badge.clock")
|
|
.font(.title)
|
|
.foregroundStyle(
|
|
LinearGradient(
|
|
colors: [.purple, .pink],
|
|
startPoint: .topLeading,
|
|
endPoint: .bottomTrailing
|
|
)
|
|
)
|
|
}
|
|
|
|
// Text
|
|
VStack(spacing: 10) {
|
|
Text("Explore Your Mood History")
|
|
.font(.title3.weight(.bold))
|
|
.foregroundColor(labelColor)
|
|
.multilineTextAlignment(.center)
|
|
|
|
Text("See your complete monthly journey. Track patterns and understand what shapes your days.")
|
|
.font(.subheadline)
|
|
.foregroundColor(labelColor.opacity(0.7))
|
|
.multilineTextAlignment(.center)
|
|
.padding(.horizontal, 24)
|
|
}
|
|
|
|
// Subscribe button
|
|
Button {
|
|
showSubscriptionStore = true
|
|
} label: {
|
|
HStack {
|
|
Image(systemName: "calendar")
|
|
Text("Unlock Full History")
|
|
}
|
|
.font(.headline.weight(.bold))
|
|
.foregroundColor(.white)
|
|
.frame(maxWidth: .infinity)
|
|
.padding(.vertical, 14)
|
|
.background(
|
|
LinearGradient(
|
|
colors: [.purple, .pink],
|
|
startPoint: .leading,
|
|
endPoint: .trailing
|
|
)
|
|
)
|
|
.clipShape(RoundedRectangle(cornerRadius: 14))
|
|
}
|
|
.padding(.horizontal, 24)
|
|
.accessibilityIdentifier(AccessibilityID.Paywall.monthUnlockButton)
|
|
}
|
|
.padding(.vertical, 24)
|
|
.frame(maxWidth: .infinity)
|
|
.background(theme.currentTheme.bg)
|
|
.frame(maxHeight: .infinity, alignment: .bottom)
|
|
.accessibilityIdentifier(AccessibilityID.Paywall.monthOverlay)
|
|
} else if iapManager.shouldShowTrialWarning && !demoManager.isDemoMode {
|
|
VStack {
|
|
Spacer()
|
|
if !trialWarningHidden {
|
|
IAPWarningView(iapManager: iapManager)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sheet(isPresented: $showSubscriptionStore) {
|
|
ReflectSubscriptionStoreView(source: "month_gate")
|
|
}
|
|
.onAppear(perform: {
|
|
AnalyticsManager.shared.trackScreen(.month)
|
|
})
|
|
.padding([.top])
|
|
.background(
|
|
theme.currentTheme.bg
|
|
.edgesIgnoringSafeArea(.all)
|
|
)
|
|
.sheet(isPresented: $selectedDetail.showSheet,
|
|
onDismiss: didDismiss) {
|
|
selectedDetail.selectedItem
|
|
}
|
|
.sheet(item: $sharePickerData) { data in
|
|
SharingStylePickerView(title: data.title, designs: data.designs)
|
|
}
|
|
.onPreferenceChange(ViewOffsetKey.self) { value in
|
|
withAnimation {
|
|
trialWarningHidden = value < 0
|
|
}
|
|
}
|
|
.onAppear {
|
|
cachedSortedData = computeSortedYearMonthData()
|
|
cachedDemoSortedData = computeDemoSortedData()
|
|
}
|
|
.onChange(of: viewModel.numberOfItems) { _, _ in
|
|
// Use numberOfItems as a lightweight proxy for data changes
|
|
// instead of comparing the entire grouped dictionary
|
|
cachedSortedData = computeSortedYearMonthData()
|
|
}
|
|
.onChange(of: iapManager.shouldShowPaywall) { _, _ in
|
|
cachedSortedData = computeSortedYearMonthData()
|
|
}
|
|
.preferredColorScheme(theme.preferredColorScheme)
|
|
#if DEBUG
|
|
// Triple-tap to toggle demo mode for video recording
|
|
.accessibilityIdentifier(AccessibilityID.MonthView.debugDemoToggle)
|
|
.onTapGesture(count: 3) {
|
|
if demoManager.isDemoMode {
|
|
demoManager.stopDemoMode()
|
|
} else {
|
|
demoManager.startDemoMode()
|
|
}
|
|
}
|
|
#endif
|
|
}
|
|
|
|
|
|
func didDismiss() {
|
|
selectedDetail.showSheet = false
|
|
selectedDetail.selectedItem = nil
|
|
}
|
|
}
|
|
|
|
// MARK: - Month Card Component
|
|
struct MonthCard: View, Equatable {
|
|
let month: Int
|
|
let year: Int
|
|
let entries: [MoodEntryModel]
|
|
let moodTint: MoodTints
|
|
let imagePack: MoodImages
|
|
let theme: Theme
|
|
let filteredDays: [Int]
|
|
let monthIndex: Int // Index for demo animation sequencing
|
|
let onTap: () -> Void
|
|
let onShare: ([MoodMetrics], [MoodEntryModel], Int) -> Void
|
|
|
|
private var labelColor: Color { theme.currentTheme.labelColor }
|
|
|
|
// Demo animation support
|
|
@ObservedObject private var demoManager = DemoAnimationManager.shared
|
|
|
|
// Equatable conformance to prevent unnecessary re-renders
|
|
static func == (lhs: MonthCard, rhs: MonthCard) -> Bool {
|
|
lhs.month == rhs.month &&
|
|
lhs.year == rhs.year &&
|
|
lhs.entries.count == rhs.entries.count &&
|
|
lhs.moodTint == rhs.moodTint &&
|
|
lhs.imagePack == rhs.imagePack &&
|
|
lhs.filteredDays == rhs.filteredDays &&
|
|
lhs.theme == rhs.theme &&
|
|
lhs.monthIndex == rhs.monthIndex
|
|
}
|
|
|
|
@State private var showStats = true
|
|
@State private var cachedMetrics: [MoodMetrics] = []
|
|
|
|
private let weekdayLabels = ["S", "M", "T", "W", "T", "F", "S"]
|
|
private let heatmapColumns = Array(repeating: GridItem(.flexible(), spacing: 2), count: 7)
|
|
|
|
// Animated metrics for demo mode - scales based on visible percentage
|
|
private var animatedMetrics: [MoodMetrics] {
|
|
guard demoManager.isDemoMode else { return cachedMetrics }
|
|
|
|
let totalCells = entries.filter { $0.mood != .placeholder }.count
|
|
let visiblePercentage = demoManager.visiblePercentageForMonth(totalCells: totalCells, monthIndex: monthIndex)
|
|
|
|
// Scale metrics by visible percentage
|
|
return cachedMetrics.map { metric in
|
|
let animatedTotal = Int(Double(metric.total) * visiblePercentage)
|
|
let animatedPercent = metric.percent * Float(visiblePercentage)
|
|
return MoodMetrics(mood: metric.mood, total: animatedTotal, percent: animatedPercent)
|
|
}
|
|
}
|
|
|
|
// Cached filtered/sorted metrics to avoid recalculating in ForEach
|
|
private var displayMetrics: [MoodMetrics] {
|
|
animatedMetrics.filter { $0.total > 0 }.sorted { $0.mood.rawValue > $1.mood.rawValue }
|
|
}
|
|
|
|
// All 5 moods for share view (shows 0% for moods with no entries)
|
|
private var allMoodMetrics: [MoodMetrics] {
|
|
animatedMetrics.sorted { $0.mood.rawValue > $1.mood.rawValue }
|
|
}
|
|
|
|
private var topMood: Mood? {
|
|
displayMetrics.max(by: { $0.total < $1.total })?.mood
|
|
}
|
|
|
|
private var totalTrackedDays: Int {
|
|
entries.filter { ![.missing, .placeholder].contains($0.mood) }.count
|
|
}
|
|
|
|
private var shareableView: some View {
|
|
VStack(spacing: 0) {
|
|
// Header with month/year
|
|
Text("\(Random.monthName(fromMonthInt: month).uppercased()) \(String(year))")
|
|
.font(.title.weight(.heavy))
|
|
.foregroundColor(labelColor)
|
|
.padding(.top, 40)
|
|
.padding(.bottom, 8)
|
|
|
|
Text("Monthly Mood Wrap")
|
|
.font(.body.weight(.medium))
|
|
.foregroundColor(labelColor.opacity(0.6))
|
|
.padding(.bottom, 30)
|
|
|
|
// Top mood highlight
|
|
if let topMood = topMood {
|
|
VStack(spacing: 12) {
|
|
Circle()
|
|
.fill(moodTint.color(forMood: topMood))
|
|
.frame(width: 100, height: 100)
|
|
.overlay(
|
|
imagePack.icon(forMood: topMood)
|
|
.resizable()
|
|
.aspectRatio(contentMode: .fit)
|
|
.foregroundColor(.white)
|
|
.padding(24)
|
|
.accessibilityLabel(topMood.strValue)
|
|
)
|
|
.shadow(color: moodTint.color(forMood: topMood).opacity(0.5), radius: 20, x: 0, y: 10)
|
|
|
|
Text("Top Mood")
|
|
.font(.subheadline.weight(.medium))
|
|
.foregroundColor(labelColor.opacity(0.5))
|
|
|
|
Text(topMood.strValue.uppercased())
|
|
.font(.title3.weight(.bold))
|
|
.foregroundColor(moodTint.color(forMood: topMood))
|
|
}
|
|
.padding(.bottom, 30)
|
|
}
|
|
|
|
// Stats row
|
|
HStack(spacing: 0) {
|
|
VStack(spacing: 4) {
|
|
Text("\(totalTrackedDays)")
|
|
.font(.largeTitle.weight(.bold))
|
|
.foregroundColor(labelColor)
|
|
Text("Days Tracked")
|
|
.font(.caption.weight(.medium))
|
|
.foregroundColor(labelColor.opacity(0.5))
|
|
}
|
|
.frame(maxWidth: .infinity)
|
|
}
|
|
.padding(.bottom, 30)
|
|
|
|
// Mood breakdown with bars (all 5 moods)
|
|
VStack(spacing: 12) {
|
|
ForEach(allMoodMetrics) { metric in
|
|
HStack(spacing: 12) {
|
|
Circle()
|
|
.fill(moodTint.color(forMood: metric.mood))
|
|
.frame(width: 32, height: 32)
|
|
.overlay(
|
|
imagePack.icon(forMood: metric.mood)
|
|
.resizable()
|
|
.aspectRatio(contentMode: .fit)
|
|
.foregroundColor(.white)
|
|
.padding(7)
|
|
.accessibilityLabel(metric.mood.strValue)
|
|
)
|
|
|
|
GeometryReader { geo in
|
|
ZStack(alignment: .leading) {
|
|
RoundedRectangle(cornerRadius: 6)
|
|
.fill(Color.gray.opacity(0.2))
|
|
|
|
if metric.percent > 0 {
|
|
RoundedRectangle(cornerRadius: 6)
|
|
.fill(moodTint.color(forMood: metric.mood))
|
|
.frame(width: max(8, geo.size.width * CGFloat(metric.percent / 100)))
|
|
}
|
|
}
|
|
}
|
|
.frame(height: 12)
|
|
|
|
Text("\(Int(metric.percent))%")
|
|
.font(.subheadline.weight(.semibold))
|
|
.foregroundColor(labelColor)
|
|
.frame(width: 40, alignment: .trailing)
|
|
}
|
|
}
|
|
}
|
|
.padding(.horizontal, 32)
|
|
.padding(.bottom, 40)
|
|
|
|
// App branding
|
|
Text("ifeel")
|
|
.font(.subheadline.weight(.medium))
|
|
.foregroundColor(labelColor.opacity(0.3))
|
|
.padding(.bottom, 20)
|
|
}
|
|
.frame(width: 400)
|
|
.background(theme.currentTheme.secondaryBGColor)
|
|
}
|
|
|
|
var body: some View {
|
|
VStack(spacing: 0) {
|
|
// Month Header
|
|
HStack {
|
|
Button(action: {
|
|
if UIAccessibility.isReduceMotionEnabled {
|
|
showStats.toggle()
|
|
} else {
|
|
withAnimation(.easeInOut(duration: 0.2)) { showStats.toggle() }
|
|
}
|
|
}) {
|
|
HStack {
|
|
Text("\(Random.monthName(fromMonthInt: month)) \(String(year))")
|
|
.font(.title3.bold())
|
|
.foregroundColor(labelColor)
|
|
|
|
Image(systemName: showStats ? "chevron.up" : "chevron.down")
|
|
.font(.caption.weight(.semibold))
|
|
.foregroundColor(labelColor.opacity(0.5))
|
|
}
|
|
}
|
|
.buttonStyle(.plain)
|
|
.accessibilityIdentifier(AccessibilityID.MonthView.statsToggleButton)
|
|
.accessibilityLabel("\(Random.monthName(fromMonthInt: month)) \(String(year)), \(showStats ? "expanded" : "collapsed")")
|
|
.accessibilityHint("Double tap to toggle statistics")
|
|
|
|
Spacer()
|
|
|
|
Button(action: {
|
|
onShare(cachedMetrics, entries, month)
|
|
}) {
|
|
Image(systemName: "square.and.arrow.up")
|
|
.font(.subheadline.weight(.medium))
|
|
.foregroundColor(labelColor.opacity(0.6))
|
|
}
|
|
.buttonStyle(.plain)
|
|
.accessibilityLabel("Share \(Random.monthName(fromMonthInt: month)) \(String(year)) mood data")
|
|
.accessibilityIdentifier(AccessibilityID.MonthView.shareButton)
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.vertical, 12)
|
|
|
|
// Weekday Labels
|
|
HStack(spacing: 2) {
|
|
ForEach(weekdayLabels.indices, id: \.self) { index in
|
|
Text(weekdayLabels[index])
|
|
.font(.caption2.weight(.medium))
|
|
.foregroundColor(labelColor.opacity(0.5))
|
|
.frame(maxWidth: .infinity)
|
|
}
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.bottom, 6)
|
|
|
|
// Heatmap Grid
|
|
LazyVGrid(columns: heatmapColumns, spacing: 2) {
|
|
ForEach(Array(entries.enumerated()), id: \.element) { index, entry in
|
|
let row = index / 7
|
|
let column = index % 7
|
|
let totalRows = (entries.count + 6) / 7
|
|
|
|
DemoHeatmapCell(
|
|
entry: entry,
|
|
moodTint: moodTint,
|
|
isFiltered: filteredDays.contains(Int(entry.weekDay)),
|
|
row: row,
|
|
column: column,
|
|
totalRows: totalRows,
|
|
totalColumns: 7,
|
|
monthIndex: monthIndex,
|
|
demoManager: demoManager
|
|
)
|
|
}
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.bottom, 12)
|
|
|
|
// Bar Chart Stats (collapsible)
|
|
if showStats {
|
|
Divider()
|
|
.padding(.horizontal, 16)
|
|
|
|
MoodBarChart(metrics: animatedMetrics, 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())
|
|
.accessibilityIdentifier(AccessibilityID.MonthView.dayCell(dateString: "\(month)_\(year)"))
|
|
.onTapGesture {
|
|
onTap()
|
|
}
|
|
.onAppear {
|
|
// Cache metrics calculation on first appearance
|
|
if cachedMetrics.isEmpty {
|
|
cachedMetrics = Random.createTotalPerc(fromEntries: entries)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Heatmap Cell
|
|
struct HeatmapCell: View {
|
|
let entry: MoodEntryModel
|
|
let moodTint: MoodTints
|
|
let isFiltered: Bool
|
|
|
|
var body: some View {
|
|
RoundedRectangle(cornerRadius: 4)
|
|
.fill(cellColor)
|
|
.aspectRatio(1, contentMode: .fit)
|
|
.accessibilityLabel(accessibilityDescription)
|
|
.accessibilityHint(entry.mood != .placeholder && entry.mood != .missing ? "Double tap to edit" : "")
|
|
}
|
|
|
|
private var accessibilityDescription: String {
|
|
if entry.mood == .placeholder {
|
|
return "Empty day"
|
|
} else if entry.mood == .missing {
|
|
return "No mood logged for \(formattedDate)"
|
|
} else if !isFiltered {
|
|
return "\(formattedDate): \(entry.mood.strValue) (filtered out)"
|
|
} else {
|
|
return "\(formattedDate): \(entry.mood.strValue)"
|
|
}
|
|
}
|
|
|
|
private var formattedDate: String {
|
|
DateFormattingCache.shared.string(for: entry.forDate, format: .dateMedium)
|
|
}
|
|
|
|
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: - Demo Heatmap Cell (with animation support)
|
|
struct DemoHeatmapCell: View {
|
|
let entry: MoodEntryModel
|
|
let moodTint: MoodTints
|
|
let isFiltered: Bool
|
|
let row: Int
|
|
let column: Int
|
|
let totalRows: Int
|
|
let totalColumns: Int
|
|
let monthIndex: Int // Which month this is (0 = first/most recent)
|
|
@ObservedObject var demoManager: DemoAnimationManager
|
|
|
|
/// Random mood for this cell (computed once and cached)
|
|
@State private var randomMood: Mood = .great
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
// Background: Gray grid cell always visible at 1x scale
|
|
RoundedRectangle(cornerRadius: 4)
|
|
.fill(Color.gray.opacity(0.3))
|
|
.aspectRatio(1, contentMode: .fit)
|
|
|
|
// Foreground: Animated mood color that scales 2x -> 1x
|
|
if demoManager.isDemoMode {
|
|
// Skip placeholder cells (first row offset cells)
|
|
if entry.mood != .placeholder {
|
|
RoundedRectangle(cornerRadius: 4)
|
|
.fill(moodTint.color(forMood: randomMood))
|
|
.aspectRatio(1, contentMode: .fit)
|
|
.scaleEffect(isAnimated ? 1.0 : 2.0)
|
|
.opacity(isAnimated ? 1.0 : 0.0)
|
|
.animation(.spring(response: 0.3, dampingFraction: 0.7), value: isAnimated)
|
|
}
|
|
} else {
|
|
// Normal mode - just show the actual color
|
|
RoundedRectangle(cornerRadius: 4)
|
|
.fill(normalCellColor)
|
|
.aspectRatio(1, contentMode: .fit)
|
|
}
|
|
}
|
|
.onAppear {
|
|
// Generate random mood once when cell appears
|
|
randomMood = DemoAnimationManager.randomPositiveMood()
|
|
}
|
|
.accessibilityLabel(accessibilityDescription)
|
|
}
|
|
|
|
/// Whether this cell has been animated (filled with color)
|
|
private var isAnimated: Bool {
|
|
if !demoManager.isDemoMode {
|
|
return true // Normal mode - always show
|
|
}
|
|
if !demoManager.animationStarted {
|
|
return false // Demo mode but animation hasn't started
|
|
}
|
|
return demoManager.isCellVisible(
|
|
row: row,
|
|
column: column,
|
|
totalRows: totalRows,
|
|
totalColumns: totalColumns,
|
|
monthIndex: monthIndex
|
|
)
|
|
}
|
|
|
|
/// Color for normal (non-demo) mode
|
|
private var normalCellColor: 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)
|
|
}
|
|
}
|
|
|
|
private var accessibilityDescription: String {
|
|
if entry.mood == .placeholder {
|
|
return "Empty day"
|
|
} else if entry.mood == .missing {
|
|
return "No mood logged for \(DateFormattingCache.shared.string(for: entry.forDate, format: .dateMedium))"
|
|
} else if !isFiltered {
|
|
return "\(DateFormattingCache.shared.string(for: entry.forDate, format: .dateMedium)): \(entry.mood.strValue) (filtered out)"
|
|
} else {
|
|
return "\(DateFormattingCache.shared.string(for: entry.forDate, format: .dateMedium)): \(entry.mood.strValue)"
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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) { 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))
|
|
.accessibilityLabel(metric.mood.strValue)
|
|
|
|
// 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 {
|
|
Spacer()
|
|
VStack {
|
|
Button(action: {
|
|
showingSheet.toggle()
|
|
}, label: {
|
|
Image(systemName: "gear")
|
|
.foregroundColor(Color(UIColor.darkGray))
|
|
.font(.title3)
|
|
}).sheet(isPresented: $showingSheet) {
|
|
SettingsView()
|
|
}
|
|
.padding(.top, 60)
|
|
.padding(.trailing)
|
|
.accessibilityIdentifier(AccessibilityID.MonthView.settingsButton)
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct MonthView_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
MonthView(viewModel: DayViewViewModel(addMonthStartWeekdayPadding: true))
|
|
}
|
|
}
|