Add notification docs and fix search autofocus (#647)

src/components/NavigationDocs.jsx

@@ -436,13 +436,17 @@ export const docsNavigation = [
             title: 'Multi-Factor Authentication',
             href: '/manage/settings/multi-factor-authentication',
           },
-          { title: 'Delete Account', href: '/manage/settings/delete-account' },
+          { title: 'Auto Update', href: '/manage/peers/auto-update' },
+          { title: 'Lazy Connections', href: '/manage/peers/lazy-connection' },
+          {
+            title: 'Notifications',
+            href: '/manage/settings/notifications',
+          },
           {
             title: 'Plans and Billing',
             href: '/manage/settings/plans-and-billing',
           },
-          { title: 'Auto Update', href: '/manage/peers/auto-update' },
-          { title: 'Lazy Connections', href: '/manage/peers/lazy-connection' },
+          { title: 'Delete Account', href: '/manage/settings/delete-account' },
         ],
       },
       {

src/components/Search.jsx

@@ -378,6 +378,7 @@ function SearchDialog({ open, setOpen, className }) {
       <Dialog
         onClose={setOpen}
         className={clsx('fixed inset-0 z-50', className)}
+        initialFocus={inputRef}
       >
         <Transition.Child
           as={Fragment}

src/pages/manage/settings/notifications.mdx

@@ -0,0 +1,108 @@
+import {Note} from "@/components/mdx"
+
+export const description =
+    'Configure email and webhook notifications for important events in your NetBird account.'
+
+# Notifications
+
+NetBird can notify you when important events occur in your account, such as peers waiting for approval, routing peer disconnections, or new users joining. You can configure it under `Settings` > `Notifications` in the NetBird dashboard.
+
+<Note>
+    This feature is currently only available in the cloud version of NetBird.
+</Note>
+
+<p>
+    <img src="/docs-static/img/manage/settings/notifications/netbird-settings-notifications-overview.png" alt="Notifications overview showing Email and Webhook channels" className="imagewrapper-big"/>
+</p>
+
+NetBird supports two notification channels:
+
+| Channel | Description |
+|---------|-------------|
+| `Email` | Send notifications to one or more email addresses |
+| `Webhook` | Send notifications as HTTP POST requests to a custom endpoint |
+
+Each channel can be independently enabled or disabled and configured with its own set of event types.
+
+## Supported Events
+
+Both email and webhook channels support the following notification events:
+
+| Category | Event | Description |
+|----------|-------|-------------|
+| **Peer** | `Pending Approval` | A peer is waiting for approval to join the network |
+| **Peer** | `Peer Added` | A new peer is added to the network |
+| **Peer** | `Routing Peer Disconnected` | A routing peer loses its connection |
+| **Peer** | `Routing Peer Deleted` | A routing peer is deleted from the network |
+| **User** | `Pending Approval` | A user is waiting for approval to join the network |
+| **User** | `User Joined` | A new user joins the account |
+| **User** | `Service User Created` | A new service user is created |
+| **Integration** | `IdP Sync Token Expired` | The IdP sync token has expired and needs renewal |
+| **Integration** | `EDR Sync Token Expired` | The EDR sync token has expired and needs renewal |
+
+You can toggle each event on or off individually per channel.
+
+## Email Notifications
+
+The email channel lets you send notifications to one or more email recipients.
+
+### Configure Email Notifications
+
+1. Navigate to `Settings` > `Notifications` and click on the `Email` channel.
+2. Use the `Enable Email Channel` toggle to enable or disable all email notifications.
+3. Under `Email Addresses`, enter the email address you want to receive notifications and click `Add`. You can add multiple recipients.
+4. Toggle individual events on or off under the `Peer Notifications`, `User Notifications`, and `Integration Notifications` sections.
+
+<p>
+    <img src="/docs-static/img/manage/settings/notifications/netbird-notifications-email-channel.png" alt="Email notification channel configuration with recipients and event toggles" className="imagewrapper"/>
+</p>
+
+To remove a recipient, click the `x` button next to their email address.
+
+## Webhook Notifications
+
+The webhook channel sends notification events as HTTP `POST` requests to a URL you specify. This is useful for integrating with third-party tools like Slack, Microsoft Teams, PagerDuty, or custom automation systems.
+
+### Connect a Webhook
+
+1. Navigate to `Settings` > `Notifications` and click on the `Webhook` channel.
+2. Click the `Connect` button to open the webhook configuration modal.
+
+<p>
+    <img src="/docs-static/img/manage/settings/notifications/netbird-notifications-webhook-channel.png" alt="Webhook channel page with Connect button" className="imagewrapper"/>
+</p>
+
+3. In the `General` tab, enter the full HTTP(S) URL of your endpoint. Notification events will be sent as `POST` requests to this URL. Optionally, select an `Authentication` method for the endpoint.
+
+<p>
+    <img src="/docs-static/img/manage/settings/notifications/netbird-notifications-webhook-create-general-tab.png" alt="Connect Webhook modal showing the General tab with endpoint URL and authentication options" className="imagewrapper"/>
+</p>
+
+4. Click `Continue` to move to the `Headers` tab. Optionally add any custom HTTP headers your endpoint requires.
+
+<p>
+    <img src="/docs-static/img/manage/settings/notifications/netbird-notifications-webook-headers-tab.png" alt="Connect Webhook modal showing the Headers tab for adding custom HTTP headers" className="imagewrapper"/>
+</p>
+
+5. Click `Connect` to save the webhook.
+
+Once connected, you can toggle individual events on or off, just like with the email channel.
+
+### Edit or Delete a Webhook
+
+To update the webhook URL, authentication, or headers, click `Edit` on the webhook channel page. <br/>
+To remove the webhook entirely, click `Delete`.
+
+<p>
+    <img src="/docs-static/img/manage/settings/notifications/netbird-notifications-webhook-edit-delete.png" alt="Webhook channel page showing Edit and Delete options for a connected webhook" className="imagewrapper"/>
+</p>
+
+## Get Started
+<div float="center" >
+    <Button name="button" className="button-5" onClick={() => window.open("https://netbird.io/pricing")}>Use NetBird</Button>
+</div>
+
+- Make sure to [star us on GitHub](https://github.com/netbirdio/netbird)
+- Follow us [on X](https://x.com/netbird)
+- Join our [Slack Channel](/slack-url)
+- NetBird [latest release](https://github.com/netbirdio/netbird/releases) on GitHub