fix(zbugs-swift): sheets that fit an iPhone, and an AppKit list like the SwiftUI one

From running the app on a Mac and an iPhone:

- The sheets' minimum size, for macOS, made them wider than an iPhone,
  clipping Create. On macOS the issue forms are grouped, like the others,
  not labels in a column beside the fields.
- The AppKit list truncates its titles instead of clipping them, shows the
  status icon, and highlights the issue the detail shows, as the UIKit list
  now does on an iPad.
- Tapping the issue the detail shows opens it again from the UIKit list,
  which doesn't change the selection.
- A row's meta line doesn't wrap before its labels.
- On a device, the UI test allows local network access.

Amp-Thread-ID: https://ampcode.com/threads/T-c513a037-a257-45e0-b9a9-15c15edfe859
Co-authored-by: tmm <tmm@tmm.dev>

Author: ampagent

apps/zbugs-swift/App/UITests/ScreenshotTests.swift

@@ -25,6 +25,11 @@ final class ScreenshotTests: XCTestCase {
       app.launchEnvironment[key] = environment[key]
     }
     app.launch()
+    #if os(iOS) && !targetEnvironment(simulator)
+      // A device asks for local network access on the first launch.
+      let allow = XCUIApplication(bundleIdentifier: "com.apple.springboard").alerts.buttons["Allow"]
+      if allow.waitForExistence(timeout: 10) { allow.tap() }
+    #endif
 
     // The issue list, once zero-cache has synced it.
     let firstIssue = app.descendants(matching: .any).matching(identifier: "IssueRow").firstMatch

apps/zbugs-swift/Sources/ZBugsUI/IssueDetail.swift

@@ -170,6 +170,7 @@
           TextField("Description", text: $description, axis: .vertical)
             .lineLimit(5...20)
         }
+        .formStyle(.grouped)
         .navigationTitle("Edit Issue")
         .toolbar {
           ToolbarItem(placement: .cancellationAction) {
@@ -187,7 +188,10 @@
           }
         }
       }
-      .frame(minWidth: 420, minHeight: 300)
+      // A sheet on iOS is the screen's width.
+      #if os(macOS)
+        .frame(minWidth: 420, minHeight: 300)
+      #endif
     }
   }
 

apps/zbugs-swift/Sources/ZBugsUI/IssueList.swift

@@ -75,9 +75,11 @@
           Text(issue.title).font(.headline).lineLimit(2)
         }
         HStack(spacing: 6) {
-          Text(issue.subtitle)
+          // On one line, before the labels.
+          Text(issue.subtitle).lineLimit(1).layoutPriority(1)
           ForEach(issue.labels ?? [], id: \.id) { label in
             Text(label.name)
+              .lineLimit(1)
               .padding(.horizontal, 6)
               .background(.quaternary, in: Capsule())
           }

apps/zbugs-swift/Sources/ZBugsUI/IssueTable.swift

@@ -42,6 +42,19 @@
         adapter = DiffableAdapter(view, section: 0, dataSource: dataSource)
       }
 
+      /// Highlights the issue the detail shows, except on an iPhone, where
+      /// the list and the issue aren't side by side.
+      func select(_ issueID: String?) {
+        guard traitCollection.horizontalSizeClass != .compact else { return }
+        let indexPath = issueID.flatMap { issueID in
+          adapter?.rows.first { $0.value.id == issueID }
+            .flatMap { dataSource?.indexPath(for: $0.key) }
+        }
+        if indexPath != tableView.indexPathForSelectedRow {
+          tableView.selectRow(at: indexPath, animated: false, scrollPosition: .none)
+        }
+      }
+
       override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
         guard let id = dataSource?.itemIdentifier(for: indexPath),
           let issue = adapter?.row(for: id)
@@ -53,15 +66,19 @@
     struct IssueTable: UIViewControllerRepresentable {
       let zero: Zero<AuthData?>
       let filter: IssueFilter
-      @Binding var selection: String?
+      /// The issue the detail shows.
+      let selection: String?
+      /// Opens an issue, even the one the detail shows.
+      let open: (String) -> Void
 
       func makeUIViewController(context: Context) -> IssueTableController {
         IssueTableController(style: .plain)
       }
 
       func updateUIViewController(_ controller: IssueTableController, context: Context) {
-        controller.onSelect = { selection = $0 }
+        controller.onSelect = open
         controller.show(zero, filter)
+        controller.select(selection)
       }
     }
   #elseif canImport(AppKit)
@@ -74,6 +91,9 @@
       private var adapter: DiffableAdapter<Issue, Int>?
       private var dataSource: NSTableViewDiffableDataSource<Int, RowID>?
       private var key: (zero: ObjectIdentifier, filter: IssueFilter)?
+      /// Whether `select` is changing the selection, which isn't the user
+      /// choosing an issue.
+      private var selecting = false
 
       override func loadView() {
         let column = NSTableColumn(identifier: .init("issue"))
@@ -86,18 +106,35 @@
         dataSource = NSTableViewDiffableDataSource(tableView: tableView) {
           [unowned self] _, _, _, id in
           let cell = NSTableCellView()
-          cell.setAccessibilityIdentifier("IssueCell")
+          let icon = NSImageView()
+          icon.symbolConfiguration = .init(textStyle: .headline)
           let title = NSTextField(labelWithString: "")
           title.font = .preferredFont(forTextStyle: .headline)
           title.lineBreakMode = .byTruncatingTail
+          // The cell view's identifier doesn't reach the accessibility tree.
+          title.setAccessibilityIdentifier("IssueCell")
           let subtitle = NSTextField(labelWithString: "")
           subtitle.font = .preferredFont(forTextStyle: .caption1)
           subtitle.textColor = .secondaryLabelColor
+          subtitle.lineBreakMode = .byTruncatingTail
+          // Truncated, not clipped, in a column narrower than the text.
+          for label in [title, subtitle] {
+            label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+          }
           if let issue = adapter?.row(for: id) {
-            title.stringValue = (issue.open ? "○ " : "✓ ") + issue.title
+            icon.image = NSImage(
+              systemSymbolName: issue.open ? "circle" : "checkmark.circle.fill",
+              accessibilityDescription: issue.open ? "Open" : "Closed")
+            icon.contentTintColor = issue.open ? .systemGreen : .systemPurple
+            title.stringValue = issue.title
             subtitle.stringValue = issue.subtitle
           }
-          let stack = NSStackView(views: [title, subtitle])
+          // So a selected row draws them in its colors.
+          cell.imageView = icon
+          cell.textField = title
+          let heading = NSStackView(views: [icon, title])
+          heading.spacing = 6
+          let stack = NSStackView(views: [heading, subtitle])
           stack.orientation = .vertical
           stack.alignment = .leading
           stack.spacing = 2
@@ -127,8 +164,24 @@
         adapter = DiffableAdapter(view, section: 0, dataSource: dataSource)
       }
 
+      /// Highlights the issue the detail shows.
+      func select(_ issueID: String?) {
+        let row = issueID.flatMap { issueID in
+          adapter?.rows.first { $0.value.id == issueID }
+            .flatMap { dataSource?.snapshot().indexOfItem($0.key) }
+        }
+        guard (row ?? -1) != tableView.selectedRow else { return }
+        selecting = true
+        defer { selecting = false }
+        if let row {
+          tableView.selectRowIndexes([row], byExtendingSelection: false)
+        } else {
+          tableView.deselectAll(nil)
+        }
+      }
+
       func tableViewSelectionDidChange(_ notification: Notification) {
-        guard tableView.selectedRow >= 0,
+        guard !selecting, tableView.selectedRow >= 0,
           let id = dataSource?.itemIdentifier(forRow: tableView.selectedRow),
           let issue = adapter?.row(for: id)
         else { return }
@@ -139,15 +192,19 @@
     struct IssueTable: NSViewControllerRepresentable {
       let zero: Zero<AuthData?>
       let filter: IssueFilter
-      @Binding var selection: String?
+      /// The issue the detail shows.
+      let selection: String?
+      /// Opens an issue.
+      let open: (String) -> Void
 
       func makeNSViewController(context: Context) -> IssueTableController {
         IssueTableController()
       }
 
       func updateNSViewController(_ controller: IssueTableController, context: Context) {
-        controller.onSelect = { selection = $0 }
+        controller.onSelect = open
         controller.show(zero, filter)
+        controller.select(selection)
       }
     }
   #endif

apps/zbugs-swift/Sources/ZBugsUI/RootView.swift

@@ -78,8 +78,8 @@
           ContentUnavailableView("No Issue Selected", systemImage: "list.bullet.rectangle")
         }
       }
-      // The UIKit and AppKit lists set the selection outside a List, which
-      // a collapsed split view doesn't follow on its own.
+      // A new issue is selected outside a List, which a collapsed split
+      // view doesn't follow on its own.
       .onChange(of: selection) { _, selection in
         if selection != nil { compactColumn = .detail }
       }
@@ -114,7 +114,12 @@
       case .swiftUI:
         IssueList(filter: filter, selection: $selection)
       case .native:
-        IssueTable(zero: model.zero, filter: filter, selection: $selection)
+        IssueTable(zero: model.zero, filter: filter, selection: selection) { id in
+          selection = id
+          // Also when it's the issue the detail shows, which doesn't change
+          // the selection.
+          compactColumn = .detail
+        }
       }
     }
 

apps/zbugs-swift/Sources/ZBugsUI/Sheets.swift

@@ -27,6 +27,7 @@
           TextField("Description", text: $description, axis: .vertical)
             .lineLimit(5...20)
         }
+        .formStyle(.grouped)
         .navigationTitle("New Issue")
         .toolbar {
           ToolbarItem(placement: .cancellationAction) {
@@ -49,7 +50,10 @@
           }
         }
       }
-      .frame(minWidth: 420, minHeight: 300)
+      // A sheet on iOS is the screen's width.
+      #if os(macOS)
+        .frame(minWidth: 420, minHeight: 300)
+      #endif
     }
 
     private var project: Project? {
@@ -93,7 +97,10 @@
           }
         }
       }
-      .frame(minWidth: 420, minHeight: 320)
+      // A sheet on iOS is the screen's width.
+      #if os(macOS)
+        .frame(minWidth: 420, minHeight: 320)
+      #endif
     }
 
     private func logInWithGitHub() async {
@@ -156,7 +163,10 @@
           apiURL = model.apiURL
         }
       }
-      .frame(minWidth: 420, minHeight: 220)
+      // A sheet on iOS is the screen's width.
+      #if os(macOS)
+        .frame(minWidth: 420, minHeight: 220)
+      #endif
     }
   }
 #endif