feat: add comments functionality and integrate Socket.io for real-time updates

- Implemented a full comments module in the backend with repository, service, controller, and DTOs using NestJS.
- Added frontend support for comments with a `CommentSection` component and integration into content pages.
- Introduced `SocketProvider` on the frontend and integrated Socket.io for real-time communication.
- Updated dependencies and configurations for Socket.io and WebSockets support.

frontend/src/app/(dashboard)/meme/[slug]/page.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ContentCard } from "@/components/content-card";
+import { CommentSection } from "@/components/comment-section";
 import { Button } from "@/components/ui/button";
 import { ViewCounter } from "@/components/view-counter";
 import { ContentService } from "@/services/content.service";
@@ -53,6 +54,7 @@ export default async function MemePage({
 				<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
 					<div className="lg:col-span-2">
 						<ContentCard content={content} />
+						<CommentSection contentId={content.id} />
 					</div>
 
 					<div className="space-y-6">

frontend/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Ubuntu_Mono, Ubuntu_Sans } from "next/font/google";
 import { Toaster } from "@/components/ui/sonner";
 import { AudioProvider } from "@/providers/audio-provider";
 import { AuthProvider } from "@/providers/auth-provider";
+import { SocketProvider } from "@/providers/socket-provider";
 import { ThemeProvider } from "@/providers/theme-provider";
 import "./globals.css";
 
@@ -72,10 +73,12 @@ export default function RootLayout({
 					disableTransitionOnChange
 				>
 					<AuthProvider>
-						<AudioProvider>
-							{children}
-							<Toaster />
-						</AudioProvider>
+						<SocketProvider>
+							<AudioProvider>
+								{children}
+								<Toaster />
+							</AudioProvider>
+						</SocketProvider>
 					</AuthProvider>
 				</ThemeProvider>
 			</body>

frontend/src/components/app-sidebar.tsx

@@ -10,6 +10,7 @@ import {
 	LayoutGrid,
 	LogIn,
 	LogOut,
+	MessageCircle,
 	PlusCircle,
 	Settings,
 	ShieldCheck,
@@ -180,6 +181,20 @@ export function AppSidebar() {
 								</Link>
 							</SidebarMenuButton>
 						</SidebarMenuItem>
+						{isAuthenticated && (
+							<SidebarMenuItem>
+								<SidebarMenuButton
+									asChild
+									isActive={pathname === "/messages"}
+									tooltip="Messages"
+								>
+									<Link href="/messages">
+										<MessageCircle />
+										<span>Messages</span>
+									</Link>
+								</SidebarMenuButton>
+							</SidebarMenuItem>
+						)}
 					</SidebarMenu>
 				</SidebarGroup>