fix: rename files/folders to improve accessibility

Author: devvaannsh

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.mdapi/07-Extension-Quick-Start/Dialogs.md renamed to 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.mdapi/07-Extension-Quick-Start/Menus.md renamed to 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/StatusBar.md

@@ -0,0 +1,56 @@
+---
+title: Add an indicator icon on the status bar
+---
+
+This document outlines the basic features of working with Status Bar, including:
+
+* [How to add a button on Status Bar](#adding-a-button-on-status-bar)
+
+---
+
+## 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).