Redesign page 1 for watch app WIP

Trio Watch App Extension/Views/TrendShape.swift

@@ -45,15 +45,15 @@ struct TrendShape: View {
         ZStack {
             // Outer circle with gradient
             Circle()
-                .stroke(angularGradient, lineWidth: 6)
-                .frame(width: 90, height: 90)
+                .stroke(angularGradient, lineWidth: 5)
+                .frame(width: 82, height: 82)
                 .background(Circle().fill(Color.black))
 
             // Triangle with the color of the last gradient color
             Triangle()
                 .fill(triangleColor)
                 .frame(width: 20, height: 20)
-                .offset(x: 55)
+                .offset(x: 52)
         }
         .rotationEffect(.degrees(rotationDegrees))
         .shadow(color: Color.black.opacity(0.33), radius: 3)

Trio Watch App Extension/Views/TrioMainWatchView.swift

@@ -12,50 +12,54 @@ struct TrioMainWatchView: View {
         TabView(selection: $currentPage) {
             // Page 1: Current glucose and action buttons
             ScrollView {
-                VStack(spacing: 15) {
+                VStack(spacing: 10) {
+                    // IOB, COB, lastLoopTime Display
+                    VStack(alignment: .leading) {
+                        HStack {
+                            HStack {
+                                Image(systemName: "syringe.fill")
+                                    .foregroundStyle(.blue)
+                                Text(state.iob ?? "--")
+                            }
+
+                            Spacer()
+
+                            HStack {
+                                Image(systemName: "fork.knife")
+                                    .foregroundStyle(.orange)
+                                Text(state.cob ?? "--")
+                            }
+
+                            Spacer()
+
+                            // TODO: set loop colors conditionally, not hard coded
+                            HStack {
+                                Image(systemName: "circle")
+                                    .foregroundStyle(.green)
+                                Text(state.lastLoopTime ?? "--")
+                                    .padding(.trailing)
+                            }
+                        }
+                    }
+
                     // Main Glucose Display
                     ZStack {
                         TrendShape(rotationDegrees: rotationDegrees)
                             .animation(.spring(response: 0.5, dampingFraction: 0.6), value: rotationDegrees)
 
-                        VStack(alignment: .center, spacing: 4) {
+                        VStack(alignment: .center) {
                             Text(state.currentGlucose)
                                 .fontWeight(.semibold)
-                                .font(.system(size: 44, design: .rounded))
+                                .font(.system(.title, design: .rounded))
 
                             if let delta = state.delta {
                                 Text(delta)
+                                    .fontWeight(.semibold)
                                     .font(.system(.caption, design: .rounded))
                                     .foregroundStyle(.secondary)
                             }
                         }
-                    }
-                    .padding(.top, 5)
-
-                    // IOB and COB Display
-                    HStack(spacing: 20) {
-                        VStack(spacing: 4) {
-                            HStack(spacing: 4) {
-                                Image(systemName: "drop.fill")
-                                    .foregroundStyle(.blue)
-                                Text(state.iob ?? "--")
-                            }
-                        }
-                        .padding(.horizontal, 12)
-                        .padding(.vertical, 8)
-                        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 8))
-
-                        VStack(spacing: 4) {
-                            HStack(spacing: 4) {
-                                Image(systemName: "fork.knife")
-                                    .foregroundStyle(.orange)
-                                Text(state.cob ?? "--")
-                            }
-                        }
-                        .padding(.horizontal, 12)
-                        .padding(.vertical, 8)
-                        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 8))
-                    }
+                    }.padding(.top)
                 }
                 .scenePadding()
             }
@@ -66,21 +70,37 @@ struct TrioMainWatchView: View {
                 }
             }
             .toolbar {
-                ToolbarItem(placement: .bottomBar) {
+                ToolbarItemGroup(placement: .bottomBar) {
                     Button {
-                        showingCarbsSheet = true
+                        // Perform an action here.
                     } label: {
-                        Image(systemName: "fork.knife")
-                            .foregroundStyle(.orange)
+                        Image(systemName: "clock.arrow.2.circlepath").foregroundStyle(Color.primary, Color.purple)
                     }
-                }
 
-                ToolbarItem(placement: .bottomBar) {
                     Button {
-                        showingBolusSheet = true
+                        // Perform an action here.
+                    } label: {
+                        Image(systemName: "plus")
+                            .foregroundStyle(Color.black)
+                    }
+                    .controlSize(.large)
+                    .buttonStyle(WatchOSButtonStyle(backgroundGradient: LinearGradient(colors: [
+                        Color(red: 0.7215686275, green: 0.3411764706, blue: 1), // #B857FF
+                        Color(red: 0.6235294118, green: 0.4235294118, blue: 0.9803921569), // #9F6CFA
+                        Color(red: 0.4862745098, green: 0.5450980392, blue: 0.9529411765), // #7C8BF3
+                        Color(red: 0.3411764706, green: 0.6666666667, blue: 0.9254901961), // #57AAEC
+                        Color(red: 0.262745098, green: 0.7333333333, blue: 0.9137254902), // #43BBE9
+                        Color(
+                            red: 0.7215686275,
+                            green: 0.3411764706,
+                            blue: 1
+                        ) // #B857FF (repeated for seamless transition)
+                    ], startPoint: .topLeading, endPoint: .bottomTrailing)))
+
+                    Button {
+                        // Perform an action here.
                     } label: {
-                        Image(systemName: "drop.fill")
-                            .foregroundStyle(.blue)
+                        Image(systemName: "target").foregroundStyle(.green.opacity(0.75))
                     }
                 }
             }
@@ -100,6 +120,27 @@ struct TrioMainWatchView: View {
         }
     }
 
+    struct WatchOSButtonStyle: ButtonStyle {
+        var backgroundGradient: LinearGradient
+        var foregroundColor: Color = .white
+        var fontSize: Font = .title2
+
+        func makeBody(configuration: Configuration) -> some View {
+            configuration.label
+                .font(fontSize)
+                .fontWeight(.semibold)
+                .foregroundColor(foregroundColor)
+                .padding()
+                .background(
+                    backgroundGradient // Custom background color
+                        .opacity(configuration.isPressed ? 0.8 : 1.0) // Simulates the press effect
+                )
+                .clipShape(Circle())
+                .scaleEffect(configuration.isPressed ? 0.95 : 1.0) // Adds subtle scaling for press
+                .animation(.easeInOut(duration: 0.1), value: configuration.isPressed) // Smooth animation
+        }
+    }
+
     private func updateRotation(for trend: String?) {
         switch trend {
         case "DoubleUp",

Trio Watch App Extension/WatchState.swift

@@ -17,6 +17,7 @@ import WatchConnectivity
     var glucoseValues: [(date: Date, glucose: Double)] = []
     var cob: String? = "--"
     var iob: String? = "--"
+    var lastLoopTime: String? = "--"
 
     override init() {
         super.init()
@@ -116,6 +117,10 @@ import WatchConnectivity
                 self.cob = cob
             }
 
+            if let lastLoopTime = message["lastLoopTime"] as? String {
+                self.lastLoopTime = lastLoopTime
+            }
+
             if let glucoseData = message["glucoseValues"] as? [[String: Any]] {
                 self.glucoseValues = glucoseData.compactMap { data in
                     guard let glucose = data["glucose"] as? Double,

Trio/Sources/Models/WatchState.swift

@@ -9,6 +9,7 @@ struct WatchState: Hashable, Equatable, Sendable {
     var units: GlucoseUnits = .mmolL
     var iob: String?
     var cob: String?
+    var lastLoopTime: String?
 
     static func == (lhs: WatchState, rhs: WatchState) -> Bool {
         lhs.currentGlucose == rhs.currentGlucose &&
@@ -20,7 +21,8 @@ struct WatchState: Hashable, Equatable, Sendable {
             } &&
             lhs.units == rhs.units &&
             lhs.iob == rhs.iob &&
-            lhs.cob == rhs.cob
+            lhs.cob == rhs.cob &&
+            lhs.lastLoopTime == rhs.lastLoopTime
     }
 
     func hash(into hasher: inout Hasher) {
@@ -34,5 +36,6 @@ struct WatchState: Hashable, Equatable, Sendable {
         hasher.combine(units)
         hasher.combine(iob)
         hasher.combine(cob)
+        hasher.combine(lastLoopTime)
     }
 }

Trio/Sources/Services/WatchManager/AppleWatchManager.swift

@@ -116,6 +116,14 @@ final class BaseWatchManager: NSObject, WCSessionDelegate, Injectable, WatchMana
         return await backgroundContext.perform {
             var watchState = WatchState()
 
+            // Set lastLoopDate
+            let lastLoopMinutes = Int((Date().timeIntervalSince(self.apsManager.lastLoopDate) - 30) / 60) + 1
+            if lastLoopMinutes > 1440 {
+                watchState.lastLoopTime = "--"
+            } else {
+                watchState.lastLoopTime = "\(lastLoopMinutes)" + NSLocalizedString("min", comment: "Minutes ago since last loop")
+            }
+
             // Set IOB and COB from latest determination
             if let latestDetermination = determinationObjects.first {
                 let iob = latestDetermination.iob ?? 0