Skip to content

Replace emoji indicators with custom tinted menubar icons#12

Open
kbsooo wants to merge 1 commit into
richhickson:mainfrom
kbsooo:feature/custom-menubar-icons
Open

Replace emoji indicators with custom tinted menubar icons#12
kbsooo wants to merge 1 commit into
richhickson:mainfrom
kbsooo:feature/custom-menubar-icons

Conversation

@kbsooo

@kbsooo kbsooo commented Mar 27, 2026

Copy link
Copy Markdown

Summary

  • Replace generic 🟢🟡🔴 emoji status indicators with custom PNG icons that are tinted green/yellow/red based on usage level
  • Two icon styles available: Spark (Claude logo) and Clawd (pixel art character), selectable via a segmented picker in the popover footer
  • Icons are Base64-embedded in source code for build-system independence (works with both Xcode and SPM)

Changes

  • New: ClaudeUsage/StatusIcon.swift — icon style enum, Base64 image data, tinting utilities (.sourceAtop for silhouette, .color blend for multi-color)
  • Modified: ClaudeUsageApp.swiftupdateStatusItem() uses button.image + button.title instead of emoji text
  • Modified: UsageManager.swift — added statusUtilization computed property
  • Modified: UsageView.swift — added Spark/Clawd icon picker in popover footer
  • New: icon.png, clawd.png — source icon assets

Screenshots

Spark (green) Clawd (green)
Uses Claude spark logo silhouette Uses Clawd pixel art character

Test plan

  • Build and run — verify colored icon + percentage appears in menubar
  • Toggle between Spark and Clawd in popover footer — icon updates immediately
  • Verify all three color states: green (<70%), yellow (70-89%), red (≥90%)
  • Verify loading (⏳) and error (❌) states display correctly
  • Test in both light and dark menubar appearance

🤖 Generated with Claude Code

Replace the generic 🟢🟡🔴 emoji status indicators with custom PNG icons
(Claude spark logo and Clawd pixel art character) that are tinted
green/yellow/red based on usage level. Icons are Base64-embedded in source
for build-system independence. Users can switch between Spark and Clawd
styles via a segmented picker in the popover footer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant