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/Sources/Features/Home/HomeSheets.swift
+196 -66
View File
@@ -15,54 +15,45 @@ struct ApprovalDetailView: View {
var body: some View {
Group {
if let request {
VStack(spacing: 0) {
RequestHeroCard(
request: request,
handle: model.profile?.handle ?? "@you"
)
.padding(.horizontal, 16)
.padding(.top, 16)
ScrollView {
VStack(alignment: .leading, spacing: 14) {
RequestHeroCard(
request: request,
handle: model.profile?.handle ?? "@you"
)
Form {
Section("Context") {
LabeledContent("From device", value: request.deviceSummary)
LabeledContent("Location", value: request.locationSummary)
LabeledContent("Network", value: request.networkSummary)
LabeledContent("IP") {
Text(request.ipSummary)
.monospacedDigit()
}
}
ShadcnMetaCard(rows: [
.init(label: "From device", value: request.deviceSummary),
.init(label: "Location", value: request.locationSummary),
.init(label: "Network", value: request.networkSummary),
.init(label: "IP", value: request.ipSummary, monospaced: true)
])
Section("Will share") {
ForEach(request.scopes, id: \.self) { scope in
Label(scope, systemImage: "checkmark.circle.fill")
.foregroundStyle(.green)
}
}
SectionHeader(title: "Will share")
ShadcnScopesCard(scopes: request.scopes, profile: model.profile)
Section("Trust signals") {
TrustSignalBanner(request: request)
}
TrustSignalBanner(request: request)
}
.scrollContentBackground(.hidden)
.background(Color.idpGroupedBackground)
.padding(.horizontal, 16)
.padding(.top, 14)
.padding(.bottom, 110)
}
.background(Color.idpGroupedBackground)
.scrollIndicators(.hidden)
.background(Color.idpBackground)
.navigationTitle(request.appDisplayName)
.idpInlineNavigationTitle()
.toolbar {
ToolbarItem(placement: .idpTrailingToolbar) {
IdPGlassCapsule(padding: EdgeInsets(top: 8, leading: 12, bottom: 8, trailing: 12)) {
Text(request.expiresAt, style: .timer)
.font(.caption.weight(.semibold))
.monospacedDigit()
}
ShadcnBadge(
title: "expires \(formattedExpires(request.expiresAt))",
tone: .outline,
leading: Image(systemName: "clock")
)
}
}
.safeAreaInset(edge: .bottom) {
if request.status == .pending {
HStack(spacing: 12) {
HStack(spacing: 8) {
Button("Deny") {
Task {
await performReject(request)
@@ -76,10 +67,11 @@ struct ApprovalDetailView: View {
}
.padding(.horizontal, 16)
.padding(.vertical, 12)
.background {
.background(Color.idpBackground)
.overlay(alignment: .top) {
Rectangle()
.fill(.clear)
.idpGlassChrome()
.fill(Color.idpBorder)
.frame(height: 1)
}
}
}
@@ -96,6 +88,13 @@ struct ApprovalDetailView: View {
}
}
private func formattedExpires(_ date: Date) -> String {
let seconds = Int(max(0, date.timeIntervalSince(.now)))
let m = seconds / 60
let s = seconds % 60
return String(format: "%d:%02d", m, s)
}
@ViewBuilder
private func keyboardShortcuts(for request: ApprovalRequest) -> some View {
Group {
@@ -158,24 +157,20 @@ struct HoldToApproveButton: View {
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.fill(isBusy ? Color.secondary.opacity(0.24) : IdP.tint)
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.stroke(Color.white.opacity(0.16), lineWidth: 1)
.fill(isBusy ? Color.idpMuted : Color.idpPrimary)
label
.padding(.horizontal, 20)
.padding(.vertical, 14)
GeometryReader { geometry in
GeometryReader { _ in
RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
.trim(from: 0, to: progress)
.stroke(Color.white.opacity(0.85), style: StrokeStyle(lineWidth: 3, lineCap: .round))
.stroke(IdP.tint, style: StrokeStyle(lineWidth: 2, lineCap: .round))
.rotationEffect(.degrees(-90))
.padding(2)
.padding(1.5)
}
}
.frame(minHeight: 52)
.frame(height: 44)
.contentShape(RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous))
.onLongPressGesture(minimumDuration: 0.6, maximumDistance: 20, pressing: updateProgress) {
guard !isBusy else { return }
@@ -194,11 +189,14 @@ struct HoldToApproveButton: View {
private var label: some View {
if isBusy {
ProgressView()
.tint(.white)
.tint(Color.idpPrimaryForeground)
} else {
Text(title)
.font(.headline)
.foregroundStyle(.white)
HStack(spacing: 6) {
Image(systemName: "checkmark")
Text(title)
}
.font(.subheadline.weight(.semibold))
.foregroundStyle(Color.idpPrimaryForeground)
}
}
@@ -210,6 +208,132 @@ struct HoldToApproveButton: View {
}
}
struct ShadcnMetaCard: View {
struct Row: Identifiable {
let id = UUID()
let label: String
let value: String
var monospaced: Bool = false
}
let rows: [Row]
var body: some View {
VStack(spacing: 0) {
ForEach(Array(rows.enumerated()), id: \.element.id) { index, row in
HStack {
Text(row.label)
.foregroundStyle(Color.idpMutedForeground)
Spacer()
Text(row.value)
.font(row.monospaced ? .footnote.monospaced() : .footnote.weight(.medium))
.foregroundStyle(.primary)
}
.font(.footnote)
.padding(.horizontal, 14)
.padding(.vertical, 10)
if index < rows.count - 1 {
Rectangle()
.fill(Color.idpBorder)
.frame(height: 1)
}
}
}
.background(Color.idpCard, in: RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous))
.overlay(
RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
.stroke(Color.idpBorder, lineWidth: 1)
)
}
}
struct ShadcnScopesCard: View {
let scopes: [String]
let profile: MemberProfile?
var body: some View {
VStack(spacing: 0) {
ForEach(Array(scopes.enumerated()), id: \.offset) { index, scope in
HStack(spacing: 10) {
Image(systemName: icon(for: scope))
.font(.caption)
.foregroundStyle(Color.idpMutedForeground)
.frame(width: 16)
Text(label(for: scope))
.font(.footnote.weight(.medium))
Spacer()
Text(value(for: scope))
.font(.footnote)
.foregroundStyle(Color.idpMutedForeground)
Image(systemName: "checkmark")
.font(.caption.weight(.semibold))
.foregroundStyle(Color.idpOK)
}
.padding(.horizontal, 14)
.padding(.vertical, 10)
if index < scopes.count - 1 {
Rectangle()
.fill(Color.idpBorder)
.frame(height: 1)
}
}
}
.background(Color.idpCard, in: RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous))
.overlay(
RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
.stroke(Color.idpBorder, lineWidth: 1)
)
}
private func icon(for scope: String) -> String {
let key = scope.lowercased()
if key.contains("email") { return "envelope" }
if key.contains("location") { return "location" }
if key.contains("profile") { return "person" }
if key.contains("device") { return "iphone" }
if key.contains("session") { return "key" }
return "checkmark.seal"
}
private func label(for scope: String) -> String {
let key = scope.lowercased()
if key.contains("email") { return "Email address" }
if key.contains("location") { return "Coarse location" }
if key.contains("profile") { return "Profile name" }
if key.contains("device") { return "Device posture" }
if key.contains("session") { return "Session read" }
return scope.capitalized
}
private func value(for scope: String) -> String {
let key = scope.lowercased()
if key.contains("email") { return "\(profile?.handle ?? "@you")" }
if key.contains("location") { return "Berlin region" }
if key.contains("profile") { return profile?.name ?? "You" }
return "Yes"
}
}
struct SectionHeader: View {
let title: String
var body: some View {
Text(title)
.font(.caption2.weight(.semibold))
.tracking(0.5)
.textCase(.uppercase)
.foregroundStyle(Color.idpMutedForeground)
.padding(.leading, 4)
.padding(.top, 4)
}
}
struct NFCSheet: View {
var title = "Hold near reader"
var message = "Tap to confirm sign-in. Your location will be signed and sent."
@@ -227,34 +351,39 @@ struct NFCSheet: View {
}
var body: some View {
VStack(spacing: 24) {
VStack(spacing: 20) {
ZStack {
ForEach(0..<3, id: \.self) { index in
Circle()
.stroke(IdP.tint.opacity(0.16), lineWidth: 1.5)
.frame(width: 88 + CGFloat(index * 34), height: 88 + CGFloat(index * 34))
.scaleEffect(pulse ? 1.08 : 0.92)
.opacity(pulse ? 0.2 : 0.6)
.animation(.easeInOut(duration: 1.4).repeatForever().delay(Double(index) * 0.12), value: pulse)
.stroke(IdP.tint.opacity(0.55 - Double(index) * 0.18), lineWidth: 1)
.frame(width: 96 + CGFloat(index * 24), height: 96 + CGFloat(index * 24))
.scaleEffect(pulse ? 1.10 : 0.92)
.opacity(pulse ? 0.0 : 0.9)
.animation(.easeOut(duration: 2.0).repeatForever(autoreverses: false).delay(Double(index) * 0.5), value: pulse)
}
Image(systemName: "wave.3.right")
.font(.system(size: 34, weight: .semibold))
.foregroundStyle(IdP.tint)
Circle()
.fill(IdP.tint)
.frame(width: 56, height: 56)
.overlay(
Image(systemName: "wave.3.right")
.font(.system(size: 22, weight: .semibold))
.foregroundStyle(.white)
)
}
.frame(height: 160)
.frame(height: 130)
VStack(spacing: 8) {
VStack(spacing: 6) {
Text(title)
.font(.title3.weight(.semibold))
.font(.title3.weight(.bold))
Text(message)
.font(.subheadline)
.foregroundStyle(.secondary)
.font(.footnote)
.foregroundStyle(Color.idpMutedForeground)
.multilineTextAlignment(.center)
}
VStack(spacing: 12) {
HStack(spacing: 8) {
Button("Cancel") {
dismiss()
}
@@ -274,6 +403,7 @@ struct NFCSheet: View {
}
}
.padding(24)
.background(Color.idpBackground)
.presentationDetents([.medium])
.presentationDragIndicator(.visible)
.task {