From dacc413c3462df69ed940f160d10fa7bc8ca1909 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 7 Nov 2026 16:16:48 +0100
Subject: [PATCH] fix(native): a list's progress bar heads its first section,
 so two items show on the small watch

---
 client/ios/App/TREKWatch/Details.swift | 57 ++++++++++++++++----------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/client/ios/App/TREKWatch/Details.swift b/client/ios/App/TREKWatch/Details.swift
index 54b7bcc6b..21dc8fb8b 100644
--- a/client/ios/App/TREKWatch/Details.swift
+++ b/client/ios/App/TREKWatch/Details.swift
@@ -433,34 +433,29 @@ struct ChecklistView: View {
 
     var body: some View {
         List {
-            if let progress {
-                HStack(spacing: 8) {
-                    ProgressView(value: Double(progress.done), total: Double(max(progress.total, 1)))
-                        .tint(color)
-                    Text("\(progress.done)/\(progress.total)")
-                        .font(.system(.footnote, design: .rounded).weight(.bold).monospacedDigit())
-                        .foregroundStyle(color)
-                        .fixedSize()
-                }
-                .listRowBackground(Color.clear)
-                .listRowInsets(EdgeInsets(top: 0, leading: 6, bottom: 0, trailing: 6))
-                .accessibilityElement(children: .combine)
-            }
+            // The progress sits in the first section's header, so the list starts right under it.
             if open.isEmpty {
-                Label(allDone, systemImage: "checkmark.circle.fill")
-                    .foregroundStyle(color)
-                    .font(.system(.body, design: .rounded).weight(.semibold))
-            }
-            if grouped {
-                ForEach(groups, id: \.name) { group in
+                Section {
+                    Label(allDone, systemImage: "checkmark.circle.fill")
+                        .foregroundStyle(color)
+                        .font(.system(.body, design: .rounded).weight(.semibold))
+                } header: {
+                    header(nil)
+                }
+            } else if grouped {
+                ForEach(Array(groups.enumerated()), id: \.element.name) { index, group in
                     Section {
                         ForEach(group.items) { row($0) }
                     } header: {
-                        Text(group.name).watchEyebrow()
+                        if index == 0 { header(group.name) } else { Text(group.name).watchEyebrow() }
                     }
                 }
             } else {
-                ForEach(open) { row($0) }
+                Section {
+                    ForEach(open) { row($0) }
+                } header: {
+                    header(nil)
+                }
             }
             if !done.isEmpty {
                 Section {
@@ -476,6 +471,26 @@ struct ChecklistView: View {
         .containerBackground(WatchLook.tint(color), for: .navigation)
     }
 
+    /// The bar with its count, and under it the first group's name when there is one.
+    @ViewBuilder
+    private func header(_ group: String?) -> some View {
+        VStack(alignment: .leading, spacing: 6) {
+            if let progress {
+                HStack(spacing: 8) {
+                    ProgressView(value: Double(progress.done), total: Double(max(progress.total, 1)))
+                        .tint(color)
+                    Text("\(progress.done)/\(progress.total)")
+                        .font(.system(.footnote, design: .rounded).weight(.bold).monospacedDigit())
+                        .foregroundStyle(color)
+                        .fixedSize()
+                }
+                .accessibilityElement(children: .combine)
+            }
+            if let group { Text(group).watchEyebrow() }
+        }
+        .textCase(nil)
+    }
+
     private var groups: [(name: String, items: [WatchSnapshot.Item])] {
         var order: [String] = []
         var byName: [String: [WatchSnapshot.Item]] = [:]