feat: card checklists (#141)

* feat: setup checklist schema

* feat: scaffold checklist router

* feat: add create new checklist modal

* feat: create new checklist item

* feat: toggle checklist item completed state

* feat: update checklist name

* feat: delete checklist

* feat: show checklists progress on cards

* feat: tweak light mode styling

* feat: focus item form on creation of new checklist

* feat: tweak new checklist item form styling

* feat: add checklist activity

* feat: show checklist progress on public board page

* feat: display checklist items on public card modal

* chore: add translations

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

@@ -0,0 +1,71 @@
+import { t } from "@lingui/core/macro";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+export function DeleteChecklistConfirmation({
+  cardPublicId,
+  checklistPublicId,
+}: {
+  cardPublicId: string;
+  checklistPublicId: string;
+}) {
+  const { closeModal } = useModal();
+  const { showPopup } = usePopup();
+  const utils = api.useUtils();
+
+  const deleteChecklist = api.checklist.delete.useMutation({
+    onMutate: async () => {
+      await utils.card.byId.cancel({ cardPublicId });
+      const previous = utils.card.byId.getData({ cardPublicId });
+      utils.card.byId.setData({ cardPublicId }, (old) => {
+        if (!old) return old as any;
+        const updatedChecklists = old.checklists.filter(
+          (cl) => cl.publicId !== checklistPublicId,
+        );
+        return { ...old, checklists: updatedChecklists } as typeof old;
+      });
+      return { previous };
+    },
+    onError: (_err, _vars, ctx) => {
+      if (ctx?.previous)
+        utils.card.byId.setData({ cardPublicId }, ctx.previous);
+      showPopup({
+        header: t`Unable to delete checklist`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      closeModal();
+      await utils.card.byId.invalidate({ cardPublicId });
+    },
+  });
+
+  const handleDelete = () => {
+    deleteChecklist.mutate({ checklistPublicId });
+  };
+
+  return (
+    <div className="p-5">
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
+          {t`Are you sure you want to delete this checklist?`}
+        </h2>
+        <p className="text-sm font-medium text-light-900 dark:text-dark-900">
+          {t`This action can't be undone.`}
+        </p>
+      </div>
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button variant="secondary" onClick={() => closeModal()}>
+          {t`Cancel`}
+        </Button>
+        <Button onClick={handleDelete} isLoading={deleteChecklist.isPending}>
+          {t`Delete`}
+        </Button>
+      </div>
+    </div>
+  );
+}