idp.global/swiftapp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine inbox and watch approval presentation
CI / test (push) Has been cancelled
Details

Browse Source 
Tighten the inbox, detail, and watch layouts so approval actions feel denser and more direct across compact surfaces.
This commit is contained in:
Jürgen Kunz
2026-04-19 21:50:03 +02:00
parent 61a0cc1f7d
commit 271d9657bf
13 changed files with 1122 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files
swift/WatchApp/Design/ButtonStyles.swift
+70 -20
View File
@@ -3,55 +3,105 @@ import SwiftUI
struct PrimaryActionStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.font(.headline)
.font(.footnote.weight(.semibold))
.frame(maxWidth: .infinity)
.padding(.horizontal, 12)
.padding(.vertical, 12)
.padding(.vertical, 10)
.foregroundStyle(Color.idpPrimaryForeground)
.background(
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.fill(IdP.tint)
.fill(Color.idpPrimary)
)
.foregroundStyle(.white)
.opacity(configuration.isPressed ? 0.92 : 1)
.opacity(configuration.isPressed ? 0.85 : 1)
}
}
struct SecondaryActionStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.font(.headline)
.font(.footnote.weight(.semibold))
.frame(maxWidth: .infinity)
.padding(.horizontal, 12)
.padding(.vertical, 12)
.padding(.vertical, 10)
.foregroundStyle(.white)
.background(
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.fill(Color.idpSecondaryGroupedBackground)
.fill(Color.clear)
)
.overlay(
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.stroke(Color.idpSeparator, lineWidth: 1)
.stroke(Color.white.opacity(0.22), lineWidth: 1)
)
.foregroundStyle(.white)
.opacity(configuration.isPressed ? 0.92 : 1)
.opacity(configuration.isPressed ? 0.7 : 1)
}
}
struct DestructiveStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.font(.headline)
.font(.footnote.weight(.semibold))
.frame(maxWidth: .infinity)
.padding(.horizontal, 12)
.padding(.vertical, 12)
.padding(.vertical, 10)
.foregroundStyle(.white)
.background(
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.fill(Color.red.opacity(0.18))
.fill(Color.idpDestructive)
)
.overlay(
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.stroke(Color.red.opacity(0.25), lineWidth: 1)
)
.foregroundStyle(.red)
.opacity(configuration.isPressed ? 0.92 : 1)
.opacity(configuration.isPressed ? 0.85 : 1)
}
}
struct WatchBadge: View {
enum Tone {
case neutral
case accent
case ok
case warn
case danger
}
let title: String
var tone: Tone = .neutral
var body: some View {
Text(title)
.font(.system(size: 9, weight: .bold))
.tracking(0.5)
.foregroundStyle(foreground)
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(background, in: Capsule(style: .continuous))
.overlay(
Capsule(style: .continuous)
.stroke(stroke, lineWidth: 1)
)
}
private var foreground: Color {
switch tone {
case .neutral: return Color.idpMutedForeground
case .accent: return IdP.tint
case .ok: return Color.idpOK
case .warn: return Color.idpWarn
case .danger: return Color.idpDestructive
}
}
private var background: Color {
switch tone {
case .neutral: return Color.white.opacity(0.05)
default: return .clear
}
}
private var stroke: Color {
switch tone {
case .accent: return IdP.tint.opacity(0.45)
case .ok: return Color.idpOK.opacity(0.45)
case .warn: return Color.idpWarn.opacity(0.45)
case .danger: return Color.idpDestructive.opacity(0.55)
case .neutral: return .clear
}
}
}
swift/WatchApp/Design/Cards.swift
+58 -20
View File
@@ -5,14 +5,15 @@ struct ApprovalCardModifier: ViewModifier {
func body(content: Content) -> some View {
content
.padding(14)
.padding(8)
.background(
RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
.fill(Color.idpSecondaryGroupedBackground)
.fill(Color.clear)
)
.overlay(
RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
.stroke(highlighted ? IdP.tint.opacity(0.75) : Color.idpSeparator, lineWidth: highlighted ? 1.5 : 1)
.stroke(highlighted ? IdP.tint.opacity(0.55) : Color.white.opacity(0.12),
lineWidth: 1)
)
}
}
@@ -28,38 +29,75 @@ struct RequestHeroCard: View {
let handle: String
var body: some View {
HStack(spacing: 12) {
MonogramAvatar(title: request.source, size: 40)
VStack(alignment: .leading, spacing: 4) {
VStack(alignment: .leading, spacing: 6) {
HStack(spacing: 5) {
MonogramAvatar(title: request.source, size: 18)
Text(request.source)
.font(.headline)
.font(.system(size: 11, weight: .medium))
.foregroundStyle(Color.idpMutedForeground)
.lineLimit(1)
}
HStack(spacing: 4) {
Text("Sign in as")
.foregroundStyle(.white)
Text(handle)
.font(.footnote)
.foregroundStyle(IdP.tint)
.fontWeight(.semibold)
Text("?")
.foregroundStyle(.white)
}
.font(.system(size: 15, weight: .semibold))
.lineLimit(2)
}
.approvalCard(highlighted: true)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
struct MonogramAvatar: View {
let title: String
var size: CGFloat = 22
var size: CGFloat = 20
var tint: Color = IdP.tint
private var monogram: String {
String(title.trimmingCharacters(in: .whitespacesAndNewlines).first ?? "I").uppercased()
let letters = title
.replacingOccurrences(of: "auth.", with: "")
.split { !$0.isLetter && !$0.isNumber }
.prefix(2)
.compactMap { $0.first }
let glyph = String(letters.map(Character.init))
return glyph.isEmpty ? "I" : glyph.uppercased()
}
var body: some View {
RoundedRectangle(cornerRadius: size * 0.34, style: .continuous)
.fill(IdP.tint.opacity(0.2))
.frame(width: size, height: size)
.overlay {
Text(monogram)
.font(.system(size: size * 0.48, weight: .semibold, design: .rounded))
.foregroundStyle(IdP.tint)
}
ZStack {
RoundedRectangle(cornerRadius: 5, style: .continuous)
.fill(tint)
Text(monogram)
.font(.system(size: size * (monogram.count > 1 ? 0.36 : 0.44),
weight: .bold))
.foregroundStyle(.white)
.tracking(-0.3)
}
.frame(width: size, height: size)
.accessibilityHidden(true)
}
}
enum BrandTint {
static func color(for host: String) -> Color {
let key = host.lowercased()
if key.contains("github") { return Color(red: 0.14, green: 0.16, blue: 0.18) }
if key.contains("lufthansa") { return Color(red: 0.02, green: 0.09, blue: 0.30) }
if key.contains("hetzner") { return Color(red: 0.84, green: 0.05, blue: 0.18) }
if key.contains("notion") { return Color(red: 0.12, green: 0.12, blue: 0.12) }
if key.contains("apple") { return Color(red: 0.18, green: 0.18, blue: 0.22) }
if key.contains("reddit") { return Color(red: 1.00, green: 0.27, blue: 0.00) }
if key.contains("cli") { return Color(red: 0.24, green: 0.26, blue: 0.32) }
if key.contains("workspace") { return Color(red: 0.26, green: 0.38, blue: 0.88) }
if key.contains("foss") || key.contains("berlin-mbp") {
return Color(red: 0.12, green: 0.45, blue: 0.70)
}
return IdP.tint
}
}
swift/WatchApp/Design/IdPTokens.swift
+16 -6
View File
@@ -1,15 +1,25 @@
import SwiftUI
public enum IdP {
public static let tint = Color("IdPTint")
public static let cardRadius: CGFloat = 20
public static let controlRadius: CGFloat = 14
public static let badgeRadius: CGFloat = 8
// Direct value — watch target has no Assets.xcassets so `Color("IdPTint")`
// would fall back to a transparent color and hide tinted text.
public static let tint = Color(red: 0.561, green: 0.486, blue: 0.961)
public static let cardRadius: CGFloat = 8
public static let controlRadius: CGFloat = 8
public static let badgeRadius: CGFloat = 999
}
extension Color {
// Shadcn on watch = pure black bg, subtle white dividers, white primary for inverted CTA.
static var idpGroupedBackground: Color { .black }
static var idpSecondaryGroupedBackground: Color { Color.white.opacity(0.08) }
static var idpTertiaryFill: Color { Color.white.opacity(0.12) }
static var idpSecondaryGroupedBackground: Color { Color.white.opacity(0.06) }
static var idpTertiaryFill: Color { Color.white.opacity(0.10) }
static var idpSeparator: Color { Color.white.opacity(0.14) }
static var idpBorder: Color { Color.white.opacity(0.12) }
static var idpMutedForeground: Color { Color.white.opacity(0.55) }
static var idpPrimary: Color { Color(red: 0.980, green: 0.980, blue: 0.980) }
static var idpPrimaryForeground: Color { Color(red: 0.094, green: 0.094, blue: 0.106) }
static var idpOK: Color { Color(red: 0.086, green: 0.639, blue: 0.290) }
static var idpWarn: Color { Color(red: 0.918, green: 0.702, blue: 0.031) }
static var idpDestructive: Color { Color(red: 0.498, green: 0.114, blue: 0.114) }
}
swift/WatchApp/Features/WatchRootView.swift
+187 -70
View File
@@ -9,17 +9,16 @@ struct WatchRootView: View {
Group {
if model.session == nil {
WatchPairingView(model: model)
} else if showsQueue {
WatchQueueView(model: model)
} else {
if showsQueue {
WatchQueueView(model: model)
} else {
WatchHomeView(model: model)
}
WatchHomeView(model: model)
}
}
.background(Color.idpGroupedBackground.ignoresSafeArea())
.background(Color.black.ignoresSafeArea())
}
.tint(IdP.tint)
.preferredColorScheme(.dark)
.onOpenURL { url in
if (url.host ?? url.lastPathComponent).lowercased() == "inbox" {
showsQueue = true
@@ -32,14 +31,19 @@ private struct WatchPairingView: View {
@ObservedObject var model: AppViewModel
var body: some View {
VStack(alignment: .leading, spacing: 12) {
VStack(alignment: .leading, spacing: 10) {
WatchBadge(title: "PAIR · STEP 1", tone: .accent)
Text("Link your watch")
.font(.headline)
.font(.system(size: 15, weight: .semibold))
.foregroundStyle(.white)
Text("Use the shared demo passport so approvals stay visible on your wrist.")
.font(.footnote)
.foregroundStyle(.white.opacity(0.72))
.foregroundStyle(Color.idpMutedForeground)
.fixedSize(horizontal: false, vertical: true)
Spacer(minLength: 4)
Button("Use demo payload") {
Task {
@@ -48,8 +52,8 @@ private struct WatchPairingView: View {
}
.buttonStyle(PrimaryActionStyle())
}
.approvalCard(highlighted: true)
.padding(10)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(8)
.navigationTitle("idp.global")
}
}
@@ -76,22 +80,49 @@ struct WatchApprovalView: View {
model.requests.first(where: { $0.id == requestID })
}
@ViewBuilder
private func signInPrompt(handle: String) -> some View {
var attributed = AttributedString("Sign in as \(handle)?")
attributed.font = .system(size: 15, weight: .semibold)
attributed.foregroundColor = .white
if let range = attributed.range(of: handle) {
attributed[range].foregroundColor = IdP.tint
}
return Text(attributed)
.lineLimit(2)
.minimumScaleFactor(0.8)
}
var body: some View {
Group {
if let request {
ScrollView {
VStack(alignment: .leading, spacing: 12) {
MonogramAvatar(title: request.watchAppDisplayName, size: 42)
VStack(alignment: .leading, spacing: 5) {
HStack(spacing: 5) {
MonogramAvatar(
title: request.watchAppDisplayName,
size: 18,
tint: BrandTint.color(for: request.watchAppDisplayName)
)
Text(request.watchAppDisplayName)
.font(.system(size: 11, weight: .medium))
.foregroundStyle(Color.idpMutedForeground)
.lineLimit(1)
}
Text("Sign in as \(model.profile?.handle ?? "@you")?")
.font(.headline)
.foregroundStyle(.white)
signInPrompt(handle: model.profile?.handle ?? "@you")
Text(request.watchLocationSummary)
.font(.footnote)
.foregroundStyle(.white.opacity(0.72))
HStack(spacing: 3) {
Image(systemName: "location.fill")
.font(.system(size: 8))
Text("\(request.watchLocationSummary) · now")
}
.font(.system(size: 10))
.foregroundStyle(Color.idpMutedForeground)
HStack(spacing: 8) {
Spacer(minLength: 4)
GeometryReader { geo in
HStack(spacing: 5) {
Button {
Task {
Haptics.warning()
@@ -99,21 +130,23 @@ struct WatchApprovalView: View {
}
} label: {
Image(systemName: "xmark")
.frame(maxWidth: .infinity)
.font(.footnote.weight(.semibold))
}
.buttonStyle(SecondaryActionStyle())
.frame(maxWidth: .infinity)
.frame(width: (geo.size.width - 5) / 3)
WatchHoldToApproveButton(isBusy: model.activeRequestID == request.id) {
await model.approve(request)
}
.frame(maxWidth: .infinity)
}
}
.approvalCard(highlighted: true)
.padding(10)
.frame(height: 36)
}
.navigationTitle("Approve")
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, 8)
.padding(.top, 4)
.padding(.bottom, 6)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .bottomBar) {
NavigationLink("Queue") {
@@ -136,23 +169,36 @@ private struct WatchQueueView: View {
@ObservedObject var model: AppViewModel
var body: some View {
List {
if model.requests.isEmpty {
WatchEmptyState(
title: "All clear",
message: "New sign-in requests will appear on your watch here.",
systemImage: "shield"
)
} else {
ForEach(model.requests) { request in
NavigationLink {
WatchRequestDetailView(model: model, requestID: request.id)
} label: {
WatchQueueRow(request: request)
ScrollView {
VStack(alignment: .leading, spacing: 6) {
Text("INBOX · \(model.requests.count)")
.font(.system(size: 10, weight: .bold))
.tracking(0.6)
.foregroundStyle(IdP.tint)
.padding(.horizontal, 4)
.padding(.top, 2)
if model.requests.isEmpty {
WatchEmptyState(
title: "All clear",
message: "New sign-in requests appear here.",
systemImage: "shield"
)
} else {
ForEach(model.requests) { request in
NavigationLink {
WatchRequestDetailView(model: model, requestID: request.id)
} label: {
WatchQueueRow(request: request)
}
.buttonStyle(.plain)
}
}
}
.padding(.horizontal, 6)
.padding(.bottom, 8)
}
.scrollIndicators(.hidden)
.navigationTitle("Queue")
}
}
@@ -161,19 +207,43 @@ private struct WatchQueueRow: View {
let request: ApprovalRequest
var body: some View {
HStack(spacing: 8) {
MonogramAvatar(title: request.watchAppDisplayName, size: 22)
HStack(spacing: 6) {
MonogramAvatar(
title: request.watchAppDisplayName,
size: 20,
tint: BrandTint.color(for: request.watchAppDisplayName)
)
VStack(alignment: .leading, spacing: 2) {
VStack(alignment: .leading, spacing: 0) {
Text(request.watchAppDisplayName)
.font(.footnote.weight(.semibold))
.font(.system(size: 11, weight: .semibold))
.foregroundStyle(.white)
Text(request.createdAt, style: .time)
.font(.caption2)
.foregroundStyle(.white.opacity(0.68))
.lineLimit(1)
Text(request.kind.title)
.font(.system(size: 9))
.foregroundStyle(Color.idpMutedForeground)
.lineLimit(1)
}
Spacer(minLength: 4)
Text(relativeTime)
.font(.system(size: 9))
.foregroundStyle(Color.idpMutedForeground)
}
.padding(.vertical, 2)
.padding(6)
.overlay(
RoundedRectangle(cornerRadius: 7, style: .continuous)
.stroke(Color.white.opacity(0.12), lineWidth: 1)
)
}
private var relativeTime: String {
let seconds = Int(Date.now.timeIntervalSince(request.createdAt))
if seconds < 60 { return "now" }
if seconds < 3600 { return "\(seconds / 60)m" }
if seconds < 86_400 { return "\(seconds / 3600)h" }
return "\(seconds / 86_400)d"
}
}
@@ -189,12 +259,13 @@ private struct WatchRequestDetailView: View {
Group {
if let request {
ScrollView {
VStack(alignment: .leading, spacing: 12) {
VStack(alignment: .leading, spacing: 10) {
RequestHeroCard(request: request, handle: model.profile?.handle ?? "@you")
Text(request.watchTrustExplanation)
.font(.footnote)
.foregroundStyle(.white.opacity(0.72))
.foregroundStyle(Color.idpMutedForeground)
.fixedSize(horizontal: false, vertical: true)
if request.status == .pending {
WatchHoldToApproveButton(isBusy: model.activeRequestID == request.id) {
@@ -210,7 +281,7 @@ private struct WatchRequestDetailView: View {
.buttonStyle(SecondaryActionStyle())
}
}
.padding(10)
.padding(8)
}
} else {
WatchEmptyState(
@@ -233,22 +304,28 @@ private struct WatchHoldToApproveButton: View {
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.fill(isBusy ? Color.white.opacity(0.18) : IdP.tint)
.fill(isBusy ? Color.white.opacity(0.18) : Color.idpPrimary)
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.stroke(Color.white.opacity(0.16), lineWidth: 1)
Text(isBusy ? "Working…" : "Approve")
.font(.headline)
.foregroundStyle(.white)
.padding(.vertical, 12)
if isBusy {
Text("Working…")
.font(.footnote.weight(.semibold))
.foregroundStyle(.white)
} else {
HStack(spacing: 4) {
Image(systemName: "checkmark")
Text("Approve")
}
.font(.footnote.weight(.semibold))
.foregroundStyle(Color.idpPrimaryForeground)
}
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.trim(from: 0, to: progress)
.stroke(Color.white.opacity(0.88), style: StrokeStyle(lineWidth: 2.5, lineCap: .round))
.stroke(IdP.tint, style: StrokeStyle(lineWidth: 2, lineCap: .round))
.rotationEffect(.degrees(-90))
.padding(2)
.padding(1.5)
}
.frame(height: 36)
.contentShape(RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous))
.onLongPressGesture(minimumDuration: 0.6, maximumDistance: 18, pressing: updateProgress) {
guard !isBusy else { return }
@@ -294,7 +371,7 @@ private extension ApprovalRequest {
}
var watchLocationSummary: String {
"Berlin, DE"
"Berlin"
}
}
@@ -304,23 +381,34 @@ private struct WatchEmptyState: View {
let systemImage: String
var body: some View {
ContentUnavailableView {
Label(title, systemImage: systemImage)
} description: {
VStack(alignment: .leading, spacing: 6) {
Image(systemName: systemImage)
.font(.title3)
.foregroundStyle(Color.idpMutedForeground)
Text(title)
.font(.system(size: 13, weight: .semibold))
.foregroundStyle(.white)
Text(message)
.font(.footnote)
.foregroundStyle(Color.idpMutedForeground)
.fixedSize(horizontal: false, vertical: true)
}
.padding(8)
}
}
#Preview("Watch Approval Light") {
WatchApprovalPreviewHost()
}
#Preview("Watch Approval Dark") {
#Preview("Watch Approval") {
WatchApprovalPreviewHost()
.preferredColorScheme(.dark)
}
#Preview("Watch Queue") {
NavigationStack {
WatchQueuePreviewHost()
}
.preferredColorScheme(.dark)
}
@MainActor
private struct WatchApprovalPreviewHost: View {
@State private var model = WatchPreviewFixtures.model()
@@ -330,6 +418,15 @@ private struct WatchApprovalPreviewHost: View {
}
}
@MainActor
private struct WatchQueuePreviewHost: View {
@State private var model = WatchPreviewFixtures.model()
var body: some View {
WatchQueueView(model: model)
}
}
private enum WatchPreviewFixtures {
static let profile = MemberProfile(
name: "Jurgen Meyer",
@@ -358,6 +455,26 @@ private enum WatchPreviewFixtures {
risk: .routine,
scopes: ["profile", "email"],
status: .pending
),
ApprovalRequest(
title: "Lufthansa sign-in",
subtitle: "Verify identity",
source: "lufthansa.com",
createdAt: .now.addingTimeInterval(-60 * 4),
kind: .accessGrant,
risk: .routine,
scopes: ["profile"],
status: .pending
),
ApprovalRequest(
title: "Hetzner",
subtitle: "Console",
source: "hetzner.cloud",
createdAt: .now.addingTimeInterval(-60 * 8),
kind: .elevatedAction,
risk: .elevated,
scopes: ["device"],
status: .pending
)
]
swift/WatchApp/Widgets/Info.plist
-2
View File
@@ -24,8 +24,6 @@
<dict>
<key>NSExtensionPointIdentifier</key>
<string>com.apple.widgetkit-extension</string>
<key>NSExtensionPrincipalClass</key>
<string>$(PRODUCT_MODULE_NAME).IDPGlobalWidgetsBundle</string>
</dict>
</dict>
</plist>