[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,11 +208,14 @@ export function NotificationDrawer({
       <Boundary label='NotificationDrawer'>
         <Stack gap='xs'>
           <Divider />
-          {!hasNotifications && (
+          {!notificationQuery.isFetching &&
-            <Alert color='green'>
+            !notificationQuery.isLoading &&
-              <Text size='sm'>{t`You have no unread notifications.`}</Text>
+            !notificationQuery.isError &&
-            </Alert>
+            !hasNotifications && (
-          )}
+              <Alert color='green' icon={<IconCircleCheck />}>
+                <Text size='sm'>{t`You have no unread notifications.`}</Text>
+              </Alert>
+            )}
           {hasNotifications &&
             notificationQuery.data?.results?.map((notification: any) => (
               <NotificationEntry
@@ -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>