Add stale watch data UI state to trend view

Trio Watch App Extension/Views/GlucoseTrendView.swift

@@ -15,7 +15,11 @@ struct GlucoseTrendView: View {
               timeString != "--",
               let minutes = timeString.split(separator: " ").first.flatMap({ Int($0) })
         else {
-            return .secondary
+            return Color.secondary
+        }
+
+        guard !isWatchStateDated else {
+            return Color.secondary
         }
 
         switch minutes {
@@ -30,6 +34,10 @@ struct GlucoseTrendView: View {
         }
     }
 
+    var isWatchStateDated: Bool {
+        state.lastWatchStateUpdate ?? Date().timeIntervalSince1970 < Date().timeIntervalSince1970 - 15
+    }
+
     var circleSize: CGFloat {
         switch state.deviceType {
         case .watch40mm:
@@ -118,28 +126,36 @@ struct GlucoseTrendView: View {
                     .background(Circle().fill(Color.bgDarkBlue))
                     .shadow(color: statusColor(for: state.lastLoopTime), radius: shadowRadius)
 
-                TrendShape(rotationDegrees: rotationDegrees, deviceType: state.deviceType)
-                    .animation(.spring(response: 0.5, dampingFraction: 0.6), value: rotationDegrees)
-                    .shadow(color: Color.black.opacity(0.5), radius: 5)
+                TrendShape(
+                    isWatchStateDated: isWatchStateDated,
+                    rotationDegrees: rotationDegrees,
+                    deviceType: state.deviceType
+                )
+                .animation(.spring(response: 0.5, dampingFraction: 0.6), value: rotationDegrees)
+                .shadow(color: Color.black.opacity(0.5), radius: 5)
 
                 VStack(alignment: .center) {
                     Text(state.currentGlucose)
                         .fontWeight(.semibold)
                         .font(currentGlucoseFontSize)
-                        .foregroundStyle(state.currentGlucoseColorString.toColor())
+                        .foregroundStyle(isWatchStateDated ? Color.secondary : state.currentGlucoseColorString.toColor())
+                        .strikethrough(isWatchStateDated)
 
                     if let delta = state.delta {
                         Text(delta)
                             .fontWeight(.semibold)
                             .font(.system(.caption))
                             .foregroundStyle(.secondary)
+                            .strikethrough(isWatchStateDated)
                     }
                 }
             }
 
             Spacer()
 
-            Text(state.lastLoopTime ?? "--").font(.system(size: minutesAgoFontSize))
+            Text(isWatchStateDated ? "STALE DATA" : state.lastLoopTime ?? "--")
+                .font(.system(size: minutesAgoFontSize))
+                .fontWidth(isWatchStateDated ? .expanded : .standard)
 
             Spacer()
 

Trio Watch App Extension/Views/TrendShape.swift

@@ -53,6 +53,7 @@ struct Triangle: Shape {
 
 /// A view that displays a circular trend indicator with a directional triangle
 struct TrendShape: View {
+    let isWatchStateDated: Bool
     /// Rotation angle in degrees for the trend direction
     let rotationDegrees: Double
     /// Flag to be able to adjust size based on Apple Watch size
@@ -73,6 +74,17 @@ struct TrendShape: View {
         endAngle: .degrees(-90)
     )
 
+    private let staleWatchStateGradient = AngularGradient(
+        colors: [
+            Color.secondary,
+            Color.secondary.opacity(0.8),
+            Color.secondary.opacity(0.6),
+            Color.secondary.opacity(0.4),
+            Color.secondary
+        ],
+        center: .center
+    )
+
     // Color for the direction indicator triangle
     private let triangleColor = Color(red: 0.262745098, green: 0.7333333333, blue: 0.9137254902) // #43BBE9
 
@@ -146,7 +158,7 @@ struct TrendShape: View {
         ZStack {
             // Outer circle with gradient
             Circle()
-                .stroke(angularGradient, lineWidth: strokeWidth)
+                .stroke(isWatchStateDated ? staleWatchStateGradient : angularGradient, lineWidth: strokeWidth)
                 .frame(width: circleSize, height: circleSize)
                 .background(Circle().fill(Color.black))
 
@@ -155,6 +167,7 @@ struct TrendShape: View {
                 .fill(triangleColor)
                 .frame(width: triangleSize, height: triangleSize)
                 .offset(x: triangleOffset)
+                .opacity(isWatchStateDated ? 0 : 1)
         }
         .rotationEffect(.degrees(rotationDegrees))
         .shadow(color: Color.black.opacity(0.33), radius: 3)