Add 4 new mood icon styles and improve widget layouts

New mood icon styles:
- Weather (☀️ → ⛈️)
- Garden (🌸 → 🥀)
- Hearts (💖 → 💔)
- Cosmic (⭐ → 🕳️)

Widget improvements:
- Small vote widget: 3-over-2 grid layout
- Medium vote widget: single horizontal row
- Redesigned voted stats view with checkmark badge
- Fixed text truncation on non-subscriber view
- Added comprehensive previews for all widget types

Bug fix:
- Voting header now updates when mood image style changes

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

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

Feels Watch App/ContentView.swift

@@ -121,6 +121,10 @@ enum WatchMoodImageStyle: Int {
     case fontAwesome = 0
     case emoji = 1
     case handEmoji = 2
+    case weather = 3
+    case garden = 4
+    case hearts = 5
+    case cosmic = 6
 
     static var current: WatchMoodImageStyle {
         // Use optional chaining for preview safety - App Group may not exist in canvas
@@ -161,6 +165,46 @@ enum WatchMoodImageStyle: Int {
             case .horrible: return "🖕"
             case .missing, .placeholder: return "❓"
             }
+        case .weather:
+            switch mood {
+            case .great: return "☀️"
+            case .good: return "⛅"
+            case .average: return "☁️"
+            case .bad: return "🌧️"
+            case .horrible: return "⛈️"
+            case .missing: return "🌫️"
+            case .placeholder: return "❓"
+            }
+        case .garden:
+            switch mood {
+            case .great: return "🌸"
+            case .good: return "🌿"
+            case .average: return "🌱"
+            case .bad: return "🍂"
+            case .horrible: return "🥀"
+            case .missing: return "🕳️"
+            case .placeholder: return "❓"
+            }
+        case .hearts:
+            switch mood {
+            case .great: return "💖"
+            case .good: return "🩷"
+            case .average: return "🤍"
+            case .bad: return "🩶"
+            case .horrible: return "💔"
+            case .missing: return "🖤"
+            case .placeholder: return "❓"
+            }
+        case .cosmic:
+            switch mood {
+            case .great: return "⭐"
+            case .good: return "🌕"
+            case .average: return "🌓"
+            case .bad: return "🌑"
+            case .horrible: return "🕳️"
+            case .missing: return "✧"
+            case .placeholder: return "❓"
+            }
         }
     }
 }

FeelsWidget2/FeelsVoteWidget.swift

@@ -222,7 +222,6 @@ struct FeelsVoteWidgetEntryView: View {
 struct VotingView: View {
     let family: WidgetFamily
     let promptText: String
-    let moods: [Mood] = [.horrible, .bad, .average, .good, .great]
 
     private var moodTint: MoodTintable.Type {
         UserDefaultsStore.moodTintable()
@@ -233,34 +232,79 @@ struct VotingView: View {
     }
 
     var body: some View {
-        VStack(spacing: 12) {
+        if family == .systemSmall {
+            smallLayout
+        } else {
+            mediumLayout
+        }
+    }
+
+    // MARK: - Small Widget: 3 over 2 grid
+    private var smallLayout: some View {
+        VStack(spacing: 0) {
+            Text(promptText)
+                .font(.caption)
+                .foregroundStyle(.primary)
+                .multilineTextAlignment(.center)
+                .lineLimit(1)
+                .minimumScaleFactor(0.7)
+                .padding(.bottom, 10)
+
+            // Top row: Great, Good, Average
+            HStack(spacing: 12) {
+                ForEach([Mood.great, .good, .average], id: \.rawValue) { mood in
+                    moodButton(for: mood, size: 36)
+                }
+            }
+            .padding(.bottom, 6)
+
+            // Bottom row: Bad, Horrible
+            HStack(spacing: 12) {
+                ForEach([Mood.bad, .horrible], id: \.rawValue) { mood in
+                    moodButton(for: mood, size: 36)
+                }
+            }
+        }
+        .padding(.horizontal, 8)
+        .padding(.vertical, 4)
+    }
+
+    // MARK: - Medium Widget: Single row
+    private var mediumLayout: some View {
+        VStack {
             Text(promptText)
                 .font(.headline)
                 .foregroundStyle(.primary)
                 .multilineTextAlignment(.center)
                 .lineLimit(2)
                 .minimumScaleFactor(0.8)
+                .padding(.bottom, 20)
 
-            HStack(spacing: 8) {
+            HStack(spacing: 16) {
-                ForEach(moods, id: \.rawValue) { mood in
+                ForEach([Mood.great, .good, .average, .bad, .horrible], id: \.rawValue) { mood in
-                    Button(intent: VoteMoodIntent(mood: mood)) {
+                    moodButton(for: mood, size: 44)
-                        moodImages.icon(forMood: mood)
-                            .resizable()
-                            .aspectRatio(contentMode: .fit)
-                            .frame(width: family == .systemSmall ? 36 : 44, height: family == .systemSmall ? 36 : 44)
-                            .foregroundColor(moodTint.color(forMood: mood))
-                    }
-                    .buttonStyle(.plain)
                 }
             }
         }
         .padding()
     }
+
+    private func moodButton(for mood: Mood, size: CGFloat) -> some View {
+        Button(intent: VoteMoodIntent(mood: mood)) {
+            moodImages.icon(forMood: mood)
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+                .frame(width: size, height: size)
+                .foregroundColor(moodTint.color(forMood: mood))
+        }
+        .buttonStyle(.plain)
+    }
 }
 
 // MARK: - Voted Stats View (shown after voting)
 
 struct VotedStatsView: View {
+    @Environment(\.widgetFamily) var family
     let entry: VoteWidgetEntry
 
     private var moodTint: MoodTintable.Type {
@@ -272,51 +316,110 @@ struct VotedStatsView: View {
     }
 
     var body: some View {
-        VStack(spacing: 12) {
+        if family == .systemSmall {
-            // Today's mood
+            smallLayout
+        } else {
+            mediumLayout
+        }
+    }
+
+    // MARK: - Small: Centered mood with checkmark
+    private var smallLayout: some View {
+        VStack(spacing: 8) {
             if let mood = entry.todaysMood {
-                HStack(spacing: 8) {
+                // Large centered mood icon
+                ZStack(alignment: .bottomTrailing) {
                     moodImages.icon(forMood: mood)
                         .resizable()
                         .aspectRatio(contentMode: .fit)
-                        .frame(width: 32, height: 32)
+                        .frame(width: 56, height: 56)
                         .foregroundColor(moodTint.color(forMood: mood))
 
-                    VStack(alignment: .leading, spacing: 2) {
+                    // Checkmark badge
-                        Text("Today")
+                    Image(systemName: "checkmark.circle.fill")
-                            .font(.caption)
+                        .font(.system(size: 18))
-                            .foregroundStyle(.secondary)
+                        .foregroundColor(.green)
-                        Text(mood.widgetDisplayName)
+                        .background(Circle().fill(.white).frame(width: 14, height: 14))
-                            .font(.headline)
+                        .offset(x: 4, y: 4)
-                            .foregroundColor(moodTint.color(forMood: mood))
+                }
-                    }
 
-                    Spacer()
+                Text("Logged!")
+                    .font(.caption.weight(.semibold))
+                    .foregroundStyle(.secondary)
+
+                if let stats = entry.stats {
+                    Text("\(stats.totalEntries) day streak")
+                        .font(.caption2)
+                        .foregroundStyle(.tertiary)
                 }
             }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(12)
+    }
 
-            // Stats
+    // MARK: - Medium: Mood + stats bar
-            if let stats = entry.stats {
+    private var mediumLayout: some View {
-                Divider()
+        HStack(spacing: 20) {
+            if let mood = entry.todaysMood {
+                // Left: Mood display
+                VStack(spacing: 6) {
+                    moodImages.icon(forMood: mood)
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(width: 48, height: 48)
+                        .foregroundColor(moodTint.color(forMood: mood))
 
-                VStack(spacing: 4) {
+                    Text(mood.widgetDisplayName)
-                    Text("\(stats.totalEntries) entries")
+                        .font(.subheadline.weight(.semibold))
-                        .font(.caption)
+                        .foregroundColor(moodTint.color(forMood: mood))
+
+                    Text("Today")
+                        .font(.caption2)
                         .foregroundStyle(.secondary)
+                }
 
-                    GeometryReader { geo in
+                // Right: Stats
-                        HStack(spacing: 2) {
+                if let stats = entry.stats {
+                    VStack(alignment: .leading, spacing: 8) {
+                        Text("\(stats.totalEntries) entries")
+                            .font(.caption.weight(.medium))
+                            .foregroundStyle(.primary)
+
+                        // Mini mood breakdown
+                        HStack(spacing: 6) {
                             ForEach([Mood.great, .good, .average, .bad, .horrible], id: \.rawValue) { mood in
-                                let percentage = stats.percentage(for: mood)
+                                let count = stats.moodCounts[mood, default: 0]
-                                if percentage > 0 {
+                                if count > 0 {
-                                    RoundedRectangle(cornerRadius: 2)
+                                    HStack(spacing: 2) {
-                                        .fill(moodTint.color(forMood: mood))
+                                        Circle()
-                                        .frame(width: max(4, geo.size.width * CGFloat(percentage) / 100))
+                                            .fill(moodTint.color(forMood: mood))
+                                            .frame(width: 8, height: 8)
+                                        Text("\(count)")
+                                            .font(.caption2)
+                                            .foregroundStyle(.secondary)
+                                    }
                                 }
                             }
                         }
+
+                        // Progress bar
+                        GeometryReader { geo in
+                            HStack(spacing: 1) {
+                                ForEach([Mood.great, .good, .average, .bad, .horrible], id: \.rawValue) { mood in
+                                    let percentage = stats.percentage(for: mood)
+                                    if percentage > 0 {
+                                        RoundedRectangle(cornerRadius: 2)
+                                            .fill(moodTint.color(forMood: mood))
+                                            .frame(width: max(4, geo.size.width * CGFloat(percentage) / 100))
+                                    }
+                                }
+                            }
+                        }
+                        .frame(height: 8)
+                        .clipShape(RoundedRectangle(cornerRadius: 4))
                     }
-                    .frame(height: 12)
+                    .frame(maxWidth: .infinity, alignment: .leading)
                 }
             }
         }
@@ -335,15 +438,15 @@ struct NonSubscriberView: View {
                     .foregroundStyle(.pink)
 
                 Text("Track Your Mood")
-                    .font(.headline)
+                    .font(.subheadline.weight(.semibold))
                     .foregroundStyle(.primary)
+                    .minimumScaleFactor(0.8)
 
                 Text("Tap to subscribe")
-                    .font(.caption)
+                    .font(.caption2)
                     .foregroundStyle(.secondary)
-                    .multilineTextAlignment(.center)
             }
-            .padding()
+            .padding(12)
             .frame(maxWidth: .infinity, maxHeight: .infinity)
         }
     }

FeelsWidget2/FeelsWidget.swift

@@ -726,52 +726,117 @@ struct FeelsGraphicWidget: Widget {
     }
 }
 
+// MARK: - Preview Helpers
+
+private extension FeelsWidget_Previews {
+    static func sampleTimelineViews(count: Int) -> [WatchTimelineView] {
+        let moods: [Mood] = [.great, .good, .average, .bad, .horrible]
+        return (0..<count).map { index in
+            let mood = moods[index % moods.count]
+            return WatchTimelineView(
+                image: EmojiMoodImages.icon(forMood: mood),
+                graphic: EmojiMoodImages.icon(forMood: mood),
+                date: Calendar.current.date(byAdding: .day, value: -index, to: Date())!,
+                color: MoodTints.Default.color(forMood: mood),
+                secondaryColor: MoodTints.Default.secondary(forMood: mood)
+            )
+        }
+    }
+
+    static func sampleEntry(timelineCount: Int = 5) -> SimpleEntry {
+        SimpleEntry(
+            date: Date(),
+            configuration: ConfigurationIntent(),
+            timeLineViews: sampleTimelineViews(count: timelineCount),
+            hasSubscription: true,
+            hasVotedToday: true
+        )
+    }
+}
+
 struct FeelsWidget_Previews: PreviewProvider {
     static var previews: some View {
         Group {
-            FeelsGraphicWidgetEntryView(entry: SimpleEntry(date: Date(),
+            // MARK: - FeelsWidget (Timeline)
-                                                           configuration: ConfigurationIntent(),
+            FeelsWidgetEntryView(entry: sampleEntry(timelineCount: 1))
-                                                           timeLineViews: [WatchTimelineView(image: HandEmojiMoodImages.icon(forMood: .great),
-                                                                                             graphic: HandEmojiMoodImages.icon(forMood: .great),
-                                                                                             date: Date(),
-                                                                                             color: MoodTints.Neon.color(forMood: .great),
-                                                                                             
-                                                                                             secondaryColor: .white),
-                                                                           WatchTimelineView(image: HandEmojiMoodImages.icon(forMood: .great),
-                                                                                             graphic: HandEmojiMoodImages.icon(forMood: .great),
-                                                                                             date: Date(),
-                                                                                             color: MoodTints.Neon.color(forMood: .great),
-                                                                                             
-                                                                                             secondaryColor: .white)]))
                 .previewContext(WidgetPreviewContext(family: .systemSmall))
+                .previewDisplayName("Timeline - Small")
 
-            FeelsGraphicWidgetEntryView(entry: SimpleEntry(date: Date(),
+            FeelsWidgetEntryView(entry: sampleEntry(timelineCount: 5))
-                                                           configuration: ConfigurationIntent(),
+                .previewContext(WidgetPreviewContext(family: .systemMedium))
-                                                           timeLineViews: [WatchTimelineView(image: HandEmojiMoodImages.icon(forMood: .horrible),
+                .previewDisplayName("Timeline - Medium")
-                                                                                             graphic: HandEmojiMoodImages.icon(forMood: .horrible),
-                                                                                             date: Date(),
-                                                                                             color: MoodTints.Neon.color(forMood: .horrible),
 
-                                                                                             secondaryColor: .white),
+            FeelsWidgetEntryView(entry: sampleEntry(timelineCount: 10))
-                                                                           WatchTimelineView(image: HandEmojiMoodImages.icon(forMood: .horrible),
+                .previewContext(WidgetPreviewContext(family: .systemLarge))
-                                                                                             graphic: HandEmojiMoodImages.icon(forMood: .horrible),
+                .previewDisplayName("Timeline - Large")
-                                                                                             date: Date(),
-                                                                                             color: MoodTints.Neon.color(forMood: .horrible),
 
-                                                                                             secondaryColor: .white)]))
+            // MARK: - FeelsGraphicWidget (Mood Graphic)
+            FeelsGraphicWidgetEntryView(entry: sampleEntry(timelineCount: 2))
                 .previewContext(WidgetPreviewContext(family: .systemSmall))
+                .previewDisplayName("Mood Graphic - Small")
 
-            //            FeelsWidgetEntryView(entry: SimpleEntry(date: Date(),
+            // MARK: - FeelsIconWidget (Custom Icon)
-            //                                                    configuration: ConfigurationIntent(),
+            FeelsIconWidgetEntryView(entry: sampleEntry())
-            //                                                    timeLineViews: FeelsWidget_Previews.data))
+                .previewContext(WidgetPreviewContext(family: .systemSmall))
-            //                .previewContext(WidgetPreviewContext(family: .systemMedium))
+                .previewDisplayName("Custom Icon - Small")
-            //                .environment(\.sizeCategory, .medium)
+
-            //
+            // MARK: - FeelsVoteWidget (Vote - Not Voted)
-            //            FeelsWidgetEntryView(entry: SimpleEntry(date: Date(),
+            FeelsVoteWidgetEntryView(entry: VoteWidgetEntry(
-            //                                                    configuration: ConfigurationIntent(),
+                date: Date(),
-            //                                                    timeLineViews: FeelsWidget_Previews.data))
+                hasSubscription: true,
-            //                .previewContext(WidgetPreviewContext(family: .systemLarge))
+                hasVotedToday: false,
-            //                .environment(\.sizeCategory, .large)
+                todaysMood: nil,
+                stats: nil,
+                promptText: "How are you feeling?"
+            ))
+            .previewContext(WidgetPreviewContext(family: .systemSmall))
+            .previewDisplayName("Vote - Small (Not Voted)")
+
+            FeelsVoteWidgetEntryView(entry: VoteWidgetEntry(
+                date: Date(),
+                hasSubscription: true,
+                hasVotedToday: false,
+                todaysMood: nil,
+                stats: nil,
+                promptText: "How are you feeling?"
+            ))
+            .previewContext(WidgetPreviewContext(family: .systemMedium))
+            .previewDisplayName("Vote - Medium (Not Voted)")
+
+            // MARK: - FeelsVoteWidget (Vote - Already Voted)
+            FeelsVoteWidgetEntryView(entry: VoteWidgetEntry(
+                date: Date(),
+                hasSubscription: true,
+                hasVotedToday: true,
+                todaysMood: .great,
+                stats: MoodStats(totalEntries: 30, moodCounts: [.great: 10, .good: 12, .average: 5, .bad: 2, .horrible: 1]),
+                promptText: ""
+            ))
+            .previewContext(WidgetPreviewContext(family: .systemSmall))
+            .previewDisplayName("Vote - Small (Voted)")
+
+            FeelsVoteWidgetEntryView(entry: VoteWidgetEntry(
+                date: Date(),
+                hasSubscription: true,
+                hasVotedToday: true,
+                todaysMood: .good,
+                stats: MoodStats(totalEntries: 45, moodCounts: [.great: 15, .good: 18, .average: 8, .bad: 3, .horrible: 1]),
+                promptText: ""
+            ))
+            .previewContext(WidgetPreviewContext(family: .systemMedium))
+            .previewDisplayName("Vote - Medium (Voted)")
+
+            // MARK: - FeelsVoteWidget (Non-Subscriber)
+            FeelsVoteWidgetEntryView(entry: VoteWidgetEntry(
+                date: Date(),
+                hasSubscription: false,
+                hasVotedToday: false,
+                todaysMood: nil,
+                stats: nil,
+                promptText: ""
+            ))
+            .previewContext(WidgetPreviewContext(family: .systemSmall))
+            .previewDisplayName("Vote - Small (Non-Subscriber)")
         }
     }
 }

Shared/Models/MoodImagable.swift

@@ -15,16 +15,27 @@ enum MoodImages: Int, CaseIterable {
     case FontAwesome
     case Emoji
     case HandEmjoi
+    case Weather
+    case Garden
+    case Hearts
+    case Cosmic
 
     func icon(forMood mood: Mood) -> Image {
         switch self {
-            
         case .FontAwesome:
             return FontAwesomeMoodImages.icon(forMood: mood)
         case .Emoji:
             return EmojiMoodImages.icon(forMood: mood)
         case .HandEmjoi:
             return HandEmojiMoodImages.icon(forMood: mood)
+        case .Weather:
+            return WeatherMoodImages.icon(forMood: mood)
+        case .Garden:
+            return GardenMoodImages.icon(forMood: mood)
+        case .Hearts:
+            return HeartsMoodImages.icon(forMood: mood)
+        case .Cosmic:
+            return CosmicMoodImages.icon(forMood: mood)
         }
     }
 
@@ -36,6 +47,14 @@ enum MoodImages: Int, CaseIterable {
             return EmojiMoodImages.self
         case .HandEmjoi:
             return HandEmojiMoodImages.self
+        case .Weather:
+            return WeatherMoodImages.self
+        case .Garden:
+            return GardenMoodImages.self
+        case .Hearts:
+            return HeartsMoodImages.self
+        case .Cosmic:
+            return CosmicMoodImages.self
         }
     }
 }
@@ -102,3 +121,87 @@ final class HandEmojiMoodImages: MoodImagable {
         }
     }
 }
+
+final class WeatherMoodImages: MoodImagable {
+    static func icon(forMood mood: Mood) -> Image {
+        switch mood {
+        case .horrible:
+            return Image(uiImage: "⛈️".textToImage()!)
+        case .bad:
+            return Image(uiImage: "🌧️".textToImage()!)
+        case .average:
+            return Image(uiImage: "☁️".textToImage()!)
+        case .good:
+            return Image(uiImage: "⛅".textToImage()!)
+        case .great:
+            return Image(uiImage: "☀️".textToImage()!)
+        case .missing:
+            return Image(uiImage: "🌫️".textToImage()!)
+        case .placeholder:
+            return Image("xmark-solid", bundle: .main)
+        }
+    }
+}
+
+final class GardenMoodImages: MoodImagable {
+    static func icon(forMood mood: Mood) -> Image {
+        switch mood {
+        case .horrible:
+            return Image(uiImage: "🥀".textToImage()!)
+        case .bad:
+            return Image(uiImage: "🍂".textToImage()!)
+        case .average:
+            return Image(uiImage: "🌱".textToImage()!)
+        case .good:
+            return Image(uiImage: "🌿".textToImage()!)
+        case .great:
+            return Image(uiImage: "🌸".textToImage()!)
+        case .missing:
+            return Image(uiImage: "🕳️".textToImage()!)
+        case .placeholder:
+            return Image("xmark-solid", bundle: .main)
+        }
+    }
+}
+
+final class HeartsMoodImages: MoodImagable {
+    static func icon(forMood mood: Mood) -> Image {
+        switch mood {
+        case .horrible:
+            return Image(uiImage: "💔".textToImage()!)
+        case .bad:
+            return Image(uiImage: "🩶".textToImage()!)
+        case .average:
+            return Image(uiImage: "🤍".textToImage()!)
+        case .good:
+            return Image(uiImage: "🩷".textToImage()!)
+        case .great:
+            return Image(uiImage: "💖".textToImage()!)
+        case .missing:
+            return Image(uiImage: "🖤".textToImage()!)
+        case .placeholder:
+            return Image("xmark-solid", bundle: .main)
+        }
+    }
+}
+
+final class CosmicMoodImages: MoodImagable {
+    static func icon(forMood mood: Mood) -> Image {
+        switch mood {
+        case .horrible:
+            return Image(uiImage: "🕳️".textToImage()!)
+        case .bad:
+            return Image(uiImage: "🌑".textToImage()!)
+        case .average:
+            return Image(uiImage: "🌓".textToImage()!)
+        case .good:
+            return Image(uiImage: "🌕".textToImage()!)
+        case .great:
+            return Image(uiImage: "⭐".textToImage()!)
+        case .missing:
+            return Image(uiImage: "✧".textToImage()!)
+        case .placeholder:
+            return Image("xmark-solid", bundle: .main)
+        }
+    }
+}

Shared/Views/AddMoodHeaderView.swift

@@ -11,6 +11,7 @@ import SwiftData
 
 struct AddMoodHeaderView: View {
     @AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
+    @AppStorage(UserDefaultsStore.Keys.moodImages.rawValue, store: GroupUserDefaults.groupDefaults) private var imagePack: MoodImages = .FontAwesome
     @AppStorage(UserDefaultsStore.Keys.moodTint.rawValue, store: GroupUserDefaults.groupDefaults) private var moodTint: MoodTints = .Default
     @AppStorage(UserDefaultsStore.Keys.textColor.rawValue, store: GroupUserDefaults.groupDefaults) private var textColor: Color = DefaultTextColor.textColor
     @AppStorage(UserDefaultsStore.Keys.votingLayoutStyle.rawValue, store: GroupUserDefaults.groupDefaults) private var votingLayoutStyle: Int = 0
@@ -29,6 +30,10 @@ struct AddMoodHeaderView: View {
 
     var body: some View {
         ZStack {
+            // Force re-render when image pack changes
+            Text(String(imagePack.rawValue))
+                .hidden()
+
             theme.currentTheme.secondaryBGColor
 
             VStack(spacing: 16) {