Add edge fade to Files filter chips

Packages/iOS/CmuxMobileShellUI/Sources/CmuxMobileShellUI/HorizontalEdgeFadePillBar.swift

@@ -0,0 +1,49 @@
+#if os(iOS)
+import SwiftUI
+import UIKit
+
+/// Hosts horizontally scrolling pills in a real UIKit scroll view while keeping
+/// its fixed controls above the scrolling content at either edge.
+struct HorizontalEdgeFadePillBar<Leading: View, Pills: View, Trailing: View>: UIViewControllerRepresentable {
+    let contentInsets: UIEdgeInsets
+    let accessibilityIdentifier: String
+    let leading: Leading
+    let pills: Pills
+    let trailing: Trailing
+
+    init(
+        contentInsets: UIEdgeInsets = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 8),
+        accessibilityIdentifier: String,
+        @ViewBuilder leading: () -> Leading,
+        @ViewBuilder pills: () -> Pills,
+        @ViewBuilder trailing: () -> Trailing
+    ) {
+        self.contentInsets = contentInsets
+        self.accessibilityIdentifier = accessibilityIdentifier
+        self.leading = leading()
+        self.pills = pills()
+        self.trailing = trailing()
+    }
+
+    func makeUIViewController(context: Context) -> HorizontalEdgeFadePillBarViewController<Leading, Pills, Trailing> {
+        HorizontalEdgeFadePillBarViewController(
+            contentInsets: contentInsets,
+            accessibilityIdentifier: accessibilityIdentifier,
+            leading: leading,
+            pills: pills,
+            trailing: trailing
+        )
+    }
+
+    func updateUIViewController(
+        _ viewController: HorizontalEdgeFadePillBarViewController<Leading, Pills, Trailing>,
+        context: Context
+    ) {
+        viewController.update(
+            leading: leading,
+            pills: pills,
+            trailing: trailing
+        )
+    }
+}
+#endif

Packages/iOS/CmuxMobileShellUI/Sources/CmuxMobileShellUI/TaskComposer/TaskComposerPillBarViewController.swift → Packages/iOS/CmuxMobileShellUI/Sources/CmuxMobileShellUI/HorizontalEdgeFadePillBarViewController.swift

@@ -2,22 +2,31 @@
 import SwiftUI
 import UIKit
 
-/// Owns the task composer's scroll geometry and the fixed controls that flank
+/// Owns horizontal pill scroll geometry and the fixed controls that flank
 /// its horizontally scrolling pills, following the terminal accessory bar's
 /// bounded viewport layout.
 @MainActor
-final class TaskComposerPillBarViewController<Leading: View, Pills: View, Trailing: View>: UIViewController {
-    private let scrollView = TaskComposerEdgeFadeScrollView()
+final class HorizontalEdgeFadePillBarViewController<Leading: View, Pills: View, Trailing: View>: UIViewController {
+    private let scrollView = HorizontalEdgeFadeScrollView()
     private let leadingHost: UIHostingController<Leading>
     private let pillsHost: UIHostingController<Pills>
     private let trailingHost: UIHostingController<Trailing>
     /// Keeps the viewport flush with each fixed control, like the terminal
     /// accessory row. The visual breathing room lives inside the scroll view,
     /// so the edge fade starts at the adjacent button instead of after a hard
     /// gap.
-    private let scrollContentInset: CGFloat = 8
-
-    init(leading: Leading, pills: Pills, trailing: Trailing) {
+    private let contentInsets: UIEdgeInsets
+    private let accessibilityIdentifier: String
+
+    init(
+        contentInsets: UIEdgeInsets,
+        accessibilityIdentifier: String,
+        leading: Leading,
+        pills: Pills,
+        trailing: Trailing
+    ) {
+        self.contentInsets = contentInsets
+        self.accessibilityIdentifier = accessibilityIdentifier
         leadingHost = UIHostingController(rootView: leading)
         pillsHost = UIHostingController(rootView: pills)
         trailingHost = UIHostingController(rootView: trailing)
@@ -43,7 +52,7 @@ final class TaskComposerPillBarViewController<Leading: View, Pills: View, Traili
         scrollView.alwaysBounceVertical = false
         scrollView.contentInsetAdjustmentBehavior = .never
         scrollView.isDirectionalLockEnabled = true
-        scrollView.accessibilityIdentifier = "MobileTaskComposerPillScroller"
+        scrollView.accessibilityIdentifier = accessibilityIdentifier
 
         addChild(pillsHost)
         scrollView.addSubview(pillsHost.view)
@@ -90,14 +99,9 @@ final class TaskComposerPillBarViewController<Leading: View, Pills: View, Traili
         // and lets the mask begin fading at that control's edge. Starting at
         // the negative inset keeps the first pill at the same visual position
         // when the row is at rest.
-        scrollView.contentInset = UIEdgeInsets(
-            top: 0,
-            left: scrollContentInset,
-            bottom: 0,
-            right: scrollContentInset
-        )
+        scrollView.contentInset = contentInsets
         scrollView.horizontalScrollIndicatorInsets = scrollView.contentInset
-        scrollView.contentOffset = CGPoint(x: -scrollContentInset, y: 0)
+        scrollView.contentOffset = CGPoint(x: -contentInsets.left, y: 0)
     }
 
     func update(leading: Leading, pills: Pills, trailing: Trailing) {

Packages/iOS/CmuxMobileShellUI/Sources/CmuxMobileShellUI/TaskComposer/TaskComposerEdgeFadeScrollView.swift → Packages/iOS/CmuxMobileShellUI/Sources/CmuxMobileShellUI/HorizontalEdgeFadeScrollView.swift

@@ -1,11 +1,11 @@
 #if os(iOS)
 import UIKit
 
-/// A horizontal task-composer scroll view whose content dissolves from the
+/// A horizontal pill scroll view whose content dissolves from the
 /// adjacent fixed controls into its bounded viewport. The mask follows
 /// finger-driven content offsets from `layoutSubviews`, the same UIKit-owned
 /// approach used by the terminal accessory bar.
-final class TaskComposerEdgeFadeScrollView: UIScrollView {
+final class HorizontalEdgeFadeScrollView: UIScrollView {
     nonisolated static let fadeWidth: CGFloat = 24
 
     private let fadeMask: CAGradientLayer = {

Packages/iOS/CmuxMobileShellUI/Sources/CmuxMobileShellUI/TaskComposer/TaskComposerLayout.swift

@@ -169,7 +169,7 @@ struct TaskComposerLayout: View {
                 .padding(.horizontal, 16)
             }
 
-            TaskComposerPillBar {
+            HorizontalEdgeFadePillBar(accessibilityIdentifier: "MobileTaskComposerPillScroller") {
                 leadingUtilityButtons
             } pills: {
                 HStack(spacing: 8) {

Packages/iOS/CmuxMobileShellUI/Sources/CmuxMobileShellUI/TerminalArtifactFilesSheet+Content.swift

@@ -2,6 +2,7 @@
 import CmuxAgentChat
 import CmuxAgentChatUI
 import SwiftUI
+import UIKit
 
 extension TerminalArtifactFilesSheet {
     var scopePicker: some View {
@@ -571,31 +572,35 @@ extension TerminalArtifactFilesSheet {
     private static let sessionTopTolerance: CGFloat = 1
 
     private var galleryControls: some View {
-        HStack(spacing: 12) {
-            ScrollView(.horizontal, showsIndicators: false) {
-                HStack(spacing: 8) {
-                    ForEach(ChatArtifactGalleryFilter.allCases, id: \.self) { filter in
-                        Button {
-                            galleryFilter = filter
-                        } label: {
-                            Text(filterTitle(filter))
-                                .font(.subheadline.weight(.medium))
-                                .foregroundStyle(galleryFilter == filter ? Color.white : Color.primary)
-                                .padding(.horizontal, 12)
-                                .padding(.vertical, 7)
-                                .background(
-                                    galleryFilter == filter
-                                        ? Color.accentColor
-                                        : Color(uiColor: .secondarySystemBackground),
-                                    in: Capsule()
-                                )
-                        }
-                        .buttonStyle(.plain)
-                        .accessibilityAddTraits(galleryFilter == filter ? .isSelected : [])
+        HorizontalEdgeFadePillBar(
+            contentInsets: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 12),
+            accessibilityIdentifier: "TerminalArtifactGalleryFilterScroller"
+        ) {
+            EmptyView()
+        } pills: {
+            HStack(spacing: 8) {
+                ForEach(ChatArtifactGalleryFilter.allCases, id: \.self) { filter in
+                    Button {
+                        galleryFilter = filter
+                    } label: {
+                        Text(filterTitle(filter))
+                            .font(.subheadline.weight(.medium))
+                            .foregroundStyle(galleryFilter == filter ? Color.white : Color.primary)
+                            .padding(.horizontal, 12)
+                            .padding(.vertical, 7)
+                            .background(
+                                galleryFilter == filter
+                                    ? Color.accentColor
+                                    : Color(uiColor: .secondarySystemBackground),
+                                in: Capsule()
+                            )
                     }
+                    .buttonStyle(.plain)
+                    .accessibilityAddTraits(galleryFilter == filter ? .isSelected : [])
                 }
             }
-
+            .fixedSize()
+        } trailing: {
             TerminalArtifactGallerySortMenu(
                 value: TerminalArtifactGallerySortMenuValue(sort: gallerySort),
                 actions: TerminalArtifactGallerySortMenuActions(
@@ -604,6 +609,7 @@ extension TerminalArtifactFilesSheet {
             )
             .equatable()
         }
+        .frame(height: 34)
         .padding(.horizontal, 16)
         .padding(.vertical, 10)
     }

Packages/iOS/CmuxMobileShellUI/Tests/CmuxMobileShellUITests/HorizontalEdgeFadeTests.swift

@@ -0,0 +1,24 @@
+import Testing
+
+@testable import CmuxMobileShellUI
+
+@Suite("Horizontal edge fade")
+struct HorizontalEdgeFadeTests {
+    @Test("edge stays opaque at rest")
+    func opaqueAtRest() {
+        #expect(HorizontalEdgeFadeScrollView.edgeAlpha(distance: 0) == 1)
+        #expect(HorizontalEdgeFadeScrollView.edgeAlpha(distance: -4) == 1)
+    }
+
+    @Test("fade ramps linearly as content approaches a control edge")
+    func incrementalRamp() {
+        #expect(abs(HorizontalEdgeFadeScrollView.edgeAlpha(distance: 6) - 0.75) < 0.0001)
+        #expect(abs(HorizontalEdgeFadeScrollView.edgeAlpha(distance: 12) - 0.5) < 0.0001)
+    }
+
+    @Test("fade saturates after one band")
+    func saturates() {
+        #expect(HorizontalEdgeFadeScrollView.edgeAlpha(distance: 24) == 0)
+        #expect(HorizontalEdgeFadeScrollView.edgeAlpha(distance: 500) == 0)
+    }
+}