@tulip-systems/create-app 0.14.0 → 0.15.0

package/dist/templates/basic/package.json

@@ -25,11 +25,11 @@
     "@orpc/tanstack-query": "catalog:",
     "@tailwindcss/typography": "catalog:",
     "@tanstack/react-query": "catalog:",
-    "@tulip-systems/app": "0.14.0",
-    "@tulip-systems/auth": "0.14.0",
-    "@tulip-systems/commands": "0.14.0",
-    "@tulip-systems/core": "0.14.0",
-    "@tulip-systems/ui": "0.14.0",
+    "@tulip-systems/app": "0.15.0",
+    "@tulip-systems/auth": "0.15.0",
+    "@tulip-systems/commands": "0.15.0",
+    "@tulip-systems/core": "0.15.0",
+    "@tulip-systems/ui": "0.15.0",
     "@vercel/functions": "^3.9.0",
     "better-auth": "catalog:",
     "class-variance-authority": "catalog:",

package/dist/templates/code/package.json

@@ -69,23 +69,24 @@
     "@tiptap/extension-text-style": "catalog:",
     "@tiptap/extension-underline": "catalog:",
     "@tiptap/extensions": "catalog:",
-    "@tulip-systems/ai": "0.14.0",
-    "@tulip-systems/app": "0.14.0",
-    "@tulip-systems/auth": "0.14.0",
-    "@tulip-systems/blocks": "0.14.0",
-    "@tulip-systems/commands": "0.14.0",
-    "@tulip-systems/core": "0.14.0",
-    "@tulip-systems/data-tables": "0.14.0",
-    "@tulip-systems/drive": "0.14.0",
-    "@tulip-systems/drive-google": "0.14.0",
-    "@tulip-systems/editor": "0.14.0",
-    "@tulip-systems/editor-storage": "0.14.0",
-    "@tulip-systems/events": "0.14.0",
-    "@tulip-systems/inline": "0.14.0",
-    "@tulip-systems/query": "0.14.0",
-    "@tulip-systems/queue": "0.14.0",
-    "@tulip-systems/storage": "0.14.0",
-    "@tulip-systems/ui": "0.14.0",
+    "@tulip-systems/ai": "0.15.0",
+    "@tulip-systems/app": "0.15.0",
+    "@tulip-systems/auth": "0.15.0",
+    "@tulip-systems/blocks": "0.15.0",
+    "@tulip-systems/commands": "0.15.0",
+    "@tulip-systems/core": "0.15.0",
+    "@tulip-systems/data-tables": "0.15.0",
+    "@tulip-systems/drive": "0.15.0",
+    "@tulip-systems/drive-google": "0.15.0",
+    "@tulip-systems/editor": "0.15.0",
+    "@tulip-systems/editor-storage": "0.15.0",
+    "@tulip-systems/events": "0.15.0",
+    "@tulip-systems/inline": "0.15.0",
+    "@tulip-systems/notifications": "0.13.0",
+    "@tulip-systems/query": "0.15.0",
+    "@tulip-systems/queue": "0.15.0",
+    "@tulip-systems/storage": "0.15.0",
+    "@tulip-systems/ui": "0.15.0",
     "@uidotdev/usehooks": "^2.4.1",
     "@upstash/qstash": "^2.11.3",
     "@vercel/functions": "^3.9.0",
@@ -121,7 +122,6 @@
     "sharp": "^0.35.3",
     "usehooks-ts": "^3.1.1",
     "uuid": "^14.0.1",
-    "web-push": "^3.6.7",
     "xlsx": "^0.18.5",
     "zod": "catalog:",
     "zustand": "^5.0.14"
@@ -134,7 +134,6 @@
     "@types/pg": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "@types/web-push": "^3.6.4",
     "babel-plugin-react-compiler": "^1.0.0",
     "dotenv-cli": "catalog:",
     "drizzle-kit": "catalog:",

package/dist/templates/code/public/sw.js

@@ -5,6 +5,7 @@ self.addEventListener("push", (event) => {
     body: data.body,
     icon: "/icons/icon-x192.png",
     badge: "/icons/icon-x192.png",
+    tag: data.tag,
     data: {
       url: data.url ?? "/admin/notifications",
       notificationId: data.notificationId,

package/dist/templates/code/src/app/admin/notifications/_components/push-subscription-card.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { PushSubscriptionCard } from "@tulip-systems/notifications/channels/web-push/client";
+import { orpc } from "@/server/router/client";
+
+/**
+ * Stores this browser's push subscription for the current user through the notifications router.
+ */
+export function PushSubscription() {
+  const { data: config } = useSuspenseQuery(orpc.notifications.getPushConfig.queryOptions());
+
+  return (
+    <PushSubscriptionCard
+      publicKey={config.publicKey}
+      onSubscribe={(subscription) => orpc.notifications.subscribePush.call(subscription)}
+      onUnsubscribe={(endpoint) => orpc.notifications.unsubscribePush.call({ endpoint })}
+    />
+  );
+}

package/dist/templates/code/src/app/admin/notifications/_components/tables.tsx

@@ -8,9 +8,10 @@ import {
   TableConfigProvider,
   useLocalStrategy,
 } from "@tulip-systems/data-tables/client";
-import type { PropsWithChildren } from "react";
+import { type Notification, notificationFilters } from "@tulip-systems/notifications";
+import { useFilters } from "@tulip-systems/query/client";
+import { type PropsWithChildren, useDeferredValue } from "react";
 import { orpc } from "@/server/router/client";
-import type { Notification } from "../_lib/validators";
 
 type NotificationTableProviderProps = PropsWithChildren<{
   columns: TableColumnDef<Notification>[];
@@ -22,7 +23,10 @@ export function NotificationTableProvider({
   commands,
   children,
 }: NotificationTableProviderProps) {
-  const response = useSuspenseQuery(orpc.notifications.list.queryOptions());
+  const filtering = useFilters(notificationFilters);
+  const input = useDeferredValue({ filters: filtering.input });
+
+  const response = useSuspenseQuery(orpc.notifications.list.queryOptions({ input }));
   const strategy = useLocalStrategy({ total: response.data.length });
 
   const config = createTableConfig<Notification>({
@@ -30,6 +34,7 @@ export function NotificationTableProvider({
     getRowId: (row) => row.id,
     columns,
     strategy,
+    filtering,
     commands,
   });
 

package/dist/templates/code/src/app/admin/notifications/_components/toolbars.tsx

@@ -1,21 +1,46 @@
 "use client";
 
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
-import type { PropsWithChildren } from "react";
+import { notificationFilters } from "@tulip-systems/notifications";
+import { resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterCombobox, FilterSearch, FilterToggle } from "@tulip-systems/query/client";
+import { Suspense } from "react";
+import { orpc } from "@/server/router/client";
 
-export function NotificationTableToolbar({ children }: PropsWithChildren) {
+const descriptors = resolveFilterDescriptors(notificationFilters);
+
+export function NotificationTableToolbar() {
   return (
     <TableToolbar>
       <TableToolbarList>
-        <div>
-          <h1 className="font-semibold text-lg tracking-tight">Notifications</h1>
-          <p className="text-muted-foreground text-sm">
-            Created by event listeners running through the queue.
-          </p>
-        </div>
-      </TableToolbarList>
+        <FilterSearch placeholder="Search notifications…" filter={descriptors.search} />
+
+        <Suspense>
+          <NotificationTypeFilter />
+        </Suspense>
 
-      <TableToolbarList>{children}</TableToolbarList>
+        <FilterToggle title="Unread" filter={descriptors.isUnread} />
+      </TableToolbarList>
     </TableToolbar>
   );
 }
+
+/**
+ * Only offers the notification types the user has the permission for, which the preferences
+ * already list.
+ */
+function NotificationTypeFilter() {
+  const { data } = useSuspenseQuery(orpc.notifications.getPreferences.queryOptions());
+
+  return (
+    <FilterCombobox
+      title="Type"
+      filter={descriptors.types}
+      options={data.notifications.map((notification) => ({
+        label: notification.label,
+        value: notification.type,
+      }))}
+    />
+  );
+}

package/dist/templates/code/src/app/admin/notifications/_components/unread-badge.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { NotificationSidebarBadge } from "@tulip-systems/notifications/client";
+import { orpc } from "@/server/router/client";
+
+/**
+ * Unread notification count next to the Notifications link in the sidebar. Refetches every minute
+ * and when the window regains focus, so new notifications show up without a reload.
+ */
+export function NotificationUnreadBadge() {
+  const { data: count } = useSuspenseQuery(
+    orpc.notifications.unreadCount.queryOptions({ refetchInterval: 60_000 }),
+  );
+
+  return <NotificationSidebarBadge count={count} />;
+}

package/dist/templates/code/src/app/admin/notifications/_config/columns-data.tsx

@@ -1,64 +1,73 @@
 "use client";
 
+import { useMutation } from "@tanstack/react-query";
 import { formatDateTime } from "@tulip-systems/core";
 import { Link } from "@tulip-systems/core/navigation";
 import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
 import { createTableSelectCell } from "@tulip-systems/data-tables/client";
-import type { Notification } from "../_lib/validators";
+import type { Notification } from "@tulip-systems/notifications";
+import { cn } from "@tulip-systems/ui/cn";
+import { formatDistanceToNow } from "date-fns";
+import { orpc } from "@/server/router/client";
 
 export const notificationColumns: TableColumnDef<Notification>[] = [
   createTableSelectCell(),
   {
     accessorKey: "title",
-    header: ({ column }) => <TableColumnHeader column={column} title="Title" />,
-    cell: ({ row }) => (
-      <TableCell>
-        <div className="font-medium">{row.original.title}</div>
-        <div className="max-w-[520px] truncate text-muted-foreground text-xs">
-          {row.original.body}
-        </div>
-      </TableCell>
-    ),
-    enableSorting: false,
-  },
-  {
-    accessorKey: "eventName",
-    header: ({ column }) => <TableColumnHeader column={column} title="Event" />,
-    cell: ({ row }) => <TableCell>{row.original.eventName}</TableCell>,
-    enableSorting: false,
-  },
-  {
-    accessorKey: "listenerKey",
-    header: ({ column }) => <TableColumnHeader column={column} title="Listener" />,
-    cell: ({ row }) => <TableCell>{row.original.listenerKey}</TableCell>,
+    header: ({ column }) => <TableColumnHeader column={column} title="Notification" />,
+    cell: ({ row }) => {
+      const markAsRead = useMutation(
+        orpc.notifications.markAsRead.mutationOptions({
+          meta: {
+            invalidates: [orpc.notifications.list.key(), orpc.notifications.unreadCount.key()],
+          },
+        }),
+      );
+
+      const isUnread = !row.original.readAt;
+
+      return (
+        <TableCell className={cn("w-full", !isUnread && "text-muted-foreground/70")}>
+          {isUnread && <span className="sr-only">Unread</span>}
+
+          <div className="min-w-0">
+            <div className={cn("truncate", isUnread && "font-bold")}>
+              {row.original.href ? (
+                <Link
+                  href={row.original.href}
+                  className="hover:underline"
+                  onClick={() => {
+                    if (isUnread) markAsRead.mutate({ ids: [row.original.id] });
+                  }}
+                >
+                  {row.original.title}
+                </Link>
+              ) : (
+                row.original.title
+              )}
+            </div>
+            <div className="max-w-[640px] truncate text-sm">{row.original.body}</div>
+          </div>
+        </TableCell>
+      );
+    },
     enableSorting: false,
   },
   {
-    accessorKey: "sourceHref",
-    header: ({ column }) => <TableColumnHeader column={column} title="Source" />,
+    accessorKey: "occurredAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Received" />,
     cell: ({ row }) => (
-      <TableCell>
-        {row.original.sourceHref ? (
-          <Link href={row.original.sourceHref} className="hover:underline">
-            {row.original.source}
-          </Link>
-        ) : (
-          row.original.source
+      <TableCell
+        className={cn(
+          "text-sm",
+          row.original.readAt ? "text-muted-foreground/70" : "font-medium text-foreground",
         )}
+        title={formatDateTime(row.original.occurredAt)}
+        suppressHydrationWarning
+      >
+        {formatDistanceToNow(row.original.occurredAt, { addSuffix: true })}
       </TableCell>
     ),
     enableSorting: false,
   },
-  {
-    accessorKey: "occurredAt",
-    header: ({ column }) => <TableColumnHeader column={column} title="Occurred" />,
-    cell: ({ row }) => <TableCell>{formatDateTime(row.original.occurredAt)}</TableCell>,
-    enableSorting: false,
-  },
-  {
-    accessorKey: "readAt",
-    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
-    cell: ({ row }) => <TableCell>{row.original.readAt ? "Read" : "Unread"}</TableCell>,
-    enableSorting: false,
-  },
 ];

package/dist/templates/code/src/app/admin/notifications/_config/commands.tsx

@@ -2,13 +2,10 @@
 
 import { commandBuilder } from "@tulip-systems/commands";
 import { CommandClick, CommandLabel, DeleteCommand } from "@tulip-systems/commands/client";
+import type { Notification } from "@tulip-systems/notifications";
 import { toast } from "@tulip-systems/ui/sonner";
-import { CheckIcon } from "lucide-react";
+import { CheckCheckIcon, CheckIcon, CircleDotIcon } from "lucide-react";
 import { orpc } from "@/server/router/client";
-import { CommandTogglePush } from "../_components/command-toggle-push";
-import type { Notification } from "../_lib/validators";
-
-export const notificationTogglePushCommand = commandBuilder.render(() => <CommandTogglePush />);
 
 export const notificationMarkAsReadCommand = commandBuilder
   .$type<Notification[]>()
@@ -18,7 +15,9 @@ export const notificationMarkAsReadCommand = commandBuilder
       label="Mark as read"
       variables={{ ids: data.map((item) => item.id) }}
       mutation={orpc.notifications.markAsRead.mutationOptions({
-        meta: { invalidates: [orpc.notifications.list.key()] },
+        meta: {
+          invalidates: [orpc.notifications.list.key(), orpc.notifications.unreadCount.key()],
+        },
         onSuccess: () => toast.success("Notifications marked as read"),
       })}
     >
@@ -27,13 +26,50 @@ export const notificationMarkAsReadCommand = commandBuilder
     </CommandClick>
   ));
 
+export const notificationMarkAsUnreadCommand = commandBuilder
+  .$type<Notification[]>()
+  .visibleWhen(({ data }) => data.some((item) => item.readAt))
+  .render(({ data }) => (
+    <CommandClick
+      label="Mark as unread"
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.notifications.markAsUnread.mutationOptions({
+        meta: {
+          invalidates: [orpc.notifications.list.key(), orpc.notifications.unreadCount.key()],
+        },
+        onSuccess: () => toast.success("Notifications marked as unread"),
+      })}
+    >
+      <CircleDotIcon className="size-4" />
+      <CommandLabel />
+    </CommandClick>
+  ));
+
+export const notificationMarkAllAsReadCommand = commandBuilder.render(() => (
+  <CommandClick
+    label="Mark all as read"
+    variables={undefined}
+    mutation={orpc.notifications.markAllAsRead.mutationOptions({
+      meta: {
+        invalidates: [orpc.notifications.list.key(), orpc.notifications.unreadCount.key()],
+      },
+      onSuccess: () => toast.success("All notifications marked as read"),
+    })}
+  >
+    <CheckCheckIcon className="size-4" />
+    <CommandLabel />
+  </CommandClick>
+));
+
 export const notificationDeleteCommand = commandBuilder
   .$type<Notification[]>()
   .render(({ data }) => (
     <DeleteCommand
       variables={{ ids: data.map((item) => item.id) }}
       mutation={orpc.notifications.delete.mutationOptions({
-        meta: { invalidates: [orpc.notifications.list.key()] },
+        meta: {
+          invalidates: [orpc.notifications.list.key(), orpc.notifications.unreadCount.key()],
+        },
         onSuccess: () => toast.success("Notifications deleted"),
       })}
     />

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

@@ -1,69 +1,143 @@
 import "server-cli-only";
 
+import { findStatus } from "@tulip-systems/ui/status";
+import { eq, inArray } from "drizzle-orm";
+import { employees } from "@/app/admin/employees/_lib/schema";
 import { projectCreatedEvent, projectUpdatedEvent } from "@/app/admin/projects/_lib/events";
-import { taskCreatedEvent } from "@/app/admin/tasks/_lib/events";
+import {
+  projectCreatedNotification,
+  projectStatusChangedNotification,
+} from "@/app/admin/projects/_lib/notifications";
+import { taskStatusConfig } from "@/app/admin/tasks/_config/status";
+import { taskCreatedEvent, taskUpdatedEvent } from "@/app/admin/tasks/_lib/events";
+import {
+  taskAssignedNotification,
+  taskCreatedNotification,
+  taskStatusChangedNotification,
+} from "@/app/admin/tasks/_lib/notifications";
+import { users } from "@/server/auth/schema";
 import { db } from "@/server/db/init";
-import { sendPushNotification } from "./push.server";
-import { notifications } from "./schema";
+import { notifications } from "@/server/notifications/init";
 
+/**
+ * Project notifications go to every user except the actor, because the demo has no project
+ * membership. Task notifications go to the people involved in the task. Task snapshots store
+ * employee ids, which are resolved to the employees' user ids.
+ */
 export const notificationEventListeners = {
   projectCreated: projectCreatedEvent.listen(async ({ payload, event }) => {
-    const [notification] = await db
-      .insert(notifications)
-      .values({
-        title: "Project created",
-        body: `${payload.title} was created with status ${payload.status}.`,
-        eventId: event.id,
-        eventName: event.name,
-        eventVersion: event.version,
-        listenerKey: "notifications:projectCreated",
-        source: "project",
-        sourceId: payload.projectId,
-        sourceHref: `/admin/projects/${payload.projectId}`,
-        occurredAt: new Date(event.occurredAt),
-      })
-      .returning();
+    const recipients = await db.select({ id: users.id }).from(users);
 
-    if (notification) await sendPushNotification(notification);
+    await notifications.send(projectCreatedNotification, {
+      to: recipients.map((recipient) => recipient.id),
+      exclude: [payload.actor.id],
+      data: { projectId: payload.projectId, title: payload.title, status: payload.status },
+      event,
+    });
   }),
   projectStatusChanged: projectUpdatedEvent.listen(async ({ payload, event }) => {
     if (payload.before.status === payload.after.status) return;
-    
-    const [notification] = await db
-      .insert(notifications)
-      .values({
-        title: "Project status changed",
-        body: `${payload.title} moved from ${payload.before.status} to ${payload.after.status}.`,
-        eventId: event.id,
-        eventName: event.name,
-        eventVersion: event.version,
-        listenerKey: "notifications:projectStatusChanged",
-        source: "project",
-        sourceId: payload.projectId,
-        sourceHref: `/admin/projects/${payload.projectId}`,
-        occurredAt: new Date(event.occurredAt),
-      })
-      .returning();
 
-    if (notification) await sendPushNotification(notification);
+    const recipients = await db.select({ id: users.id }).from(users);
+
+    await notifications.send(projectStatusChangedNotification, {
+      to: recipients.map((recipient) => recipient.id),
+      exclude: [payload.actor.id],
+      data: {
+        projectId: payload.projectId,
+        title: payload.title,
+        previousStatus: String(payload.before.status),
+        nextStatus: String(payload.after.status),
+      },
+      event,
+    });
   }),
   taskCreated: taskCreatedEvent.listen(async ({ payload, event }) => {
-    const [notification] = await db
-      .insert(notifications)
-      .values({
-        title: "Task created",
-        body: `${payload.code} ${payload.title} was added to ${payload.projectTitle}.`,
-        eventId: event.id,
-        eventName: event.name,
-        eventVersion: event.version,
-        listenerKey: "notifications:taskCreated",
-        source: "task",
-        sourceId: payload.taskId,
-        sourceHref: `/admin/tasks/${payload.taskId}`,
-        occurredAt: new Date(event.occurredAt),
-      })
-      .returning();
+    const recipients = await db.select({ id: users.id }).from(users);
+
+    await notifications.send(taskCreatedNotification, {
+      to: recipients.map((recipient) => recipient.id),
+      exclude: [payload.actor.id],
+      data: {
+        taskId: payload.taskId,
+        code: payload.code,
+        title: payload.title,
+        projectTitle: payload.projectTitle,
+      },
+      event,
+    });
+  }),
+  taskAssignedOnCreate: taskCreatedEvent.listen(async ({ payload, event }) => {
+    const assigneeId = payload.after.assignee_id;
+    if (typeof assigneeId !== "string") return;
+
+    const recipients = await db
+      .select({ id: employees.userId })
+      .from(employees)
+      .where(eq(employees.id, assigneeId));
+
+    await notifications.send(taskAssignedNotification, {
+      to: recipients.map((recipient) => recipient.id),
+      exclude: [payload.actor.id],
+      data: {
+        taskId: payload.taskId,
+        code: payload.code,
+        title: payload.title,
+        projectTitle: payload.projectTitle,
+        assignedBy: payload.actor.name,
+      },
+      event,
+    });
+  }),
+  taskReassigned: taskUpdatedEvent.listen(async ({ payload, event }) => {
+    const assigneeId = payload.after.assignee_id;
+    if (typeof assigneeId !== "string" || assigneeId === payload.before.assignee_id) return;
+
+    const recipients = await db
+      .select({ id: employees.userId })
+      .from(employees)
+      .where(eq(employees.id, assigneeId));
+
+    await notifications.send(taskAssignedNotification, {
+      to: recipients.map((recipient) => recipient.id),
+      exclude: [payload.actor.id],
+      data: {
+        taskId: payload.taskId,
+        code: payload.code,
+        title: payload.title,
+        projectTitle: payload.projectTitle,
+        assignedBy: payload.actor.name,
+      },
+      event,
+    });
+  }),
+  taskStatusChanged: taskUpdatedEvent.listen(async ({ payload, event }) => {
+    const previousStatus = String(payload.before.status);
+    const nextStatus = String(payload.after.status);
+    if (previousStatus === nextStatus) return;
+
+    const employeeIds = [payload.after.assignee_id, payload.after.creator_id].filter(
+      (id): id is string => typeof id === "string",
+    );
+    if (employeeIds.length === 0) return;
+
+    const recipients = await db
+      .select({ id: employees.userId })
+      .from(employees)
+      .where(inArray(employees.id, employeeIds));
 
-    if (notification) await sendPushNotification(notification);
+    await notifications.send(taskStatusChangedNotification, {
+      to: recipients.map((recipient) => recipient.id),
+      exclude: [payload.actor.id],
+      data: {
+        taskId: payload.taskId,
+        code: payload.code,
+        title: payload.title,
+        previousStatus: findStatus(taskStatusConfig, previousStatus)?.label ?? previousStatus,
+        nextStatus: findStatus(taskStatusConfig, nextStatus)?.label ?? nextStatus,
+        changedBy: payload.actor.name,
+      },
+      event,
+    });
   }),
 };