fix(usage-indicator): conditional rendering, upgrade, and ui/ux

[emir-karabeg]

Summary

Fix rendering bug.

Type of Change

• Bug fix
• New feature

Testing

Solo.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 15, 2025 5:13am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes a rendering bug and improves the usage indicator component's UX. The key changes are:

• Fixed environment variable check: Restored proper conditional rendering of the UsageIndicator based on NEXT_PUBLIC_BILLING_ENABLED instead of hardcoded true
• Improved animation behavior: Wave animation now only runs for free plan users and stops at the end instead of wrapping infinitely
• Enhanced upgrade button logic: Upgrade button now shows for users at 80%+ usage (not just free/blocked), while excluding enterprise users
• Better documentation: Added comprehensive TSDoc comments explaining constants, props, and component behavior

The changes align well with the codebase patterns - proper use of TypeScript, TSDoc comments, logger usage, and React best practices.

Confidence Score: 4/5

• This PR is safe to merge with minimal risk - it fixes a configuration bug and improves UX without introducing breaking changes
• The changes are well-structured and follow established patterns. The environment variable fix is critical and correct. The animation logic improvements prevent infinite loops and target the right user segment. Minor concern: the expanded upgrade button criteria (80%+ usage) is a product decision that should be validated with the team.
• No files require special attention - both changes are straightforward improvements

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/usage-indicator/usage-indicator.tsx	4/5	Improved documentation, fixed animation logic to prevent wrapping, added condition to only animate for free plan users, and expanded upgrade button visibility criteria
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx	5/5	Restored proper environment variable check for billing feature flag, replacing hardcoded true with isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))

Sequence Diagram

sequenceDiagram
    participant User
    participant SidebarNew
    participant UsageIndicator
    participant SubscriptionAPI
    participant EnvConfig

    User->>SidebarNew: Loads sidebar
    SidebarNew->>EnvConfig: Check NEXT_PUBLIC_BILLING_ENABLED
    EnvConfig-->>SidebarNew: Returns flag value
    
    alt Billing Enabled
        SidebarNew->>UsageIndicator: Render UsageIndicator
        UsageIndicator->>SubscriptionAPI: useSubscriptionData()
        SubscriptionAPI-->>UsageIndicator: Returns subscription data
        
        UsageIndicator->>UsageIndicator: Calculate progressPercentage
        UsageIndicator->>UsageIndicator: Determine showUpgradeButton<br/>(free || blocked || >=80% && !enterprise)
        UsageIndicator->>UsageIndicator: Calculate filledPillsCount
        
        User->>UsageIndicator: Hovers over indicator
        UsageIndicator->>UsageIndicator: setIsHovered(true)
        
        alt Is Free Plan
            UsageIndicator->>UsageIndicator: Start wave animation
            loop Every 30ms
                UsageIndicator->>UsageIndicator: Update wavePosition
                UsageIndicator->>UsageIndicator: Render gradient on pills
            end
        else Not Free Plan
            UsageIndicator->>UsageIndicator: Skip animation (free plan only)
        end
        
        User->>UsageIndicator: Stops hovering
        UsageIndicator->>UsageIndicator: setIsHovered(false)
        UsageIndicator->>UsageIndicator: Clear wave animation
        
        alt Show Upgrade Button
            User->>UsageIndicator: Clicks upgrade button
            UsageIndicator->>UsageIndicator: Dispatch 'open-settings' event
            UsageIndicator->>SidebarNew: Open settings modal (subscription tab)
        end
    else Billing Disabled
        SidebarNew->>SidebarNew: Skip UsageIndicator rendering
    end

Loading

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}