feat: create label from new card modal

apps/web/src/views/board/components/NewCardForm.tsx

@@ -43,7 +43,7 @@ export function NewCardForm({
   queryParams,
 }: NewCardFormProps) {
   const { showPopup } = usePopup();
-  const { closeModal } = useModal();
+  const { closeModal, openModal } = useModal();
 
   const utils = api.useUtils();
 
@@ -299,6 +299,11 @@ export function NewCardForm({
             <CheckboxDropdown
               items={formattedLabels}
               handleSelect={(_groupKey, item) => handleSelectLabels(item.key)}
+              handleEdit={(labelPublicId) =>
+                openModal("EDIT_LABEL", labelPublicId)
+              }
+              handleCreate={() => openModal("NEW_LABEL")}
+              createNewItemLabel="Create new label"
             >
               <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
                 {!labelPublicIds.length ? (

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

@@ -11,6 +11,8 @@ import { HiOutlinePlusSmall, HiOutlineSquare3Stack3D } from "react-icons/hi2";
 import type { UpdateBoardInput } from "@kan/api/types";
 
 import Button from "~/components/Button";
+import { DeleteLabelConfirmation } from "~/components/DeleteLabelConfirmation";
+import { LabelForm } from "~/components/LabelForm";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
@@ -40,7 +42,7 @@ export default function BoardPage() {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
-  const { openModal, modalContentType } = useModal();
+  const { openModal, modalContentType, entityId } = useModal();
   const [selectedPublicListId, setSelectedPublicListId] =
     useState<PublicListId>("");
   const [isInitialLoading, setIsInitialLoading] = useState(true);
@@ -78,6 +80,10 @@ export default function BoardPage() {
     placeholderData: keepPreviousData,
   });
 
+  const refetchBoard = async () => {
+    if (boardId) await utils.board.byId.refetch({ boardPublicId: boardId });
+  };
+
   useEffect(() => {
     if (boardId) {
       setIsInitialLoading(false);
@@ -409,6 +415,22 @@ export default function BoardPage() {
             />
           )}
           {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
+          {modalContentType === "NEW_LABEL" && (
+            <LabelForm boardPublicId={boardId ?? ""} refetch={refetchBoard} />
+          )}
+          {modalContentType === "EDIT_LABEL" && (
+            <LabelForm
+              boardPublicId={boardId ?? ""}
+              refetch={refetchBoard}
+              isEdit
+            />
+          )}
+          {modalContentType === "DELETE_LABEL" && (
+            <DeleteLabelConfirmation
+              refetch={refetchBoard}
+              labelPublicId={entityId}
+            />
+          )}
           {modalContentType === "UPDATE_BOARD_SLUG" && (
             <UpdateBoardSlugForm
               boardPublicId={boardId ?? ""}