web: fix avatars in notifications

apps/web/app/(org)/dashboard/_components/Notifications/NotificationItem.tsx

@@ -5,6 +5,7 @@
 import moment from "moment";
 import Link from "next/link";
 import { markAsRead } from "@/actions/notifications/mark-as-read";
+import { SignedImageUrl } from "@/components/SignedImageUrl";
 import type { NotificationType } from "@/lib/Notification";
 
 type NotificationItemProps = {
@@ -45,17 +46,12 @@
 		>
 			{/* Avatar */}
 			<div className="relative flex-shrink-0">
-				{notification.author.avatar ? (
-					<img
-						src={notification.author.avatar}
-						alt={notification.author.name}
-						className="object-cover rounded-full size-10"
-					/>
-				) : (
-					<div className="flex justify-center items-center text-xl font-medium text-white bg-purple-500 rounded-full size-10">
-						{notification.author.name.charAt(0)}
-					</div>
-				)}
+				<SignedImageUrl
+					image={notification.author.avatar}
+					name={notification.author.name}
+					className="relative flex-shrink-0 size-7"
+					letterClass="text-sm"
+				/>
 				{notification.readAt === null && (
 					<div className="absolute top-0 right-0 size-2.5 rounded-full bg-red-500 border-2 border-gray-1"></div>
 				)}

apps/web/app/api/notifications/route.ts

@@ -2,12 +2,13 @@ import { db } from "@cap/database";
 import { getCurrentUser } from "@cap/database/auth/session";
 import { notifications, users } from "@cap/database/schema";
 import { Notification as APINotification } from "@cap/web-api-contract";
-import { and, ColumnBaseConfig, desc, eq, isNull, sql } from "drizzle-orm";
-import { MySqlColumn } from "drizzle-orm/mysql-core";
+import { ImageUploads } from "@cap/web-backend";
+import { and, desc, eq, isNull, sql } from "drizzle-orm";
+import { Effect } from "effect";
 import { NextResponse } from "next/server";
-import { AvcProfileInfo } from "node_modules/@remotion/media-parser/dist/containers/avc/parse-avc";
 import { z } from "zod";
 import type { NotificationType } from "@/lib/Notification";
+import { runPromise } from "@/lib/server";
 import { jsonExtractString } from "@/utils/sql";
 
 const notificationDataSchema = z.object({
@@ -90,32 +91,44 @@ export async function GET() {
 			formattedCountResults[type] = Number(count);
 		});
 
-		const formattedNotifications = notificationsWithAuthors
-			.map(({ notification, author }) => {
-				try {
-					// all notifications currently require an author
-					if (!author) return;
+		const formattedNotifications = await Effect.gen(function* () {
+			const imageUploads = yield* ImageUploads;
 
-					return APINotification.parse({
-						id: notification.id,
-						type: notification.type,
-						readAt: notification.readAt,
-						videoId: notification.data.videoId,
-						createdAt: notification.createdAt,
-						data: notification.data,
-						comment: notification.data.comment,
-						author: {
-							id: author.id,
-							name: author.name ?? "Unknown",
-							avatar: author.avatar,
-						},
-					});
-				} catch (error) {
-					console.error("Invalid notification data:", error);
-					return null;
-				}
-			})
-			.filter(Boolean);
+			return yield* Effect.all(
+				notificationsWithAuthors.map(({ notification, author }) =>
+					Effect.gen(function* () {
+						// all notifications currently require an author
+						if (!author) return null;
+
+						const resolvedAvatar = author.avatar
+							? yield* imageUploads.resolveImageUrl(author.avatar)
+							: null;
+
+						return APINotification.parse({
+							id: notification.id,
+							type: notification.type,
+							readAt: notification.readAt,
+							videoId: notification.data.videoId,
+							createdAt: notification.createdAt,
+							data: notification.data,
+							comment: notification.data.comment,
+							author: {
+								id: author.id,
+								name: author.name ?? "Unknown",
+								avatar: resolvedAvatar,
+							},
+						});
+					}).pipe(
+						Effect.catchAll((error) => {
+							console.error("Invalid notification data:", error);
+							return Effect.succeed(null);
+						}),
+					),
+				),
+			);
+		})
+			.pipe(runPromise)
+			.then((results) => results.filter(Boolean));
 
 		return NextResponse.json({
 			notifications: formattedNotifications,