added changes ready to ship

src/components/NotificationBell.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { useNotifications } from '../NotificationContext';
+
+export const NotificationBell: React.FC = () => {
+    const { notifications, unreadCount, markAsRead } = useNotifications();
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div className="relative">
+            <button
+                className="p-2 rounded-full hover:bg-white/10 relative transition-colors"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                <span className="text-xl">🔔</span>
+                {unreadCount > 0 && (
+                    <span className="absolute top-1 right-1 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center border-2 border-[#0f172a]">
+                        {unreadCount}
+                    </span>
+                )}
+            </button>
+
+            {isOpen && (
+                <div className="absolute right-0 mt-2 w-80 bg-[#1e293b] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-md">
+                    <div className="p-4 border-b border-white/10 flex justify-between items-center">
+                        <h3 className="font-semibold text-white">Notifications</h3>
+                        <span className="text-xs text-slate-400">{unreadCount} unread</span>
+                    </div>
+                    <div className="max-height-[400px] overflow-y-auto">
+                        {notifications.length === 0 ? (
+                            <div className="p-8 text-center text-slate-500 italic">
+                                No notifications yet
+                            </div>
+                        ) : (
+                            notifications.map(n => (
+                                <div
+                                    key={n.id}
+                                    className={`p-4 border-b border-white/5 hover:bg-white/5 cursor-pointer transition-colors ${!n.is_read ? 'bg-blue-500/5' : ''}`}
+                                    onClick={() => markAsRead(n.id)}
+                                >
+                                    <div className="flex gap-3">
+                                        <div className="text-lg">
+                                            {n.type === 'assignment' ? '📋' : n.type === 'mention' ? '💬' : '🔔'}
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <p className={`text-sm ${!n.is_read ? 'text-white font-medium' : 'text-slate-300'}`}>
+                                                {n.title}
+                                            </p>
+                                            <p className="text-xs text-slate-400 mt-1 truncate">
+                                                {n.message}
+                                            </p>
+                                            <p className="text-[10px] text-slate-500 mt-1">
+                                                {new Date(n.created_at).toLocaleString()}
+                                            </p>
+                                        </div>
+                                        {!n.is_read && <div className="w-2 h-2 bg-blue-500 rounded-full mt-2" />}
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};