Add anonymous view notifications for non-logged-in viewers

apps/web/actions/notifications/update-preferences.ts

@@ -14,6 +14,7 @@ export const updatePreferences = async ({
 		pauseReplies: boolean;
 		pauseViews: boolean;
 		pauseReactions: boolean;
+		pauseAnonViews?: boolean;
 	};
 }) => {
 	const currentUser = await getCurrentUser();

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

@@ -1,6 +1,8 @@
-import type { NotificationType } from "@/lib/Notification";
+import type { Notification } from "@cap/web-api-contract";
 
-export type FilterType = "all" | NotificationType;
+type NotificationType = Notification["type"];
+
+export type FilterType = "all" | Exclude<NotificationType, "anon_view">;
 
 export const Filters: Array<FilterType> = [
 	"all",
@@ -23,5 +25,6 @@ export const matchNotificationFilter = (
 	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/FilterTabs.tsx

@@ -1,14 +1,13 @@
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { useEffect, useMemo, useRef } from "react";
-import type { NotificationType } from "@/lib/Notification";
 import { FilterLabels, Filters, type FilterType } from "./Filter";
 
 type FilterTabsProps = {
 	activeFilter: FilterType;
 	setActiveFilter: (filter: FilterType) => void;
 	loading: boolean;
-	count?: Record<NotificationType, number>;
+	count?: Record<Exclude<FilterType, "all">, number>;
 };
 
 export const FilterTabs = ({
@@ -49,9 +48,10 @@ export const FilterTabs = ({
 		>
 			{Filters.map((filter) => (
 				<div key={filter} className="relative min-w-fit">
-					<div
+					<button
+						type="button"
 						onClick={() => setActiveFilter(filter)}
-						className="flex relative gap-2 items-center py-4 cursor-pointer group"
+						className="flex relative gap-2 items-center py-4 cursor-pointer group bg-transparent border-0"
 					>
 						<p
 							className={clsx(
@@ -79,7 +79,7 @@ export const FilterTabs = ({
 								</p>
 							)}
 						</div>
-					</div>
+					</button>
 
 					{/* Indicator */}
 					{activeFilter === filter && (

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

@@ -7,19 +7,20 @@ 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 = {
 	notification: APINotification;
 	className?: string;
 };
 
+type NotificationType = APINotification["type"];
+
 const descriptionMap: Record<NotificationType, string> = {
 	comment: `commented on your video`,
 	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 +37,12 @@ export const NotificationItem = ({
 		}
 	};
 
+	const isAnonView = notification.type === "anon_view";
+	const displayName =
+		notification.type === "anon_view"
+			? notification.anonName
+			: notification.author.name;
+
 	return (
 		<Link
 			href={link}
@@ -45,11 +52,14 @@ export const NotificationItem = ({
 				className,
 			)}
 		>
-			{/* Avatar */}
 			<div className="relative flex-shrink-0">
 				<SignedImageUrl
-					image={notification.author.avatar as ImageUpload.ImageUrl | null}
-					name={notification.author.name}
+					image={
+						isAnonView
+							? null
+							: (notification.author.avatar as ImageUpload.ImageUrl | null)
+					}
+					name={displayName}
 					className="relative flex-shrink-0 size-7"
 					letterClass="text-sm"
 				/>
@@ -58,17 +68,21 @@ export const NotificationItem = ({
 				)}
 			</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,8 +118,10 @@ 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}`;
+		case "view":
+		case "anon_view":
+			return `/s/${notification.videoId}`;
 		default:
 			return `/s/${notification.videoId}`;
 	}

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

@@ -5,6 +5,7 @@ import {
 	faCog,
 	faComment,
 	faEye,
+	faEyeSlash,
 	faReply,
 	faThumbsUp,
 	type IconDefinition,
@@ -20,13 +21,19 @@ import { useDashboardContext } from "../../Contexts";
 type NotificationOption = {
 	icon: IconDefinition;
 	label: string;
-	value: "pauseComments" | "pauseViews" | "pauseReactions" | "pauseReplies";
+	value:
+		| "pauseComments"
+		| "pauseViews"
+		| "pauseReactions"
+		| "pauseReplies"
+		| "pauseAnonViews";
 };
 
 const notificationOptions: NotificationOption[] = [
 	{ icon: faComment, label: "Comments", value: "pauseComments" },
 	{ icon: faReply, label: "Replies", value: "pauseReplies" },
 	{ icon: faEye, label: "Views", value: "pauseViews" },
+	{ icon: faEyeSlash, label: "Anonymous views", value: "pauseAnonViews" },
 	{ icon: faThumbsUp, label: "Reactions", value: "pauseReactions" },
 ];
 
@@ -41,6 +48,7 @@ export const SettingsDropdown = () => {
 				pauseReplies: false,
 				pauseViews: false,
 				pauseReactions: false,
+				pauseAnonViews: false,
 			};
 
 			await updatePreferences({
@@ -131,7 +139,7 @@ export const SettingsDropdown = () => {
 											</p>
 										</div>
 
-										{userPreferences?.notifications[option.value] && (
+										{userPreferences?.notifications?.[option.value] && (
 											<FontAwesomeIcon
 												icon={faCheck}
 												className="text-gray-10 size-2.5 transition-colors group-hover:text-gray-12"

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

@@ -1,9 +1,17 @@
+import { db } from "@cap/database";
+import { videos } from "@cap/database/schema";
 import { provideOptionalAuth, Tinybird } from "@cap/web-backend";
-import { CurrentUser } from "@cap/web-domain";
+import { CurrentUser, Video } from "@cap/web-domain";
+import { eq } from "drizzle-orm";
 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,
+	sendFirstViewEmail,
+} from "@/lib/Notification";
 import { runPromise } from "@/lib/server";
 
 interface TrackPayload {
@@ -17,10 +25,19 @@ interface TrackPayload {
 	occurredAt?: string;
 }
 
-const sanitizeString = (value?: string | null) =>
-	value?.trim() && value.trim() !== "unknown"
-		? value.trim().slice(0, 256)
-		: undefined;
+const sanitizeString = (value?: string | null) => {
+	const trimmed = value?.trim();
+	return trimmed && trimmed !== "unknown" ? trimmed.slice(0, 256) : undefined;
+};
+
+const decodeUrlEncodedHeaderValue = (value?: string | null) => {
+	if (!value) return value;
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return value;
+	}
+};
 
 export async function POST(request: NextRequest) {
 	let body: TrackPayload;
@@ -34,7 +51,12 @@ export async function POST(request: NextRequest) {
 		return Response.json({ error: "videoId is required" }, { status: 400 });
 	}
 
-	const sessionId = body.sessionId?.slice(0, 128) ?? "anon";
+	const parsedSessionId =
+		typeof body.sessionId === "string"
+			? body.sessionId.trim().slice(0, 128) || null
+			: null;
+	const sessionId =
+		parsedSessionId && parsedSessionId !== "anonymous" ? parsedSessionId : null;
 	const userAgent =
 		sanitizeString(request.headers.get("user-agent")) ||
 		sanitizeString(body.userAgent) ||
@@ -50,15 +72,17 @@ export async function POST(request: NextRequest) {
 		sanitizeString(request.headers.get("x-vercel-ip-country")) || "";
 	const region =
 		sanitizeString(request.headers.get("x-vercel-ip-country-region")) || "";
-	const city = sanitizeString(request.headers.get("x-vercel-ip-city")) || "";
+	const city =
+		sanitizeString(
+			decodeUrlEncodedHeaderValue(request.headers.get("x-vercel-ip-city")),
+		) || "";
 
 	const hostname =
 		sanitizeString(body.hostname) ||
 		sanitizeString(request.nextUrl.hostname) ||
 		"";
 
-	const tenantId =
-		body.orgId || body.ownerId || (hostname ? `domain:${hostname}` : "public");
+	const tenantId = body.orgId || (hostname ? `domain:${hostname}` : "public");
 
 	const pathname = body.pathname ?? `/s/${body.videoId}`;
 
@@ -77,15 +101,24 @@ export async function POST(request: NextRequest) {
 					return currentUser.id;
 				},
 			});
-			if (userId && body.ownerId && userId === body.ownerId) {
-				return;
+			if (userId) {
+				const [videoRecord] = yield* Effect.tryPromise(() =>
+					db()
+						.select({ ownerId: videos.ownerId })
+						.from(videos)
+						.where(eq(videos.id, Video.VideoId.make(body.videoId)))
+						.limit(1),
+				).pipe(Effect.orElseSucceed(() => [] as { ownerId: string }[]));
+				if (videoRecord && userId === videoRecord.ownerId) {
+					return;
+				}
 			}
 
 			const tinybird = yield* Tinybird;
 			yield* tinybird.appendEvents([
 				{
 					timestamp: timestamp.toISOString(),
-					session_id: sessionId,
+					session_id: sessionId ?? "anon",
 					action: "page_hit",
 					version: "1.0",
 					tenant_id: tenantId,
@@ -100,6 +133,62 @@ export async function POST(request: NextRequest) {
 					user_id: userId,
 				},
 			]);
+
+			if (userId) {
+				yield* Effect.forkDaemon(
+					Effect.tryPromise(() =>
+						sendFirstViewEmail({
+							videoId: body.videoId,
+							viewerUserId: userId,
+							isAnonymous: false,
+						}),
+					).pipe(
+						Effect.catchAll((error) => {
+							console.error("Failed to send first view email:", error);
+							return Effect.void;
+						}),
+					),
+				);
+			}
+
+			if (!userId && sessionId) {
+				const anonName = getAnonymousName(sessionId);
+				const location =
+					city && country ? `${city}, ${country}` : city || country || null;
+
+				yield* Effect.forkDaemon(
+					Effect.all([
+						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;
+							}),
+						),
+						Effect.tryPromise(() =>
+							sendFirstViewEmail({
+								videoId: body.videoId,
+								viewerName: anonName,
+								isAnonymous: true,
+							}),
+						).pipe(
+							Effect.catchAll((error) => {
+								console.error("Failed to send first view email:", error);
+								return Effect.void;
+							}),
+						),
+					]),
+				);
+			}
 		}).pipe(provideOptionalAuth),
 	);