feat: empty boards and lists state

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

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
 import { useForm } from "react-hook-form";
-import { HiOutlinePlusSmall } from "react-icons/hi2";
+import { HiOutlinePlusSmall, HiOutlineSquare3Stack3D } from "react-icons/hi2";
 
 import type { UpdateBoardInput } from "@kan/api/types";
 
@@ -273,6 +273,27 @@ export default function BoardPage() {
               <div className="0 mr-5 h-[275px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
               <div className="0 mr-5 h-[375px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
             </div>
+          ) : (
+            <>
+              {boardData?.lists.length === 0 ? (
+                <div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
+                  <div className="flex flex-col items-center">
+                    <HiOutlineSquare3Stack3D className="h-10 w-10 text-light-800 dark:text-dark-800" />
+                    <p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
+                      No lists
+                    </p>
+                    <p className="text-[14px] text-light-900 dark:text-dark-900">
+                      Get started by creating a new list
+                    </p>
+                  </div>
+                  <Button
+                    onClick={() => {
+                      if (boardId) openNewListForm(boardId);
+                    }}
+                  >
+                    Create new list
+                  </Button>
+                </div>
               ) : (
                 <DragDropContext onDragEnd={onDragEnd}>
                   <Droppable
@@ -296,7 +317,10 @@ export default function BoardPage() {
                               setSelectedPublicListId(publicListId)
                             }
                           >
-                        <Droppable droppableId={`${list.publicId}`} type="CARD">
+                            <Droppable
+                              droppableId={`${list.publicId}`}
+                              type="CARD"
+                            >
                               {(provided) => (
                                 <div
                                   ref={provided.innerRef}
@@ -322,7 +346,9 @@ export default function BoardPage() {
                                           key={card.publicId}
                                           href={`/cards/${card.publicId}`}
                                           className={`mb-2 flex !cursor-pointer flex-col ${
-                                        card.publicId.startsWith("PLACEHOLDER")
+                                            card.publicId.startsWith(
+                                              "PLACEHOLDER",
+                                            )
                                               ? "pointer-events-none"
                                               : ""
                                           }`}
@@ -352,6 +378,8 @@ export default function BoardPage() {
                   </Droppable>
                 </DragDropContext>
               )}
+            </>
+          )}
         </div>
         <Modal modalSize={modalContentType === "NEW_CARD" ? "md" : "sm"}>
           {modalContentType === "DELETE_BOARD" && (

apps/web/src/views/boards/components/BoardsList.tsx

@@ -1,11 +1,15 @@
 import Link from "next/link";
+import { HiOutlineRectangleStack } from "react-icons/hi2";
 
+import Button from "~/components/Button";
 import PatternedBackground from "~/components/PatternedBackground";
+import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 
 export function BoardsList() {
   const { workspace } = useWorkspace();
+  const { openModal } = useModal();
 
   const { data, isLoading } = api.board.all.useQuery(
     { workspacePublicId: workspace.publicId },
@@ -21,7 +25,21 @@ export function BoardsList() {
       </div>
     );
 
-  if (data?.length === 0) return <></>;
+  if (data?.length === 0)
+    return (
+      <div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
+        <div className="flex flex-col items-center">
+          <HiOutlineRectangleStack className="h-10 w-10 text-light-800 dark:text-dark-800" />
+          <p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
+            No boards
+          </p>
+          <p className="text-[14px] text-light-900 dark:text-dark-900">
+            Get started by creating a new board
+          </p>
+        </div>
+        <Button onClick={() => openModal("NEW_BOARD")}>Create new board</Button>
+      </div>
+    );
 
   return (
     <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-5">

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

@@ -16,7 +16,7 @@ export default function BoardsPage() {
   return (
     <>
       <PageHead title={`Boards | ${workspace.name ?? "Workspace"}`} />
-      <div className="p-8">
+      <div className="h-full p-8">
         <div className="mb-8 flex w-full justify-between">
           <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
             Boards
@@ -57,7 +57,7 @@ export default function BoardsPage() {
           {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
         </Modal>
 
-        <div className="flex flex-row">
+        <div className="flex h-full flex-row">
           <BoardsList />
         </div>
       </div>