```

refactor notifications popover to include unread count, mark all as read button, and loading state
```

002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx

@@ -25,12 +25,18 @@ import { getUnreadNotificationsByUserId } from '@/db/Notifications/GetUnreadNoti
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
 
+import { NoteBlank as NoteBlankIcon } from '@phosphor-icons/react/dist/ssr/NoteBlank';
+import { Sun as SunIcon } from '@phosphor-icons/react/dist/ssr/Sun';
+import { MarkAllAsReadButton } from './mark-all-as-read-button';
+import { Button } from '@mui/material';
+
 export interface NotificationsPopoverProps {
   anchorEl: null | Element;
   onClose?: () => void;
   onMarkAllAsRead?: () => void;
   onRemoveOne?: (id: string, reload: () => Promise<void>) => void;
   open?: boolean;
+  setListLength: React.Dispatch<React.SetStateAction<number>>;
 }
 
 export function NotificationsPopover({
@@ -39,6 +45,7 @@ export function NotificationsPopover({
   onMarkAllAsRead,
   onRemoveOne,
   open = false,
+  setListLength,
 }: NotificationsPopoverProps): React.JSX.Element {
   const { t } = useTranslation();
   const [notiList, setNotiList] = React.useState<Notification[]>([]);
@@ -53,6 +60,7 @@ export function NotificationsPopover({
       if (user?.id) {
         const tempNotiList: Notification[] = await getUnreadNotificationsByUserId(user.id);
         setNotiList(tempNotiList);
+        setListLength(tempNotiList.length);
       }
     } catch (loadNotiError) {
       logger.error(loadNotiError);
@@ -78,10 +86,60 @@ export function NotificationsPopover({
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         onClose={onClose}
         open={open}
-        slotProps={{ paper: { sx: { width: '380px' } } }}
+        slotProps={{ paper: { sx: { width: 'unset' } } }}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
       >
-        {t('list-is-empty')}
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}
+        >
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'left' }}
+          >
+            <Typography variant="h6">
+              {t('Notifications')} ({notiList.length})
+            </Typography>
+
+            {loading ? (
+              <Typography
+                color="gray"
+                variant="subtitle2"
+              >
+                ({t('loading')})
+              </Typography>
+            ) : (
+              <></>
+            )}
+          </Stack>
+          {/* MarkAllAsReadButton(onMarkAllAsRead, notiList.length <= 0) */}
+          <MarkAllAsReadButton
+            onMarkAllAsRead={onMarkAllAsRead}
+            disabled={notiList.length <= 0}
+          />
+        </Stack>
+
+        <Stack
+          direction="column"
+          spacing={2}
+          sx={{ alignItems: 'center', padding: '50px' }}
+        >
+          <SunIcon
+            size={48}
+            color="lightgray"
+          />
+
+          <Typography
+            color="lightgray"
+            variant={'subtitle2'}
+          >
+            {t('list-is-empty')}
+          </Typography>
+
+          <Button variant="outlined">{t('refresh')}</Button>
+        </Stack>
       </Popover>
     );
 
@@ -91,7 +149,7 @@ export function NotificationsPopover({
       anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       onClose={onClose}
       // todo: should not use 'true', fallback to 'open'
-      open
+      open={open}
       slotProps={{ paper: { sx: { width: '380px' } } }}
       transformOrigin={{ horizontal: 'right', vertical: 'top' }}
     >
@@ -105,7 +163,9 @@ export function NotificationsPopover({
           spacing={2}
           sx={{ alignItems: 'left' }}
         >
-          <Typography variant="h6">{t('Notifications')}</Typography>
+          <Typography variant="h6">
+            {t('Notifications')} ({notiList.length})
+          </Typography>
 
           {loading ? (
             <Typography
@@ -118,14 +178,10 @@ export function NotificationsPopover({
             <></>
           )}
         </Stack>
-        <Tooltip title={t('Mark all as read')}>
-          <IconButton
-            edge="end"
-            onClick={onMarkAllAsRead}
-          >
-            <EnvelopeSimpleIcon />
-          </IconButton>
-        </Tooltip>
+        <MarkAllAsReadButton
+          onMarkAllAsRead={onMarkAllAsRead}
+          disabled={notiList.length <= 0}
+        />
       </Stack>
 
       {notiList.length === 0 ? (
@@ -151,3 +207,26 @@ export function NotificationsPopover({
     </Popover>
   );
 }
+
+// TODO: remove me
+// function MarkAllAsReadButton({
+//   onMarkAllAsRead,
+//   disabled,
+// }: {
+//   onMarkAllAsRead: (() => void) | undefined;
+//   disabled: boolean;
+// }): React.JSX.Element {
+//   const { t } = useTranslation();
+
+//   return (
+//     <Tooltip title={t('mark-all-as-read')}>
+//       <IconButton
+//         edge="end"
+//         onClick={onMarkAllAsRead}
+//         disabled={disabled}
+//       >
+//         <EnvelopeSimpleIcon color={disabled ? 'lightgray' : 'black'} />
+//       </IconButton>
+//     </Tooltip>
+//   );
+// }

002_source/cms/src/components/dashboard/layout/notifications-popover/mark-all-as-read-button.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
+import { useTranslation } from 'react-i18next';
+
+export function MarkAllAsReadButton({
+  onMarkAllAsRead,
+  disabled,
+}: {
+  onMarkAllAsRead: (() => void) | undefined;
+  disabled: boolean;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip title={t('mark-all-as-read')}>
+      <IconButton
+        edge="end"
+        onClick={onMarkAllAsRead}
+        disabled={disabled}
+      >
+        <EnvelopeSimpleIcon color={disabled ? 'lightgray' : 'black'} />
+      </IconButton>
+    </Tooltip>
+  );
+}