Refactor page 1 view; device size conditional bg bobble wIP

Trio Watch App Extension/Assets.xcassets/Background_DarkBlue.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.216",
+          "green" : "0.133",
+          "red" : "0.039"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.216",
+          "green" : "0.133",
+          "red" : "0.039"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Trio Watch App Extension/Assets.xcassets/Background_DarkerDarkBlue.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.109",
+          "green" : "0.058",
+          "red" : "0.011"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.109",
+          "green" : "0.058",
+          "red" : "0.011"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Trio Watch App Extension/Views/GlucoseChartView.swift

@@ -80,8 +80,6 @@ struct GlucoseChartView: View {
                 }
             }
         }
-        .padding(.top)
-        .scenePadding()
         .onTapGesture {
             withAnimation {
                 timeWindow = timeWindow.next

Trio Watch App Extension/Views/GlucoseTrendView.swift

@@ -0,0 +1,45 @@
+import SwiftUI
+
+struct GlucoseTrendView: View {
+    let state: WatchState
+    let rotationDegrees: Double
+
+    private var is40mm: Bool {
+        let size = WKInterfaceDevice.current().screenBounds.size
+        return size.height < 225 && size.width < 185
+    }
+
+    var body: some View {
+        VStack {
+            ZStack {
+                TrendShape(rotationDegrees: rotationDegrees, isSmallDevice: is40mm)
+                    .animation(.spring(response: 0.5, dampingFraction: 0.6), value: rotationDegrees)
+
+                VStack(alignment: .center) {
+                    Text(state.currentGlucose)
+                        .fontWeight(.semibold)
+                        .font(.system(is40mm ? .title2 : .title, design: .rounded))
+
+                    if let delta = state.delta {
+                        Text(delta)
+                            .fontWeight(.semibold)
+                            .font(.system(.caption, design: .rounded))
+                            .foregroundStyle(.secondary)
+                    }
+                }
+            }
+
+            Spacer()
+
+            // TODO: set loop colors conditionally, not hard coded
+            HStack {
+                Image(systemName: "circle")
+                    .foregroundStyle(.green)
+                Text(state.lastLoopTime ?? "--")
+            }.font(is40mm ? .footnote : .caption)
+
+            Spacer()
+
+        }.frame(maxWidth: .infinity, maxHeight: .infinity)
+    }
+}

Trio Watch App Extension/Views/TreatmentMenuView.swift

@@ -6,80 +6,61 @@ struct TreatmentMenuView: View {
     @State private var selectedOption: TreatmentOptions? = nil
 
     var body: some View {
-        ScrollView {
-            HStack {
-                Spacer()
-                Text("Choose Treatment:")
-                    .font(.subheadline)
-                    .foregroundStyle(.primary)
-                Spacer()
-            }
-
-            // Options list
-            VStack(spacing: 10) {
+        NavigationView {
+            List {
                 ForEach(treatments) { treatment in
                     Button(action: {
                         selectedOption = treatment
                         presentationMode.wrappedValue.dismiss() // Close after selecting
                     }) {
-                        HStack(alignment: .center, spacing: 8) {
+                        HStack(alignment: .center) {
                             switch treatment {
                             case .mealBolusCombo:
-                                // First Icon
-                                HStack(spacing: 0) {
-                                    Image(systemName: "fork.knife")
-                                        .resizable()
-                                        .aspectRatio(contentMode: .fit)
-                                        .frame(width: 22, height: 22) // Icon size
-                                        .padding(10) // Padding inside the circle
-                                        .background(Color.orange) // Circle background color
-                                        .clipShape(Circle())
+                                mealIcon
 
-                                    // Plus Icon
-                                    Image(systemName: "plus")
-                                        .font(.caption)
-                                        .bold()
-                                        .frame(width: 24, height: 24) // Ensures consistent sizing
+                                // Plus Icon
+                                Image(systemName: "plus")
+                                    .font(.caption)
+                                    .bold()
+                                    .frame(width: 24, height: 24)
 
-                                    // Second Icon
-                                    Image(systemName: "syringe.fill")
-                                        .resizable()
-                                        .aspectRatio(contentMode: .fit)
-                                        .frame(width: 22, height: 22) // Icon size
-                                        .padding(10)
-                                        .background(Color.blue)
-                                        .clipShape(Circle())
-                                }
+                                bolusIcon
                             case .meal:
-                                Image(systemName: "fork.knife")
-                                    .resizable()
-                                    .aspectRatio(contentMode: .fit)
-                                    .frame(width: 22, height: 22) // Icon size
-                                    .padding(10)
-                                    .background(Color.orange)
-                                    .clipShape(Circle())
+                                mealIcon
 
                             case .bolus:
-                                Image(systemName: "syringe.fill")
-                                    .resizable()
-                                    .aspectRatio(contentMode: .fit)
-                                    .frame(width: 22, height: 22) // Icon size
-                                    .padding(10)
-                                    .background(Color.blue)
-                                    .clipShape(Circle())
+                                bolusIcon
                             }
                         }
                         .foregroundColor(.white)
                         .frame(maxWidth: .infinity)
                     }
                     .buttonStyle(PressableIconButtonStyle())
-                }
+                }.listRowBackground(Color.clear)
             }
-            .padding(.horizontal)
-            .background(Color.clear)
+            .navigationTitle("Pick Treatment")
         }
-        .frame(maxWidth: .infinity, maxHeight: .infinity)
-        .background(Color.clear)
+        .background(.clear)
+    }
+
+    var mealIcon: some View {
+        Image(systemName: "fork.knife")
+            .resizable()
+            .aspectRatio(contentMode: .fit)
+            .frame(width: 22, height: 22) // Icon size
+            .padding(10)
+            .background(Color.orange)
+            .clipShape(Circle())
+    }
+
+    var bolusIcon: some View {
+        Image(systemName: "syringe.fill")
+            .resizable()
+            .aspectRatio(contentMode: .fit)
+            .frame(width: 22, height: 22) // Icon size
+            .padding(10)
+            .background(Color.blue)
+            .clipShape(Circle())
     }
 }
 
@@ -102,7 +83,8 @@ enum TreatmentOptions: String, CaseIterable, Identifiable {
 struct PressableIconButtonStyle: ButtonStyle {
     func makeBody(configuration: Configuration) -> some View {
         configuration.label
-            .opacity(configuration.isPressed ? 0.6 : 1.0) // Change opacity when pressed
+            .background(Color.clear)
+            .opacity(configuration.isPressed ? 0.5 : 1.0) // Change opacity when pressed
             .animation(.easeInOut(duration: 0.2), value: configuration.isPressed) // Smooth transition
     }
 }

Trio Watch App Extension/Views/TrendShape.swift

@@ -22,6 +22,8 @@ struct Triangle: Shape {
 struct TrendShape: View {
     /// Rotation angle in degrees for the trend direction
     let rotationDegrees: Double
+    /// Flag to be able to adjust size based on Apple Watch size
+    let isSmallDevice: Bool
 
     // Angular gradient for the outer circle, transitioning through various blues and purples
     private let angularGradient = AngularGradient(
@@ -42,18 +44,23 @@ struct TrendShape: View {
     private let triangleColor = Color(red: 0.262745098, green: 0.7333333333, blue: 0.9137254902) // #43BBE9
 
     var body: some View {
+        let strokeWidth: CGFloat = isSmallDevice ? 4 : 5
+        let circleSize: CGFloat = isSmallDevice ? 74 : 92
+        let triangleSize: CGFloat = isSmallDevice ? 16 : 20
+        let offset: CGFloat = isSmallDevice ? 47 : 56
+
         ZStack {
             // Outer circle with gradient
             Circle()
-                .stroke(angularGradient, lineWidth: 5)
-                .frame(width: 82, height: 82)
+                .stroke(angularGradient, lineWidth: strokeWidth)
+                .frame(width: circleSize, height: circleSize)
                 .background(Circle().fill(Color.black))
 
             // Triangle with the color of the last gradient color
             Triangle()
                 .fill(triangleColor)
-                .frame(width: 20, height: 20)
-                .offset(x: 52)
+                .frame(width: triangleSize, height: triangleSize)
+                .offset(x: offset)
         }
         .rotationEffect(.degrees(rotationDegrees))
         .shadow(color: Color.black.opacity(0.33), radius: 3)

Trio Watch App Extension/Views/TrioMainWatchView.swift

@@ -3,73 +3,66 @@ import SwiftUI
 
 struct TrioMainWatchView: View {
     @State private var state = WatchState()
-    @State private var isTreatmentMenuSheetPresented: Bool = false
-    @State private var showingOverrideSheet = false
-    @State private var currentPage: Double = 0
+
+    // misc
+    @State private var currentPage: Int = 0
     @State private var rotationDegrees: Double = 0.0
 
-    var body: some View {
-        TabView(selection: $currentPage) {
-            // Page 1: Current glucose and action buttons
-            ScrollView {
-                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)
-                            }
-                        }
-                    }
+    // view visbility
+    @State private var showingTreatmentMenuSheet: Bool = false
+    @State private var showingCarbsInputView: Bool = false
+    @State private var showingInsulinInputView: Bool = false
+    @State private var showingOverrideSheet: Bool = false
 
-                    // Main Glucose Display
-                    ZStack {
-                        TrendShape(rotationDegrees: rotationDegrees)
-                            .animation(.spring(response: 0.5, dampingFraction: 0.6), value: rotationDegrees)
-
-                        VStack(alignment: .center) {
-                            Text(state.currentGlucose)
-                                .fontWeight(.semibold)
-                                .font(.system(.title, design: .rounded))
-
-                            if let delta = state.delta {
-                                Text(delta)
-                                    .fontWeight(.semibold)
-                                    .font(.system(.caption, design: .rounded))
-                                    .foregroundStyle(.secondary)
-                            }
-                        }
-                    }.padding(.top)
-                }
-                .scenePadding()
+    // treatments
+    @State private var selectedTreatment: TreatmentOptions?
+
+    private var trioBackgroundColor = LinearGradient(
+        gradient: Gradient(colors: [Color.bgDarkBlue, Color.bgDarkerDarkBlue]),
+        startPoint: .top,
+        endPoint: .bottom
+    )
+
+    var body: some View {
+        NavigationStack {
+            TabView(selection: $currentPage) {
+                // Page 1: Current glucose trend in "BG bobble"
+                GlucoseTrendView(state: state, rotationDegrees: rotationDegrees)
+                    .tag(0)
+
+                // Page 2: Glucose chart
+                GlucoseChartView(glucoseValues: state.glucoseValues)
+                    .tag(1)
             }
-            .tag(0.0)
+            .background(trioBackgroundColor)
+            .tabViewStyle(.verticalPage)
+            .digitalCrownRotation($currentPage.doubleBinding(), from: 0, through: 1, by: 1)
             .onChange(of: state.trend) { _, newTrend in
                 withAnimation {
                     updateRotation(for: newTrend)
                 }
             }
             .toolbar {
+                ToolbarItem(placement: .topBarLeading) {
+                    HStack {
+                        Image(systemName: "syringe.fill")
+                            .foregroundStyle(.blue)
+
+                        Text(state.iob ?? "--")
+                            .foregroundStyle(.white)
+                    }.font(.caption)
+                }
+
+                ToolbarItem(placement: .topBarTrailing) {
+                    HStack {
+                        Text(state.cob ?? "--")
+                            .foregroundStyle(.white)
+
+                        Image(systemName: "fork.knife")
+                            .foregroundStyle(.orange)
+                    }.font(.caption)
+                }
+
                 ToolbarItemGroup(placement: .bottomBar) {
                     Button {
                         showingOverrideSheet = true
@@ -79,54 +72,40 @@ struct TrioMainWatchView: View {
                     }
 
                     Button {
-                        isTreatmentMenuSheetPresented.toggle()
+                        showingTreatmentMenuSheet.toggle()
                     } label: {
                         Image(systemName: "plus")
-                            .foregroundStyle(Color.black)
+                            .foregroundStyle(.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)))
+                    .buttonStyle(WatchOSButtonStyle())
 
                     Button {
-                        // Perform an action here.
+                        // Perform an action here
                     } label: {
-                        Image(systemName: "target").foregroundStyle(.green.opacity(0.75))
+                        Image(systemName: "target")
+                            .foregroundStyle(.green.opacity(0.75))
                     }
                 }
             }
-
-            // Page 2: Glucose chart
-            GlucoseChartView(glucoseValues: state.glucoseValues)
-                .tag(1.0)
-        }
-        .tabViewStyle(.verticalPage)
-        .navigationBarHidden(true)
-        .digitalCrownRotation($currentPage, from: 0, through: 1, by: 1)
-        .blur(radius: isTreatmentMenuSheetPresented ? 10 : 0)
-        .sheet(isPresented: $isTreatmentMenuSheetPresented) {
-            TreatmentMenuView().presentationBackground(.clear)
-        }
-        .sheet(isPresented: $showingOverrideSheet) {
-            OverridePresetsView(
-                overridePresets: state.overridePresets,
-                state: state
-            )
+            .sheet(isPresented: $showingTreatmentMenuSheet) {
+                TreatmentMenuView()
+            }
+            .sheet(isPresented: $showingOverrideSheet) {
+                OverridePresetsView(
+                    overridePresets: state.overridePresets,
+                    state: state
+                )
+            }
         }
     }
 
     struct WatchOSButtonStyle: ButtonStyle {
-        var backgroundGradient: LinearGradient
+        var backgroundGradient = LinearGradient(colors: [
+            Color(red: 0.721, green: 0.341, blue: 1),
+            Color(red: 0.486, green: 0.545, blue: 0.953),
+            Color(red: 0.262, green: 0.733, blue: 0.914)
+        ], startPoint: .topLeading, endPoint: .bottomTrailing)
         var foregroundColor: Color = .white
         var fontSize: Font = .title2
 
@@ -134,15 +113,13 @@ struct TrioMainWatchView: 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
+                    backgroundGradient.opacity(configuration.isPressed ? 0.8 : 1.0)
                 )
                 .clipShape(Circle())
-                .scaleEffect(configuration.isPressed ? 0.95 : 1.0) // Adds subtle scaling for press
-                .animation(.easeInOut(duration: 0.1), value: configuration.isPressed) // Smooth animation
+                .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
+                .animation(.easeInOut(duration: 0.1), value: configuration.isPressed)
         }
     }
 
@@ -166,6 +143,20 @@ struct TrioMainWatchView: View {
     }
 }
 
+extension Binding where Value == Int {
+    func doubleBinding() -> Binding<Double> {
+        Binding<Double>(
+            get: { Double(self.wrappedValue) },
+            set: { self.wrappedValue = Int($0) }
+        )
+    }
+}
+
+extension Color {
+    static let bgDarkBlue = Color("Background_DarkBlue")
+    static let bgDarkerDarkBlue = Color("Background_DarkerDarkBlue")
+}
+
 #Preview {
     TrioMainWatchView()
 }

Trio.xcodeproj/project.pbxproj

@@ -440,6 +440,7 @@
 		DD1DB7CC2BECCA1F0048B367 /* BuildDetails.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD1DB7CB2BECCA1F0048B367 /* BuildDetails.swift */; };
 		DD1E53592D273F26008F32A4 /* LoopStatusHelpView.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD1E53582D273F20008F32A4 /* LoopStatusHelpView.swift */; };
 		DD21FCB52C6952AD00AF2C25 /* DecimalPickerSettings.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD21FCB42C6952AD00AF2C25 /* DecimalPickerSettings.swift */; };
+		DD246F062D2836AA0027DDE0 /* GlucoseTrendView.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD246F052D2836AA0027DDE0 /* GlucoseTrendView.swift */; };
 		DD2CC85C2D25DA1000445446 /* GlucoseTargetsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD2CC85B2D25D9CE00445446 /* GlucoseTargetsView.swift */; };
 		DD32CF982CC82463003686D6 /* TrioRemoteControl+Bolus.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD32CF972CC82460003686D6 /* TrioRemoteControl+Bolus.swift */; };
 		DD32CF9A2CC8247B003686D6 /* TrioRemoteControl+Meal.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD32CF992CC8246F003686D6 /* TrioRemoteControl+Meal.swift */; };
@@ -1148,6 +1149,7 @@
 		DD1DB7CB2BECCA1F0048B367 /* BuildDetails.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BuildDetails.swift; sourceTree = "<group>"; };
 		DD1E53582D273F20008F32A4 /* LoopStatusHelpView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoopStatusHelpView.swift; sourceTree = "<group>"; };
 		DD21FCB42C6952AD00AF2C25 /* DecimalPickerSettings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DecimalPickerSettings.swift; sourceTree = "<group>"; };
+		DD246F052D2836AA0027DDE0 /* GlucoseTrendView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GlucoseTrendView.swift; sourceTree = "<group>"; };
 		DD2CC85B2D25D9CE00445446 /* GlucoseTargetsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GlucoseTargetsView.swift; sourceTree = "<group>"; };
 		DD32CF972CC82460003686D6 /* TrioRemoteControl+Bolus.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "TrioRemoteControl+Bolus.swift"; sourceTree = "<group>"; };
 		DD32CF992CC8246F003686D6 /* TrioRemoteControl+Meal.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "TrioRemoteControl+Meal.swift"; sourceTree = "<group>"; };
@@ -2464,6 +2466,7 @@
 		BDA25F1A2D26BCE800035F34 /* Views */ = {
 			isa = PBXGroup;
 			children = (
+				DD246F052D2836AA0027DDE0 /* GlucoseTrendView.swift */,
 				DD6F63CB2D27F606007D94CF /* TreatmentMenuView.swift */,
 				BD54A9582D27FB6A00F9C1EE /* OverridePresetsView.swift */,
 				BDA25F212D26D62200035F34 /* BolusInputView.swift */,
@@ -3966,6 +3969,7 @@
 				BD54A9592D27FB7800F9C1EE /* OverridePresetsView.swift in Sources */,
 				BDA25F1E2D26D5DD00035F34 /* GlucoseChartView.swift in Sources */,
 				DD6F63CC2D27F615007D94CF /* TreatmentMenuView.swift in Sources */,
+				DD246F062D2836AA0027DDE0 /* GlucoseTrendView.swift in Sources */,
 				BDA25EE62D260D5E00035F34 /* WatchState.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

Trio/Sources/Services/WatchManager/AppleWatchManager.swift

@@ -135,7 +135,7 @@ final class BaseWatchManager: NSObject, WCSessionDelegate, Injectable, WatchMana
             if lastLoopMinutes > 1440 {
                 watchState.lastLoopTime = "--"
             } else {
-                watchState.lastLoopTime = "\(lastLoopMinutes)" + NSLocalizedString("min", comment: "Minutes ago since last loop")
+                watchState.lastLoopTime = "\(lastLoopMinutes)m"
             }
 
             // Set IOB and COB from latest determination