v0.6.12: billing, blogs UI

[waleedlatif1]

• fix(ui): polish subscription billing settings (fix(ui): polish subscription billing settings #3781)
• fix(blog): restore unoptimized prop on blog cover images (fix(blog): restore unoptimized prop on blog cover images #3782)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 26, 2026 7:06pm

[cursor]

PR Summary

Medium Risk
Moderate risk: changes touch purchase-credits modal state management and billing settings UI; mistakes could cause stuck modals or confusing purchase UX, but no backend or auth logic changes are included.

Overview
Restores unoptimized rendering for blog cover/OG images across the post page, author page, and post grid to avoid Next.js image optimization behavior.

Polishes subscription billing settings UI and interactions: improves plan card layout/spacing, simplifies the billing details section styling, and hardens the “Add Credits” modal lifecycle by generating a fresh requestId on open, preventing close while a purchase is pending, and safely auto-closing after success with timeout cleanup.

^{Written by Cursor Bugbot for commit c5fe925. Configure here.}

[greptile-apps]

Greptile Summary

This PR delivers two focused polish fixes: restoring the unoptimized prop across all blog Image components (likely broken by an earlier optimization pass that caused rendering issues with externally-hosted images), and a thorough UI/UX cleanup of the subscription billing settings page.

Key changes:

• Blog image fix ([slug]/page.tsx, authors/[id]/page.tsx, post-grid.tsx): Re-adds unoptimized to every blog Image that lost it, ensuring external cover images render correctly without being proxied through Next.js image optimization.
• Credit balance modal (credit-balance.tsx): Replaces an ad-hoc setTimeout/setIsOpen pattern with a proper lifecycle — useRef-tracked timeout, a useEffect cleanup to prevent state updates after unmount, a purchase-pending guard in handleOpenChange, and named helpers (openModal, closeModal, resetModalState) for clarity.
• Subscription billing section (subscription.tsx): Migrates per-row border-t pt-[16px] separators to a parent gap-[16px] container; adds min-h-[44px]/min-h-[60px] guards and shrink-0 whitespace-nowrap to plan card price to prevent wrapping; removes stale size='sm' from the Invoices button; adds explicit h-[32px] to CTA buttons for consistent height.

Confidence Score: 5/5

Safe to merge — changes are targeted UI/UX fixes with no data-path or API logic risk.

All five files contain straightforward, well-scoped changes. The blog fixes are a one-prop restore. The credit-balance refactor follows React best practices (ref-tracked timeout, useEffect cleanup, pending guard) and is functionally equivalent to the old path while being more robust. The subscription styling changes are purely cosmetic. No new API calls, state mutations, or branching logic are introduced.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/(landing)/blog/[slug]/page.tsx	Restores unoptimized prop on two Image components (hero cover and related-post thumbnails) to fix rendering issues from external image URLs.
apps/sim/app/(landing)/blog/authors/[id]/page.tsx	Restores unoptimized prop on post-card Image component in the author page, consistent with changes to the other blog pages.
apps/sim/app/(landing)/blog/post-grid.tsx	Restores unoptimized prop on the PostGrid Image component, completing the unoptimized prop restore across all blog surfaces.
apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx	Introduces proper modal lifecycle management — useRef timeout tracking, cleanup on unmount, purchase-pending guard on close, and corrected state reset ordering. No issues found.
apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx	UI polish on CreditPlanCard (min heights, shrink-0, whitespace-nowrap, rounded-t) and billing details section (parent gap replaces per-row border-t/pt, size='sm' removed from Invoices button).

Sequence Diagram

sequenceDiagram
    participant User
    participant Modal
    participant purchaseCredits
    participant closeTimeoutRef

    User->>Modal: Click "Add Credits" (openModal)
    Modal->>Modal: clearCloseTimeout()
    Modal->>Modal: resetModalState()
    Modal->>Modal: setRequestId(uuid) / setIsOpen(true)

    User->>Modal: Enter amount & click Purchase
    Modal->>purchaseCredits: mutate({ amount, requestId })

    alt Purchase pending
        User->>Modal: Try to close (ESC / backdrop)
        Modal->>Modal: handleOpenChange(false) — isPending guard blocks close
    end

    purchaseCredits-->>Modal: onSuccess
    Modal->>Modal: onPurchaseComplete?.()
    Modal->>closeTimeoutRef: setTimeout(closeModal, 1500)

    alt User closes manually before timeout
        User->>Modal: Close action (isPending = false)
        Modal->>closeTimeoutRef: clearCloseTimeout()
        Modal->>Modal: closeModal() → resetModalState()
    else Timeout fires
        closeTimeoutRef-->>Modal: closeModal()
        Modal->>Modal: setIsOpen(false) / resetModalState()
    end

    Note over Modal: useEffect cleanup clears timeout on unmount

Loading

_{Reviews (1): Last reviewed commit: "fix(blog): restore unoptimized prop on b..." | Re-trigger Greptile}