Merge pull request robinebers#989 from robinebers/codex/provider-header-copy-feedback

Refine provider header copy controls

Author: robinebers

Sources/OpenUsage/Support/LiquidGlassFallbacks.swift

@@ -130,17 +130,3 @@ extension View {
         }
     }
 }
-
-/// A share button's icon with built-in "copied" feedback: while `copied` is set, the share arrow
-/// becomes a checkmark — a hard swap, deliberately with no symbol transition (on macOS 26 the
-/// Replace transition defaults to Magic Replace, which draws the checkmark on stroke by stroke;
-/// tried and rejected) — and the checkmark bounces once as it lands. Flip `copied` inside
-/// `withAnimation`.
-struct ShareFeedbackIcon: View {
-    let copied: Bool
-
-    var body: some View {
-        Image(systemName: copied ? "checkmark" : "square.and.arrow.up")
-            .symbolEffect(.bounce, value: copied)
-    }
-}

Sources/OpenUsage/Support/ShareCardRenderer.swift

@@ -63,12 +63,13 @@ enum ShareCardRenderer {
     /// rows read density via `@AppStorage`, so the saved value is swapped to `.regular` for the duration
     /// of the render and restored on exit (synchronously), keeping the exported card consistent without
     /// disturbing the live popover.
+    @discardableResult
     static func share(
         group: ProviderGroup,
         dataStore: WidgetDataStore,
         layout: LayoutStore,
         appearance: ColorScheme
-    ) {
+    ) -> Bool {
         let isExpanded = layout.isProviderExpanded(group.provider.id)
         let alwaysRows = group.alwaysShownWidgets.compactMap { widget -> WidgetData? in
             guard let descriptor = layout.descriptor(for: widget) else { return nil }
@@ -86,7 +87,7 @@ enum ShareCardRenderer {
             appearance: appearance,
             expandBoundaryIndex: isExpanded ? alwaysRows.count : nil
         )
-        renderAndCopy(view, label: group.provider.id, layout: layout)
+        return renderAndCopy(view, label: group.provider.id, layout: layout)
     }
 
     /// The Total Spend counterpart to `share(group:…)`: renders the aggregate ring card for the

Sources/OpenUsage/Views/CopyFeedbackButton.swift

@@ -0,0 +1,48 @@
+import SwiftUI
+
+/// The shared screenshot-copy control used by dashboard headers. The glyph stays compact, but the
+/// button owns a larger pointer target; a successful copy swaps it for a green, bouncing checkmark
+/// before returning to the copy symbol. Keeping the state and timer here makes every copy action use
+/// the same feedback instead of rebuilding the interaction at each call site.
+struct CopyFeedbackButton: View {
+    let accessibilityLabel: String
+    var isRevealed = true
+    let action: () -> Bool
+
+    @State private var copied = false
+    @State private var resetTask: Task<Void, Never>?
+
+    var body: some View {
+        Button {
+            guard action() else { return }
+
+            withAnimation(Motion.spring) { copied = true }
+            resetTask?.cancel()
+            resetTask = Task {
+                try? await Task.sleep(for: .seconds(1.4))
+                guard !Task.isCancelled else { return }
+                withAnimation(.easeOut(duration: 0.18)) { copied = false }
+            }
+        } label: {
+            Image(systemName: copied ? "checkmark" : "doc.on.doc")
+                .font(.system(size: 11, weight: .semibold))
+                .foregroundStyle(copied ? Color.green : Color.secondary)
+                .symbolEffect(.bounce, value: copied)
+                .frame(width: 28, height: 28)
+                .contentShape(Rectangle())
+        }
+        .buttonStyle(.plain)
+        // Preserve the header's compact 16pt layout slot while the button's 28pt hit rectangle extends
+        // around it. The visible glyph therefore aligns with the old provider-mark position instead of
+        // being pushed inward by the larger interaction target.
+        .padding(-6)
+        .opacity(isRevealed || copied ? 1 : 0)
+        .allowsHitTesting(isRevealed || copied)
+        .animation(.easeOut(duration: 0.12), value: isRevealed)
+        .accessibilityLabel(accessibilityLabel)
+        .onDisappear {
+            resetTask?.cancel()
+            resetTask = nil
+        }
+    }
+}

Sources/OpenUsage/Views/ProviderSectionHeader.swift

@@ -1,8 +1,9 @@
 import SwiftUI
 
 /// Shared provider section header used by the dashboard and its lifted provider-reorder preview.
-/// The name leads with the optional plan badge beside it; the provider mark sits at the trailing
-/// edge. Callers supply an optional `warning` — the latest refresh error, rendered as a small amber
+/// The provider mark and name lead, followed by the optional plan badge. Dashboard callers supply a
+/// screenshot-copy action, revealed at the trailing edge while the header is hovered. Callers can also
+/// supply an optional `warning` — the latest refresh error, rendered as a small amber
 /// triangle beside the name whose hover tooltip carries the message (e.g. "Not logged in. Run `codex`
 /// to authenticate."). The
 /// optional `staleness` is the dashboard-only hint that the values shown are an aged snapshot still
@@ -20,28 +21,40 @@ struct ProviderSectionHeader: View {
     /// (dashboard only; `nil` in the reorder preview, which never surfaces staleness). Its tooltip carries
     /// the precise age.
     var staleness: StalenessHint?
+    /// Dashboard-only screenshot action. The reorder preview omits it, while Customize uses its own
+    /// row type and is unaffected by this header.
+    var onCopyScreenshot: (() -> Bool)?
 
     /// Header type and icon track the density setting like the rows do, so Compact shrinks the
     /// whole section anatomy — not just the rows under it.
     @AppStorage(DensitySetting.key) private var density = DensitySetting.regular
     /// Party easter egg: pulse the provider mark. Off by default everywhere else.
     @Environment(\.popoverPartyMode) private var partyMode
+    @State private var isHovered = false
 
-    init(provider: Provider, plan: String? = nil, warning: String? = nil, refreshing: Bool = false, staleness: StalenessHint? = nil) {
+    init(
+        provider: Provider,
+        plan: String? = nil,
+        warning: String? = nil,
+        refreshing: Bool = false,
+        staleness: StalenessHint? = nil,
+        onCopyScreenshot: (() -> Bool)? = nil
+    ) {
         self.provider = provider
         self.plan = plan
         self.warning = warning
         self.refreshing = refreshing
         self.staleness = staleness
+        self.onCopyScreenshot = onCopyScreenshot
     }
 
     var body: some View {
         HStack(spacing: 5) {
-            // A grip leading the name marks the header line as draggable to reorder providers. The
-            // whole line still carries the gesture; this is only the visual affordance. The trailing
-            // gap keeps it from crowding the provider name beside it.
-            DragHandleGrip()
-                .padding(.trailing, 4)
+            // The provider mark replaces the dashboard's visual drag grip. Reordering still belongs
+            // to the whole header at the caller, so the logo itself stays presentational.
+            ProviderIcon(source: provider.icon, inset: 0.04)
+                .frame(width: density.headerIconSize, height: density.headerIconSize)
+                .partyPulse(partyMode)
             // Baseline-aligned pair: the plan badge (and stale tag) are smaller type and sit on the
             // name's text baseline, so the words line up along the bottom rather than floating centered.
             HStack(alignment: .firstTextBaseline, spacing: 5) {
@@ -81,18 +94,19 @@ struct ProviderSectionHeader: View {
                     .accessibilityLabel(warning)
             }
             Spacer(minLength: 8)
-            // Match the menu-bar strip glyph: a near-zero inset lets the mark fill its box so the
-            // header logo reads at the same scale as the tray, instead of floating small inside the
-            // default list-context padding.
-            ProviderIcon(source: provider.icon, inset: 0.04)
-                .frame(width: density.headerIconSize, height: density.headerIconSize)
-                .partyPulse(partyMode)
+            if let onCopyScreenshot {
+                CopyFeedbackButton(
+                    accessibilityLabel: "Copy \(provider.displayName) Screenshot",
+                    isRevealed: isHovered,
+                    action: onCopyScreenshot
+                )
+            }
         }
-        // Shave the left inset so the leading grip sits a touch closer to the card's edge.
         .padding(.leading, 2)
         .padding(.trailing, 4)
         .padding(.vertical, 2)
         .contentShape(Rectangle())
+        .onHover { isHovered = $0 }
     }
 }
 
@@ -121,28 +135,3 @@ struct ReorderGrip: View {
             .contentShape(Rectangle())
     }
 }
-
-/// The 2×3 dot-grid grip that leads the dashboard provider name. Kept quiet (tertiary) so it reads
-/// as an affordance hinting the header line can be dragged to reorder providers, not as a control
-/// competing with the name beside it.
-struct DragHandleGrip: View {
-    var body: some View {
-        VStack(spacing: 2) {
-            ForEach(0..<3) { _ in
-                HStack(spacing: 2) {
-                    dot
-                    dot
-                }
-            }
-        }
-        .frame(height: 22)
-        .contentShape(Rectangle())
-        .accessibilityHidden(true)
-    }
-
-    private var dot: some View {
-        Circle()
-            .fill(.tertiary)
-            .frame(width: 1.75, height: 1.75)
-    }
-}

Sources/OpenUsage/Views/TotalSpendCard.swift

@@ -20,12 +20,6 @@ struct TotalSpendCard: View {
     @AppStorage("openusage.totalSpend.metric") private var metricRawValue = TotalSpendMetric.cost.rawValue
     @AppStorage(DensitySetting.key) private var density = DensitySetting.regular
 
-    /// True briefly after a successful copy: the share arrow becomes a checkmark, then reverts.
-    @State private var shareCopied = false
-    /// The pending revert, kept so a rapid second click restarts the window instead of cutting the
-    /// fresh checkmark short.
-    @State private var shareRevertTask: Task<Void, Never>?
-
     private var period: TotalSpendPeriod {
         TotalSpendPeriod(rawValue: periodRawValue) ?? .today
     }
@@ -115,33 +109,14 @@ struct TotalSpendCard: View {
     }
 
     private var shareButton: some View {
-        Button {
-            // The checkmark only appears when the PNG actually landed on the pasteboard — a failed
-            // render/copy beeps (inside the renderer) and the icon stays a share arrow.
-            guard ShareCardRenderer.shareTotalSpend(
+        CopyFeedbackButton(accessibilityLabel: "Copy \(metric.title) Screenshot") {
+            ShareCardRenderer.shareTotalSpend(
                 total: total,
                 metric: metric,
                 appearance: colorScheme,
                 layout: layout
-            ) else { return }
-            withAnimation(Motion.spring) { shareCopied = true }
-            shareRevertTask?.cancel()
-            shareRevertTask = Task {
-                try? await Task.sleep(for: .seconds(1.4))
-                guard !Task.isCancelled else { return }
-                withAnimation(Motion.spring) { shareCopied = false }
-            }
-        } label: {
-            ShareFeedbackIcon(copied: shareCopied)
-                .font(.system(size: 11, weight: .semibold))
-                .foregroundStyle(.secondary)
-                // Same height as the provider headers' trailing mark, so the header row measures the
-                // same and the arrow centers vertically exactly like the provider icons do.
-                .frame(width: 16, height: density.headerIconSize)
-                .contentShape(Rectangle())
+            )
         }
-        .buttonStyle(.plain)
-        .accessibilityLabel("Share \(metric.title) Screenshot")
     }
 
     // MARK: - Card

Sources/OpenUsage/Views/WidgetGroupedListView.swift

@@ -50,10 +50,10 @@ struct WidgetGroupedListView: View {
             plan: dataStore.plan(for: group.provider.id),
             warning: dataStore.headerNotice(for: group.provider.id),
             refreshing: dataStore.refreshingProviderIDs.contains(group.provider.id),
-            staleness: dataStore.stalenessHint(for: group.provider.id)
+            staleness: dataStore.stalenessHint(for: group.provider.id),
+            onCopyScreenshot: { shareCard(group) }
         )
-        // 8pt (+ 4pt internal) on both sides: insets the drag grip off the card's left edge and
-        // lines the provider mark up with the card's right content edge.
+        // Keep the provider mark and hover-revealed copy control aligned with the card's content edges.
         .padding(.horizontal, 8)
         .highPriorityGesture(providerDragGesture(for: group))
         .contextMenu {
@@ -70,7 +70,7 @@ struct WidgetGroupedListView: View {
                 openCustomize(for: group.provider.id)
             }
             Divider()
-            Button("Share Screenshot") { shareCard(group) }
+            Button("Share Screenshot") { _ = shareCard(group) }
         }
     }
 
@@ -80,7 +80,7 @@ struct WidgetGroupedListView: View {
     /// the export matches the card on screen instead of guessing from `NSApp.effectiveAppearance`. The
     /// same render path backs the footer's "Share Screenshot" submenu, which reaches it without a
     /// right-click.
-    private func shareCard(_ group: ProviderGroup) {
+    private func shareCard(_ group: ProviderGroup) -> Bool {
         ShareCardRenderer.share(
             group: group,
             dataStore: dataStore,