+
+
+ Notifications
+
+
+ {isLoading && (
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+ )}
+
+ {!isLoading && notifications.length === 0 && (
+
+
+
No notifications yet
+
+ When pets follow you or react to your posts, you'll see it here.
+
+
+ )}
+
+ {!isLoading && notifications.length > 0 && (
+
+ )}
+
@@ -172,16 +172,8 @@ export function MobileNav({ pets }: MobileNavProps) {
- {/* Search */}
-
-
-
Search
-
+ {/* Notifications — with live unread badge */}
+
{/* Profile (My Pets) */}
- {navLinks.map(({ href, label, icon: Icon, active }) => {
- // Active detection: /feed highlights when pathname is /feed or /
- // (/ redirects to /feed, so treat both as Home active state)
+ {navLinks.map(({ href, label, icon: Icon, active, special }) => {
const isCurrentPage =
href === "/feed"
? pathname === "/feed" || pathname === "/"
: pathname.startsWith(href);
- const isActive = isCurrentPage;
+
+ // Notifications: delegate to NotificationBell for live badge
+ if (special) {
+ return (
+
+ );
+ }
if (!active) {
- // Placeholder links — visually present but non-navigable in Phase 1
return (
99 ? "99+" : count > 0 ? String(count) : null;
+
+ if (variant === "sidebar") {
+ return (
+
+
+
+ {label && (
+
+ {label}
+
+ )}
+
+ Notifications
+
+ );
+ }
+
+ // Mobile variant — icon stacked above label
+ return (
+
+
+
+ {label && (
+
+ {label}
+
+ )}
+
+ Alerts
+
+ );
+}
diff --git a/src/trpc/routers/_app.ts b/src/trpc/routers/_app.ts
index 0621ef1..b9aaa11 100644
--- a/src/trpc/routers/_app.ts
+++ b/src/trpc/routers/_app.ts
@@ -13,6 +13,7 @@ import { commentsRouter } from "@/trpc/routers/comments";
import { repostsRouter } from "@/trpc/routers/reposts";
import { exploreRouter } from "@/trpc/routers/explore";
import { searchRouter } from "@/trpc/routers/search";
+import { notificationsRouter } from "@/trpc/routers/notifications";
export const appRouter = router({
pets: petsRouter,
@@ -29,6 +30,7 @@ export const appRouter = router({
reposts: repostsRouter,
explore: exploreRouter,
search: searchRouter,
+ notifications: notificationsRouter,
});
// Export the type for use in the client
diff --git a/src/trpc/routers/comments.ts b/src/trpc/routers/comments.ts
index e5a4366..8abef1b 100644
--- a/src/trpc/routers/comments.ts
+++ b/src/trpc/routers/comments.ts
@@ -31,16 +31,39 @@ export const commentsRouter = router({
.mutation(async ({ ctx, input }) => {
await assertPetOwnership(ctx.prisma, input.petId, ctx.userId);
- return ctx.prisma.comment.create({
- data: {
- postId: input.postId,
- petId: input.petId,
- body: input.body,
- },
- include: {
- pet: { select: { id: true, name: true, avatarKey: true } },
- },
- });
+ const [comment, post] = await Promise.all([
+ ctx.prisma.comment.create({
+ data: {
+ postId: input.postId,
+ petId: input.petId,
+ body: input.body,
+ },
+ include: {
+ pet: { select: { id: true, name: true, avatarKey: true } },
+ },
+ }),
+ ctx.prisma.post.findUnique({
+ where: { id: input.postId },
+ select: { petId: true },
+ }),
+ ]);
+
+ // NOTF-03: notify post owner (skip self-comments)
+ if (post && post.petId !== input.petId) {
+ ctx.prisma.notification
+ .create({
+ data: {
+ recipientPetId: post.petId,
+ type: "COMMENT",
+ actorPetId: input.petId,
+ postId: input.postId,
+ commentId: comment.id,
+ },
+ })
+ .catch(() => {});
+ }
+
+ return comment;
}),
listByPost: protectedProcedure
diff --git a/src/trpc/routers/follows.ts b/src/trpc/routers/follows.ts
index ea6e1da..2b40ce1 100644
--- a/src/trpc/routers/follows.ts
+++ b/src/trpc/routers/follows.ts
@@ -74,7 +74,18 @@ export const followsRouter = router({
});
// Backfill followee's recent posts into follower's Redis feed inbox (SOCL-01)
- await backfillOnFollow(redis, followerPetId, followeePetId, ctx.prisma);
+ await backfillOnFollow(redis, followerPetId, followeePetId, ctx.prisma).catch(() => {});
+
+ // NOTF-01: notify the followee (fire-and-forget — never fails the follow)
+ ctx.prisma.notification
+ .create({
+ data: {
+ recipientPetId: followeePetId,
+ type: "FOLLOW",
+ actorPetId: followerPetId,
+ },
+ })
+ .catch(() => {});
return follow;
}),
diff --git a/src/trpc/routers/notifications.ts b/src/trpc/routers/notifications.ts
new file mode 100644
index 0000000..8282e6b
--- /dev/null
+++ b/src/trpc/routers/notifications.ts
@@ -0,0 +1,64 @@
+import "server-only";
+import { z } from "zod";
+import { router, protectedProcedure } from "@/trpc/init";
+
+const PAGE_SIZE = 30;
+
+export const notificationsRouter = router({
+ list: protectedProcedure
+ .input(
+ z.object({
+ petId: z.string().min(1),
+ cursor: z.string().nullish(),
+ limit: z.number().min(1).max(50).default(PAGE_SIZE),
+ })
+ )
+ .query(async ({ ctx, input }) => {
+ const notifications = await ctx.prisma.notification.findMany({
+ where: {
+ recipientPetId: input.petId,
+ ...(input.cursor ? { createdAt: { lt: new Date(input.cursor) } } : {}),
+ },
+ orderBy: { createdAt: "desc" },
+ take: input.limit + 1,
+ include: {
+ actorPet: { select: { id: true, name: true, avatarKey: true } },
+ post: { select: { id: true, images: { take: 1, orderBy: { position: "asc" } } } },
+ comment: { select: { id: true, body: true } },
+ },
+ });
+
+ const hasNextPage = notifications.length > input.limit;
+ const items = hasNextPage ? notifications.slice(0, input.limit) : notifications;
+ const nextCursor = hasNextPage ? items[items.length - 1].createdAt.toISOString() : null;
+
+ return { notifications: items, nextCursor };
+ }),
+
+ unreadCount: protectedProcedure
+ .input(z.object({ petId: z.string().min(1) }))
+ .query(async ({ ctx, input }) => {
+ const count = await ctx.prisma.notification.count({
+ where: { recipientPetId: input.petId, read: false },
+ });
+ return { count };
+ }),
+
+ markRead: protectedProcedure
+ .input(z.object({ notificationId: z.string().min(1) }))
+ .mutation(async ({ ctx, input }) => {
+ await ctx.prisma.notification.updateMany({
+ where: { id: input.notificationId },
+ data: { read: true },
+ });
+ }),
+
+ markAllRead: protectedProcedure
+ .input(z.object({ petId: z.string().min(1) }))
+ .mutation(async ({ ctx, input }) => {
+ await ctx.prisma.notification.updateMany({
+ where: { recipientPetId: input.petId, read: false },
+ data: { read: true },
+ });
+ }),
+});
diff --git a/src/trpc/routers/reactions.ts b/src/trpc/routers/reactions.ts
index 47a05f6..0cba791 100644
--- a/src/trpc/routers/reactions.ts
+++ b/src/trpc/routers/reactions.ts
@@ -36,9 +36,31 @@ export const reactionsRouter = router({
return { reacted: false };
}
- await ctx.prisma.reaction.create({
- data: { postId: input.postId, petId: input.petId },
- });
+ const [reaction, post] = await Promise.all([
+ ctx.prisma.reaction.create({
+ data: { postId: input.postId, petId: input.petId },
+ }),
+ ctx.prisma.post.findUnique({
+ where: { id: input.postId },
+ select: { petId: true },
+ }),
+ ]);
+
+ // NOTF-02: notify post owner (skip self-reactions)
+ if (post && post.petId !== input.petId) {
+ ctx.prisma.notification
+ .create({
+ data: {
+ recipientPetId: post.petId,
+ type: "REACTION",
+ actorPetId: input.petId,
+ postId: input.postId,
+ },
+ })
+ .catch(() => {});
+ }
+
+ void reaction;
return { reacted: true };
}),
+
+ );
+ })}
+