Redesign paywall as a centered in-app premium overlay.

Replace the modal panel with a full-app overlay, refine layout hierarchy, and polish plan cards/CTA spacing so the paywall feels professional while preserving existing purchase behavior.

Made-with: Cursor

classroom_app/ViewController.swift

@@ -250,6 +250,7 @@ final class ViewController: NSViewController {
     private var zoomJoinModeViews: [ZoomJoinMode: NSView] = [:]
     private var settingsActionByView = [ObjectIdentifier: SettingsAction]()
     private var paywallWindow: NSWindow?
+    private weak var paywallOverlayView: NSView?
     private let paywallContentWidth: CGFloat = 520
     private let launchWindowLeftOffset: CGFloat = 80
     private var selectedPremiumPlan: PremiumPlan = .monthly
@@ -414,7 +415,9 @@ final class ViewController: NSViewController {
         palette = Palette(isDarkMode: darkModeEnabled)
         storeKitCoordinator.onEntitlementsChanged = { [weak self] hasPremiumAccess in
             guard let self else { return }
-            self.handlePremiumAccessChanged(hasPremiumAccess)
+            DispatchQueue.main.async {
+                self.handlePremiumAccessChanged(hasPremiumAccess)
+            }
         }
         migrateLegacyRatingStateIfNeeded()
         beginUsageTrackingSessionIfNeeded()
@@ -1021,10 +1024,22 @@ private extension ViewController {
     }
 
     private func showPaywall(upgradeFlow: Bool = false, preferredPlan: PremiumPlan? = nil) {
+        if !Thread.isMainThread {
+            DispatchQueue.main.async { [weak self] in
+                self?.showPaywall(upgradeFlow: upgradeFlow, preferredPlan: preferredPlan)
+            }
+            return
+        }
         paywallUpgradeFlowEnabled = upgradeFlow
         if let preferredPlan {
             selectedPremiumPlan = preferredPlan
         }
+        if let existingOverlay = paywallOverlayView {
+            refreshPaywallStoreUI()
+            existingOverlay.alphaValue = 1
+            view.addSubview(existingOverlay, positioned: .above, relativeTo: nil)
+            return
+        }
         if let existing = paywallWindow {
             refreshPaywallStoreUI()
             animatePaywallPresentation(existing)
@@ -1034,33 +1049,30 @@ private extension ViewController {
         }
 
         let content = makePaywallContent()
-        let controller = NSViewController()
-        controller.view = content
-
-        let panel = NSPanel(
-            contentRect: NSRect(x: 0, y: 0, width: 640, height: 820),
-            styleMask: [.titled, .closable, .fullSizeContentView],
-            backing: .buffered,
-            defer: false
-        )
-        panel.title = "Get Premium"
-        panel.titleVisibility = .hidden
-        panel.titlebarAppearsTransparent = true
-        panel.isFloatingPanel = false
-        panel.level = .normal
-        panel.hidesOnDeactivate = true
-        panel.isReleasedWhenClosed = false
-        panel.delegate = self
-        panel.standardWindowButton(.closeButton)?.isHidden = true
-        panel.standardWindowButton(.miniaturizeButton)?.isHidden = true
-        panel.standardWindowButton(.zoomButton)?.isHidden = true
-        panel.center()
-        panel.contentViewController = controller
-        panel.alphaValue = 0
-        panel.makeKeyAndOrderFront(nil)
-        NSApp.activate(ignoringOtherApps: true)
-        paywallWindow = panel
-        animatePaywallPresentation(panel)
+        let overlay = NSView()
+        overlay.translatesAutoresizingMaskIntoConstraints = false
+        overlay.wantsLayer = true
+        overlay.layer?.backgroundColor = palette.pageBackground.withAlphaComponent(0.98).cgColor
+        overlay.alphaValue = 0
+        overlay.addSubview(content)
+        view.addSubview(overlay, positioned: .above, relativeTo: nil)
+        NSLayoutConstraint.activate([
+            overlay.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            overlay.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            overlay.topAnchor.constraint(equalTo: view.topAnchor),
+            overlay.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+
+            content.leadingAnchor.constraint(equalTo: overlay.leadingAnchor),
+            content.trailingAnchor.constraint(equalTo: overlay.trailingAnchor),
+            content.topAnchor.constraint(equalTo: overlay.topAnchor),
+            content.bottomAnchor.constraint(equalTo: overlay.bottomAnchor)
+        ])
+        paywallOverlayView = overlay
+        NSAnimationContext.runAnimationGroup { context in
+            context.duration = 0.20
+            context.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
+            overlay.animator().alphaValue = 1
+        }
 
         Task { [weak self] in
             guard let self else { return }
@@ -1092,15 +1104,19 @@ private extension ViewController {
     }
 
     @objc private func closePaywallClicked(_ sender: Any?) {
-        if let win = paywallWindow {
-            win.performClose(nil)
-            return
-        }
-        if let gesture = sender as? NSGestureRecognizer, let win = gesture.view?.window {
-            win.performClose(nil)
+        if let overlay = paywallOverlayView {
+            paywallOverlayView = nil
+            paywallUpgradeFlowEnabled = false
+            NSAnimationContext.runAnimationGroup({ context in
+                context.duration = 0.16
+                context.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
+                overlay.animator().alphaValue = 0
+            }, completionHandler: {
+                overlay.removeFromSuperview()
+            })
             return
         }
-        if let view = sender as? NSView, let win = view.window {
+        if let win = paywallWindow {
             win.performClose(nil)
             return
         }
@@ -1459,7 +1475,7 @@ private extension ViewController {
                     await self?.loadSchedule()
                 }
                 self.showSimpleAlert(title: "Purchase Complete", message: "Premium has been unlocked successfully.")
-                self.paywallWindow?.performClose(nil)
+                self.closePaywallClicked(nil)
                 self.scheduleRatingPromptAfterPremiumUpgrade()
             case .cancelled:
                 break
@@ -2621,9 +2637,10 @@ private extension ViewController {
         let contentStack = NSStackView()
         contentStack.translatesAutoresizingMaskIntoConstraints = false
         contentStack.orientation = .vertical
-        contentStack.spacing = 12
-        contentStack.alignment = .leading
+        contentStack.spacing = 14
+        contentStack.alignment = .centerX
         panel.addSubview(contentStack)
+        let paywallLayoutWidth: CGFloat = 980
 
         let topRow = NSStackView()
         topRow.translatesAutoresizingMaskIntoConstraints = false
@@ -2631,7 +2648,7 @@ private extension ViewController {
         topRow.alignment = .centerY
         topRow.distribution = .fill
         topRow.spacing = 10
-        topRow.addArrangedSubview(textLabel("Get Premium", font: NSFont.systemFont(ofSize: 24, weight: .bold), color: palette.textPrimary))
+        topRow.addArrangedSubview(textLabel("Classroom Pro", font: NSFont.systemFont(ofSize: 27, weight: .bold), color: palette.textPrimary))
         let topSpacer = NSView()
         topSpacer.translatesAutoresizingMaskIntoConstraints = false
         topRow.addArrangedSubview(topSpacer)
@@ -2657,47 +2674,83 @@ private extension ViewController {
             closeButton.contentTintColor = hovering ? (self.darkModeEnabled ? .white : self.palette.textPrimary) : self.palette.textSecondary
         }
         topRow.addArrangedSubview(closeButton)
-        topRow.widthAnchor.constraint(greaterThanOrEqualToConstant: paywallContentWidth).isActive = true
         contentStack.addArrangedSubview(topRow)
+        topRow.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
+
+        let hero = roundedContainer(cornerRadius: 16, color: palette.sectionCard)
+        hero.translatesAutoresizingMaskIntoConstraints = false
+        styleSurface(hero, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
+        contentStack.addArrangedSubview(hero)
+        hero.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
+
+        let heroBadge = textLabel("PREMIUM EXPERIENCE", font: NSFont.systemFont(ofSize: 10, weight: .bold), color: NSColor(calibratedRed: 0.42, green: 0.93, blue: 0.70, alpha: 1))
+        hero.addSubview(heroBadge)
+
+        let heroTitle = textLabel("Elevate your classroom experience", font: NSFont.systemFont(ofSize: 22, weight: .bold), color: palette.textPrimary)
+        let heroSubtitle = textLabel("Unlock intelligent automation, deep analytics, and premium support for modern educators.", font: NSFont.systemFont(ofSize: 13, weight: .medium), color: palette.textSecondary)
+        heroTitle.maximumNumberOfLines = 2
+        heroSubtitle.maximumNumberOfLines = 3
+        hero.addSubview(heroTitle)
+        hero.addSubview(heroSubtitle)
+        NSLayoutConstraint.activate([
+            heroBadge.leadingAnchor.constraint(equalTo: hero.leadingAnchor, constant: 16),
+            heroBadge.topAnchor.constraint(equalTo: hero.topAnchor, constant: 14),
+            heroTitle.leadingAnchor.constraint(equalTo: hero.leadingAnchor, constant: 16),
+            heroTitle.trailingAnchor.constraint(lessThanOrEqualTo: hero.trailingAnchor, constant: -16),
+            heroTitle.topAnchor.constraint(equalTo: heroBadge.bottomAnchor, constant: 10),
+            heroSubtitle.leadingAnchor.constraint(equalTo: heroTitle.leadingAnchor),
+            heroSubtitle.trailingAnchor.constraint(equalTo: hero.trailingAnchor, constant: -16),
+            heroSubtitle.topAnchor.constraint(equalTo: heroTitle.bottomAnchor, constant: 8),
+            heroSubtitle.bottomAnchor.constraint(equalTo: hero.bottomAnchor, constant: -16)
+        ])
 
-        contentStack.addArrangedSubview(textLabel("Upgrade to unlock premium features.", font: NSFont.systemFont(ofSize: 12, weight: .medium), color: palette.textSecondary))
-        let benefits = paywallBenefitsSection()
-        contentStack.addArrangedSubview(benefits)
-        contentStack.setCustomSpacing(18, after: benefits)
+        let benefitsRow = NSStackView()
+        benefitsRow.translatesAutoresizingMaskIntoConstraints = false
+        benefitsRow.orientation = .horizontal
+        benefitsRow.spacing = 8
+        benefitsRow.distribution = .fillEqually
+        benefitsRow.alignment = .centerY
+        benefitsRow.addArrangedSubview(paywallBenefitItem(icon: "📅", text: "Manage classes"))
+        benefitsRow.addArrangedSubview(paywallBenefitItem(icon: "🧠", text: "Smart to-dos"))
+        benefitsRow.addArrangedSubview(paywallBenefitItem(icon: "⚡", text: "Faster workflow"))
+        benefitsRow.addArrangedSubview(paywallBenefitItem(icon: "🛟", text: "Priority support"))
+        contentStack.addArrangedSubview(benefitsRow)
+        benefitsRow.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
+
+        let plansRow = NSStackView()
+        plansRow.translatesAutoresizingMaskIntoConstraints = false
+        plansRow.orientation = .horizontal
+        plansRow.spacing = 10
+        plansRow.distribution = .fillEqually
+        plansRow.alignment = .centerY
 
         let weeklyCard = paywallPlanCard(
             title: "Weekly",
             price: "PKR 1,100.00",
-            badge: "Basic Deal",
+            badge: "Basic",
             badgeColor: NSColor(calibratedRed: 1.0, green: 0.60, blue: 0.20, alpha: 1),
             subtitle: nil,
             plan: .weekly,
             strikePrice: nil
         )
-        contentStack.addArrangedSubview(weeklyCard)
-
         let monthlyCard = paywallPlanCard(
             title: "Monthly",
             price: "PKR 2,500.00",
-            badge: "Free Trial",
+            badge: "Popular",
             badgeColor: NSColor(calibratedRed: 0.19, green: 0.82, blue: 0.39, alpha: 1),
             subtitle: "625.00/week",
             plan: .monthly,
             strikePrice: nil
         )
-        contentStack.addArrangedSubview(monthlyCard)
-
         let yearlyCard = paywallPlanCard(
             title: "Yearly",
             price: "PKR 9,900.00",
-            badge: "Best Deal",
+            badge: "Best Value",
             badgeColor: NSColor(calibratedRed: 1.0, green: 0.60, blue: 0.20, alpha: 1),
             subtitle: "190.38/week",
             plan: .yearly,
             strikePrice: nil
         )
-        contentStack.addArrangedSubview(yearlyCard)
-
         let lifetimeCard = paywallPlanCard(
             title: "Lifetime",
             price: "PKR 14,900.00",
@@ -2707,9 +2760,13 @@ private extension ViewController {
             plan: .lifetime,
             strikePrice: "PKR 29,800.00"
         )
-        contentStack.addArrangedSubview(lifetimeCard)
+        plansRow.addArrangedSubview(weeklyCard)
+        plansRow.addArrangedSubview(monthlyCard)
+        plansRow.addArrangedSubview(yearlyCard)
+        plansRow.addArrangedSubview(lifetimeCard)
+        contentStack.addArrangedSubview(plansRow)
+        plansRow.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
         updatePaywallPlanSelection()
-        contentStack.setCustomSpacing(20, after: lifetimeCard)
 
         let offer = textLabel(paywallOfferText(for: selectedPremiumPlan), font: NSFont.systemFont(ofSize: 13, weight: .semibold), color: palette.textPrimary)
         offer.alignment = .center
@@ -2717,14 +2774,13 @@ private extension ViewController {
         let offerWrap = NSView()
         offerWrap.translatesAutoresizingMaskIntoConstraints = false
         offerWrap.addSubview(offer)
+        contentStack.addArrangedSubview(offerWrap)
+        offerWrap.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
         NSLayoutConstraint.activate([
-            offerWrap.widthAnchor.constraint(greaterThanOrEqualToConstant: paywallContentWidth),
             offer.centerXAnchor.constraint(equalTo: offerWrap.centerXAnchor),
-            offer.topAnchor.constraint(equalTo: offerWrap.topAnchor, constant: 6),
+            offer.topAnchor.constraint(equalTo: offerWrap.topAnchor, constant: 4),
             offer.bottomAnchor.constraint(equalTo: offerWrap.bottomAnchor, constant: -2)
         ])
-        contentStack.addArrangedSubview(offerWrap)
-        contentStack.setCustomSpacing(18, after: offerWrap)
 
         let continueButton = HoverButton(title: "", target: self, action: #selector(paywallContinueClicked(_:)))
         continueButton.translatesAutoresizingMaskIntoConstraints = false
@@ -2734,7 +2790,6 @@ private extension ViewController {
         continueButton.layer?.cornerRadius = 14
         continueButton.layer?.backgroundColor = palette.primaryBlue.cgColor
         continueButton.heightAnchor.constraint(equalToConstant: 44).isActive = true
-        continueButton.widthAnchor.constraint(greaterThanOrEqualToConstant: paywallContentWidth).isActive = true
         styleSurface(continueButton, borderColor: palette.primaryBlueBorder, borderWidth: 1, shadow: true)
         let continueLabel = textLabel("Continue", font: NSFont.systemFont(ofSize: 16, weight: .bold), color: .white)
         continueButton.addSubview(continueLabel)
@@ -2752,30 +2807,30 @@ private extension ViewController {
         paywallContinueButton = continueButton
         paywallContinueLabel = continueLabel
         contentStack.addArrangedSubview(continueButton)
-        contentStack.setCustomSpacing(16, after: continueButton)
+        continueButton.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
 
         let secure = textLabel("Secured by Apple. Cancel anytime.", font: NSFont.systemFont(ofSize: 12, weight: .semibold), color: palette.textSecondary)
         secure.alignment = .center
         let secureWrap = NSView()
         secureWrap.translatesAutoresizingMaskIntoConstraints = false
         secureWrap.addSubview(secure)
+        contentStack.addArrangedSubview(secureWrap)
+        secureWrap.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
         NSLayoutConstraint.activate([
-            secureWrap.widthAnchor.constraint(greaterThanOrEqualToConstant: paywallContentWidth),
             secure.centerXAnchor.constraint(equalTo: secureWrap.centerXAnchor),
-            secure.topAnchor.constraint(equalTo: secureWrap.topAnchor, constant: 4),
-            secure.bottomAnchor.constraint(equalTo: secureWrap.bottomAnchor, constant: -8)
+            secure.topAnchor.constraint(equalTo: secureWrap.topAnchor, constant: 2),
+            secure.bottomAnchor.constraint(equalTo: secureWrap.bottomAnchor, constant: -4)
         ])
-        contentStack.addArrangedSubview(secureWrap)
-        contentStack.setCustomSpacing(16, after: secureWrap)
 
         let footer = paywallFooterLinks()
         contentStack.addArrangedSubview(footer)
+        footer.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
 
         NSLayoutConstraint.activate([
-            contentStack.leadingAnchor.constraint(equalTo: panel.leadingAnchor, constant: 18),
-            contentStack.trailingAnchor.constraint(equalTo: panel.trailingAnchor, constant: -18),
-            contentStack.topAnchor.constraint(equalTo: panel.topAnchor, constant: 16),
-            contentStack.bottomAnchor.constraint(lessThanOrEqualTo: panel.bottomAnchor, constant: -12)
+            contentStack.centerXAnchor.constraint(equalTo: panel.centerXAnchor),
+            contentStack.widthAnchor.constraint(equalToConstant: paywallLayoutWidth),
+            contentStack.topAnchor.constraint(equalTo: panel.topAnchor, constant: 20),
+            contentStack.bottomAnchor.constraint(lessThanOrEqualTo: panel.bottomAnchor, constant: -16)
         ])
 
         refreshPaywallStoreUI()
@@ -2797,8 +2852,8 @@ private extension ViewController {
         wrapper.bezelStyle = .regularSquare
         wrapper.wantsLayer = true
         wrapper.layer?.backgroundColor = NSColor.clear.cgColor
-        wrapper.widthAnchor.constraint(greaterThanOrEqualToConstant: paywallContentWidth).isActive = true
-        wrapper.heightAnchor.constraint(equalToConstant: 94).isActive = true
+        wrapper.widthAnchor.constraint(greaterThanOrEqualToConstant: 160).isActive = true
+        wrapper.heightAnchor.constraint(equalToConstant: 162).isActive = true
         wrapper.tag = plan.rawValue
 
         let card = HoverTrackingView()
@@ -2806,7 +2861,7 @@ private extension ViewController {
         card.wantsLayer = true
         card.layer?.cornerRadius = 16
         card.layer?.backgroundColor = palette.sectionCard.cgColor
-        card.heightAnchor.constraint(equalToConstant: 82).isActive = true
+        card.heightAnchor.constraint(equalToConstant: 150).isActive = true
         wrapper.addSubview(card)
         NSLayoutConstraint.activate([
             card.leadingAnchor.constraint(equalTo: wrapper.leadingAnchor),
@@ -2842,14 +2897,15 @@ private extension ViewController {
         paywallPriceLabels[plan] = priceLabel
 
         NSLayoutConstraint.activate([
-            badgeWrap.centerXAnchor.constraint(equalTo: card.centerXAnchor),
+            badgeWrap.leadingAnchor.constraint(equalTo: card.leadingAnchor, constant: 12),
             badgeWrap.centerYAnchor.constraint(equalTo: card.topAnchor),
 
-            titleLabel.leadingAnchor.constraint(equalTo: card.leadingAnchor, constant: 16),
+            titleLabel.leadingAnchor.constraint(equalTo: card.leadingAnchor, constant: 12),
             titleLabel.topAnchor.constraint(equalTo: card.topAnchor, constant: 34),
 
-            priceLabel.trailingAnchor.constraint(equalTo: card.trailingAnchor, constant: -16),
-            priceLabel.topAnchor.constraint(equalTo: card.topAnchor, constant: 32)
+            priceLabel.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor),
+            priceLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 10),
+            priceLabel.trailingAnchor.constraint(lessThanOrEqualTo: card.trailingAnchor, constant: -12)
         ])
 
         if let subtitle {
@@ -2857,8 +2913,9 @@ private extension ViewController {
             card.addSubview(sub)
             paywallSubtitleLabels[plan] = sub
             NSLayoutConstraint.activate([
-                sub.trailingAnchor.constraint(equalTo: priceLabel.trailingAnchor),
-                sub.topAnchor.constraint(equalTo: priceLabel.bottomAnchor, constant: 0)
+                sub.leadingAnchor.constraint(equalTo: priceLabel.leadingAnchor),
+                sub.topAnchor.constraint(equalTo: priceLabel.bottomAnchor, constant: 2),
+                sub.trailingAnchor.constraint(lessThanOrEqualTo: card.trailingAnchor, constant: -12)
             ])
         }
 
@@ -2866,8 +2923,9 @@ private extension ViewController {
             let strike = textLabel(strikePrice, font: NSFont.systemFont(ofSize: 12, weight: .medium), color: NSColor.systemRed)
             card.addSubview(strike)
             NSLayoutConstraint.activate([
-                strike.trailingAnchor.constraint(equalTo: priceLabel.trailingAnchor),
-                strike.topAnchor.constraint(equalTo: priceLabel.bottomAnchor, constant: 4)
+                strike.leadingAnchor.constraint(equalTo: priceLabel.leadingAnchor),
+                strike.topAnchor.constraint(equalTo: priceLabel.bottomAnchor, constant: 4),
+                strike.trailingAnchor.constraint(lessThanOrEqualTo: card.trailingAnchor, constant: -12)
             ])
         }
 
@@ -2885,7 +2943,6 @@ private extension ViewController {
         let wrap = NSView()
         wrap.translatesAutoresizingMaskIntoConstraints = false
         wrap.heightAnchor.constraint(equalToConstant: 34).isActive = true
-        wrap.widthAnchor.constraint(greaterThanOrEqualToConstant: paywallContentWidth).isActive = true
 
         let row = NSStackView()
         row.translatesAutoresizingMaskIntoConstraints = false
@@ -2967,7 +3024,7 @@ private extension ViewController {
         card.wantsLayer = true
         card.layer?.cornerRadius = 10
         card.layer?.backgroundColor = palette.inputBackground.cgColor
-        card.heightAnchor.constraint(equalToConstant: 36).isActive = true
+        card.heightAnchor.constraint(equalToConstant: 44).isActive = true
         styleSurface(card, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
 
         let iconWrap = roundedContainer(cornerRadius: 8, color: palette.inputBackground)