feat: display card activity

package.json

@@ -30,6 +30,7 @@
     "@trpc/react-query": "next",
     "@trpc/server": "^11.0.0-rc.566",
     "@vercel/postgres": "^0.7.2",
+    "date-fns": "^4.1.0",
     "drizzle-orm": "^0.28.5",
     "next": "^14.1.3",
     "nextjs-cors": "^2.2.0",

src/components/Avatar.tsx

@@ -0,0 +1,47 @@
+import { twMerge } from "tailwind-merge";
+import { getInitialsFromName, inferInitialsFromEmail } from "~/utils/helpers";
+
+const Avatar = ({
+  size = "md",
+  name,
+  email,
+  icon,
+  isLoading,
+}: {
+  size?: "sm" | "md" | "lg";
+  name: string;
+  email: string;
+  icon: React.ReactNode;
+  isLoading: boolean;
+}) => {
+  const initials = name
+    ? getInitialsFromName(name)
+    : inferInitialsFromEmail(email ?? "");
+
+  return (
+    <span
+      className={twMerge(
+        "inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
+        isLoading && "animate-pulse bg-light-200 dark:bg-dark-200",
+        size === "sm" && "h-6 w-6",
+        size === "lg" && "h-12 w-12",
+      )}
+    >
+      {icon ? (
+        <span className="text-[12px] text-white">{icon}</span>
+      ) : (
+        <span
+          className={twMerge(
+            "text-sm font-medium leading-none text-white",
+            size === "sm" && "text-[10px]",
+            size === "lg" && "text-md",
+          )}
+        >
+          {initials}
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default Avatar;

src/server/db/repository/card.repo.ts

@@ -263,12 +263,14 @@ export const getWithListAndMembersByPublicId = async (
             publicId,
             user!workspace_members_userId_user_id_fk (
               id,
-              name
+              name,
+              email
             )
           ),
           user!card_activity_createdBy_user_id_fk (
             id,
-            name
+            name,
+            email
           )
         )
       `,

src/types/router.types.ts

@@ -1,6 +1,7 @@
 import { type RouterInputs, type RouterOutputs } from "~/utils/api";
 
 export type GetBoardByIdOutput = RouterOutputs["board"]["byId"];
+export type GetCardByIdOutput = RouterOutputs["card"]["byId"];
 export type ReorderListInput = RouterInputs["list"]["reorder"];
 export type ReorderCardInput = RouterInputs["card"]["reorder"];
 export type UpdateBoardInput = RouterInputs["board"]["update"];

src/views/card/components/ActivityList.tsx

@@ -0,0 +1,185 @@
+import { formatDistanceToNow } from "date-fns";
+import {
+  HiOutlinePencil,
+  HiOutlineTag,
+  HiOutlineUserPlus,
+  HiOutlineUserMinus,
+  HiOutlineArrowRight,
+  HiOutlinePlus,
+} from "react-icons/hi2";
+
+import Avatar from "~/components/Avatar";
+
+import { type GetCardByIdOutput } from "~/types/router.types";
+
+type ActivityType =
+  NonNullable<GetCardByIdOutput>["activities"][number]["type"];
+
+const ACTIVITY_TYPE_MAP = {
+  "card.created": "created the card",
+  "card.updated.title": "updated the title",
+  "card.updated.description": "updated the description",
+  "card.updated.list": "moved the card to another list",
+  "card.updated.label.added": "added a label to the card",
+  "card.updated.label.removed": "removed a label from the card",
+  "card.updated.member.added": "added a member to the card",
+  "card.updated.member.removed": "removed a member from the card",
+} as const;
+
+const getActivityText = ({
+  type,
+  toTitle,
+  fromList,
+  toList,
+  memberName,
+  isSelf,
+  label,
+}: {
+  type: ActivityType;
+  toTitle: string | null;
+  fromList: string | null;
+  toList: string | null;
+  memberName: string | null;
+  isSelf: boolean;
+  label: string | null;
+}) => {
+  if (!(type in ACTIVITY_TYPE_MAP)) return null;
+  const baseText = ACTIVITY_TYPE_MAP[type as keyof typeof ACTIVITY_TYPE_MAP];
+
+  const TextHighlight = ({ children }: { children: React.ReactNode }) => (
+    <span className="font-medium text-light-1000 dark:text-dark-1000">
+      {children}
+    </span>
+  );
+
+  if (type === "card.updated.title" && toTitle) {
+    return (
+      <>
+        updated the title to <TextHighlight>{toTitle}</TextHighlight>
+      </>
+    );
+  }
+
+  if (type === "card.updated.list" && fromList && toList) {
+    return (
+      <>
+        moved the card from <TextHighlight>{fromList}</TextHighlight> to
+        <TextHighlight>{toList}</TextHighlight>
+      </>
+    );
+  }
+
+  if (type === "card.updated.member.added" && memberName) {
+    if (isSelf) return <>self-assigned the card</>;
+
+    return (
+      <>
+        assigned <TextHighlight>{memberName}</TextHighlight> to the card
+      </>
+    );
+  }
+
+  if (type === "card.updated.member.removed" && memberName) {
+    if (isSelf) return <>unassigned themselves from the card</>;
+
+    return (
+      <>
+        unassigned <TextHighlight>{memberName}</TextHighlight> from the card
+      </>
+    );
+  }
+
+  if (type === "card.updated.label.added" && label) {
+    return (
+      <>
+        added label <TextHighlight>{label}</TextHighlight>
+      </>
+    );
+  }
+
+  if (type === "card.updated.label.removed" && label) {
+    return (
+      <>
+        removed label <TextHighlight>{label}</TextHighlight>
+      </>
+    );
+  }
+
+  return baseText;
+};
+
+const ACTIVITY_ICON_MAP: Partial<Record<ActivityType, React.ReactNode | null>> =
+  {
+    "card.created": <HiOutlinePlus />,
+    "card.updated.title": <HiOutlinePencil />,
+    "card.updated.description": <HiOutlinePencil />,
+    "card.updated.list": <HiOutlineArrowRight />,
+    "card.updated.label.added": <HiOutlineTag />,
+    "card.updated.label.removed": <HiOutlineTag />,
+    "card.updated.member.added": <HiOutlineUserPlus />,
+    "card.updated.member.removed": <HiOutlineUserMinus />,
+  } as const;
+
+const getActivityIcon = (type: ActivityType): React.ReactNode | null => {
+  return ACTIVITY_ICON_MAP[type] ?? null;
+};
+
+const ActivityList = ({
+  activities,
+  isLoading,
+}: {
+  activities: NonNullable<GetCardByIdOutput>["activities"];
+  isLoading: boolean;
+}) => {
+  return (
+    <div className="flex flex-col space-y-4 pt-4">
+      {activities?.map((activity, index) => {
+        const activityText = getActivityText({
+          type: activity.type,
+          toTitle: activity.toTitle,
+          fromList: activity.fromList?.name ?? null,
+          toList: activity.toList?.name ?? null,
+          memberName: activity.member?.user?.name ?? null,
+          isSelf: activity.member?.user?.id === activity.user?.id,
+          label: activity.label?.name ?? null,
+        });
+
+        if (!activityText) return null;
+
+        return (
+          <div
+            key={activity.publicId}
+            className="relative flex items-center space-x-2"
+          >
+            <div className="relative">
+              <Avatar
+                size="sm"
+                name={activity.user?.name ?? ""}
+                email={activity.user?.email ?? ""}
+                icon={getActivityIcon(activity.type)}
+                isLoading={isLoading}
+              />
+              {index !== activities.length - 1 && (
+                <div className="absolute bottom-[-14px] left-1/2 top-[30px] w-0.5 -translate-x-1/2 bg-light-600 dark:bg-dark-600" />
+              )}
+            </div>
+            <p className="text-sm">
+              <span className="font-medium dark:text-dark-1000">{`${activity.user?.name} `}</span>
+              <span className="space-x-1 text-light-900 dark:text-dark-800">
+                {activityText}
+              </span>
+              <span className="mx-1 text-light-900 dark:text-dark-800">·</span>
+              <span className="space-x-1 text-light-900 dark:text-dark-800">
+                {formatDistanceToNow(new Date(activity.createdAt), {
+                  addSuffix: true,
+                })}
+              </span>
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ActivityList;

src/views/card/index.tsx

@@ -4,6 +4,7 @@ import { useForm } from "react-hook-form";
 import ContentEditable from "react-contenteditable";
 import { IoChevronForwardSharp } from "react-icons/io5";
 
+import ActivityList from "./components/ActivityList";
 import Dropdown from "./components/Dropdown";
 import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
 import { DeleteLabelConfirmation } from "./components/DeleteLabelConfirmation";
@@ -15,6 +16,7 @@ import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 
 import Modal from "~/components/modal";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 
 import { api } from "~/utils/api";
 
@@ -26,7 +28,9 @@ interface FormValues {
 
 export default function CardPage() {
   const params = useParams();
+  const utils = api.useUtils();
   const { modalContentType, entityId } = useModal();
+  const { showPopup } = usePopup();
 
   const cardId = Array.isArray(params?.cardId)
     ? params.cardId[0]
@@ -39,6 +43,7 @@ export default function CardPage() {
   const board = data?.list?.board;
   const boardId = board?.publicId;
   const labels = board?.labels;
+  const activities = data?.activities;
   const workspaceMembers = board?.workspace?.members;
   const selectedLabels = data?.labels;
   const selectedMembers = data?.members;
@@ -75,7 +80,17 @@ export default function CardPage() {
       };
     }) ?? [];
 
-  const updateCard = api.card.update.useMutation();
+  const updateCard = api.card.update.useMutation({
+    onSuccess: async () => {
+      await utils.card.byId.refetch();
+    },
+    onError: () => {
+      showPopup({
+        header: "Unable to update card",
+        message: "Please try again later, or contact customer support.",
+      });
+    },
+  });
 
   const { register, handleSubmit, setValue, watch } = useForm<FormValues>({
     values: {
@@ -97,58 +112,74 @@ export default function CardPage() {
 
   return (
     <div className="flex h-full flex-1 flex-row">
-      <div className="w-full p-8">
+      <div className="flex h-full w-full flex-col overflow-hidden">
-        <div className="mb-8 flex w-full items-center justify-between">
+        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8">
-          {isLoading ? (
+          <div className="mb-8 flex w-full items-center justify-between">
-            <div className="flex space-x-2">
+            {isLoading ? (
-              <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+              <div className="flex space-x-2">
-              <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+                <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
-            </div>
+                <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
-          ) : (
-            <>
-              <Link
-                className="whitespace-nowrap font-medium leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
-                href={`/boards/${board?.publicId}`}
-              >
-                {board?.name}
-              </Link>
-              <IoChevronForwardSharp
-                size={18}
-                className="mx-2 text-light-900 dark:text-dark-900"
-              />
-              <form
-                onSubmit={handleSubmit(onSubmit)}
-                className="w-full space-y-6"
-              >
-                <div>
-                  <input
-                    type="text"
-                    id="title"
-                    {...register("title")}
-                    onBlur={handleSubmit(onSubmit)}
-                    className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
-                  />
-                </div>
-              </form>
-              <div className="flex">
-                <Dropdown />
               </div>
-            </>
+            ) : (
-          )}
+              <>
-        </div>
+                <Link
-        <div className="mb-8 flex w-full max-w-2xl justify-between">
+                  className="whitespace-nowrap font-medium leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
-          <form onSubmit={handleSubmit(onSubmit)} className="w-full space-y-6">
+                  href={`/boards/${board?.publicId}`}
-            <div className="mt-2">
+                >
-              <ContentEditable
+                  {board?.name}
-                placeholder="Add description..."
+                </Link>
-                html={watch("description")}
+                <IoChevronForwardSharp
-                disabled={false}
+                  size={18}
-                onChange={(e) => setValue("description", e.target.value)}
+                  className="mx-2 text-light-900 dark:text-dark-900"
-                onBlur={handleSubmit(onSubmit)}
+                />
-                className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
+                <form
+                  onSubmit={handleSubmit(onSubmit)}
+                  className="w-full space-y-6"
+                >
+                  <div>
+                    <input
+                      type="text"
+                      id="title"
+                      {...register("title")}
+                      onBlur={handleSubmit(onSubmit)}
+                      className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
+                    />
+                  </div>
+                </form>
+                <div className="flex">
+                  <Dropdown />
+                </div>
+              </>
+            )}
+          </div>
+          <div className="mb-10 flex w-full max-w-2xl justify-between">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="w-full space-y-6"
+            >
+              <div className="mt-2">
+                <ContentEditable
+                  placeholder="Add description..."
+                  html={watch("description")}
+                  disabled={false}
+                  onChange={(e) => setValue("description", e.target.value)}
+                  onBlur={handleSubmit(onSubmit)}
+                  className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
+                />
+              </div>
+            </form>
+          </div>
+          <div className="border-t-[1px] border-light-600 pt-12 dark:border-dark-600">
+            <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
+              Activity
+            </h2>
+            <div>
+              <ActivityList
+                activities={activities ?? []}
+                isLoading={isLoading}
               />
             </div>
-          </form>
+          </div>
         </div>
       </div>
       <div className="min-w-[325px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">