enhance(notifications): enhance notification handling and styling (#24)

- Updated the NotificationContent component to handle milestone due reminders, providing specific messages based on the notification's status.
- Adjusted the NotificationBell component's styling for system announcements to improve visual consistency.
- Modified emailWorker to support raw HTML content for system announcements, enhancing email formatting options.
- Improved the CODE_OF_CONDUCT.md by clarifying reporting guidelines and updating contact information formatting.

Author: therealbrad

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-conduct@testplanit.com. All complaints will be reviewed and investigated promptly
+<conduct@testplanit.com>. All complaints will be reviewed and investigated promptly
 and fairly.
 
 All community leaders are obligated to respect the privacy and security of the
@@ -150,25 +150,27 @@ In addition to the Contributor Covenant, the TestPlanIt community upholds these
 ### Reporting Guidelines
 
 When reporting violations, please include:
-- Date and time of the incident
-- Location (GitHub issue, Discord channel, etc.)
-- Description of the incident
-- Screenshots or links if applicable
-- Any additional context
+
+* Date and time of the incident
+* Location (GitHub issue, Discord channel, etc.)
+* Description of the incident
+* Screenshots or links if applicable
+* Any additional context
 
 Reports will be handled with discretion and confidentiality.
 
 ### Response Time
 
 The TestPlanIt team commits to:
-- Acknowledging receipt of reports within 24 hours
-- Providing an initial assessment within 72 hours
-- Resolving issues within 7 days when possible
+
+* Acknowledging receipt of reports within 24 hours
+* Providing an initial assessment within 72 hours
+* Resolving issues within 7 days when possible
 
 ### Appeals Process
 
-If you disagree with an enforcement decision, you may appeal by emailing appeals@testplanit.com within 14 days of the decision. Appeals will be reviewed by a different team member when possible.
+If you disagree with an enforcement decision, you may appeal by emailing <appeals@testplanit.com> within 14 days of the decision. Appeals will be reviewed by a different team member when possible.
 
 ---
 
-*Last updated: November 2024*
+#### *Last updated: November 2024*

testplanit/components/NotificationBell.tsx

@@ -80,7 +80,7 @@ function NotificationItem({
       className={cn(
         "p-3 border-b last:border-0 hover:bg-muted/50 transition-colors",
         !notification.isRead && "bg-primary/20",
-        notification.type === "SYSTEM_ANNOUNCEMENT" && "bg-blue-50 dark:bg-blue-950/20"
+        !notification.isRead && notification.type === "SYSTEM_ANNOUNCEMENT" && "bg-accent"
       )}
       data-notification-item
       data-state={notification.isRead ? "read" : "unread"}

testplanit/components/NotificationContent.tsx

@@ -21,6 +21,7 @@ export function NotificationContent({
 }: NotificationContentProps) {
   const locale = useLocale();
   const t = useTranslations("components.notifications.content");
+  const tMilestones = useTranslations("milestones.notifications");
 
   // Get notification data (Prisma automatically deserializes JSON fields)
   const data = notification.data || {};
@@ -61,6 +62,7 @@ export function NotificationContent({
               <ProjectNameCell
                 projectId={data.projectId}
                 value={data.projectName}
+                size="sm"
               />
             </div>
           </div>
@@ -116,6 +118,7 @@ export function NotificationContent({
                   <ProjectNameCell
                     projectId={group.projectId}
                     value={group.projectName}
+                    size="sm"
                   />
                 </div>
               </div>
@@ -159,6 +162,7 @@ export function NotificationContent({
               <ProjectNameCell
                 projectId={data.projectId}
                 value={data.projectName}
+                size="sm"
               />
             </div>
           </div>
@@ -254,6 +258,7 @@ export function NotificationContent({
               <ProjectNameCell
                 projectId={data.projectId}
                 value={data.projectName}
+                size="sm"
               />
             </div>
           </div>
@@ -270,6 +275,63 @@ export function NotificationContent({
     );
   }
 
+  // Handle milestone due reminders
+  if (notification.type === "MILESTONE_DUE_REMINDER") {
+    // Check if we have the data structure with all IDs
+    if (data.projectId && data.milestoneId) {
+      const milestoneLink = `/projects/milestones/${data.projectId}/${data.milestoneId}`;
+      const isOverdue = data.isOverdue;
+      const dueDate = data.dueDate
+        ? new Date(data.dueDate).toLocaleDateString(locale)
+        : "";
+
+      return (
+        <div className="space-y-2">
+          <h4 className="font-medium text-sm">
+            {isOverdue ? t("milestoneOverdueTitle") : t("milestoneDueSoonTitle")}
+          </h4>
+          <div className="text-sm text-muted-foreground space-y-1">
+            <div className="flex items-center gap-1 flex-wrap">
+              <Link
+                href={milestoneLink}
+                className="font-medium text-primary hover:underline inline-flex items-center gap-1"
+              >
+                <MilestoneNameDisplay
+                  milestone={{
+                    id: data.milestoneId,
+                    name: data.milestoneName,
+                    milestoneTypeIconName: data.milestoneTypeIconName,
+                  }}
+                  showIcon={true}
+                />
+                <ExternalLink className="h-3 w-3" />
+              </Link>
+              <span>{t("inProject")}</span>
+              <ProjectNameCell
+                projectId={data.projectId}
+                value={data.projectName}
+                size="sm"
+              />
+            </div>
+            <div className="text-xs">
+              {isOverdue
+                ? tMilestones("overdue", { name: data.milestoneName, dueDate })
+                : tMilestones("dueSoon", { name: data.milestoneName, dueDate })}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // Fallback for old notifications without full data
+    return (
+      <div className="space-y-1">
+        <h4 className="font-medium text-sm">{notification.title}</h4>
+        <p className="text-sm text-muted-foreground">{notification.message}</p>
+      </div>
+    );
+  }
+
   // Handle system announcements
   if (notification.type === "SYSTEM_ANNOUNCEMENT") {
     const hasRichContent = notification.data?.richContent;
@@ -278,7 +340,7 @@ export function NotificationContent({
     return (
       <div className="space-y-2">
         <div className="flex items-center gap-2">
-          <Megaphone className="h-4 w-4 text-blue-500" />
+          <Megaphone className="h-4 w-4 text-primary" />
           <h4 className="font-medium text-sm">{notification.title}</h4>
         </div>
         <div className="space-y-1">

testplanit/workers/emailWorker.ts

@@ -143,8 +143,11 @@ const processor = async (job: Job) => {
             }
           }
         } else if (notification.type === "SYSTEM_ANNOUNCEMENT") {
-          // For system announcements, check if we have rich content
-          if (data.richContent && isTipTapContent(data.richContent)) {
+          // For system announcements, check if we have rich content or raw HTML
+          if (data.htmlContent) {
+            // Use raw HTML content (e.g., from upgrade notifications)
+            htmlMessage = data.htmlContent;
+          } else if (data.richContent && isTipTapContent(data.richContent)) {
             htmlMessage = tiptapToHtml(data.richContent);
           }
           // Add sender info to the message if not using HTML