rework UI

Trio Watch App Extension/Views/GlucoseChartView.swift

@@ -42,35 +42,50 @@ struct GlucoseChartView: View {
     }
 
     var body: some View {
-        Chart {
-            ForEach(filteredValues, id: \.date) { reading in
-                PointMark(
-                    x: .value("Time", reading.date),
-                    y: .value("Glucose", reading.glucose)
-                )
-                .foregroundStyle(glucoseColor(reading.glucose))
-                .symbolSize(15)
+        VStack(spacing: 8) {
+            HStack {
+                Text("Glucose History")
+                    .font(.system(.headline, design: .rounded))
+                Spacer()
+                Text("\(timeWindow.rawValue)h")
+                    .font(.system(.caption2, design: .rounded))
+                    .foregroundStyle(.secondary)
             }
-        }
-        .chartXAxis {
-            AxisMarks(values: .automatic(desiredCount: 4)) { _ in
-                AxisValueLabel(format: .dateTime.hour())
+            .padding(.horizontal)
+
+            Chart {
+                ForEach(filteredValues, id: \.date) { reading in
+                    PointMark(
+                        x: .value("Time", reading.date),
+                        y: .value("Glucose", reading.glucose)
+                    )
+                    .foregroundStyle(glucoseColor(reading.glucose))
+                    .symbolSize(30)
+                }
+            }
+            .chartXAxis {
+                AxisMarks(values: .automatic(desiredCount: 4)) { _ in
+                    AxisValueLabel(format: .dateTime.hour())
+                        .font(.system(.caption2, design: .rounded))
+                }
+            }
+            .chartYAxis {
+                AxisMarks(position: .leading) { value in
+                    AxisValueLabel {
+                        if let glucose = value.as(Double.self) {
+                            Text("\(Int(glucose))")
+                                .font(.system(.caption2, design: .rounded))
+                        }
+                    }
+                }
             }
         }
-        .chartYAxis {
-            AxisMarks(position: .leading)
-        }
-        .padding()
+        .padding(.top)
+        .scenePadding()
         .onTapGesture {
             withAnimation {
                 timeWindow = timeWindow.next
             }
         }
-        .overlay(alignment: .topTrailing) {
-            Text("\(timeWindow.rawValue)h")
-                .font(.caption2)
-                .foregroundStyle(.secondary)
-                .padding(.trailing)
-        }
     }
 }

Trio Watch App Extension/Views/TrioMainWatchView.swift

@@ -11,63 +11,77 @@ struct TrioMainWatchView: View {
     var body: some View {
         TabView(selection: $currentPage) {
             // Page 1: Current glucose and action buttons
-            VStack(spacing: 20) {
-                ZStack {
-                    TrendShape(rotationDegrees: rotationDegrees)
-                        .animation(.spring(response: 0.5, dampingFraction: 0.6), value: rotationDegrees)
+            ScrollView {
+                VStack(spacing: 15) {
+                    // Main Glucose Display
+                    ZStack {
+                        TrendShape(rotationDegrees: rotationDegrees)
+                            .animation(.spring(response: 0.5, dampingFraction: 0.6), value: rotationDegrees)
 
-                    VStack(alignment: .center) {
-                        Text(state.currentGlucose)
-                            .fontWeight(.bold)
-                            .font(.system(size: 40))
+                        VStack(alignment: .center, spacing: 4) {
+                            Text(state.currentGlucose)
+                                .fontWeight(.semibold)
+                                .font(.system(size: 44, design: .rounded))
 
-                        if let delta = state.delta {
-                            Text(delta)
-                                .font(.caption2)
-                                .foregroundStyle(.secondary)
+                            if let delta = state.delta {
+                                Text(delta)
+                                    .font(.system(.caption, design: .rounded))
+                                    .foregroundStyle(.secondary)
+                            }
                         }
                     }
-                }
+                    .padding(.top, 5)
 
-                VStack {
-                    HStack {
-                        Image(systemName: "drop.fill")
-                        Text("\(state.iob ?? "--") U")
-                            .font(.caption2)
-                            .foregroundStyle(.secondary)
-                    }
-                    HStack {
-                        Image(systemName: "fork.knife")
-                        Text("\(state.cob ?? "--") g")
-                            .font(.caption2)
-                            .foregroundStyle(.secondary)
+                    // 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))
                     }
                 }
-
-                HStack(spacing: 20) {
+                .scenePadding()
+            }
+            .tag(0.0)
+            .onChange(of: state.trend) { _, newTrend in
+                withAnimation {
+                    updateRotation(for: newTrend)
+                }
+            }
+            .toolbar {
+                ToolbarItem(placement: .bottomBar) {
                     Button {
                         showingCarbsSheet = true
                     } label: {
                         Image(systemName: "fork.knife")
-                            .font(.system(size: 30))
+                            .foregroundStyle(.orange)
                     }
-                    .buttonStyle(.bordered)
-                    .tint(.orange)
+                }
 
+                ToolbarItem(placement: .bottomBar) {
                     Button {
                         showingBolusSheet = true
                     } label: {
                         Image(systemName: "drop.fill")
-                            .font(.system(size: 30))
+                            .foregroundStyle(.blue)
                     }
-                    .buttonStyle(.bordered)
-                    .tint(.blue)
-                }
-            }
-            .tag(0.0)
-            .onChange(of: state.trend) { _, newTrend in
-                withAnimation {
-                    updateRotation(for: newTrend)
                 }
             }
 
@@ -76,6 +90,7 @@ struct TrioMainWatchView: View {
                 .tag(1.0)
         }
         .tabViewStyle(.verticalPage)
+        .navigationBarHidden(true)
         .digitalCrownRotation($currentPage, from: 0, through: 1, by: 1)
         .sheet(isPresented: $showingCarbsSheet) {
             CarbsInputView(state: state)
@@ -85,7 +100,6 @@ struct TrioMainWatchView: View {
         }
     }
 
-    // TODO: - Refactor this like in CurrentGlucoseView
     private func updateRotation(for trend: String?) {
         switch trend {
         case "DoubleUp",