Grouped list: clearer levels, release tags and a compact progress ring

Xcodes/Frontend/Common/TagView.swift

@@ -6,6 +6,8 @@
 
 
 import SwiftUI
+import Version
+import XcodesKit
 
 struct TagView: View {
     let text: String
@@ -22,3 +24,66 @@ struct TagView: View {
             )
     }
 }
+
+/// A tinted capsule that classifies a release at a glance, e.g. Beta, RC or Latest.
+struct ReleaseTagView: View {
+    enum Kind {
+        case beta
+        case releaseCandidate
+        case otherPrerelease
+        case latest
+        case active
+
+        var color: Color {
+            switch self {
+            case .beta: return .orange
+            case .releaseCandidate: return .purple
+            case .otherPrerelease: return .teal
+            case .latest: return .green
+            case .active: return .blue
+            }
+        }
+    }
+
+    let label: Text
+    let kind: Kind
+
+    var body: some View {
+        label
+            .font(.caption2.weight(.semibold))
+            .foregroundStyle(kind.color)
+            .padding(.horizontal, 6)
+            .padding(.vertical, 1)
+            .background(kind.color.opacity(0.16), in: Capsule())
+            .overlay(Capsule().strokeBorder(kind.color.opacity(0.35), lineWidth: 0.5))
+            .fixedSize()
+    }
+}
+
+extension ReleaseTagView {
+    /// A tag describing a version's prerelease, e.g. "Beta 6" or "RC 2", or nil for a release.
+    init?(prereleaseOf version: Version) {
+        guard version.isPrerelease else { return nil }
+        let base = Version(major: version.major, minor: version.minor, patch: version.patch).appleDescription
+        let text = version.appleDescription
+            .dropFirst(base.count)
+            .trimmingCharacters(in: .whitespaces)
+            .replacingOccurrences(of: "Release Candidate", with: "RC")
+        self.init(label: Text(verbatim: text), kind: Self.kind(forPrerelease: version))
+    }
+
+    static func kind(forPrerelease version: Version) -> Kind {
+        let identifiers = version.prereleaseIdentifiers.joined(separator: " ").lowercased()
+        if identifiers.contains("beta") { return .beta }
+        if identifiers.contains("release") || identifiers.contains("rc") || identifiers.contains("gm") { return .releaseCandidate }
+        return .otherPrerelease
+    }
+
+    static var active: ReleaseTagView {
+        ReleaseTagView(label: Text("Tag.Active"), kind: .active)
+    }
+
+    static var latest: ReleaseTagView {
+        ReleaseTagView(label: Text("Tag.Latest"), kind: .latest)
+    }
+}

Xcodes/Frontend/InfoPane/InfoPane.swift

@@ -24,10 +24,17 @@ struct InfoPane: View {
                         HStack {
                             IconView(xcode: xcode)
 
-                            Text(verbatim: "Xcode \(xcode.description) \(xcode.version.buildMetadataIdentifiersDisplay)")
-                                .font(.title)
-                                .frame(maxWidth: .infinity, alignment: .leading)
-                                .textSelection(.enabled)
+                            VStack(alignment: .leading, spacing: 2) {
+                                Text(verbatim: "Xcode \(xcode.description)")
+                                    .font(.title)
+                                if !xcode.version.buildMetadataIdentifiers.isEmpty {
+                                    Text(verbatim: xcode.version.buildMetadataIdentifiers.joined(separator: " "))
+                                        .font(.subheadline.monospaced())
+                                        .foregroundStyle(.secondary)
+                                }
+                            }
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                            .textSelection(.enabled)
                         }
                         InfoPaneControls(xcode: xcode)
                     }

Xcodes/Frontend/XcodeList/InstallationStepRowView.swift

@@ -1,40 +1,100 @@
 import SwiftUI
 import XcodesKit
 
+/// A compact, App Store style progress ring for a row: a determinate ring while downloading and a
+/// spinning arc for the other steps, with a stop button in the middle. Step details are in the tooltip.
 struct InstallationStepRowView: View {
     let installationStep: XcodeInstallationStep
     let highlighted: Bool
     let cancel: () -> Void
-    
+
     var body: some View {
-        HStack {
+        Group {
             switch installationStep {
             case let .downloading(progress):
                 // FB8955769 ProgressView.init(_: Progress) doesn't ensure that changes from the Progress object are applied to the UI on the main thread
-                // This Progress is vended by URLSession so I don't think we can control that.
-                // Use our own version of ProgressView that does this instead.
-                ObservingProgressIndicator(
-                    progress,
-                    controlSize: .small,
-                    style: .spinning
-                )
+                DownloadProgressRing(progress: progress, highlighted: highlighted, stepDescription: stepDescription, cancel: cancel)
             case .authenticating, .unarchiving, .moving, .trashingArchive, .checkingSecurity, .finishing:
-                ProgressView()
-                    .scaleEffect(0.5)
+                ProgressRing(fraction: nil, highlighted: highlighted, cancel: cancel)
+                    .help(stepDescription)
             }
-
-            Text(String(format: localizeString("InstallationStepDescription"), installationStep.stepNumber, installationStep.stepCount, installationStep.message))
-                .font(.footnote)
-
-            Button(action: cancel) {
-                Label("Cancel", systemImage: "xmark.circle.fill")
-                    .labelStyle(IconOnlyLabelStyle())
+        }
+        .accessibilityElement(children: .combine)
+        .accessibilityLabel(Text(stepDescription))
+    }
+
+    private var stepDescription: String {
+        String(format: localizeString("InstallationStepDescription"), installationStep.stepNumber, installationStep.stepCount, installationStep.message)
+    }
+}
+
+private struct DownloadProgressRing: View {
+    @StateObject private var progress: ObservingProgressIndicator.ProgressWrapper
+    let highlighted: Bool
+    let stepDescription: String
+    let cancel: () -> Void
+
+    init(progress: Progress, highlighted: Bool, stepDescription: String, cancel: @escaping () -> Void) {
+        _progress = StateObject(wrappedValue: ObservingProgressIndicator.ProgressWrapper(progress: progress))
+        self.highlighted = highlighted
+        self.stepDescription = stepDescription
+        self.cancel = cancel
+    }
+
+    var body: some View {
+        let progress = progress.progress
+        let percent = String(format: localizeString("DownloadingPercentDescription"), Int(progress.fractionCompleted * 100))
+        let details = progress.xcodesLocalizedDescription
+        ProgressRing(fraction: progress.isIndeterminate ? nil : progress.fractionCompleted, highlighted: highlighted, cancel: cancel)
+            .help([stepDescription, percent, details].filter { !$0.isEmpty }.joined(separator: "\n"))
+    }
+}
+
+private struct ProgressRing: View {
+    /// nil shows an indeterminate spinning arc
+    let fraction: Double?
+    let highlighted: Bool
+    let cancel: () -> Void
+
+    @State private var isHovering = false
+    @State private var isSpinning = false
+
+    private let size: CGFloat = 24
+    private let lineWidth: CGFloat = 2.5
+
+    var body: some View {
+        Button(action: cancel) {
+            ZStack {
+                Circle()
+                    .stroke(trackColor, lineWidth: lineWidth)
+
+                Circle()
+                    .trim(from: 0, to: fraction.map { max(0.02, min(1, $0)) } ?? 0.25)
+                    .stroke(ringColor, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round))
+                    .rotationEffect(.degrees(fraction == nil && isSpinning ? 270 : -90))
+                    .animation(fraction == nil ? .linear(duration: 1).repeatForever(autoreverses: false) : .easeOut(duration: 0.3), value: isSpinning)
+                    .animation(.easeOut(duration: 0.3), value: fraction)
+
+                RoundedRectangle(cornerRadius: 1.5, style: .continuous)
+                    .fill(isHovering ? ringColor : ringColor.opacity(0.8))
+                    .frame(width: 7, height: 7)
             }
-            .buttonStyle(PlainButtonStyle())
-            .foregroundColor(highlighted ? .white : .secondary)
-            .help("StopInstallation")
+            .frame(width: size, height: size)
+            .contentShape(Circle())
         }
-        .frame(minWidth: 80)
+        .buttonStyle(.plain)
+        .onHover { isHovering = $0 }
+        .onAppear { isSpinning = fraction == nil }
+        .onChange(of: fraction == nil) { _, isIndeterminate in isSpinning = isIndeterminate }
+        .accessibilityLabel(Text("StopInstallation"))
+    }
+
+    private var ringColor: Color {
+        highlighted ? .white : .accentColor
+    }
+
+    private var trackColor: Color {
+        highlighted ? .white.opacity(0.35) : .secondary.opacity(0.25)
     }
 }