Port upstream 0.59.0: re-land stranded tray pace colors (#493)

apps/desktop-tauri/src-tauri/src/commands/bridge.rs

@@ -664,6 +664,7 @@ pub struct SettingsSnapshot {
     switcher_shows_icons: bool,
     menu_bar_shows_highest_usage: bool,
     menu_bar_shows_percent: bool,
+    menu_bar_color_pace: bool,
     show_as_used: bool,
     show_all_token_accounts_in_menu: bool,
     enable_animations: bool,
@@ -786,6 +787,7 @@ impl From<Settings> for SettingsSnapshot {
             switcher_shows_icons: settings.switcher_shows_icons,
             menu_bar_shows_highest_usage: settings.menu_bar_shows_highest_usage,
             menu_bar_shows_percent: settings.menu_bar_shows_percent,
+            menu_bar_color_pace: settings.menu_bar_color_pace,
             show_as_used: settings.show_as_used,
             show_all_token_accounts_in_menu: settings.show_all_token_accounts_in_menu,
             enable_animations: settings.enable_animations,

apps/desktop-tauri/src-tauri/src/commands/settings.rs

@@ -29,6 +29,7 @@ pub struct SettingsUpdate {
     pub switcher_shows_icons: Option<bool>,
     pub menu_bar_shows_highest_usage: Option<bool>,
     pub menu_bar_shows_percent: Option<bool>,
+    pub menu_bar_color_pace: Option<bool>,
     pub show_as_used: Option<bool>,
     pub show_all_token_accounts_in_menu: Option<bool>,
     pub enable_animations: Option<bool>,
@@ -124,6 +125,7 @@ impl SettingsUpdate {
             || self.switcher_shows_icons.is_some()
             || self.menu_bar_shows_highest_usage.is_some()
             || self.menu_bar_shows_percent.is_some()
+            || self.menu_bar_color_pace.is_some()
             || self.show_as_used.is_some()
             || self.reset_time_relative.is_some()
             || self.menu_bar_display_mode.is_some()
@@ -258,6 +260,9 @@ impl SettingsUpdate {
         if let Some(v) = self.menu_bar_shows_percent {
             settings.menu_bar_shows_percent = v;
         }
+        if let Some(v) = self.menu_bar_color_pace {
+            settings.menu_bar_color_pace = v;
+        }
         if let Some(v) = self.show_all_token_accounts_in_menu {
             settings.show_all_token_accounts_in_menu = v;
         }
@@ -700,6 +705,33 @@ mod tests {
             }
             .refreshes_tray_presentation()
         );
+        assert!(
+            SettingsUpdate {
+                menu_bar_color_pace: Some(true),
+                ..Default::default()
+            }
+            .refreshes_tray_presentation()
+        );
+    }
+
+    #[test]
+    fn apply_display_settings_updates_tray_pace_color() {
+        let mut settings = Settings::default();
+        assert!(!settings.menu_bar_color_pace);
+
+        SettingsUpdate {
+            menu_bar_color_pace: Some(true),
+            ..Default::default()
+        }
+        .apply_display_settings(&mut settings);
+        assert!(settings.menu_bar_color_pace);
+
+        SettingsUpdate {
+            menu_bar_color_pace: Some(false),
+            ..Default::default()
+        }
+        .apply_display_settings(&mut settings);
+        assert!(!settings.menu_bar_color_pace);
     }
 
     #[test]

apps/desktop-tauri/src-tauri/src/tray_bridge.rs

@@ -12,7 +12,9 @@ use tauri::menu::{CheckMenuItemBuilder, IsMenuItem, Menu, MenuItem, PredefinedMe
 use tauri::tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent};
 use tauri::{AppHandle, Manager};
 
-use codexbar::tray::{render_bar_icon_rgba, render_percent_icon_rgba};
+use codexbar::tray::{
+    TrayPaceColor, render_bar_icon_rgba_with_pace, render_percent_icon_rgba_with_pace,
+};
 
 use crate::shell;
 use crate::state::{AppState, TrayAnchor};
@@ -419,8 +421,10 @@ pub fn update_tray_icon_and_tooltip(
             None,
         ),
     };
+    let pace = picked.and_then(|snapshot| snapshot.pace.as_ref());
 
-    let (rgba, w, h) = render_tray_icon_for_settings(&settings, session_pct, weekly_pct, all_error);
+    let (rgba, w, h) =
+        render_tray_icon_for_settings(&settings, session_pct, weekly_pct, all_error, pace);
     let icon = Image::new_owned(rgba, w, h);
     let _ = tray.set_icon(Some(icon));
 
@@ -557,11 +561,17 @@ fn render_tray_icon_for_settings(
     session_pct: f64,
     weekly_pct: Option<f64>,
     all_error: bool,
+    pace: Option<&crate::commands::PaceSnapshot>,
 ) -> (Vec<u8>, u32, u32) {
+    let pace_color = if settings.menu_bar_color_pace {
+        pace.and_then(|snapshot| TrayPaceColor::from_stage(&snapshot.stage))
+    } else {
+        None
+    };
     if settings.menu_bar_shows_percent {
-        render_percent_icon_rgba(session_pct, all_error)
+        render_percent_icon_rgba_with_pace(session_pct, all_error, pace_color)
     } else {
-        render_bar_icon_rgba(session_pct, weekly_pct, all_error)
+        render_bar_icon_rgba_with_pace(session_pct, weekly_pct, all_error, pace_color)
     }
 }
 
@@ -1081,14 +1091,61 @@ mod tests {
         };
 
         let (bar, bar_w, bar_h) =
-            render_tray_icon_for_settings(&bar_settings, 72.0, Some(40.0), false);
+            render_tray_icon_for_settings(&bar_settings, 72.0, Some(40.0), false, None);
         let (percent, pct_w, pct_h) =
-            render_tray_icon_for_settings(&percent_settings, 72.0, Some(40.0), false);
+            render_tray_icon_for_settings(&percent_settings, 72.0, Some(40.0), false, None);
 
         assert_eq!((bar_w, bar_h), (pct_w, pct_h));
         assert_ne!(bar, percent);
     }
 
+    #[test]
+    fn tray_pace_color_is_opt_in_and_follows_canonical_stage() {
+        let pace_behind = crate::commands::PaceSnapshot {
+            stage: "behind".to_string(),
+            delta_percent: -8.0,
+            will_last_to_reset: true,
+            eta_seconds: None,
+            expected_used_percent: 40.0,
+            actual_used_percent: 32.0,
+        };
+        let pace_ahead = crate::commands::PaceSnapshot {
+            delta_percent: 8.0,
+            stage: "ahead".to_string(),
+            ..pace_behind.clone()
+        };
+        let pace_on_track = crate::commands::PaceSnapshot {
+            delta_percent: 1.0,
+            stage: "on_track".to_string(),
+            ..pace_behind.clone()
+        };
+        let default_settings = Settings::default();
+        let colored_settings = Settings {
+            menu_bar_color_pace: true,
+            ..Settings::default()
+        };
+
+        let normal = render_tray_icon_for_settings(&default_settings, 50.0, None, false, None);
+        let disabled =
+            render_tray_icon_for_settings(&default_settings, 50.0, None, false, Some(&pace_behind));
+        let behind =
+            render_tray_icon_for_settings(&colored_settings, 50.0, None, false, Some(&pace_behind));
+        let ahead =
+            render_tray_icon_for_settings(&colored_settings, 50.0, None, false, Some(&pace_ahead));
+        let on_track = render_tray_icon_for_settings(
+            &colored_settings,
+            50.0,
+            None,
+            false,
+            Some(&pace_on_track),
+        );
+
+        assert_eq!(normal, disabled);
+        assert_eq!(normal, on_track);
+        assert_ne!(normal, behind);
+        assert_ne!(behind, ahead);
+    }
+
     #[test]
     fn tooltip_uses_compact_status_labels() {
         let mut claude = fake_snapshot("claude", "Claude", 13.0);

apps/desktop-tauri/src/App.test.tsx

@@ -89,6 +89,7 @@ function settings(overrides: Partial<SettingsSnapshot> = {}): SettingsSnapshot {
     switcherShowsIcons: true,
     menuBarShowsHighestUsage: false,
     menuBarShowsPercent: false,
+    menuBarColorPace: false,
     showAsUsed: true,
     showAllTokenAccountsInMenu: false,
     enableAnimations: true,

apps/desktop-tauri/src/floatbar/FloatBar.test.tsx

@@ -153,6 +153,7 @@ function settings(overrides: Partial<SettingsSnapshot> = {}): SettingsSnapshot {
     switcherShowsIcons: true,
     menuBarShowsHighestUsage: false,
     menuBarShowsPercent: false,
+    menuBarColorPace: false,
     showAsUsed: true,
     showAllTokenAccountsInMenu: false,
     enableAnimations: true,

apps/desktop-tauri/src/i18n/keys.ts

@@ -546,6 +546,8 @@ export const ALL_LOCALE_KEYS = [
   "PreferHighestUsageHelper",
   "ShowPercentInTray",
   "ShowPercentInTrayHelper",
+  "ColorPaceInTray",
+  "ColorPaceInTrayHelper",
   "DisplayModeLabel",
   "DisplayModeHelper",
   "DisplayModeDetailed",

apps/desktop-tauri/src/surfaces/TrayPanel.test.tsx

@@ -145,6 +145,7 @@ function settings(overrides: Partial<SettingsSnapshot> = {}): SettingsSnapshot {
     switcherShowsIcons: true,
     menuBarShowsHighestUsage: false,
     menuBarShowsPercent: false,
+    menuBarColorPace: false,
     showAsUsed: true,
     showAllTokenAccountsInMenu: false,
     enableAnimations: true,

apps/desktop-tauri/src/surfaces/settings/tabs/AboutTab.test.tsx

@@ -64,6 +64,7 @@ const settings: SettingsSnapshot = {
   switcherShowsIcons: true,
   menuBarShowsHighestUsage: true,
   menuBarShowsPercent: true,
+  menuBarColorPace: false,
   showAsUsed: false,
   showAllTokenAccountsInMenu: true,
   enableAnimations: true,

apps/desktop-tauri/src/surfaces/settings/tabs/AdvancedTab.test.tsx

@@ -33,6 +33,7 @@ const settings: SettingsSnapshot = {
   switcherShowsIcons: true,
   menuBarShowsHighestUsage: true,
   menuBarShowsPercent: true,
+  menuBarColorPace: false,
   showAsUsed: false,
   showAllTokenAccountsInMenu: true,
   enableAnimations: true,

apps/desktop-tauri/src/surfaces/settings/tabs/DisplayTab.test.tsx

@@ -19,6 +19,7 @@ const baseSettings = {
   switcherShowsIcons: false,
   menuBarShowsHighestUsage: false,
   menuBarShowsPercent: false,
+  menuBarColorPace: false,
   menuBarDisplayMode: "detailed",
   overviewLayout: "detailed",
   windowScalePercent: 100,
@@ -29,9 +30,17 @@ const baseSettings = {
   showPace: false,
 } as unknown as SettingsSnapshot;
 
-function renderTab(set: (patch: Record<string, unknown>) => void) {
+function renderTab(
+  set: (patch: Record<string, unknown>) => void,
+  mode: "menuBar" | "menu" = "menu",
+) {
   return render(
-    <DisplayTab settings={baseSettings} set={set as never} saving={false} />,
+    <DisplayTab
+      mode={mode}
+      settings={baseSettings}
+      set={set as never}
+      saving={false}
+    />,
   );
 }
 
@@ -83,4 +92,13 @@ describe("DisplayTab menu settings", () => {
 
     expect(set).toHaveBeenCalledWith({ trayPanelAlwaysOnTop: true });
   });
+
+  it("updates the tray pace color preference", () => {
+    const set = vi.fn();
+    renderTab(set, "menuBar");
+
+    fireEvent.click(screen.getByRole("checkbox", { name: "ColorPaceInTray" }));
+
+    expect(set).toHaveBeenCalledWith({ menuBarColorPace: true });
+  });
 });

apps/desktop-tauri/src/surfaces/settings/tabs/DisplayTab.tsx

@@ -79,6 +79,18 @@ export default function DisplayTab({
               onChange={(v) => set({ menuBarShowsPercent: v })}
             />
           </Field>
+          <Field
+            label={t("ColorPaceInTray")}
+            description={t("ColorPaceInTrayHelper")}
+            leading
+          >
+            <Toggle
+              checked={settings.menuBarColorPace ?? false}
+              ariaLabel={t("ColorPaceInTray")}
+              disabled={saving}
+              onChange={(v) => set({ menuBarColorPace: v })}
+            />
+          </Field>
           <Field
             label={t("DisplayModeLabel")}
             description={t("DisplayModeHelper")}

apps/desktop-tauri/src/surfaces/settings/tabs/GeneralTab.test.tsx

@@ -55,6 +55,7 @@ const settings: SettingsSnapshot = {
   switcherShowsIcons: true,
   menuBarShowsHighestUsage: true,
   menuBarShowsPercent: true,
+  menuBarColorPace: false,
   showAsUsed: false,
   showAllTokenAccountsInMenu: true,
   enableAnimations: true,

apps/desktop-tauri/src/types/bridge.test.ts

@@ -83,6 +83,7 @@ describe("Language type", () => {
       switcherShowsIcons: true,
       menuBarShowsHighestUsage: true,
       menuBarShowsPercent: true,
+      menuBarColorPace: false,
       showAsUsed: false,
       showAllTokenAccountsInMenu: true,
       enableAnimations: true,

apps/desktop-tauri/src/types/bridge.ts

@@ -193,6 +193,7 @@ export interface SettingsSnapshot {
   switcherShowsIcons: boolean;
   menuBarShowsHighestUsage: boolean;
   menuBarShowsPercent: boolean;
+  menuBarColorPace: boolean;
   showAsUsed: boolean;
   showAllTokenAccountsInMenu: boolean;
   enableAnimations: boolean;
@@ -302,6 +303,7 @@ export interface SettingsUpdate {
   switcherShowsIcons?: boolean;
   menuBarShowsHighestUsage?: boolean;
   menuBarShowsPercent?: boolean;
+  menuBarColorPace?: boolean;
   showAsUsed?: boolean;
   showAllTokenAccountsInMenu?: boolean;
   enableAnimations?: boolean;

rust/src/locale.rs

@@ -812,6 +812,8 @@ locale_keys! {
     PreferHighestUsageHelper,
     ShowPercentInTray,
     ShowPercentInTrayHelper,
+    ColorPaceInTray,
+    ColorPaceInTrayHelper,
     DisplayModeLabel,
     DisplayModeHelper,
     DisplayModeDetailed,

rust/src/locale/en-US.ftl

@@ -483,6 +483,8 @@ PreferHighestUsage = Prefer highest usage
 PreferHighestUsageHelper = Show the provider closest to its limit in the merged tray display.
 ShowPercentInTray = Show percent in tray
 ShowPercentInTrayHelper = Replace usage bar with provider branding + percentage text.
+ColorPaceInTray = Color tray usage by pace
+ColorPaceInTrayHelper = Color the Windows tray usage indicator green when behind pace and red when ahead.
 DisplayModeLabel = Display mode
 DisplayModeHelper = Level of detail shown in the menu bar label.
 DisplayModeDetailed = Detailed

rust/src/locale/es-MX.ftl

@@ -439,6 +439,8 @@ PreferHighestUsage = Preferir uso más alto
 PreferHighestUsageHelper = Mostrar el proveedor más cercano a su límite en la pantalla de bandeja combinada.
 ShowPercentInTray = Mostrar porcentaje en bandeja
 ShowPercentInTrayHelper = Reemplazar barra de uso con marca de proveedor + texto de porcentaje.
+ColorPaceInTray = Colorear el uso en la bandeja según el ritmo
+ColorPaceInTrayHelper = Colorea el indicador de uso de la bandeja de Windows en verde cuando vas por debajo del ritmo y en rojo cuando vas por encima.
 DisplayModeLabel = Modo de visualización
 DisplayModeHelper = Nivel de detalle mostrado en la etiqueta de barra de menú.
 DisplayModeDetailed = Detallado

rust/src/locale/ja-JP.ftl

@@ -421,6 +421,8 @@ PreferHighestUsage = 最も使用量が多いものを優先
 PreferHighestUsageHelper = 統合トレイ表示で上限に最も近いプロバイダーを表示。
 ShowPercentInTray = トレイに割合を表示
 ShowPercentInTrayHelper = 使用量バーをプロバイダーのブランド + パーセント表示に置き換え。
+ColorPaceInTray = トレイの使用量をペースで色分け
+ColorPaceInTrayHelper = ペースより遅いときは緑、速いときは赤で Windows トレイの使用量インジケーターを表示します。
 DisplayModeLabel = 表示モード
 DisplayModeHelper = メニューバーラベルに表示する詳細度。
 DisplayModeDetailed = 詳細

rust/src/locale/ko-KR.ftl

@@ -426,6 +426,8 @@ PreferHighestUsage = 가장 높은 사용량 우선
 PreferHighestUsageHelper = 병합된 트레이 아이콘에 사용 한도에 가장 가까운 제공업체를 표시합니다.
 ShowPercentInTray = 트레이에 백분율 표시
 ShowPercentInTrayHelper = 사용량 표시줄을 제공업체 브랜드 및 백분율 텍스트로 대체합니다.
+ColorPaceInTray = 사용 속도에 따라 트레이 사용량 색상 표시
+ColorPaceInTrayHelper = 사용 속도보다 느리면 녹색, 빠르면 빨간색으로 Windows 트레이 사용량 표시기를 표시합니다.
 DisplayModeLabel = 디스플레이 모드
 DisplayModeHelper = 메뉴 바 라벨에 표시할 세부 정보 수준입니다.
 DisplayModeDetailed = 상세

rust/src/locale/ru-RU.ftl

@@ -405,6 +405,8 @@ PreferHighestUsage = Предпочитаю максимальное испол
 PreferHighestUsageHelper = Покажите провайдера, ближайшего к своему пределу, на объединенном лотке.
 ShowPercentInTray = Показывать проценты в трее
 ShowPercentInTrayHelper = Замените панель использования брендом провайдера + текстом в процентах.
+ColorPaceInTray = Окрашивать использование в трее по темпу
+ColorPaceInTrayHelper = Индикатор использования в трее Windows становится зелёным, когда вы отстаёте от темпа, и красным, когда опережаете его.
 DisplayModeLabel = Режим отображения
 DisplayModeHelper = Уровень детализации отображается в метке строки меню.
 DisplayModeDetailed = Подробный

rust/src/locale/tr-TR.ftl

@@ -442,6 +442,8 @@ PreferHighestUsage = En yüksek kullanımı tercih et
 PreferHighestUsageHelper = Birleşik tepsi görünümünde sınırına en yakın sağlayıcıyı göster.
 ShowPercentInTray = Tepside yüzdeyi göster
 ShowPercentInTrayHelper = Kullanım çubuğunu sağlayıcı markası ve yüzde metniyle değiştir.
+ColorPaceInTray = Tepsi kullanımını hıza göre renklendir
+ColorPaceInTrayHelper = Windows tepsi kullanım göstergesini hızın gerisindeyken yeşil, önündeyken kırmızı gösterir.
 DisplayModeLabel = Görünüm modu
 DisplayModeHelper = Menü çubuğu etiketinde gösterilen ayrıntı düzeyi.
 DisplayModeDetailed = Ayrıntılı

rust/src/locale/zh-CN.ftl

@@ -420,6 +420,8 @@ PreferHighestUsage = 优先显示最高用量
 PreferHighestUsageHelper = 在合并托盘显示中优先展示最接近限额的服务商。
 ShowPercentInTray = 在托盘中显示百分比
 ShowPercentInTrayHelper = 使用服务商标识与百分比文字替代用量条。
+ColorPaceInTray = 按进度为托盘用量着色
+ColorPaceInTrayHelper = 用量进度落后时，Windows 托盘用量指示显示为绿色；超前时显示为红色。
 DisplayModeLabel = 显示模式
 DisplayModeHelper = 菜单栏标签显示的详细程度。
 DisplayModeDetailed = 详细