improvement: usage-indicator UI

[emir-karabeg]

Summary

Improve usage indicator UI

Type of Change

• New feature

Testing

Solo testing.

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 12, 2025 10:05pm

[greptile-apps]

Greptile Overview

Greptile Summary

Redesigned the usage indicator with a modern pill-based UI that dynamically adapts to sidebar width (6-8 pills based on available space). The new design replaces the previous progress bar with animated indicator pills, showing usage with color-coded feedback (blue for normal, red when at limit).

• Removed gradient badge styling in favor of cleaner text-based display
• Added responsive pill count calculation using useMemo based on sidebar width
• Pills are dynamically filled based on usage percentage with color feedback
• Updated skeleton loading state to match new pill design
• Moved layout/spacing styles from parent wrapper into component for better encapsulation
• Removed commented-out code in sidebar-new.tsx

Confidence Score: 4/5

• Safe to merge with minor style improvements recommended
• The changes are well-implemented with proper memoization and responsive design. One style guideline issue with inline hardcoded colors (should use CSS variables or Tailwind classes). The logic is sound, types are correct, and the component properly integrates with existing stores.
• usage-indicator.tsx has inline styles with hardcoded hex colors that should be replaced with CSS variables or Tailwind classes per style guidelines

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	Redesigned usage indicator with responsive pill-based UI that adapts to sidebar width, replacing progress bar with animated pills
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx	5/5	Removed wrapper div around UsageIndicator since the component now handles its own layout and spacing

Sequence Diagram

sequenceDiagram
    participant User
    participant Sidebar
    participant UsageIndicator
    participant SidebarStore
    participant SubscriptionStore

    User->>Sidebar: Resize sidebar
    Sidebar->>SidebarStore: setSidebarWidth(width)
    SidebarStore-->>UsageIndicator: sidebarWidth updated
    UsageIndicator->>UsageIndicator: Calculate pillCount (useMemo)
    UsageIndicator->>UsageIndicator: Re-render with new pill count

    User->>UsageIndicator: Component mounts
    UsageIndicator->>SubscriptionStore: loadData()
    SubscriptionStore-->>UsageIndicator: isLoading = true
    UsageIndicator->>UsageIndicator: Render skeleton with pillCount pills
    SubscriptionStore-->>UsageIndicator: usage data loaded
    UsageIndicator->>UsageIndicator: Calculate filledPillsCount
    UsageIndicator->>UsageIndicator: Render pills with colors

    User->>UsageIndicator: Click upgrade button
    UsageIndicator->>UsageIndicator: handleClick()
    UsageIndicator->>Window: dispatchEvent('open-settings')
    Window-->>User: Settings modal opens

Loading

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: hardcoded hex colors violate style guidelines - use CSS variables or Tailwind classes

Suggested change

	style={{
	backgroundColor: isFilled ? (isAlmostOut ? '#ef4444' : '#34B5FF') : '#414141',
	}}
	className={`h-[6px] flex-1 rounded-[2px] ${
	isFilled
	? isAlmostOut
	? 'bg-red-500'
	: 'bg-[var(--color-primary)]'
	: 'bg-[#414141]'
	}`}

Context Used: Context from dashboard - apps/sim/.cursorrules (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/usage-indicator/usage-indicator.tsx
Line: 168:170

Comment:
**style:** hardcoded hex colors violate style guidelines - use CSS variables or Tailwind classes

```suggestion
              className={`h-[6px] flex-1 rounded-[2px] ${
                isFilled
                  ? isAlmostOut
                    ? 'bg-red-500'
                    : 'bg-[var(--color-primary)]'
                  : 'bg-[#414141]'
              }`}
```

**Context Used:** Context from `dashboard` - apps/sim/.cursorrules ([source](https://app.greptile.com/review/custom-context?memory=867b3993-a968-40e2-b2e0-8ce533acea2e))

How can I resolve this? If you propose a fix, please make it concise.