swiftapp/swift/WatchApp/Design/Cards.swift

import SwiftUI

struct ApprovalCardModifier: ViewModifier {
    var highlighted = false

    func body(content: Content) -> some View {
        content
            .padding(14)
            .background(
                RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
                    .fill(Color.idpSecondaryGroupedBackground)
            )
            .overlay(
                RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
                    .stroke(highlighted ? IdP.tint.opacity(0.75) : Color.idpSeparator, lineWidth: highlighted ? 1.5 : 1)
            )
    }
}

extension View {
    func approvalCard(highlighted: Bool = false) -> some View {
        modifier(ApprovalCardModifier(highlighted: highlighted))
    }
}

struct RequestHeroCard: View {
    let request: ApprovalRequest
    let handle: String

    var body: some View {
        HStack(spacing: 12) {
            MonogramAvatar(title: request.source, size: 40)

            VStack(alignment: .leading, spacing: 4) {
                Text(request.source)
                    .font(.headline)
                    .foregroundStyle(.white)
                Text(handle)
                    .font(.footnote)
                    .foregroundStyle(IdP.tint)
            }
        }
        .approvalCard(highlighted: true)
    }
}

struct MonogramAvatar: View {
    let title: String
    var size: CGFloat = 22

    private var monogram: String {
        String(title.trimmingCharacters(in: .whitespacesAndNewlines).first ?? "I").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)
            }
    }
}