fix(frontend): tighten bell notification panel toolbar (#929)

* fix(frontend): tighten bell notification panel toolbar

Restructure the popover so the segmented filter (All / Unread / Alerts)
and the action icons (filter toggle, mark all read, clear all) share a
single row inside the 360px panel. The previous layout wrapped the
segmented control onto a second row once the type filter was added.

Move the unread badge to the right of the title, collapse the node and
type dropdowns behind a filter-toggle icon (accent dot signals an active
filter), equalize both Select widths, and extract the duplicated
className strings into local constants.

* docs: refresh bell notification popover screenshot

Reflects the reworked toolbar (segmented filter + filter toggle +
mark-all-read + clear-all on a single row).

docs/features/alerts-notifications.mdx

@@ -101,19 +101,21 @@ All dispatched notifications appear in the **notification bell** in the top-righ
   <img src="/images/alerts-notifications/notification-popover.png" alt="Notification popover showing recent alert entries with level badges and timestamps" />
 </Frame>
 
-Click the bell to open the notification popover, which shows:
+Click the bell to open the notification popover. Each entry shows:
 
-- **Level badge** for each entry (ERROR in red, WARNING in amber, INFO in default)
+- **Level badge** (ERROR in red, WARNING in amber, INFO in default)
 - **Node name** badge for notifications from remote nodes
 - **Timestamp** of when the alert was triggered
 - **Alert message** describing what was breached
 
-The popover header includes:
+A toolbar above the list provides filtering and bulk actions:
 
-| Action | What it does |
-|--------|--------------|
-| **Mark all as read** | Marks all notifications as read (removes the red dot) |
-| **Clear all** | Deletes all notifications from the list |
+| Control | What it does |
+|---------|--------------|
+| **All / Unread / Alerts** | Switches the list between every notification, unread only, or alert-level only |
+| **Filter toggle** | Reveals dropdowns to filter by node and by notification type; an accent dot on the icon indicates an active filter |
+| **Mark all as read** | Marks every notification as read (removes the red dot) |
+| **Clear all** | Deletes every notification from the list |
 
 You can also dismiss individual notifications by hovering over them and clicking the dismiss button.