From 220d01e820ec905610d1d857c2d442116b08308b Mon Sep 17 00:00:00 2001
From: connorshea <2977353+connorshea@users.noreply.github.com>
Date: Tue, 18 Nov 2025 11:51:45 +0000
Subject: [PATCH] feat(editor): Improve the status bar item for the VS Code
 extension by adding a tooltip. (#15819)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also do a bit of refactoring.

I found the stats bar item's behavior confusing initially, and I think adding a tooltip will be helpful to understanding what is meant by each state.

<img width="173" height="89" alt="Screenshot 2025-11-17 at 5 10 47 PM" src="https://github.com/user-attachments/assets/f9b7be37-336b-4311-a1a0-bef40643d0a9" />

<img width="159" height="95" alt="Screenshot 2025-11-17 at 5 11 06 PM" src="https://github.com/user-attachments/assets/fe375a78-b564-4d68-ae23-27bce7b4d2e5" />

<img width="304" height="78" alt="Screenshot 2025-11-17 at 5 11 48 PM" src="https://github.com/user-attachments/assets/d5784d79-2936-41a1-840f-5f47919584a9" />
---
 editors/vscode/client/extension.ts | 52 +++++++++++++++++-------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/editors/vscode/client/extension.ts b/editors/vscode/client/extension.ts
index d4779afa30b7b..99dbceb6d355a 100644
--- a/editors/vscode/client/extension.ts
+++ b/editors/vscode/client/extension.ts
@@ -41,7 +41,7 @@ const enum LspCommands {
 
 let client: LanguageClient | undefined;
 
-let myStatusBarItem: StatusBarItem;
+let oxcStatusBarItem: StatusBarItem;
 
 // Global flag to check if the user allows us to start the server.
 // When `oxc.requireConfig` is `true`, make sure one `.oxlintrc.json` file is present.
@@ -276,7 +276,7 @@ export async function activate(context: ExtensionContext) {
   context.subscriptions.push(onDidChangeWorkspaceFoldersDispose);
 
   configService.onConfigChange = async function onConfigChange(event) {
-    updateStatsBar(context, this.vsCodeConfig.enable);
+    updateStatusBar(context, this.vsCodeConfig.enable);
 
     if (client === undefined) {
       return;
@@ -292,7 +292,7 @@ export async function activate(context: ExtensionContext) {
     }
   };
 
-  updateStatsBar(context, configService.vsCodeConfig.enable);
+  updateStatusBar(context, configService.vsCodeConfig.enable);
   if (allowedToStartServer) {
     if (configService.vsCodeConfig.enable) {
       await client.start();
@@ -310,35 +310,43 @@ export async function deactivate(): Promise<void> {
   client = undefined;
 }
 
-function updateStatsBar(context: ExtensionContext, enable: boolean) {
-  if (!myStatusBarItem) {
-    myStatusBarItem = window.createStatusBarItem(StatusBarAlignment.Right, 100);
-    myStatusBarItem.command = OxcCommands.ToggleEnable;
-    context.subscriptions.push(myStatusBarItem);
-    myStatusBarItem.show();
-  }
-  let bgColor: string;
-  let icon: string;
+/**
+ * Get the status bar state based on whether oxc is enabled and allowed to start.
+ */
+function getStatusBarState(enable: boolean): { bgColor: string; icon: string; tooltipText: string } {
   if (!allowedToStartServer) {
-    bgColor = 'statusBarItem.offlineBackground';
-    icon = '$(circle-slash)';
+    return {
+      bgColor: 'statusBarItem.offlineBackground',
+      icon: 'circle-slash',
+      tooltipText: 'oxc is disabled (no .oxlintrc.json found)',
+    };
   } else if (!enable) {
-    bgColor = 'statusBarItem.warningBackground';
-    icon = '$(check)';
+    return { bgColor: 'statusBarItem.warningBackground', icon: 'check', tooltipText: 'oxc is disabled' };
   } else {
-    bgColor = 'statusBarItem.activeBackground';
-    icon = '$(check-all)';
+    return { bgColor: 'statusBarItem.activeBackground', icon: 'check-all', tooltipText: 'oxc is enabled' };
+  }
+}
+
+function updateStatusBar(context: ExtensionContext, enable: boolean) {
+  if (!oxcStatusBarItem) {
+    oxcStatusBarItem = window.createStatusBarItem(StatusBarAlignment.Right, 100);
+    oxcStatusBarItem.command = OxcCommands.ToggleEnable;
+    context.subscriptions.push(oxcStatusBarItem);
+    oxcStatusBarItem.show();
   }
 
-  myStatusBarItem.text = `${icon} oxc`;
-  myStatusBarItem.backgroundColor = new ThemeColor(bgColor);
+  const { bgColor, icon, tooltipText } = getStatusBarState(enable);
+
+  oxcStatusBarItem.text = `$(${icon}) oxc`;
+  oxcStatusBarItem.backgroundColor = new ThemeColor(bgColor);
+  oxcStatusBarItem.tooltip = tooltipText;
 }
 
 function generateActivatorByConfig(config: VSCodeConfig, context: ExtensionContext): void {
   const watcher = workspace.createFileSystemWatcher('**/.oxlintrc.json', false, true, !config.requireConfig);
   watcher.onDidCreate(async () => {
     allowedToStartServer = true;
-    updateStatsBar(context, config.enable);
+    updateStatusBar(context, config.enable);
     if (client && !client.isRunning() && config.enable) {
       await client.start();
     }
@@ -348,7 +356,7 @@ function generateActivatorByConfig(config: VSCodeConfig, context: ExtensionConte
     // only can be called when config.requireConfig
     allowedToStartServer = (await workspace.findFiles(`**/.oxlintrc.json`, '**/node_modules/**', 1)).length > 0;
     if (!allowedToStartServer) {
-      updateStatsBar(context, false);
+      updateStatusBar(context, false);
       if (client && client.isRunning()) {
         await client.stop();
       }