Create index.tsx

src/components/molecules/NotificationItem/index.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import * as React from "react";
+import { 
+  CheckCircle2, 
+  AlertCircle, 
+  Info, 
+  Bell, 
+  Trash2, 
+  Check,
+  Circle
+} from "lucide-react";
+import { Icon } from "@/components/atoms/Icon";
+import { Spinner } from "@/components/atoms/Spinner";
+import { cn } from "@/lib/utils";
+
+// 1. Specialized Types for Research Workflows
+export type NotificationType = "success" | "info" | "warning" | "error" | "system";
+
+export interface NotificationItemProps {
+  id: string;
+  type: NotificationType;
+  title: string;
+  message: string;
+  timestamp: string; // Expecting ISO format
+  isRead: boolean;
+  onRead: (id: string) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+  className?: string;
+}
+
+/**
+ * NotificationItem Molecule (Highly Optimized)
+ * Uses React.memo to prevent unnecessary re-renders in large notification feeds.
+ */
+export const NotificationItem = React.memo(({
+  id,
+  type,
+  title,
+  message,
+  timestamp,
+  isRead,
+  onRead,
+  onDelete,
+  className,
+}: NotificationItemProps) => {
+  const [isProcessing, setIsProcessing] = React.useState<'read' | 'delete' | null>(null);
+
+  // 2. Icon Mapping with Semantic Colors
+  const getMetadata = () => {
+    switch (type) {
+      case "success": return { icon: CheckCircle2, color: "text-emerald-500", bg: "bg-emerald-50" };
+      case "error": return { icon: AlertCircle, color: "text-destructive", bg: "bg-destructive/5" };
+      case "warning": return { icon: AlertCircle, color: "text-amber-500", bg: "bg-amber-50" };
+      case "system": return { icon: Bell, color: "text-primary", bg: "bg-primary/5" };
+      default: return { icon: Info, color: "text-blue-500", bg: "bg-blue-50" };
+    }
+  };
+
+  const { icon, color, bg } = getMetadata();
+
+  const handleAction = async (action: 'read' | 'delete', fn: (id: string) => Promise<void>) => {
+    if (isProcessing) return;
+    try {
+      setIsProcessing(action);
+      await fn(id);
+    } catch (error) {
+      console.error(`Notification action ${action} failed:`, error);
+    } finally {
+      setIsProcessing(null);
+    }
+  };
+
+  return (
+    <div 
+      role="listitem"
+      className={cn(
+        "group relative flex items-start gap-4 p-4 transition-all duration-200 border-b last:border-0",
+        !isRead ? "bg-primary/[0.03]" : "bg-background",
+        isProcessing === 'delete' && "scale-95 opacity-0", // Visual cue for deletion
+        className
+      )}
+    >
+      {/* 3. Unread Indicator Dot */}
+      {!isRead && (
+        <div className="absolute left-1 top-1/2 -translate-y-1/2">
+          <Circle className="h-2 w-2 fill-primary text-primary animate-pulse" />
+        </div>
+      )}
+
+      {/* 4. Status Icon Wrapper */}
+      <div className={cn("mt-1 shrink-0 rounded-full p-2 border shadow-sm", bg, color)}>
+        <Icon icon={icon} size={16} />
+      </div>
+
+      {/* 5. Content Area */}
+      <div className="flex-1 min-w-0 space-y-1">
+        <div className="flex items-center justify-between gap-4">
+          <h5 className={cn(
+            "text-sm font-semibold leading-none truncate",
+            !isRead ? "text-foreground" : "text-muted-foreground"
+          )}>
+            {title}
+          </h5>
+          <time className="text-[10px] whitespace-nowrap text-muted-foreground tabular-nums font-medium">
+            {/* Logic: Replace with a 'timeago' formatter in the actual implementation */}
+            {timestamp}
+          </time>
+        </div>
+        
+        <p className="text-xs leading-relaxed text-muted-foreground line-clamp-2 break-words">
+          {message}
+        </p>
+      </div>
+
+      {/* 6. Optimized Action Bar (Reveal on Hover) */}
+      <div className="flex items-center gap-1 ml-2">
+        {!isRead && (
+          <button 
+            onClick={() => handleAction('read', onRead)}
+            disabled={!!isProcessing}
+            className="p-2 rounded-md hover:bg-emerald-500/10 text-emerald-600 transition-colors disabled:opacity-50"
+            aria-label="Mark as read"
+          >
+            {isProcessing === 'read' ? <Spinner size={14} /> : <Check size={14} />}
+          </button>
+        )}
+        
+        <button 
+          onClick={() => handleAction('delete', onDelete)}
+          disabled={!!isProcessing}
+          className="p-2 rounded-md hover:bg-destructive/10 text-destructive sm:opacity-0 group-hover:opacity-100 transition-all focus:opacity-100"
+          aria-label="Delete notification"
+        >
+          {isProcessing === 'delete' ? <Spinner size={14} /> : <Trash2 size={14} />}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+NotificationItem.displayName = "NotificationItem";