fix: rename files/folders to improve accessibility

api/04-creating-node-extensions.md

@@ -1,12 +1,17 @@
 ---
-title: Node Integration with Extensions
+title: Use node.js from your extension
 ---
 
 This document outlines how to create node extensions for **Phoenix Code**.
 
-## What are Node Extensions
+## What is a Node Extension?
 
-Node extensions for Phoenix Code enhance the desktop version by enabling Node.js capabilities and access to npm packages. Standard extensions run in both browser and desktop builds, but only desktop builds support Node.js execution. Browser builds do not support Node.js, so extensions must handle this limitation.
+Node Extensions in Phoenix Code bring the power of Node.js to your desktop development environment, unlocking access to the vast npm ecosystem for building feature-rich extensions. By leveraging Node.js runtime capabilities, these extensions can perform system-level operations like executing commands, accessing local files, or integrating with external applications – functionalities that aren't possible in traditional browser-based extensions.
+
+One of the key advantages of Node Extensions is their ability to handle computationally intensive tasks without impacting the editor's performance. While browser-based extensions run in the main thread and can potentially freeze the UI during heavy processing, Node Extensions can offload these operations to separate processes. This makes them ideal for scenarios involving extensive image processing, code analysis, or other resource-demanding tasks. Whether you're building a system integration tool or implementing complex background processing, Node Extensions provide the perfect foundation for creating powerful, responsive extensions in Phoenix Code's desktop environment.
+For cross-platform compatibility between desktop and browser environments, you can alternatively use Web Workers to handle computation-intensive tasks. This approach requires bundling any npm dependencies using webpack or similar tools before they can run in the browser. Check out our [Web Worker Communication guide](https://docs.phcode.dev/api/API-Reference/worker/WorkerComm) for detailed instructions on implementing and managing Web Workers in your extension.
+
+Important: When using Node Extensions for heavy computational tasks, make sure to fork a separate Node.js process or worker rather than running operations in the main Node.js process. This separation ensures optimal performance and stability of your extension within Phoenix Code.
 
 ## How to create a Node Extension
 

api/07-Extension-Quick-Start/Dialogs.md → api/07-How-To/Dialogs.md

@@ -1,5 +1,13 @@
 ---
-title: Dialogs and Buttons
+title: Show Dialogs
+---
+
+This document outlines the basic features of working with Dialogs, including:
+
+* [How to add a Dialog Box with buttons](#adding-a-dialog-box-and-buttons)
+* [How to create custom Dialog Box](#creating-custom-dialog-boxes)
+* [How to handle the button clicks](#handle-button-clicks)
+
 ---
 
 ## Adding a Dialog Box and Buttons
@@ -272,52 +280,4 @@ define(function (require, exports, module) {
 
 Visual Reference
 
-![Custom-dialog-box-gif](./images/custom-dialog-box-gif.gif)
-
-
-## Adding a button on Status Bar
-
-1. Import the `StatusBar` module.
-
-    ```jsx
-    const StatusBar = brackets.getModule("widgets/StatusBar");
-    ```
-
-
-2. Register the command.
-
-    Register the command that will trigger the clicking.
-
-    ```jsx
-    var MY_COMMAND_ID = "helloworld_sayhello";
-    CommandManager.register("Hello World", MY_COMMAND_ID, handleHelloWorld);
-    ```
-
-
-3. Add the button to the StatusBar.
-
-    To add the button to StatusBar, use `addIndicator()` :-
-
-
-```jsx
-StatusBar.addIndicator(
-    MY_COMMAND_ID, // unique ID for this indicator
-    $("<div>Test</div>").click(handleHelloWorld), // Optional DOMNode for the indicator
-    true, // show the indicator
-    "hello-world-status", // CSS class
-    "tooltip", // tooltip text
-);
-```
-
-   → The parameters of the `addIndicator()` method :-
-
-| Param | Type | Description |
-| --- | --- | --- |
-| id | `string` | Registration id of the indicator to be updated. |
-| [indicator] | `DOMNode` or `jQueryObject` | Optional DOMNode for the indicator |
-| [visible] | `boolean` | Shows or hides the indicator over the statusbar. |
-| [style] | `string` | Sets the attribute "class" of the indicator. |
-| [tooltip] | `string` | Sets the attribute "title" of the indicator. |
-| [insertBefore] | `string` | An id of an existing status bar indicator. The new indicator will be inserted before (i.e. to the left of)          the indicator specified by this parameter. |
-
-> For a detailed description, refer to [this link](https://docs.phcode.dev/api/API-Reference/widgets/StatusBar).
+![Custom-dialog-box-gif](./images/custom-dialog-box-gif.gif)

api/07-Extension-Quick-Start/Menus.md → api/07-How-To/Menus.md

@@ -1,5 +1,5 @@
 ---
-title: Menus
+title: Add Menus, Menu items and Keyboard Shortcuts
 ---
 
 This document outlines the basic features of working with Menus, including:

api/07-How-To/Panels.md

@@ -0,0 +1,278 @@
+---
+title: How to create Panels
+---
+
+In Phoenix Code, Panels are of two types :- `Plugin Panel` and `Bottom Panel`. 
+
+**Plugin Panel** appears on the side of the screen, generally the left side. For Example :- *Live Preview* feature uses the `Plugin Panel`.
+
+![Plugin Panel Example](./images/plugin-panel-example.png) 
+
+
+**Bottom Panel** appears on the bottom of the screen. For Example :- *Problems* feature uses the `Bottom Panel`.
+
+![Bottom Panel Example](./images/bottom-panel-example.png) 
+
+
+This document outlines the basic features of working with Panels.
+
+* [How to create a Plugin Panel](#creating-a-plugin-panel)
+* [How to manage Plugin Panel state](#managing-plugin-panel-state)
+* [How to create a Bottom Panel](#creating-a-bottom-panel)
+* [How to manage Bottom Panel state](#managing-bottom-panel-state)
+* [Best Practices for Panels](#best-practices)
+
+---
+
+## Creating a Plugin Panel
+
+To create a plugin panel, follow these steps:
+
+1. **Import the `WorkSpaceManager` modules**
+    ```jsx
+    const WorkspaceManager = brackets.getModule("view/WorkspaceManager");
+    ```
+
+2. **Create panel content**
+    Create a jQuery object containing your panel's HTML content:
+    ```jsx
+    const $panel = $("<div>")
+        .attr("id", "my-extension-panel")
+        .html("<h3>My Plugin Panel</h3><p>Hello from the panel!</p>");
+    ```
+
+3. **Create toolbar icon**
+    Create a toolbar icon to toggle the panel.
+    > Creating a toolbar icon is mandatory, else the panel won't show up.
+
+4. **Create the plugin panel**
+    Use `WorkspaceManager.createPluginPanel()` to create your panel:
+    ```jsx
+    const pluginPanel = WorkspaceManager.createPluginPanel(
+        "myextension.panel", // Unique ID using package-style naming
+        $panel,             // jQuery object for panel content
+        200,               // minSize in pixels
+        $toolbarIcon,      // toolbar icon
+        400               // initialSize in pixels (optional)
+    );
+    ```
+
+> For a detailed description, refer to [this link](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager#createPluginPanel).
+
+
+Full Code Example:
+
+```jsx
+define(function (require, exports, module) {
+    "use strict";
+
+    // Brackets modules
+    const AppInit = brackets.getModule("utils/AppInit"),
+        CommandManager = brackets.getModule("command/CommandManager"),
+        Menus = brackets.getModule("command/Menus"),
+        WorkspaceManager = brackets.getModule("view/WorkspaceManager");
+
+    let pluginPanel; // Store panel reference
+
+    // Function to run when the menu item is clicked
+    function handleTestExtension() {
+        if (!pluginPanel) {
+            // Create panel content
+            const $panel = $("<div>")
+                .attr("id", "my-extension-panel")
+                .html("<h3>My Plugin Panel</h3><p>Hello from the panel!</p>");
+
+            // Create toolbar icon
+            const $toolbarIcon = $("#panel");
+
+            // Create the plugin panel
+            pluginPanel = WorkspaceManager.createPluginPanel(
+                "myextension.panel",
+                $panel,
+                200,
+                $toolbarIcon,
+                400
+            );
+            pluginPanel.show();
+        }
+    }
+
+    // Register command
+    const MY_COMMAND_ID = "test_menuitem";
+    CommandManager.register("Toggle Panel", MY_COMMAND_ID, handleTestExtension);
+
+    // Add Menu item
+    const menu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU);
+    menu.addMenuItem(MY_COMMAND_ID);
+
+    // Initialize extension
+    AppInit.appReady(function () {
+        console.log("Panel extension initialized");
+    });
+});
+```
+
+Visual Reference 
+![Plugin Panel](./images/plugin-panel.png)
+
+
+## Managing Plugin Panel State
+
+You can control the visibility and state of your plugin panel:
+
+1. **Show/Hide Panel**
+    ```jsx
+    // Show panel
+    pluginPanel.show();
+
+    // Hide panel
+    pluginPanel.hide();
+    ```
+
+
+2. **Check Panel Visibility**
+    ```jsx
+    const isVisible = pluginPanel.isVisible();
+    ```
+
+3. **Toggle Panel Visibility**
+    ```jsx
+    function togglePanel() {
+        if (pluginPanel.isVisible()) {
+            pluginPanel.hide();
+        } else {
+            pluginPanel.show();
+        }
+    }
+    ```
+
+
+## Creating a Bottom Panel
+
+Bottom panels are created similarly to plugin panels but use different methods:
+> For `Bottom Panels` creating a toolbar icon is not required.
+
+1. **Import required modules**
+    ```jsx
+    const WorkspaceManager = brackets.getModule("view/WorkspaceManager");
+    ```
+
+2. **Create the bottom panel**
+    ```jsx
+    const bottomPanel = WorkspaceManager.createBottomPanel(
+        "myextension.panel",
+        $panel,
+        200,
+    );
+    ```
+> For a detailed description, refer to [this link](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager#createBottomPanel).
+
+Full Code Example for Bottom Panel:
+
+```jsx
+    define(function (require, exports, module) {
+        "use strict";
+
+        // Brackets modules
+        const AppInit = brackets.getModule("utils/AppInit"),
+            CommandManager = brackets.getModule("command/CommandManager"),
+            Menus = brackets.getModule("command/Menus"),
+            WorkspaceManager = brackets.getModule("view/WorkspaceManager");
+
+        let bottomPanel; // Store panel reference
+
+        // Function to run when the menu item is clicked
+        function handleTestExtension() {
+            if (!bottomPanel) {
+                // Create panel content
+                const $panel = $("<div>")
+                    .attr("id", "my-extension-panel")
+                    .html("<h3>My Bottom Panel</h3><p>Hello from the panel!</p>");
+
+                // Create the plugin panel
+                bottomPanel = WorkspaceManager.createBottomPanel(
+                    "myextension.panel",
+                    $panel,
+                    200,
+                );
+                bottomPanel.show();
+            }
+        }
+
+        // Register command
+        const MY_COMMAND_ID = "test_menuitem";
+        CommandManager.register("Toggle Panel", MY_COMMAND_ID, handleTestExtension);
+
+        // Add Menu item
+        const menu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU);
+        menu.addMenuItem(MY_COMMAND_ID);
+
+        // Initialize extension
+        AppInit.appReady(function () {
+            console.log("Panel extension initialized");
+        });
+    });
+```
+
+Visual Reference 
+![Bottom Panel](./images/bottom-panel.png)
+
+## Managing Bottom Panel State
+
+Bottom panels support similar state management to plugin panels:
+
+1. **Show/Hide Panel**
+    ```jsx
+    // Show panel
+    bottomPanel.show();
+
+    // Hide panel
+    bottomPanel.hide();
+    ```
+
+2. **Check Panel Visibility**
+    ```jsx
+    const isVisible = bottomPanel.isVisible();
+    ```
+
+3. **Toggle Panel Visibility**
+    ```jsx
+    function togglePanel() {
+        if (bottomPanel.isVisible()) {
+            bottomPanel.hide();
+        } else {
+            bottomPanel.show();
+        }
+    }
+    ```
+
+## Best Practices
+
+1. Always use unique, package-style IDs (e.g., "yourextension.panel-name") to avoid conflicts with other extensions.
+
+2. Save panel state (e.g., visibility, size) in preferences if needed, to restore state when the extension is reloaded.
+
+Example CSS for Bottom Panel:
+
+```css
+.bottom-panel {
+    background-color: #f8f9fa;
+    border-top: 1px solid #ddd;
+}
+
+.bottom-panel .toolbar {
+    padding: 4px 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #e9ecef;
+    border-bottom: 1px solid #ddd;
+}
+
+.bottom-panel .panel-content {
+    padding: 8px;
+    overflow-y: auto;
+}
+```
+
+> For more information about the WorkSpace Manager API, refer to the [Phoenix Code API documentation](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager).