Refine inbox and watch approval presentation

Tighten the inbox, detail, and watch layouts so approval actions feel denser and more direct across compact surfaces.
2026-04-19 21:50:03 +02:00
parent 61a0cc1f7d
commit 271d9657bf
13 changed files with 1122 additions and 516 deletions
@@ -11,18 +11,18 @@ struct PrimaryActionStyle: ButtonStyle {

        var body: some View {
            configuration.label
-                .font(.headline)
+                .font(.subheadline.weight(.semibold))
                .frame(maxWidth: .infinity)
                .padding(.horizontal, 18)
-                .padding(.vertical, 14)
-                .foregroundStyle(.white)
+                .frame(height: 44)
+                .foregroundStyle(Color.idpPrimaryForeground)
                .background(
                    RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                        .fill(isEnabled ? IdP.tint : Color.secondary.opacity(0.25))
+                        .fill(isEnabled ? Color.idpPrimary : Color.idpMuted)
                )
-                .opacity(configuration.isPressed ? 0.92 : 1)
-                .scaleEffect(configuration.isPressed ? 0.985 : 1)
-                .animation(.easeOut(duration: 0.16), value: configuration.isPressed)
+                .opacity(configuration.isPressed ? 0.9 : 1)
+                .scaleEffect(configuration.isPressed ? 0.99 : 1)
+                .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
        }
    }
 }
@@ -30,43 +30,135 @@ struct PrimaryActionStyle: ButtonStyle {
 struct SecondaryActionStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
-            .font(.headline)
+            .font(.subheadline.weight(.semibold))
            .frame(maxWidth: .infinity)
            .padding(.horizontal, 18)
-            .padding(.vertical, 14)
+            .frame(height: 44)
            .foregroundStyle(.primary)
            .background(
                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .fill(Color.idpSecondaryGroupedBackground)
+                    .fill(Color.clear)
            )
            .overlay(
                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .stroke(Color.idpSeparator.opacity(0.55), lineWidth: 1)
+                    .stroke(Color.idpBorder, lineWidth: 1)
            )
-            .opacity(configuration.isPressed ? 0.9 : 1)
-            .scaleEffect(configuration.isPressed ? 0.985 : 1)
-            .animation(.easeOut(duration: 0.16), value: configuration.isPressed)
+            .opacity(configuration.isPressed ? 0.85 : 1)
+            .scaleEffect(configuration.isPressed ? 0.99 : 1)
+            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
    }
 }

 struct DestructiveStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
-            .font(.headline)
+            .font(.subheadline.weight(.semibold))
            .frame(maxWidth: .infinity)
            .padding(.horizontal, 18)
-            .padding(.vertical, 14)
-            .foregroundStyle(.red)
+            .frame(height: 44)
+            .foregroundStyle(.white)
            .background(
                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .fill(Color.red.opacity(0.10))
-            )
-            .overlay(
-                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .stroke(Color.red.opacity(0.18), lineWidth: 1)
+                    .fill(Color.idpDestructive)
            )
            .opacity(configuration.isPressed ? 0.9 : 1)
-            .scaleEffect(configuration.isPressed ? 0.985 : 1)
-            .animation(.easeOut(duration: 0.16), value: configuration.isPressed)
+            .scaleEffect(configuration.isPressed ? 0.99 : 1)
+            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
+    }
+}
+
+struct AccentActionStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .font(.subheadline.weight(.semibold))
+            .frame(maxWidth: .infinity)
+            .padding(.horizontal, 18)
+            .frame(height: 44)
+            .foregroundStyle(.white)
+            .background(
+                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
+                    .fill(IdP.tint)
+            )
+            .opacity(configuration.isPressed ? 0.9 : 1)
+            .scaleEffect(configuration.isPressed ? 0.99 : 1)
+            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
+    }
+}
+
+struct GhostActionStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .font(.subheadline.weight(.medium))
+            .padding(.horizontal, 12)
+            .frame(height: 32)
+            .foregroundStyle(.primary)
+            .background(
+                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
+                    .fill(configuration.isPressed ? Color.idpMuted : Color.clear)
+            )
+    }
+}
+
+struct ShadcnBadge: View {
+    enum Tone {
+        case neutral
+        case outline
+        case ok
+        case warn
+        case danger
+        case accent
+    }
+
+    let title: String
+    var tone: Tone = .neutral
+    var leading: Image? = nil
+
+    var body: some View {
+        HStack(spacing: 4) {
+            if let leading {
+                leading
+                    .font(.caption2.weight(.semibold))
+            }
+            Text(title)
+        }
+        .font(.caption2.weight(.semibold))
+        .padding(.horizontal, 8)
+        .padding(.vertical, 3)
+        .foregroundStyle(foreground)
+        .background(background, in: Capsule(style: .continuous))
+        .overlay(
+            Capsule(style: .continuous)
+                .stroke(strokeColor, lineWidth: strokeWidth)
+        )
+    }
+
+    private var foreground: Color {
+        switch tone {
+        case .neutral: return Color.idpMutedForeground
+        case .outline: return .primary
+        case .ok: return Color.idpOK
+        case .warn: return Color(red: 0.52, green: 0.30, blue: 0.05)
+        case .danger: return Color(red: 0.60, green: 0.10, blue: 0.10)
+        case .accent: return IdP.tint
+        }
+    }
+
+    private var background: Color {
+        switch tone {
+        case .neutral: return Color.idpMuted
+        case .outline: return .clear
+        case .ok: return Color.idpOK.opacity(0.12)
+        case .warn: return Color.idpWarn.opacity(0.18)
+        case .danger: return Color.idpDestructive.opacity(0.14)
+        case .accent: return Color.idpAccentSoft
+        }
+    }
+
+    private var strokeColor: Color {
+        tone == .outline ? Color.idpBorder : .clear
+    }
+
+    private var strokeWidth: CGFloat {
+        tone == .outline ? 1 : 0
    }
 }
@@ -5,22 +5,22 @@ struct ApprovalCardModifier: ViewModifier {

    func body(content: Content) -> some View {
        content
-            .padding(18)
+            .padding(14)
            .background(
                RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
-                    .fill(Color.idpSecondaryGroupedBackground)
+                    .fill(Color.idpCard)
            )
            .overlay(
                RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
-                    .stroke(highlighted ? IdP.tint.opacity(0.7) : Color.idpSeparator.opacity(0.55), lineWidth: highlighted ? 1.5 : 1)
+                    .stroke(highlighted ? IdP.tint : Color.idpBorder, lineWidth: 1)
+            )
+            .background(
+                highlighted
+                    ? RoundedRectangle(cornerRadius: IdP.cardRadius + 3, style: .continuous)
+                        .fill(IdP.tint.opacity(0.10))
+                        .padding(-3)
+                    : nil
            )
-            .overlay {
-                if highlighted {
-                    RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
-                        .stroke(IdP.tint.opacity(0.12), lineWidth: 6)
-                        .padding(-2)
-                }
-            }
    }
 }

@@ -39,27 +39,35 @@ struct RequestHeroCard: View {
    let handle: String

    var body: some View {
-        HStack(alignment: .top, spacing: 16) {
-            MonogramAvatar(title: request.source, size: 64)
+        VStack(spacing: 12) {
+            MonogramAvatar(
+                title: request.source,
+                size: 52,
+                tint: BrandTint.color(for: request.source),
+                filled: true
+            )

-            VStack(alignment: .leading, spacing: 8) {
-                Text("\(request.source) wants to sign in as you")
-                    .font(.title3.weight(.semibold))
+            VStack(spacing: 4) {
+                Text("\(request.source) wants to sign in")
+                    .font(.title3.weight(.bold))
+                    .multilineTextAlignment(.center)
                    .fixedSize(horizontal: false, vertical: true)

-                Text("Continue as \(Text(handle).foregroundStyle(IdP.tint))")
-                    .font(.subheadline)
-                    .foregroundStyle(.secondary)
-
-                HStack(spacing: 8) {
-                    Label(request.kind.title, systemImage: request.kind.systemImage)
+                HStack(spacing: 4) {
+                    Text("requesting")
+                    Text(handle)
+                        .foregroundStyle(IdP.tint)
+                        .fontWeight(.semibold)
+                    Text("·")
                    Text(request.createdAt, style: .relative)
                }
-                .font(.caption.weight(.medium))
-                .foregroundStyle(.secondary)
+                .font(.footnote)
+                .foregroundStyle(Color.idpMutedForeground)
            }
        }
-        .approvalCard(highlighted: true)
+        .frame(maxWidth: .infinity)
+        .padding(.vertical, 6)
+        .approvalCard(highlighted: false)
    }
 }

@@ -67,34 +75,58 @@ struct MonogramAvatar: View {
    let title: String
    var size: CGFloat = 40
    var tint: Color = IdP.tint
+    /// Shadcn-style filled tile (brand color bg, white text).
+    /// When false, renders the legacy tinted-pastel avatar.
+    var filled: Bool = true

    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 {
        ZStack {
-            RoundedRectangle(cornerRadius: size * 0.34, style: .continuous)
-                .fill(tint.opacity(0.14))
-
-            Image("AppMonogram")
-                .resizable()
-                .scaledToFit()
-                .frame(width: size * 0.44, height: size * 0.44)
-                .opacity(0.18)
+            RoundedRectangle(cornerRadius: 8, style: .continuous)
+                .fill(filled ? tint : tint.opacity(0.14))

            Text(monogram)
-                .font(.system(size: size * 0.42, weight: .semibold, design: .rounded))
-                .foregroundStyle(tint)
+                .font(.system(size: size * (monogram.count > 1 ? 0.36 : 0.44),
+                              weight: .bold,
+                              design: .default))
+                .foregroundStyle(filled ? .white : tint)
+                .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
+    }
+}
+
 struct DeviceRowStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
-            .padding(.vertical, 4)
+            .padding(.vertical, 2)
    }
 }
@@ -8,9 +8,9 @@ import UIKit

 public enum IdP {
    public static let tint = Color("IdPTint")
-    public static let cardRadius: CGFloat = 22
-    public static let controlRadius: CGFloat = 14
-    public static let badgeRadius: CGFloat = 8
+    public static let cardRadius: CGFloat = 12
+    public static let controlRadius: CGFloat = 8
+    public static let badgeRadius: CGFloat = 999

    static func horizontalPadding(compact: Bool) -> CGFloat {
        compact ? 16 : 24
@@ -21,46 +21,72 @@ public enum IdP {
    }
 }

+private enum ShadcnHex {
+    // Light
+    static let bg = Color(red: 1, green: 1, blue: 1)
+    static let fg = Color(red: 0.039, green: 0.039, blue: 0.043)
+    static let muted = Color(red: 0.957, green: 0.957, blue: 0.961)
+    static let mutedFg = Color(red: 0.443, green: 0.443, blue: 0.478)
+    static let border = Color(red: 0.894, green: 0.894, blue: 0.906)
+    static let card = Color(red: 1, green: 1, blue: 1)
+    static let primary = Color(red: 0.094, green: 0.094, blue: 0.106)
+    static let primaryFg = Color(red: 0.980, green: 0.980, blue: 0.980)
+    static let accentSoft = Color(red: 0.961, green: 0.953, blue: 1.0)
+    static let destructive = Color(red: 0.937, green: 0.267, blue: 0.267)
+    static let ok = Color(red: 0.086, green: 0.639, blue: 0.290)
+    static let warn = Color(red: 0.918, green: 0.702, blue: 0.031)
+
+    // Dark
+    static let bgDark = Color(red: 0.035, green: 0.035, blue: 0.043)
+    static let fgDark = Color(red: 0.980, green: 0.980, blue: 0.980)
+    static let mutedDark = Color(red: 0.094, green: 0.094, blue: 0.106)
+    static let mutedFgDark = Color(red: 0.631, green: 0.631, blue: 0.667)
+    static let borderDark = Color(red: 0.153, green: 0.153, blue: 0.165)
+    static let cardDark = Color(red: 0.047, green: 0.047, blue: 0.059)
+    static let primaryDark = Color(red: 0.980, green: 0.980, blue: 0.980)
+    static let primaryFgDark = Color(red: 0.094, green: 0.094, blue: 0.106)
+    static let accentSoftDark = Color(red: 0.102, green: 0.086, blue: 0.180)
+    static let destructiveDark = Color(red: 0.498, green: 0.114, blue: 0.114)
+}
+
+private extension Color {
+    static func idpAdaptive(light: Color, dark: Color) -> Color {
+        #if os(macOS)
+        Color(nsColor: NSColor(name: nil) { appearance in
+            let matched = appearance.bestMatch(from: [.darkAqua, .vibrantDark, .aqua, .vibrantLight])
+            let isDark = matched == .darkAqua || matched == .vibrantDark
+            return NSColor(isDark ? dark : light)
+        })
+        #elseif canImport(UIKit) && !os(watchOS)
+        Color(uiColor: UIColor { traits in
+            UIColor(traits.userInterfaceStyle == .dark ? dark : light)
+        })
+        #elseif os(watchOS)
+        dark
+        #else
+        light
+        #endif
+    }
+}
+
 extension Color {
-    static var idpGroupedBackground: Color {
-        #if os(macOS)
-        Color(nsColor: .windowBackgroundColor)
-        #elseif os(watchOS)
-        .black
-        #else
-        Color(uiColor: .systemGroupedBackground)
-        #endif
-    }
+    static let idpBackground = Color.idpAdaptive(light: ShadcnHex.bg, dark: ShadcnHex.bgDark)
+    static let idpForeground = Color.idpAdaptive(light: ShadcnHex.fg, dark: ShadcnHex.fgDark)
+    static let idpMuted = Color.idpAdaptive(light: ShadcnHex.muted, dark: ShadcnHex.mutedDark)
+    static let idpMutedForeground = Color.idpAdaptive(light: ShadcnHex.mutedFg, dark: ShadcnHex.mutedFgDark)
+    static let idpBorder = Color.idpAdaptive(light: ShadcnHex.border, dark: ShadcnHex.borderDark)
+    static let idpCard = Color.idpAdaptive(light: ShadcnHex.card, dark: ShadcnHex.cardDark)
+    static let idpPrimary = Color.idpAdaptive(light: ShadcnHex.primary, dark: ShadcnHex.primaryDark)
+    static let idpPrimaryForeground = Color.idpAdaptive(light: ShadcnHex.primaryFg, dark: ShadcnHex.primaryFgDark)
+    static let idpAccentSoft = Color.idpAdaptive(light: ShadcnHex.accentSoft, dark: ShadcnHex.accentSoftDark)
+    static let idpDestructive = Color.idpAdaptive(light: ShadcnHex.destructive, dark: ShadcnHex.destructiveDark)
+    static let idpOK = ShadcnHex.ok
+    static let idpWarn = ShadcnHex.warn

-    static var idpSecondaryGroupedBackground: Color {
-        #if os(macOS)
-        Color(nsColor: .controlBackgroundColor)
-        #elseif os(watchOS)
-        Color.white.opacity(0.08)
-        #else
-        Color(uiColor: .secondarySystemGroupedBackground)
-        #endif
-    }
-
-    static var idpTertiaryFill: Color {
-        #if os(macOS)
-        Color(nsColor: .quaternaryLabelColor).opacity(0.08)
-        #elseif os(watchOS)
-        Color.white.opacity(0.12)
-        #else
-        Color(uiColor: .tertiarySystemFill)
-        #endif
-    }
-
-    static var idpSeparator: Color {
-        #if os(macOS)
-        Color(nsColor: .separatorColor)
-        #elseif os(watchOS)
-        Color.white.opacity(0.14)
-        #else
-        Color(uiColor: .separator)
-        #endif
-    }
+    static var idpGroupedBackground: Color { idpBackground }
+    static var idpSecondaryGroupedBackground: Color { idpCard }
+    static var idpTertiaryFill: Color { idpMuted }
+    static var idpSeparator: Color { idpBorder }
 }

 extension View {
@@ -93,7 +119,7 @@ extension View {
        #if os(macOS)
        searchable(text: text, isPresented: isPresented)
        #else
-        searchable(text: text, isPresented: isPresented, placement: .navigationBarDrawer(displayMode: .always))
+        searchable(text: text, isPresented: isPresented, placement: .navigationBarDrawer(displayMode: .automatic))
        #endif
    }
 }