feat: add socket context and notifications listener for real-time event handling

- Introduced `SocketProvider` to manage WebSocket connection and context across the app.
- Added `NotificationsListener` component to handle real-time notifications and display feedback via `toast`.
- Enabled event subscriptions for projects, groups, collaborators, and user actions.

frontend/components/notifications.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { useSocket } from "@/lib/socket-context";
+import { toast } from "sonner";
+
+/**
+ * Notification component that listens for real-time notifications
+ * and displays them using toast notifications.
+ */
+export function NotificationsListener() {
+  const { onNotification, isConnected } = useSocket();
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    if (!isConnected) return;
+
+    // Set up notification listener
+    const unsubscribe = onNotification((data) => {
+      // Display notification based on type
+      switch (data.type) {
+        case "project_invitation":
+          toast.info(data.message, {
+            description: `You've been invited to collaborate on ${data.projectName}`,
+            action: {
+              label: "View Project",
+              onClick: () => window.location.href = `/projects/${data.projectId}`,
+            },
+          });
+          break;
+        case "group_update":
+          toast.info(data.message, {
+            description: data.description,
+            action: data.projectId && {
+              label: "View Groups",
+              onClick: () => window.location.href = `/projects/${data.projectId}/groups`,
+            },
+          });
+          break;
+        case "person_added":
+          toast.success(data.message, {
+            description: data.description,
+          });
+          break;
+        case "person_removed":
+          toast.info(data.message, {
+            description: data.description,
+          });
+          break;
+        default:
+          toast.info(data.message);
+      }
+    });
+
+    setInitialized(true);
+
+    // Clean up on unmount
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected, onNotification]);
+
+  // This component doesn't render anything visible
+  return null;
+}