Cleanup notification drawer (#7911)

- Add "mark all as read" button
- Fix icons

src/frontend/src/components/nav/NotificationDrawer.tsx

@@ -12,9 +12,9 @@ import {
   Text,
   Tooltip
 } from '@mantine/core';
-import { IconBellCheck, IconBellPlus } from '@tabler/icons-react';
+import { IconArrowRight, IconBellCheck } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
@@ -59,6 +59,19 @@ export function NotificationDrawer({
     return (notificationQuery.data?.results?.length ?? 0) > 0;
   }, [notificationQuery.data]);
 
+  const markAllAsRead = useCallback(() => {
+    api
+      .get(apiUrl(ApiEndpoints.notifications_readall), {
+        params: {
+          read: false
+        }
+      })
+      .catch((_error) => {})
+      .then((_response) => {
+        notificationQuery.refetch();
+      });
+  }, []);
+
   return (
     <Drawer
       opened={opened}
@@ -77,6 +90,18 @@ export function NotificationDrawer({
       title={
         <Group justify="space-between" wrap="nowrap">
           <StylishText size="lg">{t`Notifications`}</StylishText>
+          <Group justify="end" wrap="nowrap">
+            <Tooltip label={t`Mark all as read`}>
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  markAllAsRead();
+                }}
+              >
+                <IconBellCheck />
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label={t`View all notifications`}>
               <ActionIcon
                 onClick={() => {
                   onClose();
@@ -84,8 +109,10 @@ export function NotificationDrawer({
                 }}
                 variant="transparent"
               >
-            <IconBellPlus />
+                <IconArrowRight />
               </ActionIcon>
+            </Tooltip>
+          </Group>
         </Group>
       }
     >