[UI] Notification Drawer (#9940)

- Handle error case
- Visual updates

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

@@ -13,7 +13,12 @@ import {
   Text,
   Tooltip
 } from '@mantine/core';
-import { IconArrowRight, IconBellCheck } from '@tabler/icons-react';
+import {
+  IconArrowRight,
+  IconBellCheck,
+  IconCircleCheck,
+  IconExclamationCircle
+} from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -203,8 +208,11 @@ export function NotificationDrawer({
       <Boundary label='NotificationDrawer'>
         <Stack gap='xs'>
           <Divider />
-          {!hasNotifications && (
-            <Alert color='green'>
+          {!notificationQuery.isFetching &&
+            !notificationQuery.isLoading &&
+            !notificationQuery.isError &&
+            !hasNotifications && (
+              <Alert color='green' icon={<IconCircleCheck />}>
                 <Text size='sm'>{t`You have no unread notifications.`}</Text>
               </Alert>
             )}
@@ -221,6 +229,15 @@ export function NotificationDrawer({
               <Loader size='sm' />
             </Center>
           )}
+          {notificationQuery.isError && (
+            <Alert
+              color='red'
+              title={t`Error`}
+              icon={<IconExclamationCircle />}
+            >
+              <Text size='sm'>{t`Error loading notifications.`}</Text>
+            </Alert>
+          )}
         </Stack>
       </Boundary>
     </Drawer>