Feature: notifications (#833)

* notifications ui

* tweaks

* Update DashboardInner.tsx

* Add notifications support

* clearup icons and add replies to dropdown

* various fixes and tweaks

* migrations

* more cleanup

* go back to denormalized + use ts-rest

* move to dashboard folder

* derive createNotification api from web api contract

* Update apps/web/app/(org)/dashboard/_components/Notifications/index.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* cleanup

* fix notifications ui

* fix frontend again

* fix useApiClient

* properly extract authorId in sql

* fix json param

* plz this time

* fix notif counts

* add border

* Update apps/web/utils/web-api.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* remove md for now

---------

Co-authored-by: Brendan Allan <brendonovich@outlook.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

apps/desktop/package.json

@@ -66,7 +66,7 @@
     "uuid": "^9.0.1",
     "vinxi": "^0.5.6",
     "webcodecs": "^0.1.0",
-    "zod": "^3.24.2"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@fontsource/geist-sans": "^5.0.3",

apps/discord-bot/package.json

@@ -22,6 +22,7 @@
 		"jose": "^5.10.0",
 		"octokit": "^4.1.2",
 		"tweetnacl": "^1.0.3",
-		"valibot": "1.0.0-rc.1"
+		"valibot": "1.0.0-rc.1",
+		"zod": "^3"
 	}
 }

apps/storybook/package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "@cap/ui-solid": "workspace:*",
     "postcss-pseudo-companion-classes": "^0.1.1",
-    "solid-js": "^1.9.3"
+    "solid-js": "^1.9.3",
+    "zod": "^3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",

apps/tasks/package.json

@@ -27,7 +27,8 @@
     "helmet": "^7.1.0",
     "morgan": "^1.10.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "zod": "^3"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.6.0",

apps/web/actions/notifications/mark-all-as-read.ts

@@ -0,0 +1,26 @@
+"use server";
+
+import { getCurrentUser } from "@cap/database/auth/session";
+import { notifications } from "@cap/database/schema";
+import { db } from "@cap/database";
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+
+export const markAllAsRead = async () => {
+  const currentUser = await getCurrentUser();
+  if (!currentUser) {
+    throw new Error("User not found");
+  }
+
+  try {
+    await db()
+      .update(notifications)
+      .set({ readAt: new Date() })
+      .where(eq(notifications.recipientId, currentUser.id));
+  } catch (error) {
+    console.log(error);
+    throw new Error("Error marking notifications as read");
+  }
+
+  revalidatePath("/dashboard");
+};

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

@@ -0,0 +1,38 @@
+"use server";
+
+import { getCurrentUser } from "@cap/database/auth/session";
+import { db } from "@cap/database";
+import { users } from "@cap/database/schema";
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+
+export const updatePreferences = async ({
+  notifications,
+}: {
+  notifications: {
+    pauseComments: boolean;
+    pauseReplies: boolean;
+    pauseViews: boolean;
+    pauseReactions: boolean;
+  };
+}) => {
+  const currentUser = await getCurrentUser();
+  if (!currentUser) {
+    throw new Error("User not found");
+  }
+
+  try {
+    await db()
+      .update(users)
+      .set({
+        preferences: {
+          notifications,
+        },
+      })
+      .where(eq(users.id, currentUser.id));
+    revalidatePath("/dashboard");
+  } catch (error) {
+    console.log(error);
+    throw new Error("Error updating preferences");
+  }
+};

apps/web/actions/videos/delete-comment.ts

@@ -1,16 +1,18 @@
 "use server";
 
 import { db } from "@cap/database";
-import { comments } from "@cap/database/schema";
+import { comments, notifications } from "@cap/database/schema";
 import { getCurrentUser } from "@cap/database/auth/session";
 import { revalidatePath } from "next/cache";
-import { eq, and } from "drizzle-orm";
+import { eq, and, sql } from "drizzle-orm";
 
 export async function deleteComment({
   commentId,
+  parentId,
   videoId,
 }: {
   commentId: string;
+  parentId?: string;
   videoId: string;
 }) {
   const user = await getCurrentUser();
@@ -23,25 +25,60 @@ export async function deleteComment({
     throw new Error("Comment ID and video ID are required");
   }
 
-  // First, verify the comment exists and belongs to the current user
-  const existingComment = await db()
-    .select()
-    .from(comments)
-    .where(and(eq(comments.id, commentId), eq(comments.authorId, user.id)))
-    .limit(1);
-
-  if (existingComment.length === 0) {
-    throw new Error(
-      "Comment not found or you don't have permission to delete it"
-    );
-  }
+  try {
+    await db().transaction(async (tx) => {
+      // First, verify the comment exists and belongs to the current user
+      const [existingComment] = await tx
+        .select({ id: comments.id })
+        .from(comments)
+        .where(and(eq(comments.id, commentId), eq(comments.authorId, user.id)))
+        .limit(1);
+
+      if (!existingComment) {
+        throw new Error(
+          "Comment not found or you don't have permission to delete it"
+        );
+      }
 
-  // Delete the comment
-  await db()
-    .delete(comments)
-    .where(and(eq(comments.id, commentId), eq(comments.authorId, user.id)));
+      await tx
+        .delete(comments)
+        .where(and(eq(comments.id, commentId), eq(comments.authorId, user.id)));
 
-  revalidatePath(`/s/${videoId}`);
+      // Delete related notifications
+      if (parentId) {
+        await tx
+          .delete(notifications)
+          .where(
+            and(
+              eq(notifications.type, "reply"),
+              sql`JSON_EXTRACT(${notifications.data}, '$.comment.id') = ${commentId}`
+            )
+          );
+      } else {
+        await tx
+          .delete(notifications)
+          .where(
+            and(
+              eq(notifications.type, "comment"),
+              sql`JSON_EXTRACT(${notifications.data}, '$.comment.id') = ${commentId}`
+            )
+          );
 
-  return { success: true, commentId };
+        await tx
+          .delete(notifications)
+          .where(
+            and(
+              eq(notifications.type, "reply"),
+              sql`JSON_EXTRACT(${notifications.data}, '$.comment.parentCommentId') = ${commentId}`
+            )
+          );
+      }
+    });
+
+    revalidatePath(`/s/${videoId}`);
+    return { success: true };
+  } catch (error) {
+    console.error("Error deleting comment:", error);
+    throw error;
+  }
 }

apps/web/actions/videos/new-comment.ts

@@ -5,6 +5,7 @@ import { comments } from "@cap/database/schema";
 import { getCurrentUser } from "@cap/database/auth/session";
 import { revalidatePath } from "next/cache";
 import { nanoId } from "@cap/database/helpers";
+import { createNotification } from "@/lib/Notification";
 
 export async function newComment(data: {
   content: string;
@@ -22,6 +23,11 @@ export async function newComment(data: {
   const videoId = data.videoId;
   const type = data.type;
   const parentCommentId = data.parentCommentId;
+  const conditionalType = parentCommentId
+    ? "reply"
+    : type === "emoji"
+    ? "reaction"
+    : "comment";
 
   if (!content || !videoId) {
     throw new Error("Content and videoId are required");
@@ -42,6 +48,17 @@ export async function newComment(data: {
 
   await db().insert(comments).values(newComment);
 
+  try {
+    await createNotification({
+      type: conditionalType,
+      videoId,
+      authorId: user.id,
+      comment: { id, content },
+    });
+  } catch (error) {
+    console.error("Failed to create notification:", error);
+  }
+
   // Add author name to the returned data
   const commentWithAuthor = {
     ...newComment,

apps/web/app/(org)/dashboard/Contexts.tsx

@@ -6,7 +6,7 @@ import { createContext, useContext, useEffect, useState } from "react";
 import { UpgradeModal } from "@/components/UpgradeModal";
 import { usePathname } from "next/navigation";
 import { buildEnv } from "@cap/env";
-import { Organization, Spaces } from "./dashboard-data";
+import { Organization, Spaces, UserPreferences } from "./dashboard-data";
 
 type SharedContext = {
   organizationData: Organization[] | null;
@@ -18,6 +18,8 @@ type SharedContext = {
   user: typeof users.$inferSelect;
   isSubscribed: boolean;
   toggleSidebarCollapsed: () => void;
+  anyNewNotifications: boolean;
+  userPreferences: UserPreferences;
   sidebarCollapsed: boolean;
   upgradeModalOpen: boolean;
   setUpgradeModalOpen: (open: boolean) => void;
@@ -32,7 +34,7 @@ const ThemeContext = createContext<{
   setThemeHandler: (newTheme: ITheme) => void;
 }>({
   theme: "light",
-  setThemeHandler: () => {},
+  setThemeHandler: () => { },
 });
 
 export const useTheme = () => useContext(ThemeContext);
@@ -46,6 +48,8 @@ export function DashboardContexts({
   spacesData,
   user,
   isSubscribed,
+  userPreferences,
+  anyNewNotifications,
   initialTheme,
   initialSidebarCollapsed,
 }: {
@@ -55,6 +59,8 @@ export function DashboardContexts({
   spacesData: SharedContext["spacesData"];
   user: SharedContext["user"];
   isSubscribed: SharedContext["isSubscribed"];
+  userPreferences: SharedContext["userPreferences"];
+  anyNewNotifications: boolean;
   initialTheme: ITheme;
   initialSidebarCollapsed: boolean;
 }) {
@@ -133,6 +139,8 @@ export function DashboardContexts({
           organizationData,
           activeOrganization,
           spacesData,
+          anyNewNotifications,
+          userPreferences,
           userSpaces,
           sharedSpaces,
           activeSpace,