Merge pull request #1643 from CapSoftware/anon-notifications

Add anonymous view notifications for non-logged-in viewers

Author: richiemcilroy

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"