feat: create new lists

src/app/boards/[...id]/page.tsx

@@ -17,7 +17,9 @@ import { useBoard } from "~/app/providers/board";
 import { useModal } from "~/app/providers/modal";
 
 import Modal from "~/app/_components/modal";
-import { NewCardForm } from "~/app/boards/[...id]/create";
+
+import { NewCardForm } from "./NewCardForm";
+import { NewListForm } from "./NewListForm";
 
 interface List {
   publicId: string;
@@ -40,7 +42,7 @@ type PublicListId = string;
 export default function BoardPage() {
   const params = useParams();
   const { boardData, setBoardData, updateCard, updateList } = useBoard();
-  const { openModal } = useModal();
+  const { openModal, modalContentType } = useModal();
   const [selectedPublicListId, setSelectedPublicListId] =
     useState<PublicListId>("");
 
@@ -73,8 +75,13 @@ export default function BoardPage() {
     },
   );
 
+  const openNewListForm = (publicBoardId: string) => {
+    openModal("NEW_LIST");
+    setSelectedPublicListId(publicBoardId);
+  };
+
   const openNewCardForm = (publicListId: PublicListId) => {
-    openModal();
+    openModal("NEW_CARD");
     setSelectedPublicListId(publicListId);
   };
 
@@ -153,6 +160,7 @@ export default function BoardPage() {
           <button
             type="button"
             className="inline-flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            onClick={() => openNewListForm(boardId)}
           >
             <HiOutlinePlusSmall
               className="-mr-0.5 h-5 w-5"
@@ -240,7 +248,12 @@ export default function BoardPage() {
         </Droppable>
       </DragDropContext>
       <Modal>
-        <NewCardForm listPublicId={selectedPublicListId} />
+        {modalContentType === "NEW_CARD" && (
+          <NewCardForm listPublicId={selectedPublicListId} />
+        )}
+        {modalContentType === "NEW_LIST" && (
+          <NewListForm boardPublicId={boardId} />
+        )}
       </Modal>
     </div>
   );