Files
web-terminal/ios/App/WebTerm/Components/GateBanner.swift
Yaojia Wang 660a40491a feat(ios): comprehensive iPhone+iPad UX polish — refined-native design system
Freeze a shared design system (DesignSystem/{Tokens,Typography,StatusStyle,
Primitives}.swift): indigo #7C8CFF accent (root .tint), semantic status colors,
2-4-8-12-16-20-24 spacing + sm8/md12/lg16 radii scale, SF Mono tabular numbers,
reduce-motion-gated animations, haptics, reusable StatusBadge/TelemetryChip/Card/
SectionHeader/DSButtonStyle/ContinueLastBanner. Every changed view consumes tokens
— no hardcoded colors/spacing.

Applied across all surfaces (visual only — zero behavior/logic change, all suites
green): session list rows + status system (shape+color, not color-alone) +
telemetry chips + thumbnail placeholders; terminal gate card (≥44pt approve/reject)
+ keybar + reconnect + quick-reply + digest + SwiftTerm accent theme; pairing hero
+ warning tiers + Projects cards + Timeline/Diff; nav chrome + iPad split placeholder
+ privacy shade + motion. Chinese gate copy. UX finding fixed: timeline class colors
now via DS.Palette (+timelineTool/timelineUser tokens).

Design review 8.5/10. Verified: iPhone 16 290 + iPad Pro 11 290 tests green;
packages + integration green; consistency audit ~clean; zero changes under
ios/Packages, src/, public/.
2026-07-05 22:00:31 +02:00

109 lines
4.2 KiB
Swift

import SessionCore
import SwiftUI
/// Copy + wire pairing for one gate button the SINGLE label source for both
/// gate surfaces (`GateBanner`, `PlanGateSheet`). Labels mirror
/// public/tabs.ts:334-350 byte-for-byte; the affordanceClientMessage mapping
/// itself is frozen in SessionCore (`GateState.Affordance.clientMessage`).
struct GateChoiceSpec: Equatable {
let label: String
let affordance: GateState.Affordance
/// Ordered button set for `gate` (tool two, plan three), driven by the
/// frozen `GateState.affordances` list.
static func specs(for gate: GateState) -> [GateChoiceSpec] {
gate.affordances.map { GateChoiceSpec(label: label(for: $0), affordance: $0) }
}
static func label(for affordance: GateState.Affordance) -> String {
switch affordance {
case .approveAuto: return "✓ Approve + Auto"
case .approveReview: return "✓ Approve + Review"
case .keepPlanning: return "✎ Keep Planning"
case .approve: return "✓ Approve"
case .reject: return "✗ Reject"
}
}
}
/// T-iOS-14 · Two-button banner for an ordinary TOOL gate (plan gates get the
/// three-way `PlanGateSheet`). Render-only: state lives in `GateViewModel`.
/// Every tap reports the affordance PLUS the epoch of the gate THIS banner
/// rendered the VM drops stale taps (first-line guard); wiring into
/// TerminalScreen is T-iOS-15.
struct GateBanner: View {
let gate: GateState
let onDecide: (GateState.Affordance, Int) -> Void
private enum Copy {
/// Chinese lead-in above the (web-mirrored) English tool line makes the
/// "this needs me" intent unmissable at a glance.
static let heading = "需要你的确认"
}
private enum Metrics {
static let messageLineLimit = 2
}
/// Banner headline, mirror of public/tabs.ts:329:
/// `Claude wants to use ${pendingTool ?? 'a tool'}`. `detail` is
/// server-supplied display text (untrusted) rendered as plain Text only.
static func message(for gate: GateState) -> String {
"Claude wants to use \(gate.detail ?? "a tool")"
}
/// A prominent Card (the gate is THE core action approve/reject a shell
/// command). An amber "needs me" badge heads it, the tool line reads big and
/// clear, and full-width DS buttons give unmissable tap targets.
var body: some View {
Card {
VStack(alignment: .leading, spacing: DS.Space.md12) {
header
Text(Self.message(for: gate))
.font(DS.Typography.body.weight(.semibold))
.foregroundStyle(DS.Palette.textPrimary)
.lineLimit(Metrics.messageLineLimit)
.fixedSize(horizontal: false, vertical: true)
buttonRow
}
}
.accessibilityElement(children: .contain)
}
private var header: some View {
HStack(spacing: DS.Space.sm8) {
StatusBadge(status: .pendingApproval)
Text(Copy.heading)
.font(DS.Typography.caption)
.foregroundStyle(DS.Palette.textSecondary)
}
}
private var buttonRow: some View {
HStack(spacing: DS.Space.sm8) {
ForEach(GateChoiceSpec.specs(for: gate), id: \.affordance) { spec in
decisionButton(spec)
}
}
}
private func decisionButton(_ spec: GateChoiceSpec) -> some View {
Button(spec.label) {
onDecide(spec.affordance, gate.epoch) // epoch of the RENDERED gate
}
.buttonStyle(DSButtonStyle(kind: kind(for: spec.affordance)))
.accessibilityIdentifier("gate.decision.\(spec.affordance)")
}
/// Approve reads as the accent-filled primary, Reject as the destructive
/// red; Keep Planning (never on a tool gate, but mapped for completeness)
/// is the tinted secondary.
private func kind(for affordance: GateState.Affordance) -> DSButtonStyle.Kind {
switch affordance {
case .approve, .approveAuto, .approveReview: return .primary
case .reject: return .destructive
case .keepPlanning: return .secondary
}
}
}