fix(WhereUI): Keep the timeline focused on recent stays

Where/WhereUI/Sources/Primary/PresenceTimelineList.swift

@@ -29,13 +29,17 @@ struct PresenceTimelineList: View {
                 Text(String(localized: .timelineEmptyDescription))
             }
         } else {
+            let pinsOverview = stylesheet.timeline.overview.pinsToViewport
+
             ScrollView {
-                LazyVStack(spacing: stylesheet.spacing.large) {
-                    YearRibbon(
-                        days: yearReport?.days ?? [],
-                        year: report.selectedYear,
-                        calendar: report.calendar,
-                    )
+                LazyVStack(spacing: pinsOverview ? 0 : stylesheet.spacing.large) {
+                    if !pinsOverview {
+                        YearRibbon(
+                            days: yearReport?.days ?? [],
+                            year: report.selectedYear,
+                            calendar: report.calendar,
+                        )
+                    }
 
                     LazyVStack(spacing: 0) {
                         ForEach(stints.enumerated(), id: \.element.id) { index, stint in
@@ -50,8 +54,26 @@ struct PresenceTimelineList: View {
                     }
                 }
                 .padding(.horizontal, stylesheet.spacing.xxLarge)
-                .padding(.vertical, stylesheet.spacing.large)
+                .padding(.top, pinsOverview ? 0 : stylesheet.spacing.large)
+                .padding(.bottom, stylesheet.spacing.large)
             }
+            .safeAreaInset(
+                edge: .top,
+                spacing: 0,
+            ) {
+                if pinsOverview {
+                    YearRibbon(
+                        days: yearReport?.days ?? [],
+                        year: report.selectedYear,
+                        calendar: report.calendar,
+                    )
+                    .padding(.horizontal, stylesheet.spacing.xxLarge)
+                    .padding(.top, stylesheet.spacing.large)
+                    .padding(.bottom, stylesheet.spacing.large)
+                }
+            }
+            .defaultScrollAnchor(.bottom, for: .initialOffset)
+            .id(report.selectedYear)
         }
     }
 }
@@ -65,6 +87,11 @@ struct PresenceTimelineList: View {
                         PresenceTimelineList(report: PreviewSupport.loadedYearReportModel())
                     }
                 },
+                whereSnapshot(name: "InitialBottom", configurations: .screenDefaults) {
+                    NavigationStack {
+                        PresenceTimelineList(report: PreviewSupport.loadedYearReportModel())
+                    }
+                },
                 whereSnapshot(
                     name: "DifferentiateWithoutColor",
                     configurations: .fullContentPhoneLightDark,
@@ -78,6 +105,19 @@ struct PresenceTimelineList: View {
                         overrides.accessibility = accessibility
                     }
                 },
+                whereSnapshot(
+                    name: "DifferentiateWithoutColorInitialBottom",
+                    configurations: .phoneLightDark,
+                ) {
+                    NavigationStack {
+                        PresenceTimelineList(report: PreviewSupport.loadedYearReportModel())
+                    }
+                    .bTraitOverrides { traits, overrides in
+                        var accessibility = traits.accessibility
+                        accessibility.shouldDifferentiateWithoutColor = true
+                        overrides.accessibility = accessibility
+                    }
+                },
             ]
         }
     }

Where/WhereUI/Sources/Primary/YearRibbon.swift

@@ -73,8 +73,12 @@ struct YearRibbon: View {
         }
         .padding(overview.padding)
         .background {
-            RoundedRectangle(cornerRadius: overview.cornerRadius)
-                .fill(overview.background)
+            ZStack {
+                RoundedRectangle(cornerRadius: overview.cornerRadius)
+                    .fill(.background)
+                RoundedRectangle(cornerRadius: overview.cornerRadius)
+                    .fill(overview.background)
+            }
         }
         .overlay {
             RoundedRectangle(cornerRadius: overview.cornerRadius)

Where/WhereUI/Sources/Shared/WhereStylesheet.swift

@@ -42,13 +42,15 @@ struct WhereStylesheet: BStylesheet {
         // Grow day-grid tap targets at accessibility Dynamic Type sizes.
         if traits.contentSizeCategory.isAccessibilitySize {
             calendar.day.minHeight = 56
+            timeline.overview.pinsToViewport = false
             timeline.row.stacksDayCount = true
             featureDiscovery.siri.bubble.indent = 0
         }
 
         // Give every region a consistently labeled ribbon band when tint
         // alone is not an acceptable differentiator.
         if traits.accessibility.shouldDifferentiateWithoutColor {
+            timeline.overview.pinsToViewport = false
             timeline.ribbon.separatesRegions = true
         }
 
@@ -1163,6 +1165,8 @@ extension WhereStylesheet {
             var border: Color
             var borderWidth: CGFloat
             var yearFont: Font
+            /// Keep the compact overview visible while the journey scrolls.
+            var pinsToViewport: Bool
         }
 
         struct Ribbon: Equatable {
@@ -1219,6 +1223,7 @@ extension WhereStylesheet {
                 border: Color.primary.opacity(0.1),
                 borderWidth: 1,
                 yearFont: .system(.title2, design: .serif).bold(),
+                pinsToViewport: true,
             ),
             ribbon: Ribbon(
                 monthLabelSpacing: 6,

Where/WhereUI/Tests/WhereStylesheetTests.swift

@@ -295,6 +295,7 @@ struct WhereStylesheetTests {
         #expect(overview.border == Color.primary.opacity(0.1))
         #expect(overview.borderWidth == 1)
         #expect(overview.yearFont == .system(.title2, design: .serif).bold())
+        #expect(overview.pinsToViewport)
 
         let ribbon = timeline.ribbon
         #expect(ribbon.monthLabelSpacing == 6)
@@ -604,6 +605,7 @@ struct WhereStylesheetTests {
         context.traitOverrides.contentSizeCategory = .accessibilityLarge
         let resolved = try context.stylesheets.get(WhereStylesheet.self)
         #expect(resolved.calendar.day.minHeight == 56)
+        #expect(resolved.timeline.overview.pinsToViewport == false)
         #expect(resolved.timeline.row.stacksDayCount)
         #expect(resolved.featureDiscovery.siri.bubble.indent == 0)
         #expect(resolved.featureDiscovery.widgets.contentWidth(in: 834) == 320)
@@ -627,6 +629,7 @@ struct WhereStylesheetTests {
             shouldDifferentiateWithoutColor: true,
         )
         let resolved = try context.stylesheets.get(WhereStylesheet.self)
+        #expect(resolved.timeline.overview.pinsToViewport == false)
         #expect(resolved.timeline.ribbon.separatesRegions)
     }