idp.global/swiftapp
3
0
Fork 0
Code Issues Pull Requests Actions 1 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/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
)
]