@tulip-systems/create-app 0.13.0 → 0.15.0

package/dist/templates/code/src/app/admin/notifications/_lib/router.ts

@@ -1,82 +1,82 @@
 import "server-cli-only";
 
 import { ORPCError } from "@orpc/server";
-import { and, desc, eq, inArray } from "drizzle-orm";
+import {
+  notificationFiltersSchema,
+  notificationPreferencesSchema,
+} from "@tulip-systems/notifications";
+import { webPushSubscriptionSchema } from "@tulip-systems/notifications/channels/web-push";
 import { z } from "zod";
+import { notificationWebPushChannel } from "@/server/notifications/channels";
+import { notifications } from "@/server/notifications/init";
 import { protectedProcedure } from "@/server/router/procedures";
-import { getWebPushConfig } from "./push.server";
-import { notificationPushSubscriptions, notifications } from "./schema";
-import { pushSubscriptionSchema } from "./validators";
 
 export const notificationsRouter = {
-  list: protectedProcedure.handler(async ({ context }) =>
-    context.db.query.notifications.findMany({
-      orderBy: [desc(notifications.createdAt)],
-      limit: 100,
-    }),
+  list: protectedProcedure
+    .input(z.object({ filters: notificationFiltersSchema }))
+    .handler(({ context, input }) =>
+      notifications.list({ recipientId: context.user.id, filters: input.filters, limit: 100 }),
+    ),
+  unreadCount: protectedProcedure.handler(({ context }) =>
+    notifications.count({ recipientId: context.user.id, filters: { isUnread: true } }),
+  ),
+  getPreferences: protectedProcedure.handler(({ context }) =>
+    notifications.getPreferences({ recipientId: context.user.id }),
   ),
-  getPushConfig: protectedProcedure.handler(() => getWebPushConfig()),
+  updatePreferences: protectedProcedure
+    .input(z.object({ preferences: notificationPreferencesSchema }))
+    .handler(({ context, input }) =>
+      notifications.updatePreferences({
+        recipientId: context.user.id,
+        preferences: input.preferences,
+      }),
+    ),
+  getPushConfig: protectedProcedure.handler(() => ({
+    publicKey: notificationWebPushChannel.publicKey,
+  })),
   subscribePush: protectedProcedure
-    .input(pushSubscriptionSchema)
+    .input(webPushSubscriptionSchema)
     .handler(async ({ context, input }) => {
-      const config = getWebPushConfig();
-
-      if (!config.configured) {
+      if (!notificationWebPushChannel.publicKey) {
         throw new ORPCError("BAD_REQUEST", {
           message: "Web Push is not configured for this environment",
         });
       }
 
-      const now = new Date();
-      const expiresAt = input.expirationTime ? new Date(input.expirationTime) : null;
-
-      await context.db
-        .insert(notificationPushSubscriptions)
-        .values({
-          userId: context.user.id,
-          endpoint: input.endpoint,
-          p256dh: input.keys.p256dh,
-          auth: input.keys.auth,
-          userAgent: context.headers.get("user-agent"),
-          lastSeenAt: now,
-          expiresAt,
-        })
-        .onConflictDoUpdate({
-          target: notificationPushSubscriptions.endpoint,
-          set: {
-            userId: context.user.id,
-            p256dh: input.keys.p256dh,
-            auth: input.keys.auth,
-            userAgent: context.headers.get("user-agent"),
-            lastSeenAt: now,
-            expiresAt,
-            updatedAt: now,
-          },
-        });
+      await notifications.database.pushSubscriptions.upsert({
+        recipientId: context.user.id,
+        endpoint: input.endpoint,
+        p256dh: input.keys.p256dh,
+        auth: input.keys.auth,
+        userAgent: context.headers.get("user-agent"),
+        lastSeenAt: new Date(),
+        expiresAt: input.expirationTime ? new Date(input.expirationTime) : null,
+      });
     }),
   unsubscribePush: protectedProcedure
     .input(z.object({ endpoint: z.url() }))
     .handler(async ({ context, input }) => {
-      await context.db
-        .delete(notificationPushSubscriptions)
-        .where(
-          and(
-            eq(notificationPushSubscriptions.endpoint, input.endpoint),
-            eq(notificationPushSubscriptions.userId, context.user.id),
-          ),
-        );
+      await notifications.database.pushSubscriptions.delete({
+        endpoint: input.endpoint,
+        recipientId: context.user.id,
+      });
     }),
   markAsRead: protectedProcedure
     .input(z.object({ ids: z.array(z.string()) }))
     .handler(async ({ context, input }) => {
-      await context.db
-        .update(notifications)
-        .set({ readAt: new Date() })
-        .where(inArray(notifications.id, input.ids));
+      await notifications.markAsRead({ recipientId: context.user.id, ids: input.ids });
+    }),
+  markAsUnread: protectedProcedure
+    .input(z.object({ ids: z.array(z.string()) }))
+    .handler(async ({ context, input }) => {
+      await notifications.markAsUnread({ recipientId: context.user.id, ids: input.ids });
     }),
+  markAllAsRead: protectedProcedure.handler(async ({ context }) => {
+    await notifications.markAllAsRead({ recipientId: context.user.id });
+  }),
   delete: protectedProcedure
     .input(z.object({ ids: z.array(z.string()) }))
     .handler(async ({ context, input }) => {
-      await context.db.delete(notifications).where(inArray(notifications.id, input.ids));
+      await notifications.delete({ recipientId: context.user.id, ids: input.ids });
     }),
 };

package/dist/templates/code/src/app/admin/notifications/_lib/schema.ts

@@ -1,24 +1,44 @@
 import { relations } from "drizzle-orm";
-import { pgTable } from "drizzle-orm/pg-core";
+import { index, pgTable, unique } from "drizzle-orm/pg-core";
 import { users } from "@/server/auth/schema";
 import { baseColumns } from "@/server/db/helpers";
 
 /**
  * Notifications
  */
-export const notifications = pgTable("notifications", (t) => ({
-  ...baseColumns,
-  title: t.varchar().notNull(),
-  body: t.text().notNull(),
-  eventId: t.varchar().notNull(),
-  eventName: t.varchar().notNull(),
-  eventVersion: t.integer().notNull(),
-  listenerKey: t.varchar().notNull(),
-  source: t.varchar().notNull(),
-  sourceId: t.uuid().notNull(),
-  sourceHref: t.varchar(),
-  occurredAt: t.timestamp().notNull(),
-  readAt: t.timestamp(),
+export const notifications = pgTable(
+  "notifications",
+  (t) => ({
+    ...baseColumns,
+    recipientId: t
+      .uuid()
+      .notNull()
+      .references(() => users.id, { onDelete: "cascade" }),
+    type: t.varchar().notNull(),
+    data: t.jsonb().notNull(),
+    title: t.varchar().notNull(),
+    body: t.text().notNull(),
+    href: t.varchar(),
+    sourceType: t.varchar(),
+    sourceId: t.varchar(),
+    eventId: t.varchar(),
+    eventName: t.varchar(),
+    eventVersion: t.integer(),
+    dedupeKey: t.varchar(),
+    occurredAt: t.timestamp().notNull(),
+    readAt: t.timestamp(),
+  }),
+  (t) => [
+    unique("notifications_recipient_dedupe_unique").on(t.recipientId, t.dedupeKey),
+    index("notifications_recipient_read_idx").on(t.recipientId, t.readAt),
+  ],
+);
+
+export const notificationsRelations = relations(notifications, ({ one }) => ({
+  recipient: one(users, {
+    fields: [notifications.recipientId],
+    references: [users.id],
+  }),
 }));
 
 /**
@@ -26,7 +46,7 @@ export const notifications = pgTable("notifications", (t) => ({
  */
 export const notificationPushSubscriptions = pgTable("notification_push_subscriptions", (t) => ({
   ...baseColumns,
-  userId: t
+  recipientId: t
     .uuid()
     .notNull()
     .references(() => users.id, { onDelete: "cascade" }),
@@ -41,9 +61,29 @@ export const notificationPushSubscriptions = pgTable("notification_push_subscrip
 export const notificationPushSubscriptionsRelations = relations(
   notificationPushSubscriptions,
   ({ one }) => ({
-    user: one(users, {
-      fields: [notificationPushSubscriptions.userId],
+    recipient: one(users, {
+      fields: [notificationPushSubscriptions.recipientId],
       references: [users.id],
     }),
   }),
 );
+
+/**
+ * Notification Preferences
+ */
+export const notificationPreferences = pgTable("notification_preferences", (t) => ({
+  ...baseColumns,
+  recipientId: t
+    .uuid()
+    .notNull()
+    .unique()
+    .references(() => users.id, { onDelete: "cascade" }),
+  preferences: t.jsonb().notNull(),
+}));
+
+export const notificationPreferencesRelations = relations(notificationPreferences, ({ one }) => ({
+  recipient: one(users, {
+    fields: [notificationPreferences.recipientId],
+    references: [users.id],
+  }),
+}));

package/dist/templates/code/src/app/admin/notifications/layout.tsx

@@ -1,6 +1,8 @@
-import { Header, Topbar, TopbarTitle } from "@tulip-systems/app/components/client";
+import { Header, Topbar, TopbarTitle, TopbarTools } from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
 import { TableLayout } from "@tulip-systems/data-tables";
-import type { PropsWithChildren } from "react";
+import { type PropsWithChildren, Suspense } from "react";
+import { notificationMarkAllAsReadCommand } from "./_config/commands";
 
 export default function Layout({ children }: PropsWithChildren) {
   return (
@@ -8,6 +10,12 @@ export default function Layout({ children }: PropsWithChildren) {
       <Header>
         <Topbar>
           <TopbarTitle breadcrumbs={[{ label: "Notifications" }]} />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu data={null} commands={[notificationMarkAllAsReadCommand]} />
+            </Suspense>
+          </TopbarTools>
         </Topbar>
       </Header>
 

package/dist/templates/code/src/app/admin/notifications/page.tsx

@@ -1,27 +1,24 @@
-import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
 import { DataTable } from "@tulip-systems/data-tables/client";
-import { Suspense } from "react";
 import { NotificationTableProvider } from "./_components/tables";
 import { NotificationTableToolbar } from "./_components/toolbars";
 import { notificationColumns } from "./_config/columns-data";
 import {
   notificationDeleteCommand,
   notificationMarkAsReadCommand,
-  notificationTogglePushCommand,
+  notificationMarkAsUnreadCommand,
 } from "./_config/commands";
 
 export default function Page() {
   return (
     <NotificationTableProvider
       columns={notificationColumns}
-      commands={[notificationMarkAsReadCommand, notificationDeleteCommand]}
+      commands={[
+        notificationMarkAsReadCommand,
+        notificationMarkAsUnreadCommand,
+        notificationDeleteCommand,
+      ]}
     >
-      <NotificationTableToolbar>
-        <Suspense fallback={<InlineCommandMenuLoading />}>
-          <InlineCommandMenu data={null} commands={[notificationTogglePushCommand]} />
-        </Suspense>
-      </NotificationTableToolbar>
-      
+      <NotificationTableToolbar />
       <DataTable />
     </NotificationTableProvider>
   );

package/dist/templates/code/src/app/admin/projects/_lib/notifications.ts

@@ -0,0 +1,53 @@
+import { defineNotification } from "@tulip-systems/notifications";
+import { z } from "zod";
+
+/**
+ * Sent when a project is created.
+ */
+export const projectCreatedNotification = defineNotification("project.created", {
+  label: "Project created",
+  description: "A new project was added.",
+  category: "Projects",
+  permission: { project: ["view"] },
+  schema: z.object({
+    projectId: z.uuid(),
+    title: z.string(),
+    status: z.string(),
+  }),
+  content: ({ data }) => ({
+    title: "Project created",
+    body: `${data.title} was created with status ${data.status}.`,
+    href: `/admin/projects/${data.projectId}`,
+    source: { type: "project", id: data.projectId },
+  }),
+  channels: {
+    webPush: ({ data }) => ({ tag: `project:${data.projectId}` }),
+    email: true,
+  },
+});
+
+/**
+ * Sent when a project moves to another status.
+ */
+export const projectStatusChangedNotification = defineNotification("project.status-changed", {
+  label: "Project status changed",
+  description: "A project moved to another status.",
+  category: "Projects",
+  permission: { project: ["view"] },
+  schema: z.object({
+    projectId: z.uuid(),
+    title: z.string(),
+    previousStatus: z.string(),
+    nextStatus: z.string(),
+  }),
+  content: ({ data }) => ({
+    title: "Project status changed",
+    body: `${data.title} moved from ${data.previousStatus} to ${data.nextStatus}.`,
+    href: `/admin/projects/${data.projectId}`,
+    source: { type: "project", id: data.projectId },
+  }),
+  channels: {
+    webPush: ({ data }) => ({ tag: `project:${data.projectId}` }),
+    email: true,
+  },
+});

package/dist/templates/code/src/app/admin/settings/layout.tsx

@@ -38,6 +38,11 @@ export default function Layout(props: PropsWithChildren) {
                 href: "/admin/settings/theme",
                 segment: "theme",
               },
+              {
+                name: "Notifications",
+                href: "/admin/settings/notifications",
+                segment: "notifications",
+              },
               {
                 name: "Queue",
                 href: "/admin/settings/queue",

package/dist/templates/code/src/app/admin/settings/notifications/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import {
+  applyNotificationPreferences,
+  type NotificationPreferences,
+} from "@tulip-systems/notifications";
+import { NotificationPreferencesTable } from "@tulip-systems/notifications/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { Suspense } from "react";
+import { PushSubscription } from "@/app/admin/notifications/_components/push-subscription-card";
+import { orpc } from "@/server/router/client";
+
+export default function Page() {
+  const queryClient = useQueryClient();
+  const queryKey = orpc.notifications.getPreferences.queryKey();
+  const { data: settings } = useSuspenseQuery(orpc.notifications.getPreferences.queryOptions());
+
+  const updatePreferences = useMutation(
+    orpc.notifications.updatePreferences.mutationOptions({
+      onMutate: async ({ preferences }) => {
+        await queryClient.cancelQueries({ queryKey });
+        const previous = queryClient.getQueryData(queryKey);
+
+        if (previous) {
+          queryClient.setQueryData(queryKey, applyNotificationPreferences(previous, preferences));
+        }
+
+        return { previous };
+      },
+      onError: (_error, _variables, context) => {
+        if (context?.previous) queryClient.setQueryData(queryKey, context.previous);
+        toast.error("Could not update notification preferences");
+      },
+      onSuccess: (updated) => queryClient.setQueryData(queryKey, updated),
+    }),
+  );
+
+  const onChange = (preferences: NotificationPreferences) =>
+    updatePreferences.mutate({ preferences });
+
+  return (
+    <div className="space-y-6 p-content">
+      <section className="space-y-1">
+        <h2 className="font-bold text-lg">Notifications</h2>
+        <p className="text-muted-foreground text-sm">
+          Choose where you want to be notified. Use the switch above a channel to turn it off for
+          every notification. Every notification stays available in your inbox.
+        </p>
+      </section>
+
+      <Suspense>
+        <PushSubscription />
+      </Suspense>
+
+      <NotificationPreferencesTable settings={settings} onChange={onChange} />
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/_lib/notifications.ts

@@ -0,0 +1,83 @@
+import { defineNotification } from "@tulip-systems/notifications";
+import { z } from "zod";
+
+/**
+ * Sent when a task is created or imported.
+ */
+export const taskCreatedNotification = defineNotification("task.created", {
+  label: "Task created",
+  description: "A task was added to a project.",
+  category: "Tasks",
+  permission: { task: ["view"] },
+  schema: z.object({
+    taskId: z.uuid(),
+    code: z.string(),
+    title: z.string(),
+    projectTitle: z.string(),
+  }),
+  content: ({ data }) => ({
+    title: "Task created",
+    body: `${data.code} ${data.title} was added to ${data.projectTitle}.`,
+    href: `/admin/tasks/${data.taskId}`,
+    source: { type: "task", id: data.taskId },
+  }),
+  channels: {
+    webPush: ({ data }) => ({ tag: `task:${data.taskId}` }),
+    email: true,
+  },
+});
+
+/**
+ * Sent to the new assignee when a task is created with an assignee or reassigned.
+ */
+export const taskAssignedNotification = defineNotification("task.assigned", {
+  label: "Task assigned to you",
+  description: "Someone assigned a task to you.",
+  category: "Tasks",
+  permission: { task: ["view"] },
+  schema: z.object({
+    taskId: z.uuid(),
+    code: z.string(),
+    title: z.string(),
+    projectTitle: z.string(),
+    assignedBy: z.string(),
+  }),
+  content: ({ data }) => ({
+    title: "Task assigned to you",
+    body: `${data.assignedBy} assigned ${data.code} ${data.title} in ${data.projectTitle} to you.`,
+    href: `/admin/tasks/${data.taskId}`,
+    source: { type: "task", id: data.taskId },
+  }),
+  channels: {
+    webPush: ({ data }) => ({ tag: `task:${data.taskId}` }),
+    email: ({ data }) => ({ subject: `${data.code} ${data.title} was assigned to you` }),
+  },
+});
+
+/**
+ * Sent to the assignee and creator when a task moves to another status.
+ */
+export const taskStatusChangedNotification = defineNotification("task.status-changed", {
+  label: "Task status changed",
+  description: "A task you're assigned to or created moved to another status.",
+  category: "Tasks",
+  permission: { task: ["view"] },
+  schema: z.object({
+    taskId: z.uuid(),
+    code: z.string(),
+    title: z.string(),
+    previousStatus: z.string(),
+    nextStatus: z.string(),
+    changedBy: z.string(),
+  }),
+  content: ({ data }) => ({
+    title: "Task status changed",
+    body: `${data.changedBy} moved ${data.code} ${data.title} from ${data.previousStatus} to ${data.nextStatus}.`,
+    href: `/admin/tasks/${data.taskId}`,
+    source: { type: "task", id: data.taskId },
+  }),
+  channels: {
+    webPush: ({ data }) => ({ tag: `task:${data.taskId}` }),
+    email: true,
+  },
+});

package/dist/templates/code/src/app/api/notifications/[id]/open/route.ts

@@ -0,0 +1,42 @@
+import { createLoginURL } from "@tulip-systems/auth";
+import { createNotificationOpenHandler } from "@tulip-systems/notifications/server";
+import { z } from "zod";
+import { auth } from "@/server/auth/init";
+import { notifications } from "@/server/notifications/init";
+
+const inbox = "/admin/notifications";
+
+/**
+ * Link target of push notifications and emails: marks the notification as read and redirects to
+ * its page. Visitors who are not signed in log in first and come back here.
+ */
+const open = createNotificationOpenHandler({
+  notifications,
+  getRecipientId: async (request) => {
+    const session = await auth.api.getSession({ headers: request.headers });
+    return session?.user.id;
+  },
+  onUnauthenticated: (request) => {
+    const { pathname, search } = new URL(request.url);
+
+    return new Response(null, {
+      status: 303,
+      headers: { location: createLoginURL(`${pathname}${search}`) },
+    });
+  },
+  fallback: inbox,
+});
+
+export async function GET(
+  request: Request,
+  { params }: RouteContext<"/api/notifications/[id]/open">,
+) {
+  const { id } = await params;
+
+  // Notification ids are UUIDs, so any other id cannot exist and would fail the database query.
+  if (!z.uuid().safeParse(id).success) {
+    return new Response(null, { status: 303, headers: { location: inbox } });
+  }
+
+  return await open(request, id);
+}

package/dist/templates/code/src/app/globals.css

@@ -9,6 +9,7 @@
 @import "@tulip-systems/drive-google/styles.css";
 @import "@tulip-systems/editor/styles.css";
 @import "@tulip-systems/inline/styles.css";
+@import "@tulip-systems/notifications/styles.css";
 @import "@tulip-systems/query/styles.css";
 @import "@tulip-systems/storage/styles.css";
 

package/dist/templates/code/src/lib/config/paths.tsx

@@ -22,7 +22,9 @@ import {
   UserSearchIcon,
   UsersIcon,
 } from "lucide-react";
+import { Suspense } from "react";
 import { DRIVE_NAMESPACES } from "@/app/admin/drive/_config/namespaces";
+import { NotificationUnreadBadge } from "@/app/admin/notifications/_components/unread-badge";
 import { Icons } from "@/components/icons";
 
 export function AdminSidebar() {
@@ -54,6 +56,10 @@ export function AdminSidebar() {
                 <BellIcon />
                 Notifications
               </PathLink>
+
+              <Suspense>
+                <NotificationUnreadBadge />
+              </Suspense>
             </Path>
 
             <Path permission={{ drive: ["view"] }} segment="drive">

package/dist/templates/code/src/server/auth/init.ts

@@ -28,6 +28,7 @@ export const auth = betterAuth({
       "*.localhost",
       "localhost:*",
     ],
+    fallback: url(),
   },
   database: drizzleAdapter(db, {
     provider: "pg",

package/dist/templates/code/src/server/notifications/channels.ts

@@ -0,0 +1,57 @@
+import "server-cli-only";
+
+import { url } from "@tulip-systems/core";
+import type { NotificationChannelLink } from "@tulip-systems/notifications";
+import {
+  type EmailContent,
+  emailChannel,
+} from "@tulip-systems/notifications/channels/email/server";
+import {
+  type WebPushContent,
+  webPushChannel,
+} from "@tulip-systems/notifications/channels/web-push/server";
+import { env } from "@/env";
+import { config } from "@/lib/config/base";
+import { email as resend } from "@/server/emails/init";
+
+declare module "@tulip-systems/notifications" {
+  interface NotificationChannelRegistry {
+    webPush: WebPushContent;
+    email: EmailContent;
+  }
+}
+
+/**
+ * Push and email link to the open route, which marks the notification as read and redirects to
+ * its page.
+ */
+const notificationLink: NotificationChannelLink = (notification) =>
+  `/api/notifications/${notification.id}/open`;
+
+/**
+ * Web Push channel. Without the VAPID keys it skips delivery and `publicKey` is `null`.
+ */
+export const notificationWebPushChannel = webPushChannel({
+  publicKey: env.NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY,
+  privateKey: env.WEB_PUSH_PRIVATE_KEY,
+  subject: env.WEB_PUSH_SUBJECT,
+  link: notificationLink,
+});
+
+/**
+ * Email channel that sends through Resend. Retries of one notification reuse the idempotency key,
+ * so Resend sends the email only once.
+ */
+export const notificationEmailChannel = emailChannel({
+  baseUrl: url(),
+  preferencesUrl: url("/admin/settings/notifications"),
+  link: notificationLink,
+  send: async ({ to, subject, react, idempotencyKey }) => {
+    const { error } = await resend.emails.send(
+      { from: config.email.defaultFrom, to, subject, react },
+      { idempotencyKey },
+    );
+
+    if (error) throw new Error(error.message);
+  },
+});

package/dist/templates/code/src/server/notifications/definitions.ts

@@ -0,0 +1,20 @@
+import {
+  projectCreatedNotification,
+  projectStatusChangedNotification,
+} from "@/app/admin/projects/_lib/notifications";
+import {
+  taskAssignedNotification,
+  taskCreatedNotification,
+  taskStatusChangedNotification,
+} from "@/app/admin/tasks/_lib/notifications";
+
+/**
+ * Notification types shown in the preferences and inbox filters.
+ */
+export const notificationDefinitions = [
+  projectCreatedNotification,
+  projectStatusChangedNotification,
+  taskCreatedNotification,
+  taskAssignedNotification,
+  taskStatusChangedNotification,
+];