Modernize and streamline status bar visual appearance

[Justin Grote (JustinGrote)]

This Pull Request optimizes the status bar to use icons rather than text, moving that status to the tooltip, and provides animations when starting and stopping.

This provides a much cleaner experience for the average user and no longer takes up half of the status bar to do so.

Recording.2026-01-16.135029.mp4

[Justin Grote (JustinGrote)]

I also think that not everything logged to info should have a popup, it is very distracting, but that will be in another PR.

[Wei Wei (blueww)]

xiaonlimsft (@XiaoningLiu) , EmmaZhu-MSFT (@EmmaZhu) How do you think about this change?

Justin Grote (@JustinGrote) , I am l little worry about customer can't know what's the icon means, and need to check each icon to find the one he/she want.

[Justin Grote (JustinGrote)]

Wei Wei (@blueww) I'm happy to add the words "Blob", "Queue", "Table" next to the icons, however if you hover over any of the icons it says exactly what it is for. I can add "Azurite Blob Storage Emulator" or something more specific for the hover if you would prefer.

Please note other icons like github, alert, etc. all do it with just the icon and users seem to be just fine with it :)

[Akanksha Jain (jainakanksha-msft)]

Justin Grote (@JustinGrote) , could you please refresh your PR with main, and address the review comments if any to move this PR forward.

[Copilot]

Pull request overview

This pull request updates the VS Code extension’s status bar presentation to use codicon-based icons instead of verbose text, moving detailed state into tooltips and adding animated indicators during transitions to reduce status bar clutter.

Changes:

• Replaced status bar text labels with service-specific codicons and moved detailed status into tooltips.
• Added spinning icon animation for starting/closing/cleaning states and centralized “offline” initialization behavior.
• Documented the UI change in ChangeLog.md.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/common/VSCStatusBarItem.ts	Switches to icon-only status bar items, adds animated transition states, and updates tooltip text/state styling.
ChangeLog.md	Adds an entry describing the modernized status bar icon update.

Suppressed comments (2)

src/common/VSCStatusBarItem.ts:77

• ThemeColor("ports.iconRunningProcessForeground") does not appear to be a documented VS Code theme color ID, so the running-state color may not apply depending on the user’s theme. Consider using a built-in status bar color token instead.

    const server = serverManager.getServer()!;
    this.statusBarItem.text = this.icon;
    this.statusBarItem.color = new ThemeColor("ports.iconRunningProcessForeground");
    this.statusBarItem.command = serverManager.getCloseCommand();
    this.statusBarItem.tooltip = `${serverManager.name} - Running on ${server.getHttpServerAddress()}\nClick to close`;

src/common/VSCStatusBarItem.ts:85

• onClean() doesn’t reset backgroundColor/color, so if the item was previously in the running state the cleaning spinner can inherit the running color and look like “running” while cleaning. onStart()/onClose() clear these fields, so onClean() should do the same for a consistent UI state.

    this.statusBarItem.text = "$(sync~spin)";
    this.statusBarItem.command = undefined;
    this.statusBarItem.tooltip = `${serverManager.name} - Cleaning`;
    this.statusBarItem.show();

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.