admin/Reflect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Aura voting layout and 12 new day view styles

Browse Source 
New voting layout style with atmospheric glowing orb design.
New day view styles: Aura, Chronicle, Neon, Ink, Prism, Tape,
Morph, Stack, Wave, Pattern, Leather, and Glass. Updated style
pickers to use horizontal ScrollView for better navigation.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Trey t
2025-12-18 12:36:51 -06:00
parent 920aaee35c
commit f57e8da4ff
7 changed files with 2424 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

631
Shared/Views/DayView/DayView.swift
View File

@@ -122,7 +122,7 @@ struct DayView: View {
ForEach(months.sorted(by: {
$0.key > $1.key
}), id: \.key) { month, entries in
Section(header: SectionHeaderView(month: month, year: year)) {
Section(header: SectionHeaderView(month: month, year: year, entries: entries)) {
monthListView(month: month, year: year, entries: entries)
}
}
@@ -139,7 +139,40 @@ struct DayView: View {
// view that make up the list body
extension DayView {
private func SectionHeaderView(month: Int, year: Int) -> some View {
private func SectionHeaderView(month: Int, year: Int, entries: [MoodEntryModel]) -> some View {
Group {
switch dayViewStyle {
case .aura:
auraSectionHeader(month: month, year: year)
case .chronicle:
chronicleSectionHeader(month: month, year: year)
case .neon:
neonSectionHeader(month: month, year: year)
case .ink:
inkSectionHeader(month: month, year: year)
case .prism:
prismSectionHeader(month: month, year: year)
case .tape:
tapeSectionHeader(month: month, year: year)
case .morph:
morphSectionHeader(month: month, year: year)
case .stack:
stackSectionHeader(month: month, year: year)
case .wave:
waveSectionHeader(month: month, year: year, entries: entries)
case .pattern:
patternSectionHeader(month: month, year: year)
case .leather:
leatherSectionHeader(month: month, year: year)
case .glass:
glassSectionHeader(month: month, year: year)
default:
defaultSectionHeader(month: month, year: year)
}
}
}
private func defaultSectionHeader(month: Int, year: Int) -> some View {
HStack(spacing: 10) {
// Calendar icon
Image(systemName: "calendar")
@@ -157,6 +190,600 @@ extension DayView {
.background(.ultraThinMaterial)
}
private func auraSectionHeader(month: Int, year: Int) -> some View {
HStack(spacing: 0) {
// Large month number as hero element
Text(String(format: "%02d", month))
.font(.system(size: 48, weight: .black, design: .rounded))
.foregroundStyle(
LinearGradient(
colors: [textColor, textColor.opacity(0.4)],
startPoint: .top,
endPoint: .bottom
)
)
.frame(width: 80)
VStack(alignment: .leading, spacing: 2) {
Text(Random.monthName(fromMonthInt: month).uppercased())
.font(.system(size: 14, weight: .bold, design: .rounded))
.tracking(3)
.foregroundColor(textColor)
Text(String(year))
.font(.system(size: 12, weight: .medium, design: .rounded))
.foregroundColor(textColor.opacity(0.5))
}
Spacer()
// Decorative element
Circle()
.fill(textColor.opacity(0.1))
.frame(width: 8, height: 8)
}
.padding(.horizontal, 20)
.padding(.vertical, 20)
.background(
ZStack {
// Base material
Rectangle()
.fill(.ultraThinMaterial)
// Subtle gradient accent
LinearGradient(
colors: [
textColor.opacity(0.03),
Color.clear
],
startPoint: .leading,
endPoint: .trailing
)
}
)
}
private func chronicleSectionHeader(month: Int, year: Int) -> some View {
VStack(alignment: .leading, spacing: 0) {
// Thick editorial rule
Rectangle()
.fill(textColor)
.frame(height: 4)
HStack(alignment: .firstTextBaseline, spacing: 12) {
// Large serif month name
Text(Random.monthName(fromMonthInt: month).uppercased())
.font(.system(size: 28, weight: .regular, design: .serif))
.foregroundColor(textColor)
// Year in lighter weight
Text(String(year))
.font(.system(size: 16, weight: .light, design: .serif))
.italic()
.foregroundColor(textColor.opacity(0.5))
Spacer()
// Decorative flourish
Text("§")
.font(.system(size: 20, weight: .regular, design: .serif))
.foregroundColor(textColor.opacity(0.3))
}
.padding(.horizontal, 16)
.padding(.vertical, 16)
// Thin bottom rule
Rectangle()
.fill(textColor.opacity(0.2))
.frame(height: 1)
}
.background(.ultraThinMaterial)
}
private func neonSectionHeader(month: Int, year: Int) -> some View {
HStack(spacing: 12) {
// Glowing terminal prompt
Text(">")
.font(.system(size: 18, weight: .bold, design: .monospaced))
.foregroundColor(Color(red: 0.4, green: 1.0, blue: 0.4))
.shadow(color: Color(red: 0.4, green: 1.0, blue: 0.4).opacity(0.8), radius: 4, x: 0, y: 0)
Text("\(Random.monthName(fromMonthInt: month).uppercased())_\(String(year))")
.font(.system(size: 16, weight: .bold, design: .monospaced))
.foregroundColor(.white)
.shadow(color: .white.opacity(0.3), radius: 2, x: 0, y: 0)
Spacer()
// Blinking cursor effect
Rectangle()
.fill(Color(red: 0.4, green: 1.0, blue: 0.4))
.frame(width: 10, height: 18)
.shadow(color: Color(red: 0.4, green: 1.0, blue: 0.4), radius: 4, x: 0, y: 0)
}
.padding(.horizontal, 20)
.padding(.vertical, 16)
.background(
ZStack {
Color.black
// Scanlines
VStack(spacing: 3) {
ForEach(0..<8, id: \.self) { _ in
Rectangle()
.fill(Color.white.opacity(0.02))
.frame(height: 1)
Spacer().frame(height: 3)
}
}
}
)
}
private func inkSectionHeader(month: Int, year: Int) -> some View {
HStack(alignment: .center, spacing: 16) {
// Brush stroke accent
Capsule()
.fill(textColor.opacity(0.15))
.frame(width: 40, height: 3)
VStack(alignment: .leading, spacing: 2) {
Text(Random.monthName(fromMonthInt: month))
.font(.system(size: 18, weight: .thin))
.tracking(4)
.foregroundColor(textColor)
Text(String(year))
.font(.system(size: 11, weight: .ultraLight))
.foregroundColor(textColor.opacity(0.4))
}
Spacer()
// Zen circle ornament
Circle()
.trim(from: 0, to: 0.7)
.stroke(textColor.opacity(0.2), style: StrokeStyle(lineWidth: 2, lineCap: .round))
.frame(width: 20, height: 20)
.rotationEffect(.degrees(-60))
}
.padding(.horizontal, 24)
.padding(.vertical, 20)
.background(
Rectangle()
.fill(.ultraThinMaterial)
)
}
private func prismSectionHeader(month: Int, year: Int) -> some View {
ZStack {
// Rainbow edge glow
RoundedRectangle(cornerRadius: 16)
.fill(
AngularGradient(
colors: [.red, .orange, .yellow, .green, .blue, .purple, .red],
center: .leading
)
)
.blur(radius: 8)
.opacity(0.3)
// Glass content
HStack(spacing: 12) {
Text(Random.monthName(fromMonthInt: month))
.font(.system(size: 20, weight: .semibold))
.foregroundColor(textColor)
Capsule()
.fill(textColor.opacity(0.2))
.frame(width: 4, height: 4)
Text(String(year))
.font(.system(size: 16, weight: .medium))
.foregroundColor(textColor.opacity(0.6))
Spacer()
}
.padding(.horizontal, 20)
.padding(.vertical, 16)
.background(.ultraThinMaterial)
.clipShape(RoundedRectangle(cornerRadius: 16))
}
}
private func tapeSectionHeader(month: Int, year: Int) -> some View {
HStack(spacing: 12) {
// Tape reel icon
ZStack {
Circle()
.stroke(textColor.opacity(0.3), lineWidth: 2)
.frame(width: 24, height: 24)
Circle()
.fill(textColor.opacity(0.2))
.frame(width: 10, height: 10)
}
VStack(alignment: .leading, spacing: 2) {
Text("SIDE A")
.font(.system(size: 10, weight: .bold, design: .monospaced))
.foregroundColor(textColor.opacity(0.4))
Text("\(Random.monthName(fromMonthInt: month).uppercased()) '\(String(year).suffix(2))")
.font(.system(size: 16, weight: .black, design: .rounded))
.foregroundColor(textColor)
.tracking(1)
}
Spacer()
// Track counter
Text(String(format: "%02d", month))
.font(.system(size: 20, weight: .bold, design: .monospaced))
.foregroundColor(textColor.opacity(0.3))
}
.padding(.horizontal, 16)
.padding(.vertical, 14)
.background(
RoundedRectangle(cornerRadius: 8)
.fill(.ultraThinMaterial)
)
}
private func morphSectionHeader(month: Int, year: Int) -> some View {
ZStack {
// Organic blob background
HStack {
Ellipse()
.fill(textColor.opacity(0.08))
.frame(width: 120, height: 60)
.blur(radius: 15)
.offset(x: -20)
Spacer()
}
HStack(spacing: 16) {
Text(Random.monthName(fromMonthInt: month))
.font(.system(size: 22, weight: .light))
.foregroundColor(textColor)
Text(String(year))
.font(.system(size: 14, weight: .regular))
.foregroundColor(textColor.opacity(0.4))
Spacer()
// Blob indicator
Circle()
.fill(textColor.opacity(0.15))
.frame(width: 12, height: 12)
.blur(radius: 2)
}
.padding(.horizontal, 24)
.padding(.vertical, 18)
}
.background(.ultraThinMaterial)
}
private func stackSectionHeader(month: Int, year: Int) -> some View {
VStack(alignment: .leading, spacing: 0) {
// Torn edge
HStack(spacing: 0) {
ForEach(0..<30, id: \.self) { _ in
Rectangle()
.fill(textColor.opacity(0.2))
.frame(height: CGFloat.random(in: 2...4))
}
}
.frame(height: 4)
HStack(spacing: 12) {
// Red margin line
Rectangle()
.fill(Color.red.opacity(0.3))
.frame(width: 2)
Text(Random.monthName(fromMonthInt: month))
.font(.system(size: 18, weight: .regular, design: .serif))
.foregroundColor(textColor)
Text(String(year))
.font(.system(size: 14, weight: .light, design: .serif))
.italic()
.foregroundColor(textColor.opacity(0.5))
Spacer()
}
.padding(.horizontal, 16)
.padding(.vertical, 14)
}
.background(.ultraThinMaterial)
}
private func waveSectionHeader(month: Int, year: Int, entries: [MoodEntryModel]) -> some View {
// Calculate average mood (excluding missing entries)
let validEntries = entries.filter { $0.moodValue != Mood.missing.rawValue && $0.moodValue <= 4 }
let averageMood: Double = validEntries.isEmpty ? 0 : Double(validEntries.map { $0.moodValue }.reduce(0, +)) / Double(validEntries.count)
let hasData = !validEntries.isEmpty
// Map average to a mood for coloring (0-4 scale)
let moodForColor: Mood = {
if !hasData { return .missing }
switch Int(round(averageMood)) {
case 0: return .horrible
case 1: return .bad
case 2: return .average
case 3: return .good
default: return .great
}
}()
let barColor = hasData ? moodTint.color(forMood: moodForColor) : textColor.opacity(0.2)
// Width percentage based on average (0=20%, 4=100%)
let widthPercent = hasData ? 0.2 + (averageMood / 4.0) * 0.8 : 0.2
return HStack(spacing: 0) {
// Month number
Text(String(format: "%02d", month))
.font(.system(size: 32, weight: .thin))
.foregroundColor(hasData ? barColor.opacity(0.6) : textColor.opacity(0.3))
.frame(width: 50)
// Gradient bar sized by average mood
GeometryReader { geo in
ZStack(alignment: .leading) {
// Background track
Capsule()
.fill(textColor.opacity(0.1))
.frame(height: 8)
// Colored bar based on average
Capsule()
.fill(
LinearGradient(
colors: [barColor, barColor.opacity(0.6)],
startPoint: .leading,
endPoint: .trailing
)
)
.frame(width: geo.size.width * widthPercent, height: 8)
.shadow(color: barColor.opacity(0.4), radius: 4, x: 0, y: 2)
}
}
.frame(height: 8)
.padding(.horizontal, 12)
VStack(alignment: .trailing, spacing: 2) {
Text(Random.monthName(fromMonthInt: month))
.font(.system(size: 14, weight: .medium))
.foregroundColor(textColor)
if hasData {
Text(String(format: "%.1f avg", averageMood + 1)) // Display as 1-5
.font(.system(size: 10, weight: .semibold))
.foregroundColor(barColor)
} else {
Text(String(year))
.font(.system(size: 11, weight: .regular))
.foregroundColor(textColor.opacity(0.4))
}
}
}
.padding(.horizontal, 16)
.padding(.vertical, 16)
.background(.ultraThinMaterial)
}
private func patternSectionHeader(month: Int, year: Int) -> some View {
ZStack {
// Subtle mood icon pattern background
GeometryReader { geo in
let iconSize: CGFloat = 12
let spacing: CGFloat = 20
let cols = Int(geo.size.width / spacing) + 1
let rows = 3
Canvas { context, size in
for row in 0..<rows {
for col in 0..<cols {
let x = CGFloat(col) * spacing + (row % 2 == 0 ? 0 : spacing / 2)
let y = CGFloat(row) * spacing + 8
let rect = CGRect(x: x, y: y, width: iconSize, height: iconSize)
context.opacity = 0.06
context.fill(Circle().path(in: rect), with: .color(textColor))
}
}
}
}
.frame(height: 60)
HStack(spacing: 12) {
// Mood icon cluster
HStack(spacing: -4) {
ForEach(0..<3, id: \.self) { i in
Circle()
.fill(textColor.opacity(0.15 - Double(i) * 0.04))
.frame(width: 20 - CGFloat(i * 2), height: 20 - CGFloat(i * 2))
}
}
Text(Random.monthName(fromMonthInt: month))
.font(.system(size: 18, weight: .semibold))
.foregroundColor(textColor)
Text(String(year))
.font(.system(size: 14, weight: .regular))
.foregroundColor(textColor.opacity(0.5))
Spacer()
}
.padding(.horizontal, 20)
}
.background(.ultraThinMaterial)
}
private func leatherSectionHeader(month: Int, year: Int) -> some View {
ZStack {
// Leather texture background
RoundedRectangle(cornerRadius: 4)
.fill(
LinearGradient(
colors: [
Color(red: 0.45, green: 0.28, blue: 0.18),
Color(red: 0.38, green: 0.22, blue: 0.12),
Color(red: 0.42, green: 0.25, blue: 0.15)
],
startPoint: .top,
endPoint: .bottom
)
)
// Leather grain texture
Rectangle()
.fill(
EllipticalGradient(
colors: [.white.opacity(0.08), .clear],
center: .topLeading,
startRadiusFraction: 0,
endRadiusFraction: 0.5
)
)
HStack {
// Left stitching
VStack(spacing: 6) {
ForEach(0..<4, id: \.self) { _ in
Capsule()
.fill(Color(red: 0.7, green: 0.55, blue: 0.35))
.frame(width: 6, height: 2)
}
}
.padding(.leading, 8)
VStack(alignment: .leading, spacing: 2) {
Text(Random.monthName(fromMonthInt: month).uppercased())
.font(.system(size: 16, weight: .bold, design: .serif))
.foregroundColor(Color(red: 0.9, green: 0.85, blue: 0.75))
.shadow(color: .black.opacity(0.3), radius: 1, x: 0, y: 1)
Text(String(year))
.font(.system(size: 12, weight: .medium, design: .serif))
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.55))
}
.padding(.leading, 12)
Spacer()
// Metal rivet
ZStack {
Circle()
.fill(
RadialGradient(
colors: [
Color(red: 0.85, green: 0.75, blue: 0.5),
Color(red: 0.55, green: 0.45, blue: 0.25)
],
center: .topLeading,
startRadius: 0,
endRadius: 10
)
)
.frame(width: 16, height: 16)
Circle()
.fill(Color(red: 0.4, green: 0.3, blue: 0.2))
.frame(width: 6, height: 6)
}
.padding(.trailing, 16)
}
.padding(.vertical, 14)
}
.frame(height: 56)
.clipShape(RoundedRectangle(cornerRadius: 4))
}
private func glassSectionHeader(month: Int, year: Int) -> some View {
ZStack {
// Variable blur glass layers
RoundedRectangle(cornerRadius: 20)
.fill(.ultraThinMaterial)
// Light refraction effect
GeometryReader { geo in
Ellipse()
.fill(
LinearGradient(
colors: [.white.opacity(0.4), .white.opacity(0)],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.frame(width: geo.size.width * 0.6, height: 30)
.blur(radius: 10)
.offset(x: 20, y: 5)
}
// Rainbow edge shimmer
RoundedRectangle(cornerRadius: 20)
.stroke(
AngularGradient(
colors: [
.white.opacity(0.5),
.blue.opacity(0.2),
.purple.opacity(0.2),
.white.opacity(0.3),
.white.opacity(0.5)
],
center: .center
),
lineWidth: 1
)
.blur(radius: 0.5)
HStack(spacing: 16) {
// Floating glass orb
ZStack {
Circle()
.fill(.ultraThinMaterial)
.frame(width: 36, height: 36)
Circle()
.fill(
LinearGradient(
colors: [.white.opacity(0.6), .clear],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.frame(width: 34, height: 34)
.blur(radius: 4)
Text(String(format: "%02d", month))
.font(.system(size: 14, weight: .semibold, design: .rounded))
.foregroundColor(textColor)
}
VStack(alignment: .leading, spacing: 2) {
Text(Random.monthName(fromMonthInt: month))
.font(.system(size: 18, weight: .medium))
.foregroundColor(textColor)
Text(String(year))
.font(.system(size: 12, weight: .regular))
.foregroundColor(textColor.opacity(0.5))
}
Spacer()
// Specular highlight dot
Circle()
.fill(.white.opacity(0.6))
.frame(width: 6, height: 6)
.blur(radius: 1)
}
.padding(.horizontal, 20)
}
.frame(height: 64)
}
private var gridColumns: [GridItem] {
[
GridItem(.flexible(), spacing: 10),