smart_printer/smart_printer/UIComponents.swift

import Cocoa

// MARK: - Gradient Card View

final class GradientCardView: NSView {
    private let gradientLayer = CAGradientLayer()

    init(colors: [NSColor], startPoint: CGPoint = CGPoint(x: 0, y: 0.5), endPoint: CGPoint = CGPoint(x: 1, y: 0.5)) {
        super.init(frame: .zero)
        wantsLayer = true
        gradientLayer.colors = colors.map { $0.cgColor }
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
        gradientLayer.cornerRadius = AppTheme.cardCornerRadius
        layer?.addSublayer(gradientLayer)
        applyCardShadow()
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) { nil }

    override func layout() {
        super.layout()
        gradientLayer.frame = bounds
        gradientLayer.cornerRadius = AppTheme.cardCornerRadius
    }
}

// MARK: - Wave Pattern

final class WavePatternView: NSView {
    override var isOpaque: Bool { false }

    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        guard let context = NSGraphicsContext.current?.cgContext else { return }

        let dotColor = NSColor(calibratedWhite: 0.82, alpha: 0.55)
        context.setFillColor(dotColor.cgColor)

        let spacing: CGFloat = 14
        let dotSize: CGFloat = 3
        let rows = Int(bounds.height / spacing) + 2
        let cols = Int(bounds.width / spacing) + 2

        for row in 0..<rows {
            for col in 0..<cols {
                let wave = sin(Double(col) * 0.35 + Double(row) * 0.25) * 8
                let x = CGFloat(col) * spacing + CGFloat(wave)
                let y = CGFloat(row) * spacing
                let rect = CGRect(x: x, y: y, width: dotSize, height: dotSize)
                context.fillEllipse(in: rect)
            }
        }
    }
}

// MARK: - Sidebar Nav Item

final class SidebarNavItem: NSControl {
    enum Style {
        case normal
        case active
    }

    var onClick: (() -> Void)?

    private let iconView = NSImageView()
    private let titleLabel = NSTextField(labelWithString: "")
    private let container = NSView()

    var isSelected: Bool = false {
        didSet { applyStyle(isSelected ? .active : .normal) }
    }

    init(title: String, symbolName: String, isSelected: Bool = false) {
        super.init(frame: .zero)
        self.isSelected = isSelected

        titleLabel.stringValue = title
        titleLabel.font = AppTheme.mediumFont(size: 14)
        titleLabel.textColor = AppTheme.textPrimary

        if let image = NSImage(systemSymbolName: symbolName, accessibilityDescription: title) {
            let config = NSImage.SymbolConfiguration(pointSize: 15, weight: .medium)
            iconView.image = image.withSymbolConfiguration(config)
        }
        iconView.contentTintColor = AppTheme.textPrimary

        container.translatesAutoresizingMaskIntoConstraints = false
        iconView.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        translatesAutoresizingMaskIntoConstraints = false

        addSubview(container)
        container.addSubview(iconView)
        container.addSubview(titleLabel)

        NSLayoutConstraint.activate([
            heightAnchor.constraint(equalToConstant: 44),

            container.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
            container.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
            container.topAnchor.constraint(equalTo: topAnchor),
            container.bottomAnchor.constraint(equalTo: bottomAnchor),

            iconView.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 12),
            iconView.centerYAnchor.constraint(equalTo: container.centerYAnchor),
            iconView.widthAnchor.constraint(equalToConstant: 20),
            iconView.heightAnchor.constraint(equalToConstant: 20),

            titleLabel.leadingAnchor.constraint(equalTo: iconView.trailingAnchor, constant: 10),
            titleLabel.centerYAnchor.constraint(equalTo: container.centerYAnchor),
            titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: container.trailingAnchor, constant: -12),
        ])

        applyStyle(isSelected ? .active : .normal)
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) { nil }

    private func applyStyle(_ style: Style) {
        container.wantsLayer = true
        container.layer?.cornerRadius = AppTheme.cornerRadius

        switch style {
        case .normal:
            container.layer?.backgroundColor = NSColor.clear.cgColor
            titleLabel.textColor = AppTheme.textPrimary
            iconView.contentTintColor = AppTheme.textPrimary
        case .active:
            container.layer?.backgroundColor = AppTheme.homeActiveBackground.cgColor
            titleLabel.textColor = AppTheme.homeActiveForeground
            iconView.contentTintColor = AppTheme.homeActiveForeground
        }
    }

    override func mouseUp(with event: NSEvent) {
        guard bounds.contains(convert(event.locationInWindow, from: nil)) else { return }
        onClick?()
    }

    override func resetCursorRects() {
        addCursorRect(bounds, cursor: .pointingHand)
    }
}

// MARK: - Action Button

final class PillButton: NSButton {
    private let horizontalPadding: CGFloat = 16

    init(title: String, color: NSColor) {
        super.init(frame: .zero)
        self.title = title
        isBordered = false
        wantsLayer = true
        layer?.backgroundColor = color.cgColor
        layer?.cornerRadius = 11
        font = AppTheme.semiboldFont(size: 13)
        contentTintColor = .white

        if let arrow = NSImage(systemSymbolName: "arrow.right", accessibilityDescription: nil) {
            let config = NSImage.SymbolConfiguration(pointSize: 11, weight: .bold)
            image = arrow.withSymbolConfiguration(config)
            imagePosition = .imageTrailing
            imageHugsTitle = true
        }

        heightAnchor.constraint(equalToConstant: 40).isActive = true
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) { nil }

    override var intrinsicContentSize: NSSize {
        var size = super.intrinsicContentSize
        size.width += horizontalPadding * 2
        return size
    }

    override func draw(_ dirtyRect: NSRect) {
        let originalBounds = bounds
        defer { bounds = originalBounds }
        bounds = originalBounds.insetBy(dx: horizontalPadding, dy: 0)
        super.draw(dirtyRect)
    }

    override func resetCursorRects() {
        addCursorRect(bounds, cursor: .pointingHand)
    }
}

// MARK: - Quick Start Card

struct QuickStartCardData {
    let title: String
    let subtitle: String
    let buttonTitle: String
    let accentColor: NSColor
    let gradientColors: [NSColor]
    let iconKind: QuickStartIconKind
}

final class QuickStartCardView: NSView {
    private let iconView: QuickStartIconView
    private var iconWidthConstraint: NSLayoutConstraint!
    private var iconHeightConstraint: NSLayoutConstraint!

    init(data: QuickStartCardData) {
        iconView = QuickStartIconView(kind: data.iconKind)
        super.init(frame: .zero)
        translatesAutoresizingMaskIntoConstraints = false

        let gradient = GradientCardView(
            colors: data.gradientColors,
            startPoint: CGPoint(x: 0, y: 0.5),
            endPoint: CGPoint(x: 1, y: 0.5)
        )
        gradient.translatesAutoresizingMaskIntoConstraints = false

        let titleLabel = NSTextField(labelWithString: data.title)
        titleLabel.font = AppTheme.semiboldFont(size: 22)
        titleLabel.textColor = data.accentColor
        titleLabel.translatesAutoresizingMaskIntoConstraints = false

        let subtitleLabel = NSTextField(labelWithString: data.subtitle)
        subtitleLabel.font = AppTheme.regularFont(size: 13)
        subtitleLabel.textColor = AppTheme.textSecondary
        subtitleLabel.translatesAutoresizingMaskIntoConstraints = false

        let button = PillButton(title: data.buttonTitle, color: data.accentColor)
        button.translatesAutoresizingMaskIntoConstraints = false

        let wavePattern = WavePatternView()
        wavePattern.translatesAutoresizingMaskIntoConstraints = false

        addSubview(gradient)
        gradient.addSubview(wavePattern)
        gradient.addSubview(titleLabel)
        gradient.addSubview(subtitleLabel)
        gradient.addSubview(button)
        gradient.addSubview(iconView)

        NSLayoutConstraint.activate([
            gradient.leadingAnchor.constraint(equalTo: leadingAnchor),
            gradient.trailingAnchor.constraint(equalTo: trailingAnchor),
            gradient.topAnchor.constraint(equalTo: topAnchor),
            gradient.bottomAnchor.constraint(equalTo: bottomAnchor),
            heightAnchor.constraint(equalToConstant: 148),

            titleLabel.leadingAnchor.constraint(equalTo: gradient.leadingAnchor, constant: 18),
            titleLabel.topAnchor.constraint(equalTo: gradient.topAnchor, constant: 24),

            subtitleLabel.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor),
            subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 4),
            subtitleLabel.trailingAnchor.constraint(lessThanOrEqualTo: iconView.leadingAnchor, constant: -8),

            button.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor),
            button.bottomAnchor.constraint(equalTo: gradient.bottomAnchor, constant: -20),

            wavePattern.trailingAnchor.constraint(equalTo: gradient.trailingAnchor),
            wavePattern.bottomAnchor.constraint(equalTo: gradient.bottomAnchor),
            wavePattern.widthAnchor.constraint(equalToConstant: 100),
            wavePattern.heightAnchor.constraint(equalToConstant: 70),

            iconView.trailingAnchor.constraint(equalTo: gradient.trailingAnchor, constant: -8),
            iconView.centerYAnchor.constraint(equalTo: gradient.centerYAnchor),
        ])

        iconWidthConstraint = iconView.widthAnchor.constraint(equalToConstant: AppTheme.quickStartIconMax)
        iconHeightConstraint = iconView.heightAnchor.constraint(equalToConstant: AppTheme.quickStartIconMax)
        iconWidthConstraint.isActive = true
        iconHeightConstraint.isActive = true
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) { nil }

    override func layout() {
        super.layout()
        let size = AppTheme.quickStartIconSize(forCardWidth: bounds.width)
        if iconWidthConstraint.constant != size {
            iconWidthConstraint.constant = size
            iconHeightConstraint.constant = size
        }
    }
}

// MARK: - Feature Card

struct FeatureCardData {
    let title: String
    let subtitle: String
    let iconKind: FeatureIconKind
}

final class FeatureCardView: NSView {
    private let iconView: FeatureIconView
    private var iconWidthConstraint: NSLayoutConstraint!
    private var iconHeightConstraint: NSLayoutConstraint!

    init(data: FeatureCardData) {
        iconView = FeatureIconView(kind: data.iconKind)
        super.init(frame: .zero)
        translatesAutoresizingMaskIntoConstraints = false
        setContentHuggingPriority(.defaultLow, for: .horizontal)
        setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        wantsLayer = true
        layer?.backgroundColor = AppTheme.cardBackground.cgColor
        layer?.cornerRadius = AppTheme.featureCardCornerRadius
        applyCardShadow()

        let titleLabel = NSTextField(labelWithString: data.title)
        titleLabel.font = AppTheme.semiboldFont(size: 14)
        titleLabel.textColor = AppTheme.textPrimary
        titleLabel.translatesAutoresizingMaskIntoConstraints = false

        let subtitleLabel = NSTextField(labelWithString: data.subtitle)
        subtitleLabel.font = AppTheme.regularFont(size: 11)
        subtitleLabel.textColor = AppTheme.textSecondary
        subtitleLabel.translatesAutoresizingMaskIntoConstraints = false

        let arrowButton = NSButton()
        arrowButton.isBordered = false
        arrowButton.wantsLayer = true
        arrowButton.layer?.backgroundColor = NSColor.white.cgColor
        arrowButton.layer?.cornerRadius = 13
        arrowButton.layer?.borderWidth = 1
        arrowButton.layer?.borderColor = NSColor(calibratedWhite: 0.88, alpha: 1).cgColor
        arrowButton.translatesAutoresizingMaskIntoConstraints = false
        if let arrow = NSImage(systemSymbolName: "chevron.right", accessibilityDescription: "Open") {
            let config = NSImage.SymbolConfiguration(pointSize: 10, weight: .semibold)
            arrowButton.image = arrow.withSymbolConfiguration(config)
        }
        arrowButton.contentTintColor = AppTheme.textSecondary

        addSubview(iconView)
        addSubview(titleLabel)
        addSubview(subtitleLabel)
        addSubview(arrowButton)

        NSLayoutConstraint.activate([
            heightAnchor.constraint(equalToConstant: 96),

            iconView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
            iconView.centerYAnchor.constraint(equalTo: centerYAnchor),

            titleLabel.leadingAnchor.constraint(equalTo: iconView.trailingAnchor, constant: 10),
            titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 20),
            titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -32),

            subtitleLabel.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor),
            subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 3),
            subtitleLabel.trailingAnchor.constraint(equalTo: titleLabel.trailingAnchor),

            arrowButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10),
            arrowButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10),
            arrowButton.widthAnchor.constraint(equalToConstant: 26),
            arrowButton.heightAnchor.constraint(equalToConstant: 26),
        ])

        iconWidthConstraint = iconView.widthAnchor.constraint(equalToConstant: AppTheme.featureIconMax)
        iconHeightConstraint = iconView.heightAnchor.constraint(equalToConstant: AppTheme.featureIconMax)
        iconWidthConstraint.isActive = true
        iconHeightConstraint.isActive = true
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) { nil }

    override func layout() {
        super.layout()
        let size = AppTheme.featureIconSize(forCardWidth: bounds.width)
        if iconWidthConstraint.constant != size {
            iconWidthConstraint.constant = size
            iconHeightConstraint.constant = size
        }
    }

    override func resetCursorRects() {
        addCursorRect(bounds, cursor: .pointingHand)
    }
}