fix: Clean up the status bar (#950)

- Added configuration: `cSpell.showStatusAlignment` - Fix: #949 - Make the status smaller and cleaner.
streetsidesoftware · Jun 16, 2021 · 2ae4915 · 2ae4915
1 parent 3c23d15
commit 2ae4915
Show file tree

Hide file tree

Showing 7 changed files with 212 additions and 154 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   "homepage": "https://github.com/streetsidesoftware/vscode-spell-checker#README.md",
   "engines": {
     "node": ">12.0.0",
-    "vscode": "^1.54.0"
+    "vscode": "^1.57.0"
   },
   "extensionKind": [
     "workspace"
@@ -393,6 +393,16 @@
           "default": true,
           "description": "Display the spell checker status on the status bar."
         },
+        "cSpell.showStatusAlignment": {
+          "type": "string",
+          "scope": "resource",
+          "default": "Left",
+          "enum": [
+            "Left",
+            "Right"
+          ],
+          "description": "The side of the status bar to display the spell checker status."
+        },
         "cSpell.spellCheckDelayMs": {
           "type": "number",
           "default": 50,

diff --git a/packages/_integrationTests/package.json b/packages/_integrationTests/package.json
@@ -4,10 +4,6 @@
   "description": "Integration tests for the spell checker extension",
   "private": true,
   "main": "out/index.js",
-  "engines": {
-    "vscode": "^1.54.0",
-    "node": ">=12"
-  },
   "scripts": {
     "build": "echo skipping build for integration-test",
     "build2": "tsc -p .",

diff --git a/packages/_server/package.json b/packages/_server/package.json
@@ -9,9 +9,6 @@
     "type": "git",
     "url": "https://github.com/streetsidesoftware/vscode-spell-checker"
   },
-  "engines": {
-    "node": ">=12"
-  },
   "main": "dist/main.js",
   "typings": "dist/main.d.ts",
   "exports": {

diff --git a/packages/_server/src/config/cspellConfig.ts b/packages/_server/src/config/cspellConfig.ts
@@ -52,6 +52,13 @@ export interface SpellCheckerSettings {
      */
     showStatus?: boolean;
 
+    /**
+     * The side of the status bar to display the spell checker status.
+     * @scope application
+     * @default "Left"
+     */
+    showStatusAlignment?: 'Left' | 'Right';
+
     /**
      * Delay in ms after a document has changed before checking it for spelling errors.
      * @scope application
@@ -205,6 +212,6 @@ export interface CustomDictionaryWithScope extends CustomDictionary {
 }
 
 export interface CSpellUserSettingsWithComments extends CSpellLibUserSettingsWithComments, SpellCheckerSettings {}
-export interface CSpellUserSettings extends CSpellSettings, SpellCheckerSettings {}
+export interface CSpellUserSettings extends SpellCheckerSettings, CSpellSettings {}
 
 export type SpellCheckerSettingsProperties = keyof SpellCheckerSettings;
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -15,9 +15,6 @@
         "url": "https://github.com/streetsidesoftware/vscode-spell-checker/issues"
     },
     "homepage": "https://github.com/streetsidesoftware/vscode-spell-checker/README.md",
-    "engines": {
-        "vscode": "^1.54.0"
-    },
     "main": "./dist/extension.js",
     "scripts": {
         "clean": "rimraf out dist coverage",

diff --git a/packages/client/src/statusbar.ts b/packages/client/src/statusbar.ts
@@ -7,35 +7,44 @@ import * as infoViewer from './infoViewer';
 import { isSupportedUri, isSupportedDoc } from './util';
 import { sectionCSpell } from './settings';
 
+const statusBarId = 'spell checker status id';
+
+const cspellStatusBarIcon = 'Spell'; // '$(symbol-text)'
+
 export function initStatusBar(context: ExtensionContext, client: CSpellClient): void {
-    const sbCheck = window.createStatusBarItem(vscode.StatusBarAlignment.Left);
+    const settings: CSpellUserSettings = workspace.getConfiguration().get('cSpell') as CSpellUserSettings;
+    const { showStatusAlignment } = settings;
+    const alignment = toStatusBarAlignment(showStatusAlignment);
+    const sbCheck = window.createStatusBarItem(statusBarId, alignment);
+    sbCheck.name = 'Code Spell Checker';
 
     let lastUri = '';
 
     async function updateStatusBarWithSpellCheckStatus(document?: vscode.TextDocument, showClock?: boolean) {
         if (showClock ?? true) {
-            sbCheck.text = '$(clock)';
+            sbCheck.text = `$(clock) ${cspellStatusBarIcon}`;
             sbCheck.tooltip = 'cSpell waiting...';
             sbCheck.show();
         }
         if (!document) return;
 
         const { uri, languageId = '' } = document;
         lastUri = uri.toString();
-        const genOnOffIcon = (on: boolean) => (on ? '$(check)' : '$(exclude)');
         const response = await client.isSpellCheckEnabled(document);
         const docUri = window.activeTextEditor?.document?.uri;
         if (docUri === response.uri || !docUri || docUri.scheme !== 'file') {
+            const diags = getCSpellDiags(docUri);
             const { languageEnabled = true, fileEnabled = true } = response;
             const isChecked = languageEnabled && fileEnabled;
             const isCheckedText = isChecked ? 'is' : 'is NOT';
-            const langReason = languageEnabled ? '' : `The "${languageId}" language / filetype is not enabled.`;
+            const langReason = languageEnabled ? '' : `The "${languageId}" filetype is not enabled.`;
             const fileReason = formatFileReason(response);
             const fileName = path.basename(uri.fsPath);
-            const langText = `${genOnOffIcon(languageEnabled)} ${languageId}`;
-            const fileText = `${genOnOffIcon(fileEnabled)} ${fileName}`;
-            const reason = [`"${fileName}" ${isCheckedText} spell checked.`, langReason, fileReason].filter((a) => !!a).join(' ');
-            sbCheck.text = `${langText} | ${fileText}`;
+            const issuesText = `${diags.length} issues found`;
+            sbCheck.text = statusBarText({ languageEnabled, fileEnabled, diags });
+            const reason = [issuesText, `"${fileName}" ${isCheckedText} spell checked.`, langReason, fileReason]
+                .filter((a) => !!a)
+                .join('\n');
             sbCheck.tooltip = reason;
             sbCheck.command = infoViewer.commandDisplayCSpellInfo;
             sbCheck.show();
@@ -53,6 +62,16 @@ export function initStatusBar(context: ExtensionContext, client: CSpellClient):
         return `File excluded by ${JSON.stringify(glob)} in ${filename || id || name || 'settings'}`;
     }
 
+    function toStatusBarAlignment(showStatusAlignment: CSpellUserSettings['showStatusAlignment']): vscode.StatusBarAlignment {
+        switch (showStatusAlignment) {
+            case 'Left':
+                return vscode.StatusBarAlignment.Left;
+            case 'Right':
+                return vscode.StatusBarAlignment.Right;
+        }
+        return vscode.StatusBarAlignment.Left;
+    }
+
     function updateStatusBar(doc?: vscode.TextDocument, showClock?: boolean) {
         const document = isSupportedDoc(doc) ? doc : selectDocument();
         const settings: CSpellUserSettings = workspace.getConfiguration().get('cSpell') as CSpellUserSettings;
@@ -66,15 +85,24 @@ export function initStatusBar(context: ExtensionContext, client: CSpellClient):
         if (enabled) {
             updateStatusBarWithSpellCheckStatus(document, showClock);
         } else {
-            sbCheck.text = '$(stop) cSpell';
+            sbCheck.text = `$(stop) ${cspellStatusBarIcon}`;
             sbCheck.tooltip = 'Enable spell checking';
             sbCheck.command = 'cSpell.enableForWorkspace';
             sbCheck.show();
         }
     }
 
     function onDidChangeActiveTextEditor(e: TextEditor | undefined) {
-        updateStatusBar(e && e.document);
+        updateStatusBar(e?.document);
+    }
+
+    function onDidChangeDiag(e: vscode.DiagnosticChangeEvent) {
+        for (const uri of e.uris) {
+            if (uri.toString() === lastUri) {
+                setTimeout(() => updateStatusBar(undefined, false), 250);
+                break;
+            }
+        }
     }
 
     function onDidChangeConfiguration(e: vscode.ConfigurationChangeEvent) {
@@ -114,10 +142,33 @@ export function initStatusBar(context: ExtensionContext, client: CSpellClient):
         window.onDidChangeActiveTextEditor(onDidChangeActiveTextEditor),
         workspace.onDidChangeConfiguration(onDidChangeConfiguration),
         workspace.onDidCloseTextDocument(updateStatusBar),
+        vscode.languages.onDidChangeDiagnostics(onDidChangeDiag),
         sbCheck
     );
 
     if (window.activeTextEditor) {
         onDidChangeActiveTextEditor(window.activeTextEditor);
     }
 }
+
+interface StatusBarTextParams {
+    languageEnabled: boolean;
+    fileEnabled: boolean;
+    diags: vscode.Diagnostic[];
+}
+
+function statusBarText({ languageEnabled, fileEnabled, diags }: StatusBarTextParams) {
+    if (!languageEnabled || !fileEnabled) {
+        return `$(exclude) ${cspellStatusBarIcon}`;
+    }
+    if (diags.length) {
+        return `$(issues) ${diags.length} ${cspellStatusBarIcon}`;
+    }
+    return `$(check) ${cspellStatusBarIcon}`;
+}
+
+function getCSpellDiags(docUri: vscode.Uri | undefined) {
+    const diags = (docUri && vscode.languages.getDiagnostics(docUri)) || [];
+    const cSpellDiags = diags.filter((d) => d.source === 'cSpell');
+    return cSpellDiags;
+}