Improve desktop update button with status-based visuals

[zycck]

What Changed

Replace the generic dot indicator on the desktop update button with a color-coded rocket icon that reflects update state:

• Available — amber pulsing rocket, prompts download
• Downloading — sky-blue rocket with real-time SVG fill showing download progress
• Downloaded — emerald pulsing rocket, prompts install
• Error — rose pulsing rocket, retries the failed action

Extract all visual-state logic into a data-driven lookup table (VISUAL_BY_STATUS) in desktopUpdate.logic.ts — removes the inline ternary chain that was in Sidebar. Add RocketUpdateIcon to Icons.tsx with a fillPercent prop for the download progress overlay. Move the local formatRelativeTime out of Sidebar into the shared utils.ts with full range support (m → h → d → mo → y).

6 files changed, +238 / −57.

Why

The previous update indicator was a plain dot with animate-pulse that gave no visual feedback during download and used a hard-to-follow ternary chain for color selection. The rocket icon communicates action more clearly, the progress fill gives real-time download feedback, and the lookup table makes adding future states trivial.

UI Changes

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Medium Risk
Moderate UI/UX change in the sidebar update flow plus a shared formatRelativeTime behavior change, which could affect multiple screens’ timestamps and updater button interactions but not security-critical logic.

Overview
Replaces the sidebar desktop update indicator with a new RocketUpdateIcon that reflects updater status via color/pulse and shows download progress via an SVG fill overlay.

Moves update-button visual styling into desktopUpdate.logic.ts via resolveDesktopUpdateButtonVisualState (data-driven status→classes mapping) and updates tests accordingly, removing the old inline styling/error-highlight helper.

Adds a new pulse-soft animation in index.css and centralizes formatRelativeTime into utils.ts with broader/safer formatting (including yesterday, months, years).

^{Written by Cursor Bugbot for commit dca7c67. This will update automatically on new commits. Configure here.}

Note

Improve desktop update button with status-based visuals and download progress

• Adds a new RocketUpdateIcon SVG component in Icons.tsx that renders a rocket with an optional bottom-to-top fill overlay driven by fillPercent (0–100) to visualize download progress.
• Adds resolveDesktopUpdateButtonVisualState in desktopUpdate.logic.ts that maps updater status (available, downloading, downloaded, error) to pulse, color, and hover classes; replaces the removed shouldHighlightDesktopUpdateError.
• Updates the update button in Sidebar.tsx to use RocketUpdateIcon with download progress fill and status-derived visual classes.
• Adds a pulse-soft CSS animation in index.css and moves relative time formatting to a shared formatRelativeTime utility in utils.ts.
• Behavioral Change: tooltip text is now empty (instead of 'Update available') when desktopUpdateState is null; alert action button renders only for download or install actions.

^{Macroscope summarized dca7c67.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c103a9aa-f01e-4e6f-943c-d962d49decb4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}