feat: create new checklist item

apps/web/src/components/Button.tsx

@@ -5,7 +5,7 @@ import LoadingSpinner from "./LoadingSpinner";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary" | "danger" | "ghost";
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   isLoading?: boolean;
   iconLeft?: React.ReactNode;
   iconRight?: React.ReactNode;
@@ -28,6 +28,7 @@ const Button = ({
 }: ButtonProps) => {
   const classes = twMerge(
     "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none",
+    size === "xs" && "text-xs px-2 py-1",
     size === "sm" && "text-xs",
     size === "lg" && "py-[0.65rem]",
     fullWidth && "w-full",

apps/web/src/components/CircularProgress.tsx

@@ -32,8 +32,8 @@ const CircularProgress = ({
           r={radius}
           fill="none"
           stroke="currentColor"
-          strokeWidth="8"
-          className="text-light-300 dark:text-dark-300"
+          strokeWidth="14"
+          className="text-light-300 dark:text-dark-400"
         />
         <circle
           cx="50"
@@ -41,7 +41,7 @@ const CircularProgress = ({
           r={radius}
           fill="none"
           stroke="currentColor"
-          strokeWidth="8"
+          strokeWidth="14"
           strokeDasharray={circumference}
           strokeDashoffset={strokeDashoffset}
           strokeLinecap="round"

apps/web/src/views/card/components/NewChecklistItemForm.tsx

@@ -0,0 +1,103 @@
+import { t } from "@lingui/core/macro";
+import ContentEditable from "react-contenteditable";
+import { useForm } from "react-hook-form";
+
+import Button from "~/components/Button";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface FormValues {
+  title: string;
+}
+
+interface NewChecklistItemFormProps {
+  checklistPublicId: string;
+  cardPublicId: string;
+  onCancel: () => void;
+}
+
+const NewChecklistItemForm = ({
+  checklistPublicId,
+  cardPublicId,
+  onCancel,
+}: NewChecklistItemFormProps) => {
+  const utils = api.useUtils();
+  const { showPopup } = usePopup();
+
+  const { handleSubmit, setValue, watch, reset } = useForm<FormValues>({
+    defaultValues: {
+      title: "",
+    },
+  });
+
+  const title = watch("title");
+
+  const addChecklistItemMutation = api.checklist.createItem.useMutation({
+    onError: (_error, _newItem) => {
+      showPopup({
+        header: t`Unable to add checklist item`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      await utils.card.byId.invalidate({ cardPublicId });
+    },
+    onSuccess: async () => {
+      reset();
+      await utils.card.byId.refetch({ cardPublicId });
+    },
+  });
+
+  const onSubmit = (data: FormValues) => {
+    addChecklistItemMutation.mutate({
+      checklistPublicId,
+      title: data.title,
+    });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="mt-2 w-full rounded-xl border border-light-600 bg-light-100 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000"
+    >
+      <div className="mb-3">
+        <ContentEditable
+          placeholder={t`Add an item...`}
+          html={title}
+          disabled={false}
+          onChange={(e) => setValue("title", e.target.value)}
+          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"
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+            if (e.key === "Escape") {
+              e.preventDefault();
+              onCancel();
+            }
+          }}
+        />
+      </div>
+
+      <div className="flex items-center justify-end">
+        <div className="flex space-x-2">
+          <Button size="xs" type="button" variant="ghost" onClick={onCancel}>
+            {t`Cancel`}
+          </Button>
+          <Button
+            size="xs"
+            type="submit"
+            variant="secondary"
+            disabled={title.length === 0 || addChecklistItemMutation.isPending}
+          >
+            {t`Add`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default NewChecklistItemForm;

apps/web/src/views/card/index.tsx

@@ -1,7 +1,9 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { HiPlus, HiXMark } from "react-icons/hi2";
 import { IoChevronForwardSharp } from "react-icons/io5";
 
 import Avatar from "~/components/Avatar";
@@ -27,6 +29,7 @@ import LabelSelector from "./components/LabelSelector";
 import ListSelector from "./components/ListSelector";
 import MemberSelector from "./components/MemberSelector";
 import { NewChecklistForm } from "./components/NewChecklistForm";
+import NewChecklistItemForm from "./components/NewChecklistItemForm";
 import NewCommentForm from "./components/NewCommentForm";
 
 interface FormValues {
@@ -137,6 +140,9 @@ export default function CardPage() {
   const { modalContentType, entityId } = useModal();
   const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
+  const [activeChecklistForm, setActiveChecklistForm] = useState<string | null>(
+    null,
+  );
 
   const cardId = Array.isArray(router.query.cardId)
     ? router.query.cardId[0]
@@ -261,25 +267,54 @@ export default function CardPage() {
                           (item) => item.completed,
                         );
                         const progress =
-                          checklist.items.length > 0
+                          checklist.items.length > 0 &&
+                          completedItems.length > 0
                             ? (completedItems.length / checklist.items.length) *
                               100
                             : 2;
 
+                        console.log({ checklist });
+
                         return (
-                          <div
-                            className="text-md flex items-center gap-3 font-medium text-light-900 dark:text-dark-1000"
-                            key={checklist.publicId}
-                          >
-                            <span>{checklist.name}</span>
-                            <CircularProgress
-                              progress={progress}
-                              size="md"
-                              className="flex-shrink-0"
-                            />
-                            <span className="text-sm text-light-900 dark:text-dark-900">
-                              {completedItems.length}/{checklist.items.length}
-                            </span>
+                          <div key={checklist.publicId}>
+                            <div className="text-md mb-4 flex items-center justify-between font-medium text-light-900 dark:text-dark-1000">
+                              <div className="flex items-center gap-2">
+                                <span>{checklist.name}</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-1 rounded-full border-[1px] border-light-300 px-2 py-1 dark:border-dark-300">
+                                  <CircularProgress
+                                    progress={progress}
+                                    size="sm"
+                                    className="flex-shrink-0"
+                                  />
+                                  <span className="text-[11px] text-light-900 dark:text-dark-700">
+                                    {completedItems.length}/
+                                    {checklist.items.length}
+                                  </span>
+                                </div>
+                                <div>
+                                  <button className="rounded-md p-1 text-light-900 hover:bg-light-100 dark:text-dark-700 dark:hover:bg-dark-100">
+                                    <HiXMark size={16} />
+                                  </button>
+                                  <button
+                                    onClick={() =>
+                                      setActiveChecklistForm(checklist.publicId)
+                                    }
+                                    className="rounded-md p-1 text-light-900 hover:bg-light-100 dark:text-dark-700 dark:hover:bg-dark-100"
+                                  >
+                                    <HiPlus size={16} />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                            {activeChecklistForm === checklist.publicId && (
+                              <NewChecklistItemForm
+                                checklistPublicId={checklist.publicId}
+                                cardPublicId={cardId}
+                                onCancel={() => setActiveChecklistForm(null)}
+                              />
+                            )}
                           </div>
                         );
                       })}

packages/api/src/routers/checklist.ts

@@ -12,6 +12,12 @@ const checklistSchema = z.object({
   name: z.string().min(1).max(255),
 });
 
+const checklistItemSchema = z.object({
+  publicId: z.string().length(12),
+  title: z.string().min(1).max(500),
+  completed: z.boolean(),
+});
+
 export const checklistRouter = createTRPCRouter({
   create: protectedProcedure
     .meta({
@@ -75,6 +81,64 @@ export const checklistRouter = createTRPCRouter({
 
       return newChecklist;
     }),
+  createItem: protectedProcedure
+    .meta({
+      openapi: {
+        summary: "Add an item to a checklist",
+        method: "POST",
+        path: "/checklists/{checklistPublicId}/items",
+        description: "Adds an item to a checklist",
+        tags: ["Cards"],
+        protect: true,
+      },
+    })
+    .input(
+      z.object({
+        checklistPublicId: z.string().length(12),
+        title: z.string().min(1).max(500),
+      }),
+    )
+    .output(checklistItemSchema)
+    .mutation(async ({ ctx, input }) => {
+      const userId = ctx.user?.id;
+
+      if (!userId)
+        throw new TRPCError({
+          message: `User not authenticated`,
+          code: "UNAUTHORIZED",
+        });
+
+      const checklist = await checklistRepo.getChecklistByPublicId(
+        ctx.db,
+        input.checklistPublicId,
+      );
+
+      if (!checklist)
+        throw new TRPCError({
+          message: `Checklist with public ID ${input.checklistPublicId} not found`,
+          code: "NOT_FOUND",
+        });
+
+      await assertUserInWorkspace(
+        ctx.db,
+        userId,
+        checklist.card.list.board.workspace.id,
+      );
+
+      const newChecklistItem = await checklistRepo.createItem(ctx.db, {
+        title: input.title,
+        createdBy: userId,
+        checklistId: checklist.id,
+      });
+
+      if (!newChecklistItem?.id)
+        throw new TRPCError({
+          message: `Failed to create checklist item`,
+          code: "INTERNAL_SERVER_ERROR",
+        });
+
+      return newChecklistItem;
+    }),
   // update: protectedProcedure
   //   .meta({
   //     openapi: {

packages/db/src/repository/checklist.repo.ts

@@ -1,7 +1,7 @@
 import { and, desc, eq, isNull } from "drizzle-orm";
 
 import type { dbClient } from "@kan/db/client";
-import { checklists } from "@kan/db/schema";
+import { checklistItems, checklists } from "@kan/db/schema";
 import { generateUID } from "@kan/shared/utils";
 
 export const create = async (
@@ -39,3 +39,70 @@ export const create = async (
     return result;
   });
 };
+
+export const createItem = async (
+  db: dbClient,
+  checklistItemInput: {
+    checklistId: number;
+    title: string;
+    createdBy: string;
+  },
+) => {
+  return db.transaction(async (tx) => {
+    const lastItem = await tx.query.checklistItems.findFirst({
+      where: and(
+        eq(checklistItems.checklistId, checklistItemInput.checklistId),
+        isNull(checklistItems.deletedAt),
+      ),
+      orderBy: desc(checklistItems.index),
+    });
+
+    const [result] = await tx
+      .insert(checklistItems)
+      .values({
+        publicId: generateUID(),
+        title: checklistItemInput.title,
+        createdBy: checklistItemInput.createdBy,
+        checklistId: checklistItemInput.checklistId,
+        index: lastItem ? lastItem.index + 1 : 0,
+        completed: false,
+      })
+      .returning({
+        id: checklistItems.id,
+        publicId: checklistItems.publicId,
+        title: checklistItems.title,
+        completed: checklistItems.completed,
+      });
+
+    return result;
+  });
+};
+
+export const getChecklistByPublicId = async (
+  db: dbClient,
+  checklistPublicId: string,
+) => {
+  const checklist = await db.query.checklists.findFirst({
+    where: and(
+      eq(checklists.publicId, checklistPublicId),
+      isNull(checklists.deletedAt),
+    ),
+    with: {
+      card: {
+        with: {
+          list: {
+            with: {
+              board: {
+                with: {
+                  workspace: true,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  return checklist;
+};