feat: create JS and Rust dialog guide

src/content/docs/features/dialog.mdx

@@ -1,14 +1,297 @@
 ---
 title: Dialog
 description: Native system dialogs for opening and saving files along with message dialogs.
+i18nReady: true
+tableOfContents:
+  maxHeadingLevel: 4
 ---
 
-import Stub from '@components/Stub.astro';
 import PluginLinks from '@components/PluginLinks.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import CommandTabs from '@components/CommandTabs.astro';
 
 <PluginLinks plugin="dialog" />
 
-<Stub>
-	Based on
-	https://github.com/tauri-apps/plugins-workspace/tree/v2/plugins/dialog
-</Stub>
+Native system dialogs for opening and saving files along with message dialogs.
+
+## Setup
+
+Install the dialog plugin to get started.
+
+<Tabs>
+    <TabItem label="Automatic">
+
+    1. Use your project's package manager to add the dependency:
+
+    <CommandTabs npm="npm run tauri add dialog"
+    yarn="yarn run tauri add dialog"
+    pnpm="pnpm tauri add dialog"
+    cargo="cargo tauri add dialog" />
+
+    2. Modify `lib.rs` to initialize the plugin:
+
+    ```rust
+    #[cfg_attr(mobile, tauri::mobile_entry_point)]
+    pub fn run() {
+        tauri::Builder::default()
+            // Initialize the plugin
+            .plugin(tauri_plugin_dialog::init())
+            .run(tauri::generate_context!())
+            .expect("error while running tauri application");
+    }
+    ```
+    </TabItem>
+    <TabItem label="Manual">
+
+    1. Run `cargo add tauri-plugin-dialog` to add the plugin to the project's dependencies in `Cargo.toml`.
+
+    2. Modify `lib.rs` to initialize the plugin:
+
+    ```rust
+    // lib.rs
+    #[cfg_attr(mobile, tauri::mobile_entry_point)]
+    pub fn run() {
+        tauri::Builder::default()
+            // Initialize the plugin
+            .plugin(tauri_plugin_dialog::init())
+            .run(tauri::generate_context!())
+            .expect("error while running tauri application");
+    }
+    ```
+
+    3. If you'd like create dialogs in JavaScript, install the npm package as well:
+
+    <CommandTabs
+        npm="npm install @tauri-apps/plugin-dialog"
+        yarn="yarn add @tauri-apps/plugin-dialog"
+        pnpm="pnpm add @tauri-apps/plugin-dialog"
+    />
+
+</TabItem>
+</Tabs>
+
+## Usage
+
+The dialog plugin is available in both JavaScript and Rust. Here's how you can use it:
+
+in JavaScript:
+- [Create Yes/No Dialog](#create-yesno-dialog)
+- [Create Ok/Cancel Dialog](#create-okcancel-dialog)
+- [Create Message Dialog](#create-message-dialog)
+- [Open a File Selector Dialog](#open-a-file-selector-dialog)
+- [Save to File Dialog](#save-to-file-dialog)
+
+in Rust:
+- [Build an Ask Dialog](#build-an-ask-dialog)
+- [Build a Message Dialog](#build-a-message-dialog)
+- [Build a File Selector Dialog](#build-a-file-selector-dialog)
+
+***
+### JavaScript
+
+See all [Dialog Options](/2/reference/js/dialog/) at the JavaScript API reference.
+
+{/* ASK */}
+#### Create Yes/No Dialog
+
+Shows a question dialog with `Yes` and `No` buttons.
+
+```js
+import { ask } from '@tauri-apps/plugin-dialog';
+
+// Create a Yes/No dialog
+const answer = await ask('This action cannot be reverted. Are you sure?', {
+	title: 'Tauri',
+	type: 'warning',
+});
+
+console.log(answer);
+// Prints boolean to the console
+```
+
+{/* CONFIRM */}
+
+#### Create Ok/Cancel Dialog
+
+Shows a question dialog with `Ok` and `Cancel` buttons.
+
+```js
+import { confirm } from '@tauri-apps/plugin-dialog';
+
+// Creates a confirmation Ok/Cancel dialog
+const confirmation = await confirm(
+	'This action cannot be reverted. Are you sure?',
+	{ title: 'Tauri', type: 'warning' }
+);
+
+console.log(confirmation);
+// Prints boolean to the console
+```
+{/* MESSAGE */}
+
+#### Create Message Dialog
+
+Shows a message dialog with an `Ok` button. Keep in mind that if the user closes the dialog it will return `false`.
+
+```js
+import { message } from '@tauri-apps/plugin-dialog';
+
+// Shows message
+await message('File not found', { title: 'Tauri', type: 'error' });
+```
+
+{/* OPEN */}
+
+#### Open a File Selector Dialog
+
+Open a file/directory selection dialog.
+
+The `multiple` option controls whether the dialog allows multiple selection or not, while the `directory`, whether is a directory selection or not.
+
+```js
+import { open } from '@tauri-apps/plugin-dialog';
+
+// Open a dialog
+const file = await open({
+	multiple: false,
+	directory: false,
+});
+console.log(file);
+// Prints file path and name to the console
+```
+
+{/* SAVE */}
+
+#### Save to File Dialog
+
+Open a file/directory save dialog.
+
+```js
+import { save } from '@tauri-apps/plugin-dialog';
+// Prompt to save a 'My Filter' with extension .png or .jpeg
+const path = await save({
+	filters: [
+		{
+			name: 'My Filter',
+			extensions: ['png', 'jpeg'],
+		},
+	],
+});
+console.log(path);
+// Prints the chosen path
+```
+
+***
+### Rust
+
+Refer to the [Rust API reference](https://docs.rs/tauri-plugin-dialog/) to see all available options.
+
+#### Build an Ask Dialog
+
+Shows a question dialog with `Absolutely` and `Totally` buttons.
+
+```rust
+use tauri_plugin_dialog::DialogExt;
+
+let answer = app.dialog()
+        .message("Tauri is Awesome")
+        .title("Tauri is Awesome")
+        .ok_button_label("Absolutely")
+        .cancel_button_label("Totally")
+        .blocking_show();
+```
+
+If you need a non blocking operation you can use `show()` instead:
+
+```rust
+use tauri_plugin_dialog::DialogExt;
+
+app.dialog()
+    .message("Tauri is Awesome")
+    .title("Tauri is Awesome")
+    .ok_button_label("Absolutely")
+    .cancel_button_label("Totally")
+    .show(|result| match result {
+        true => // do something,
+        false =>// do something,
+    });
+```
+
+#### Build a Message Dialog
+
+Shows a message dialog with an `Ok` button. Keep in mind that if the user closes the dialog it will return `false`.
+
+```rust
+use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
+
+let ans = app.dialog()
+    .message("File not found")
+    .kind(MessageDialogKind::Error)
+    .title("Warning")
+    .blocking_show();
+```
+
+If you need a non blocking operation you can use `show()` instead:
+
+```rust
+use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
+
+app.dialog()
+    .message("Tauri is Awesome")
+    .kind(MessageDialogKind::Info)
+    .title("Information")
+    .ok_button_label("Absolutely")
+    .show(|result| match result {
+        true => // do something,
+        false => // do something,
+    });
+```
+
+
+#### Build a File Selector Dialog
+
+
+#### Pick Files
+```rust
+use tauri_plugin_dialog::DialogExt;
+
+let file_path = app.dialog().file().blocking_pick_file();
+// return a file_path `Option`, or `None` if the user closes the dialog
+```
+
+If you need a non blocking operation you can use `show()` instead:
+
+```rust
+use tauri_plugin_dialog::DialogExt;
+
+app.dialog().file().pick_file(|file_path| {
+    // return a file_path `Option`, or `None` if the user closes the dialog
+    })
+```
+
+#### Save Files
+
+```rust
+use tauri_plugin_dialog::DialogExt;
+
+let file_path = app
+    .dialog()
+    .file()
+    .add_filter("My Filter", &["png", "jpeg"])
+    .blocking_save_file();
+    // do something with the optional file path here
+    // the file path is `None` if the user closed the dialog
+```
+
+or, alternatively:
+
+```rust
+use tauri_plugin_dialog::DialogExt;
+
+app.dialog()
+    .file()
+    .add_filter("My Filter", &["png", "jpeg"])
+    .pick_file(|file_path| {
+        // return a file_path `Option`, or `None` if the user closes the dialog
+    });
+```

src/content/docs/features/notification.mdx

@@ -77,7 +77,7 @@ Install the notifications plugin to get started.
 
 Here are a few examples of how to use the notification plugin:
 
-- [Sent notification to users](#send-notification)
+- [Send notification to users](#send-notification)
 - [Add an action to a notification](#actions)
 - [Add an attachment to a notification](#attachments)
 - [Send a notification in a specific channel](#channels)