Add socket io

Dockerfile

@@ -38,6 +38,12 @@ COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
+COPY --from=builder --chown=nextjs:nodejs /app/server.js ./server.js
+COPY --from=builder /app/package.json ./package.json
+
+RUN corepack enable pnpm && pnpm install --prod
+RUN pnpm install
+
 USER nextjs
 EXPOSE 3000
 ENV PORT=3000

components/core/notifications.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import { getUserNotifications } from "@/app/(dashboard)/[tenant]/settings/actions";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
 } from "@/components/ui/popover";
 import type { NotificationWithUser } from "@/drizzle/types";
+import { socket } from "@/lib/utils/socket-client";
 import { Bell } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
+import { SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
 
 function Dot({ className }: { className?: string }) {
 	return (
@@ -29,6 +29,30 @@ function Dot({ className }: { className?: string }) {
 }
 
 function Notifications({ userId }: { userId: string }) {
+	const [isConnected, setIsConnected] = useState(false);
+
+	useEffect(() => {
+		if (socket.connected) {
+			onConnect();
+		}
+
+		function onConnect() {
+			setIsConnected(true);
+		}
+
+		function onDisconnect() {
+			setIsConnected(false);
+		}
+
+		socket.on("connect", onConnect);
+		socket.on("disconnect", onDisconnect);
+
+		return () => {
+			socket.off("connect", onConnect);
+			socket.off("disconnect", onDisconnect);
+		};
+	}, []);
+
 	const [notifications, setNotifications] = useState<NotificationWithUser[]>(
 		[],
 	);
@@ -60,21 +84,16 @@ function Notifications({ userId }: { userId: string }) {
 	return (
 		<Popover onOpenChange={fetchNotifications}>
 			<PopoverTrigger asChild>
-				<Button
-					size="icon"
-					variant="outline"
-					className="relative"
-					aria-label="Open notifications"
-				>
-					<Bell size={16} strokeWidth={2} aria-hidden="true" />
-					{unreadCount > 0 && (
-						<Badge className="absolute -top-2 left-full -translate-x-1/2 px-1 rounded-full h-5 min-w-[20px] flex items-center justify-center">
-							{unreadCount > 99 ? "99+" : unreadCount}
-						</Badge>
-					)}
-				</Button>
+				<SidebarMenuItem>
+					<SidebarMenuButton asChild>
+						<div className="relative flex cursor-pointer">
+							<Bell aria-hidden="true" />
+							<span>Notifications</span>
+						</div>
+					</SidebarMenuButton>
+				</SidebarMenuItem>
 			</PopoverTrigger>
-			<PopoverContent className="w-80 p-1" align="end">
+			<PopoverContent className="w-80 ml-4" align="end">
 				<div className="flex items-baseline justify-between gap-4 px-3 py-2">
 					<div className="text-sm font-semibold">Notifications</div>
 					{unreadCount > 0 && (

components/nav-main.tsx

@@ -33,6 +33,7 @@ import { CalendarHeartIcon } from "lucide-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
+import { Notifications } from "./core/notifications";
 
 type MainNavItem = {
 	title: string;
@@ -164,6 +165,9 @@ export function NavMain() {
 
 	return (
 		<SidebarGroup>
+			<SidebarMenu>
+				<Notifications userId="1" />
+			</SidebarMenu>
 			<SidebarGroupLabel className="font-bold">Tools</SidebarGroupLabel>
 			<SidebarMenu>
 				{navItems.map((navItem) =>

components/nav-user.tsx

@@ -34,7 +34,7 @@ export function NavUser({
 	const { tenant: orgSlug } = useParams();
 
 	return (
-		<SidebarMenu className="pb-6 md:pb-0">
+		<SidebarMenu className="pb-8 md:pb-0">
 			<SidebarMenuItem>
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>

lib/utils/socket-client.ts

@@ -0,0 +1,5 @@
+"use client";
+
+import { io } from "socket.io-client";
+
+export const socket = io();

package.json

@@ -3,9 +3,9 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "TZ=UTC next dev",
+		"dev": "TZ=UTC node server.js",
 		"build": "next build",
-		"start": "next start",
+		"start": "NODE_ENV=production node server.js",
 		"lint": "biome lint",
 		"generate:migrations": "drizzle-kit generate"
 	},
@@ -59,6 +59,8 @@
 		"remark-gfm": "^4.0.0",
 		"rrule": "^2.8.1",
 		"sharp": "^0.33.4",
+		"socket.io": "^4.8.1",
+		"socket.io-client": "^4.8.1",
 		"strip-markdown": "^6.0.0",
 		"tailwind-merge": "^1.14.0",
 		"tailwindcss": "3.3.2",