feat: Provide several hints for better user experience (#293)

Author: Vigilans

package.json

@@ -268,12 +268,30 @@
                         "scope": "application",
                         "description": "Include problem description in comments."
                     },
-                    "leetcode.showSetDefaultLanguageHint": {
+                    "leetcode.hint.setDefaultLanguage": {
                         "type": "boolean",
                         "default": true,
                         "scope": "application",
                         "description": "Show a hint to set the default language."
                     },
+                    "leetcode.hint.configWebviewMarkdown": {
+                        "type": "boolean",
+                        "default": true,
+                        "scope": "application",
+                        "description": "Show a hint to change webview appearance through markdown config."
+                    },
+                    "leetcode.hint.commentDescription": {
+                        "type": "boolean",
+                        "default": true,
+                        "scope": "application",
+                        "description": "Show a hint to enable comment description in solution code file."
+                    },
+                    "leetcode.hint.commandShortcut": {
+                        "type": "boolean",
+                        "default": true,
+                        "scope": "application",
+                        "description": "Show a hint to configure commands key binding."
+                    },
                     "leetcode.useWsl": {
                         "type": "boolean",
                         "default": false,

src/commands/show.ts

@@ -10,7 +10,7 @@ import { leetCodeChannel } from "../leetCodeChannel";
 import { leetCodeExecutor } from "../leetCodeExecutor";
 import { leetCodeManager } from "../leetCodeManager";
 import { IProblem, IQuickItemEx, languages, ProblemState } from "../shared";
-import { DialogOptions, DialogType, promptForOpenOutputChannel, promptForSignIn } from "../utils/uiUtils";
+import { DialogOptions, DialogType, openSettingsEditor, promptForOpenOutputChannel, promptForSignIn, promptHintMessage } from "../utils/uiUtils";
 import { selectWorkspaceFolder } from "../utils/workspaceUtils";
 import * as wsl from "../utils/wslUtils";
 import { leetCodePreviewProvider } from "../webview/leetCodePreviewProvider";
@@ -64,7 +64,6 @@ export async function showSolution(node?: LeetCodeNode): Promise<void> {
     }
 }
 
-// SUGGESTION: group config retriving into one file
 async function fetchProblemLanguage(): Promise<string | undefined> {
     const leetCodeConfig: vscode.WorkspaceConfiguration = vscode.workspace.getConfiguration("leetcode");
     let defaultLanguage: string | undefined = leetCodeConfig.get<string>("defaultLanguage");
@@ -74,7 +73,7 @@ async function fetchProblemLanguage(): Promise<string | undefined> {
     const language: string | undefined = defaultLanguage || await vscode.window.showQuickPick(languages, { placeHolder: "Select the language you want to use", ignoreFocusOut: true });
     // fire-and-forget default language query
     (async (): Promise<void> => {
-        if (language && !defaultLanguage && leetCodeConfig.get<boolean>("showSetDefaultLanguageHint")) {
+        if (language && !defaultLanguage && leetCodeConfig.get<boolean>("hint.setDefaultLanguage")) {
             const choice: vscode.MessageItem | undefined = await vscode.window.showInformationMessage(
                 `Would you like to set '${language}' as your default language?`,
                 DialogOptions.yes,
@@ -84,7 +83,7 @@ async function fetchProblemLanguage(): Promise<string | undefined> {
             if (choice === DialogOptions.yes) {
                 leetCodeConfig.update("defaultLanguage", language, true /* UserSetting */);
             } else if (choice === DialogOptions.never) {
-                leetCodeConfig.update("showSetDefaultLanguageHint", false, true /* UserSetting */);
+                leetCodeConfig.update("hint.setDefaultLanguage", false, true /* UserSetting */);
             }
         }
     })();
@@ -98,7 +97,6 @@ async function showProblemInternal(node: IProblem): Promise<void> {
             return;
         }
 
-        // SUGGESTION: group config retriving into one file
         const leetCodeConfig: vscode.WorkspaceConfiguration = vscode.workspace.getConfiguration("leetcode");
         let outDir: string = await selectWorkspaceFolder();
         let relativePath: string = (leetCodeConfig.get<string>("outputFolder", "")).trim();
@@ -120,6 +118,12 @@ async function showProblemInternal(node: IProblem): Promise<void> {
         await Promise.all([
             vscode.window.showTextDocument(vscode.Uri.file(filePath), { preview: false, viewColumn: vscode.ViewColumn.One }),
             movePreviewAsideIfNeeded(node),
+            promptHintMessage(
+                "hint.commentDescription",
+                'You can generate the code file with problem description in the comments by enabling "leetcode.showCommentDescription".',
+                "Open settings",
+                (): Promise<any> => openSettingsEditor("leetcode.showCommentDescription"),
+            ),
         ]);
     } catch (error) {
         await promptForOpenOutputChannel("Failed to show the problem. Please open the output channel for details.", DialogType.error);

src/utils/uiUtils.ts

@@ -4,6 +4,7 @@
 import * as vscode from "vscode";
 import { getLeetCodeEndpoint } from "../commands/plugin";
 import { leetCodeChannel } from "../leetCodeChannel";
+import { getWorkspaceConfiguration } from "./workspaceUtils";
 
 export namespace DialogOptions {
     export const open: vscode.MessageItem = { title: "Open" };
@@ -57,6 +58,28 @@ export async function promptForSignIn(): Promise<void> {
     }
 }
 
+export async function promptHintMessage(config: string, message: string, choiceConfirm: string, onConfirm: () => Promise<any>): Promise<void> {
+    if (getWorkspaceConfiguration().get<boolean>(config)) {
+        const choiceNoShowAgain: string = "Don't show again";
+        const choice: string | undefined = await vscode.window.showInformationMessage(
+            message, choiceConfirm, choiceNoShowAgain,
+        );
+        if (choice === choiceConfirm) {
+            await onConfirm();
+        } else if (choice === choiceNoShowAgain) {
+            await getWorkspaceConfiguration().update(config, false, true /* UserSetting */);
+        }
+    }
+}
+
+export async function openSettingsEditor(query?: string): Promise<void> {
+    await vscode.commands.executeCommand("workbench.action.openSettings", query);
+}
+
+export async function openKeybindingsEditor(query?: string): Promise<void> {
+    await vscode.commands.executeCommand("workbench.action.openGlobalKeybindings", query);
+}
+
 export async function showFileSelectDialog(): Promise<vscode.Uri[] | undefined> {
     const defaultUri: vscode.Uri | undefined = vscode.workspace.rootPath ? vscode.Uri.file(vscode.workspace.rootPath) : undefined;
     const options: vscode.OpenDialogOptions = {

src/webview/LeetCodeWebview.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import { commands, ConfigurationChangeEvent, Disposable, ViewColumn, WebviewPanel, window, workspace } from "vscode";
+import { openSettingsEditor, promptHintMessage } from "../utils/uiUtils";
 import { markdownEngine } from "./markdownEngine";
 
 export abstract class LeetCodeWebview implements Disposable {
@@ -41,6 +42,7 @@ export abstract class LeetCodeWebview implements Disposable {
             }
         }
         this.panel.webview.html = this.getWebviewContent();
+        this.showMarkdownConfigHint();
     }
 
     protected onDidDisposeWebview(): void {
@@ -62,6 +64,15 @@ export abstract class LeetCodeWebview implements Disposable {
     protected abstract getWebviewOption(): ILeetCodeWebviewOption;
 
     protected abstract getWebviewContent(): string;
+
+    private async showMarkdownConfigHint(): Promise<void> {
+        await promptHintMessage(
+            "hint.configWebviewMarkdown",
+            'You can change the webview appearance ("fontSize", "lineWidth" & "fontFamily") in "markdown.preview" configuration.',
+            "Open settings",
+            (): Promise<any> => openSettingsEditor("markdown.preview"),
+        );
+    }
 }
 
 export interface ILeetCodeWebviewOption {

src/webview/leetCodeSubmissionProvider.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import { ViewColumn } from "vscode";
+import { openKeybindingsEditor, promptHintMessage } from "../utils/uiUtils";
 import { ILeetCodeWebviewOption, LeetCodeWebview } from "./LeetCodeWebview";
 import { markdownEngine } from "./markdownEngine";
 
@@ -13,6 +14,7 @@ class LeetCodeSubmissionProvider extends LeetCodeWebview {
     public show(result: string): void {
         this.result = result;
         this.showWebviewInternal();
+        this.showKeybindingsHint();
     }
 
     protected getWebviewOption(): ILeetCodeWebviewOption {
@@ -40,6 +42,15 @@ class LeetCodeSubmissionProvider extends LeetCodeWebview {
         super.onDidDisposeWebview();
         delete this.result;
     }
+
+    private async showKeybindingsHint(): Promise<void> {
+        await promptHintMessage(
+            "hint.commandShortcut",
+            'You can customize shortcut key bindings in File > Preferences > Keyboard Shortcuts with query "leetcode".',
+            "Open Keybindings",
+            (): Promise<any> => openKeybindingsEditor("leetcode solution"),
+        );
+    }
 }
 
 export const leetCodeSubmissionProvider: LeetCodeSubmissionProvider = new LeetCodeSubmissionProvider();