feat: implement alert notif on announcement

Author: reagan13

apps/codebility/app/home/announcements/AnnouncementButton.tsx

@@ -3,19 +3,45 @@
 import React, { useState } from "react";
 import { Megaphone } from "lucide-react";
 import { AnnouncementModal } from "./AnnouncementModal";
+import { useNotificationStore } from "@/store/notification-store"; 
+import { cn } from "@/lib/utils"; 
 
 export const AnnouncementButton: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const { notifications,markAsRead   } = useNotificationStore();
+  const unreadAnnouncements = notifications.filter(
+    (n) => n.type === "announcement" && !n.read
+  );
+
+  const unreadCount = unreadAnnouncements.length;
 
+  const handleOpen = () => {
+    setIsModalOpen(true);
+    unreadAnnouncements.forEach((n) => markAsRead(n.id));
+  };
+  
   return (
     <>
       <button
-        onClick={() => setIsModalOpen(true)}
+        onClick={handleOpen}
         className="relative rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
-        aria-label="View announcements"
+         aria-label={`Announcements${unreadCount > 0 ? ` - ${unreadCount} new` : ""}`}
+
         title="Announcements"
       >
-        <Megaphone className="h-5 w-5" />
+       <Megaphone
+        className={cn(
+          "h-5 w-5 text-gray-600 dark:text-gray-300 transition-transform",
+          unreadCount > 0 && "animate-bell-ring" 
+        )} />
+         {unreadCount > 0 && (
+          <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
+            <span className="relative inline-flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-medium text-white">
+              {unreadCount > 99 ? "99+" : unreadCount}
+            </span>
+          </span>
+        )}
       </button>
 
       <AnnouncementModal

apps/codebility/app/home/announcements/AnnouncementModal.tsx

@@ -125,11 +125,19 @@ export const AnnouncementModal: React.FC<AnnouncementModalProps> = ({
             : page
         )
       );
-    } catch (err) {
-      console.error("Error saving announcement:", err);
-      setError("Failed to save announcement");
-    }
-  };
+      const { data: { user } } = await supabase.auth.getUser();
+
+      await supabase.rpc("broadcast_announcement_notification", {
+        p_title: "Announcement Updated",
+        p_message: `"${updatedPage.title}" has been updated.`,
+        p_sender_id: user?.id,
+        p_action_url: "/home",
+      });
+          } catch (err) {
+            console.error("Error saving announcement:", err);
+            setError("Failed to save announcement");
+          }
+        };
 
   const handleTabClick = (category: AnnouncementCategory) => {
     setActiveTab(category);

apps/codebility/components/notifications/NotificationPanel.tsx

@@ -14,7 +14,8 @@ import {
   UserPlus,
   Calendar,
   Award,
-  Briefcase
+  Briefcase,
+  Megaphone
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@codevs/ui/button";
@@ -45,6 +46,7 @@ const notificationIcons = {
   project: Briefcase,
   task: CheckCircle,
   system: Info,
+  announcement: Megaphone
 };
 
 const notificationColors = {
@@ -61,6 +63,7 @@ const notificationColors = {
   project: "text-green-500",
   task: "text-blue-500",
   system: "text-gray-500",
+  announcement: "text-orange-500",
 };
 
 export function NotificationPanel({

apps/codebility/types/notifications.ts

@@ -16,7 +16,8 @@ export interface Notification {
     | "attendance"
     | "project"
     | "task"
-    | "system";
+    | "system"
+    |"announcement";
   priority: "low" | "normal" | "high" | "urgent";
   read: boolean;
   archived: boolean;