feat: Implement notifications handling

.github/workflows/deploy-pr-dev.yml

@@ -0,0 +1,26 @@
+name: Build and Deploy on PR to Dev
+
+on:
+  pull_request:
+    branches:
+      - dev
+
+jobs:
+  build-and-deploy-on-pr:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v2
+
+    - name: Install Dependencies
+      run: yarn
+
+    - name: Build Project
+      run: yarn build
+
+    - name: Deploy to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist

.github/workflows/deploy-push-master.yml

@@ -0,0 +1,26 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v2
+
+    - name: Install Dependencies
+      run: yarn
+
+    - name: Build Project
+      run: yarn build
+
+    - name: Deploy to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist

README.md

@@ -46,11 +46,3 @@ npm run dev
   - [Storybook.js](https://storybook.js.org/): Isolated component development environment
 
 <hr />
-<div align="center">
-  <i>
-    Please feel free to reach out to me on <a href="https://www.linkedin.com/in/yurixander/">LinkedIn</a> for business inquiries.<br />
-    Images generated with DALL·E 3, and edited with Figma.<br />
-    &copy; 2023 Yurixander Ricardo<br /><br />
-    <img alt="Thumbs up illustration" src="./github/thumbs-up.png" />
-  </i>
-</div>

src/components/IconButton.tsx

@@ -7,6 +7,7 @@ export type IconButtonProps = {
   onClick: () => void
   tooltip: string
   Icon: IconType
+  size?: number
   color?: string
   isDisabled?: boolean
   isDotVisible?: boolean
@@ -19,6 +20,7 @@ const IconButton: FC<IconButtonProps> = ({
   color,
   isDisabled,
   isDotVisible,
+  size,
   className,
 }) => {
   const isDisabledClass = isDisabled
@@ -38,7 +40,7 @@ const IconButton: FC<IconButtonProps> = ({
         className
       )}>
       <NotificationDot isVisible={isDotVisible ?? false}>
-        <Icon style={{color}} size={20} className="text-neutral-300" />
+        <Icon style={{color}} size={size ?? 20} className="text-neutral-300" />
       </NotificationDot>
     </div>
   )

src/components/RosterUser.tsx

@@ -4,9 +4,9 @@ import UserProfile, {
 } from "./UserProfile"
 
 export enum UserPowerLevel {
-  Admin,
-  Moderator,
-  Member,
+  Admin = 100,
+  Moderator = 50,
+  Member = 0,
 }
 
 export type RosterUserProps = {

src/components/SidebarActions/NotificationsModal.tsx

@@ -1,64 +1,71 @@
 import {stringToColor, timeFormatter} from "@/utils/util"
-import {type FC} from "react"
-import {IoCloseCircle, IoTime} from "react-icons/io5"
+import {useMemo, type FC} from "react"
+import {IoCheckbox, IoCloseCircle, IoTime, IoTrash} from "react-icons/io5"
 import AvatarImage, {AvatarType} from "../Avatar"
 import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
 import Typography, {TypographyVariant} from "../Typography"
 import {twMerge} from "tailwind-merge"
 import IconButton from "../IconButton"
-import useNotifications from "./useNotifications"
 import {useSidebarModalActiveStore} from "./useSidebarActions"
+import {type LocalNotificationData} from "./useCachedNotifications"
 
 export type NotificationActions = {
   name: string
   actionVariant?: ButtonVariant
   onClick: () => void
 }
 
-export type NotificationProps = {
-  event: string
-  lastNotificationTime: number
-  id: string
-  displayName?: string
+export interface NotificationProps extends LocalNotificationData {
+  onDelete: () => void
+  onMarkAsRead: () => void
   actions?: NotificationActions[]
 }
 
 const Notification: FC<NotificationProps> = ({
-  displayName,
-  event,
+  body,
+  notificationTime,
   actions,
-  lastNotificationTime,
+  senderName,
+  avatarSenderUrl,
+  onDelete,
+  isRead,
+  onMarkAsRead,
 }) => {
   const userComponent =
-    displayName === undefined ? undefined : (
-      <b style={{color: stringToColor(displayName)}}>{displayName}</b>
+    senderName === undefined ? undefined : (
+      <b style={{color: stringToColor(senderName)}}>{senderName}</b>
     )
 
   return (
-    <div className="flex gap-2 p-2">
-      {displayName !== undefined && (
-        <div className="overflow-hidden rounded-lg">
+    <div
+      className={twMerge(
+        "flex gap-2 p-2",
+        !isRead && "rounded-lg bg-slate-100"
+      )}>
+      {senderName !== undefined && (
+        <div className="size-full max-h-8 max-w-8 overflow-hidden rounded-lg">
           <AvatarImage
             isRounded={false}
             isLarge={false}
-            avatarType={AvatarType.Profile}
-            displayName={displayName}
+            avatarType={AvatarType.Message}
+            displayName={senderName}
+            avatarUrl={avatarSenderUrl}
           />
         </div>
       )}
 
       <div className="flex flex-col gap-1">
         <div className="flex flex-row">
-          <Typography>
-            {userComponent} {event}
+          <Typography variant={TypographyVariant.P}>
+            {userComponent} {body}
           </Typography>
         </div>
 
         <div className="flex items-center gap-[2px]">
           <IoTime size={13} />
 
           <Typography variant={TypographyVariant.P}>
-            {timeFormatter(lastNotificationTime)}
+            {timeFormatter(notificationTime)}
           </Typography>
         </div>
 
@@ -76,13 +83,64 @@ const Notification: FC<NotificationProps> = ({
           </div>
         )}
       </div>
+
+      <div className="ml-auto flex">
+        {!isRead && (
+          <IconButton
+            className="size-min"
+            size={14}
+            onClick={onMarkAsRead}
+            tooltip="Remove notification"
+            Icon={IoCheckbox}
+          />
+        )}
+
+        <IconButton
+          className="size-min"
+          size={14}
+          onClick={onDelete}
+          tooltip="Remove notification"
+          Icon={IoTrash}
+        />
+      </div>
     </div>
   )
 }
 
-const NotificationsModal: FC = () => {
+export type NotificationsModalProps = {
+  notifications: NotificationProps[]
+  onMarkAllAsRead: () => void
+}
+
+const NotificationsModal: FC<NotificationsModalProps> = ({
+  notifications,
+  onMarkAllAsRead,
+}) => {
   const {clearActiveSidebarModal} = useSidebarModalActiveStore()
-  const {notifications} = useNotifications()
+
+  const notificationsUnread = useMemo(() => {
+    const notificationsUnreadProps: React.JSX.Element[] = []
+
+    for (const notification of notifications) {
+      if (!notification.isRead) {
+        notificationsUnreadProps.push(<Notification {...notification} />)
+      }
+    }
+
+    return notificationsUnreadProps
+  }, [notifications])
+
+  const notificationsMarkAsRead = useMemo(() => {
+    const notificationsUnreadProps: React.JSX.Element[] = []
+
+    for (const notification of notifications) {
+      if (notification.isRead) {
+        notificationsUnreadProps.push(<Notification {...notification} />)
+      }
+    }
+
+    return notificationsUnreadProps
+  }, [notifications])
 
   return (
     <div
@@ -103,6 +161,9 @@ const NotificationsModal: FC = () => {
           onClick={() => {
             // TODO: Close modal after mark all as read.
             clearActiveSidebarModal()
+
+            // TODO: Temporarily, remove in the future.
+            onMarkAllAsRead()
           }}
           label="Mark all as read"
         />
@@ -115,9 +176,8 @@ const NotificationsModal: FC = () => {
       </div>
 
       <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
-        {notifications.map(notification => (
-          <Notification {...notification} />
-        ))}
+        <div className="bg-slate-100">{notificationsUnread}</div>
+        {notificationsMarkAsRead}
       </div>
     </div>
   )

src/components/SidebarActions/SidebarActions.tsx

@@ -15,9 +15,11 @@ import useSidebarActions, {
 import DirectMessageModal from "./DirectMessageModal"
 import NotificationsModal from "./NotificationsModal"
 import Modal from "../Modal"
+import useNotifications from "./useNotifications"
 
 const SidebarModalsHandler: FC = () => {
   const {sidebarModalActive} = useSidebarModalActiveStore()
+  const {notifications, markAsReadAllNotifications} = useNotifications()
 
   const activeModalElement = useMemo(() => {
     if (sidebarModalActive === null) {
@@ -29,10 +31,15 @@ const SidebarModalsHandler: FC = () => {
         return <DirectMessageModal />
       }
       case SidebarModals.Notifications: {
-        return <NotificationsModal />
+        return (
+          <NotificationsModal
+            notifications={notifications}
+            onMarkAllAsRead={markAsReadAllNotifications}
+          />
+        )
       }
     }
-  }, [sidebarModalActive])
+  }, [markAsReadAllNotifications, notifications, sidebarModalActive])
 
   return (
     <>
@@ -51,7 +58,8 @@ export type SidebarActionsProps = {
 }
 
 const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
-  const {onLogout, setActiveSidebarModal} = useSidebarActions()
+  const {onLogout, setActiveSidebarModal, containsUnreadNotifications} =
+    useSidebarActions()
 
   return (
     <>
@@ -80,7 +88,7 @@ const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
           }}
           tooltip="Notifications"
           Icon={IoNotificationsSharp}
-          isDotVisible
+          isDotVisible={containsUnreadNotifications}
         />
 
         <IconButton