feature/walkthrough

package.json

@@ -117,6 +117,82 @@
   "main": "./dist/extension",
   "l10n": "./l10n",
   "contributes": {
+    "walkthroughs": [
+      {
+        "id": "espIdf.walkthrough.ui",
+        "title": "ESP-IDF Extension UI Guide",
+        "description": "Explore the custom UI elements added by the Espressif IDF extension for VS Code",
+        "steps": [
+          {
+            "id": "ui-introduction",
+            "title": "UI Elements Overview",
+            "description": "This walkthrough will introduce you to the custom UI elements we've added to enhance your Espressif IDF development experience.",
+            "media": {
+              "markdown": "walkthroughs/welcome.md"
+            }
+          },
+          {
+            "id": "esp-idf-explorer",
+            "title": "ESP-IDF: Explorer",
+            "description": "The **ESP-IDF: Explorer** in the Activity Bar is your central hub for Espressif IDF development.\n\n- **Quick access** to all extension features and commands\n- **Project overview** including components and configurations\n- **Integrated terminal** for ESP-IDF specific commands\n\n[Open ESP-IDF Explorer](command:espIdf.openExplorer)\n\n💡 You can drag and drop the ESP-IDF Explorer view to rearrange it within your VS Code layout.",
+            "media": {
+              "image": "media/walkthrough/esp-idf-explorer.png",
+              "altText": "Screenshot of ESP-IDF: Explorer in Activity Bar"
+            }
+          },
+          {
+            "id": "commands-section",
+            "title": "Commands Section",
+            "description": "The **Commands Section** in the ESP-IDF Explorer provides quick access to all extension commands.\n\n- **Build**, **Flash**, and **Monitor** your project with a single click\n- **Configure** your project settings and menuconfig\n- **Manage** ESP-IDF and tools installations\n\n[Open ESP-IDF Commands](command:workbench.action.quickOpen?%22%3EESP-IDF%3A%22)\n\n💡 You can also access these commands through the VS Code Command Palette by typing 'ESP-IDF:'.",
+            "media": {
+              "image": "media/walkthrough/commands-section.png",
+              "altText": "Screenshot of Commands section in ESP-IDF: Explorer"
+            }
+          },
+          {
+            "id": "project-components",
+            "title": "Project Components",
+            "description": "The **Project Components** tree view in the Explorer allows you to navigate through the components inside the esp-idf components directory.\n\n- **Quickly browse** all available ESP-IDF components\n- **Easily include** components in your project\n- **Jump to source** of any component with a single click\n\n[Open Project Components](command:espIdf.openProjectComponents)\n\n💡 Right-click on a component to see additional options like 'Add to project' or 'Open documentation'.",
+            "media": {
+              "image": "media/walkthrough/project-components.png",
+              "altText": "Screenshot of Project Components tree view in Explorer"
+            }
+          },
+          {
+            "id": "peripheral-viewer",
+            "title": "ESP-IDF: Peripheral Viewer",
+            "description": "The **ESP-IDF: Peripheral Viewer** in the Debug Explorer allows you to inspect and interact with the peripherals of your ESP device during debugging sessions.\n\n- **Real-time updates** of peripheral registers\n- **Modify values** directly from the UI\n- **Custom views** for common peripherals like GPIO, UART, etc.\n\n[Open Peripheral Viewer](command:espIdf.openPeripheralViewer)\n\n💡 The Peripheral Viewer is only available during active debug sessions.",
+            "media": {
+              "image": "media/walkthrough/peripheral-viewer.png",
+              "altText": "Screenshot of ESP-IDF: Peripheral Viewer in Debug Explorer"
+            }
+          },
+          {
+            "id": "hints-viewer",
+            "title": "Hints Viewer",
+            "description": "The **Hints Viewer** is a powerful tool to help you understand and resolve build errors and warnings.\n\n- **Automatic display** of hints based on problems in the Problems tab\n- **Search functionality** to find hints for specific errors\n- **In-editor hints** displayed when hovering over errors (squiggly lines)\n\nKey features:\n- View hints for build errors without leaving VS Code\n- Search for hints by typing the error message\n- Get context-specific help right in your code editor\n\n[Open Hints Viewer](command:espIdf.openHintsViewer)\n\n💡 The Hints Viewer updates automatically as you work, providing real-time assistance for your ESP-IDF development.",
+            "media": {
+              "image": "media/walkthrough/hints-viewer.png",
+              "altText": "Screenshot of Hints Viewer panel and in-editor hints"
+            }
+          },
+          {
+            "id": "status-bar",
+            "title": "Status Bar Integration",
+            "description": "The **Status Bar** displays essential information and provides quick access to common actions for your Espressif IDF development.\n\n- **Current project** name and ESP-IDF version\n- **Quick actions** for build, flash, and monitor\n- **Port selection** for your ESP device\n\n💡 Hover over the ESP-IDF status bar items to see more options and information.",
+            "media": {
+              "image": "media/walkthrough/status-bar.png",
+              "altText": "Screenshot of Espressif IDF extension items in Status Bar"
+            }
+          },
+          {
+            "id": "next-steps",
+            "title": "Next Steps",
+            "description": "Congratulations! You've completed the overview of the ESP-IDF extension's custom UI elements. To learn more about setting up your development environment and getting started with ESP-IDF projects, check out our Basic Setup Walkthrough.\n\n[Start Basic Setup Walkthrough](command:espIdf.startBasicSetupWalkthrough)\n\nHappy coding with ESP-IDF!"
+          }
+        ]
+      }
+    ],
     "problemMatchers": [
       {
         "name": "espIdf",
@@ -217,6 +293,13 @@
       }
     ],
     "menus": {
+      "extension/context": [
+        {
+          "command": "espIdf.openWalkthrough",
+          "when": "extension =~ /^espressif.esp-idf-extension$/ && extensionStatus == installed",
+          "group": "zzz"
+      }
+      ],
       "editor/title": [
         {
           "command": "espIdf.searchError",
@@ -625,6 +708,12 @@
             "scope": "window",
             "description": "%param.showOnboardingOnInit%"
           },
+          "idf.hasWalkthroughBeenShown": {
+            "type": "boolean",
+            "default": false,
+            "scope": "application",
+            "description": "%param.hasWalkthroughBeenShown%"
+          },
           "trace.poll_period": {
             "type": "string",
             "default": "1",
@@ -976,6 +1065,10 @@
       }
     ],
     "commands": [
+      {
+        "command": "espIdf.openWalkthrough",
+        "title": "ESP-IDF: Open Get Started Walkthrough"
+      },
       {
         "command": "espIdf.searchError",
         "title": "%espIdf.searchError.title%"

src/extension.ts

@@ -3493,6 +3493,35 @@ export async function activate(context: vscode.ExtensionContext) {
     statusBarItems["currentIdfVersion"]
   );
 
+  // WALK-THROUGH
+  let disposable = vscode.commands.registerCommand(
+    "espIdf.openWalkthrough",
+    () => {
+      vscode.commands.executeCommand(
+        "workbench.action.openWalkthrough",
+        "espressif.esp-idf-extension#espIdf.walkthrough.ui"
+      );
+    }
+  );
+
+  context.subscriptions.push(disposable);
+
+  const hasWalkthroughBeenShown = await idfConf.readParameter(
+    "idf.hasWalkthroughBeenShown"
+  );
+
+  if (!hasWalkthroughBeenShown) {
+    await idfConf.writeParameter(
+      "idf.hasWalkthroughBeenShown",
+      true,
+      vscode.ConfigurationTarget.Global
+    );
+    vscode.commands.executeCommand(
+      "workbench.action.openWalkthrough",
+      "espressif.esp-idf-extension#espIdf.walkthrough.ui"
+    );
+  }
+
   // Hints Viewer
 
   const treeDataProvider = new ErrorHintProvider(context);

walkthroughs/welcome.md

@@ -0,0 +1,12 @@
+You'll learn about:
+
+- ESP-IDF Explorer
+- Quick access commands
+- Project components view
+- Peripheral viewer for debugging
+- Hints viewer for error resolution
+- Status bar integration
+
+> 💡**Note:** If you're new to ESP-IDF or need help with initial setup, we recommend our **[Start Basic Setup Walkthrough](command:espIdf.startBasicSetupWalkthrough)** first.
+
+Let's begin exploring the UI elements!