Add anonymous view notifications for non-logged-in viewers

apps/web/app/(org)/dashboard/_components/Notifications/Filter.ts

@@ -16,12 +16,14 @@ export const FilterLabels: Record<FilterType, string> = {
 	reply: "Replies",
 	view: "Views",
 	reaction: "Reactions",
+	anon_view: "Views",
 };
 
 export const matchNotificationFilter = (
 	filter: FilterType,
 	type: NotificationType,
 ): boolean => {
 	if (filter === "all") return true;
+	if (filter === "view") return type === "view" || type === "anon_view";
 	return type === filter;
 };

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

@@ -19,7 +19,7 @@ const descriptionMap: Record<NotificationType, string> = {
 	reply: `replied to your comment`,
 	view: `viewed your video`,
 	reaction: `reacted to your video`,
-	// mention: `mentioned you in a comment`,
+	anon_view: `viewed your video`,
 };
 
 export const NotificationItem = ({
@@ -36,6 +36,11 @@ export const NotificationItem = ({
 		}
 	};
 
+	const isAnonView = notification.type === "anon_view";
+	const displayName = isAnonView
+		? notification.anonName
+		: notification.author.name;
+
 	return (
 		<Link
 			href={link}
@@ -45,30 +50,39 @@ export const NotificationItem = ({
 				className,
 			)}
 		>
-			{/* Avatar */}
 			<div className="relative flex-shrink-0">
-				<SignedImageUrl
-					image={notification.author.avatar as ImageUpload.ImageUrl | null}
-					name={notification.author.name}
-					className="relative flex-shrink-0 size-7"
-					letterClass="text-sm"
-				/>
+				{isAnonView ? (
+					<div className="relative flex-shrink-0 size-7 rounded-full bg-gray-3 flex items-center justify-center text-sm">
+						🐾
+					</div>
+				) : (
+					<SignedImageUrl
+						image={notification.author.avatar as ImageUpload.ImageUrl | null}
+						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>
 				)}
 			</div>
 
-			{/* Content */}
 			<div className="flex flex-col flex-1 justify-center">
 				<div className="flex gap-1 items-center">
 					<span className="font-medium text-gray-12 text-[13px]">
-						{notification.author.name}
+						{displayName}
 					</span>
 					<span className="text-gray-10 text-[13px]">
 						{descriptionMap[notification.type]}
 					</span>
 				</div>
 
+				{isAnonView && notification.location && (
+					<p className="text-[13px] leading-4 text-gray-11">
+						{notification.location}
+					</p>
+				)}
 				{(notification.type === "comment" || notification.type === "reply") && (
 					<p className="mb-2 text-[13px] h-fit italic leading-4 text-gray-11 line-clamp-2">
 						{notification.comment.content}
@@ -79,15 +93,15 @@ export const NotificationItem = ({
 				</p>
 			</div>
 
-			{/* Icon */}
 			<div className="flex flex-shrink-0 items-center mt-1">
 				{notification.type === "comment" && (
 					<FontAwesomeIcon icon={faComment} className="text-gray-10 size-4" />
 				)}
 				{notification.type === "reply" && (
 					<FontAwesomeIcon icon={faReply} className="text-gray-10 size-4" />
 				)}
-				{notification.type === "view" && (
+				{(notification.type === "view" ||
+					notification.type === "anon_view") && (
 					<FontAwesomeIcon icon={faEye} className="text-gray-10 size-4" />
 				)}
 				{notification.type === "reaction" && (
@@ -104,9 +118,9 @@ function getLink(notification: APINotification) {
 			return `/s/${notification.videoId}/?reply=${notification.comment.id}`;
 		case "comment":
 		case "reaction":
-			// case "mention":
 			return `/s/${notification.videoId}/?comment=${notification.comment.id}`;
-		default:
+		case "view":
+		case "anon_view":
 			return `/s/${notification.videoId}`;
 	}
 }

apps/web/app/api/analytics/track/route.ts

@@ -4,8 +4,44 @@ import { Effect, Option } from "effect";
 import type { NextRequest } from "next/server";
 import UAParser from "ua-parser-js";
 
+import { getAnonymousName } from "@/lib/anonymous-names";
+import { createAnonymousViewNotification } from "@/lib/Notification";
 import { runPromise } from "@/lib/server";
 
+const anonNotifRateLimit = new Map<
+	string,
+	{ count: number; resetAt: number }
+>();
+const ANON_NOTIF_WINDOW_MS = 5 * 60 * 1000;
+const ANON_NOTIF_MAX_PER_VIDEO = 50;
+const ANON_NOTIF_MAX_ENTRIES = 10_000;
+let anonNotifCleanupCounter = 0;
+
+function checkAnonNotifRateLimit(videoId: string): boolean {
+	anonNotifCleanupCounter++;
+	if (anonNotifCleanupCounter % 100 === 0) {
+		const now = Date.now();
+		for (const [k, v] of anonNotifRateLimit) {
+			if (v.resetAt < now) anonNotifRateLimit.delete(k);
+		}
+		if (anonNotifRateLimit.size > ANON_NOTIF_MAX_ENTRIES)
+			anonNotifRateLimit.clear();
+	}
+
+	const now = Date.now();
+	const entry = anonNotifRateLimit.get(videoId);
+	if (!entry || entry.resetAt < now) {
+		anonNotifRateLimit.set(videoId, {
+			count: 1,
+			resetAt: now + ANON_NOTIF_WINDOW_MS,
+		});
+		return true;
+	}
+	if (entry.count >= ANON_NOTIF_MAX_PER_VIDEO) return false;
+	entry.count++;
+	return true;
+}
+
 interface TrackPayload {
 	videoId: string;
 	orgId?: string | null;
@@ -100,6 +136,34 @@ export async function POST(request: NextRequest) {
 					user_id: userId,
 				},
 			]);
+
+			if (
+				!userId &&
+				sessionId !== "anon" &&
+				checkAnonNotifRateLimit(body.videoId)
+			) {
+				const anonName = getAnonymousName(sessionId);
+				const locationParts = [city, country].filter(Boolean);
+				const location =
+					locationParts.length > 0 ? locationParts.join(", ") : null;
+
+				yield* Effect.tryPromise(() =>
+					createAnonymousViewNotification({
+						videoId: body.videoId,
+						sessionId,
+						anonName,
+						location,
+					}),
+				).pipe(
+					Effect.catchAll((error) => {
+						console.error(
+							"Failed to create anonymous view notification:",
+							error,
+						);
+						return Effect.void;
+					}),
+				);
+			}
 		}).pipe(provideOptionalAuth),
 	);
 

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

@@ -3,25 +3,13 @@ import { getCurrentUser } from "@cap/database/auth/session";
 import { notifications, users } from "@cap/database/schema";
 import { Notification as APINotification } from "@cap/web-api-contract";
 import { ImageUploads } from "@cap/web-backend";
-import { and, desc, eq, isNull, sql } from "drizzle-orm";
+import { and, desc, eq, isNull, ne, sql } from "drizzle-orm";
 import { Effect } from "effect";
 import { NextResponse } from "next/server";
-import { z } from "zod";
 import type { NotificationType } from "@/lib/Notification";
 import { runPromise } from "@/lib/server";
 import { jsonExtractString } from "@/utils/sql";
 
-const _notificationDataSchema = z.object({
-	authorId: z.string(),
-	content: z.string().optional(),
-	videoId: z.string(),
-});
-
-type NotificationsKeys = (typeof notifications.$inferSelect)["type"];
-type NotificationsKeysWithReplies =
-	| Exclude<`${NotificationsKeys}s`, "replys">
-	| "replies";
-
 export const dynamic = "force-dynamic";
 
 export async function GET() {
@@ -51,7 +39,10 @@ export async function GET() {
 			.from(notifications)
 			.leftJoin(
 				users,
-				and(eq(jsonExtractString(notifications.data, "authorId"), users.id)),
+				and(
+					ne(notifications.type, "anon_view"),
+					eq(jsonExtractString(notifications.data, "authorId"), users.id),
+				),
 			)
 			.where(
 				and(
@@ -78,26 +69,40 @@ export async function GET() {
 			)
 			.groupBy(notifications.type);
 
-		const formattedCountResults: Record<NotificationType, number> = {
+		type NotificationCountKey = Exclude<NotificationType, "anon_view">;
+		const formattedCountResults: Record<NotificationCountKey, number> = {
 			view: 0,
 			comment: 0,
 			reply: 0,
 			reaction: 0,
-			// recordings: 0,
-			// mentions: 0,
 		};
 
-		countResults.forEach(({ type, count }) => {
-			formattedCountResults[type] = Number(count);
-		});
+		for (const { type, count } of countResults) {
+			if (type === "anon_view") {
+				formattedCountResults.view += Number(count);
+			} else if (type in formattedCountResults) {
+				formattedCountResults[type as NotificationCountKey] += Number(count);
+			}
+		}
 
 		const formattedNotifications = await Effect.gen(function* () {
 			const imageUploads = yield* ImageUploads;
 
 			return yield* Effect.all(
 				notificationsWithAuthors.map(({ notification, author }) =>
 					Effect.gen(function* () {
-						// all notifications currently require an author
+						if (notification.type === "anon_view") {
+							return APINotification.parse({
+								id: notification.id,
+								type: "anon_view",
+								readAt: notification.readAt,
+								videoId: notification.data.videoId,
+								createdAt: notification.createdAt,
+								anonName: notification.data.anonName ?? "Anonymous Viewer",
+								location: notification.data.location ?? null,
+							});
+						}
+
 						if (!author) return null;
 
 						const resolvedAvatar = author.avatar