From f64549f743728c8a600fd51537f5ba9f87b091bf Mon Sep 17 00:00:00 2001
From: LovelessCodes <hello@loveless.codes>
Date: Fri, 6 Jun 2025 00:40:37 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20add=20not=20found=20states=20for=20boar?=
 =?UTF-8?q?d=20and=20card=20views=20with=20conditional=20=E2=80=A6=20(#41)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add not found states for board and card views with conditional rendering

* refactor: move out of nested ternary
---
 apps/web/src/views/board/index.tsx | 33 ++++++------
 apps/web/src/views/card/index.tsx  | 84 +++++++++++++++++-------------
 2 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/apps/web/src/views/board/index.tsx b/apps/web/src/views/board/index.tsx
index 81cc54fa..79e16fd4 100644
--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -240,11 +240,12 @@ export default function BoardPage() {
       <div className="relative flex h-full flex-col">
         <PatternedBackground />
         <div className="z-10 flex w-full justify-between p-8">
-          {isLoading ? (
+          {isLoading && !boardData && (
             <div className="flex space-x-2">
               <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-100" />
             </div>
-          ) : (
+          )}
+          {boardData && (
             <form
               onSubmit={handleSubmit(onSubmit)}
               className="focus-visible:outline-none"
@@ -258,20 +259,23 @@ export default function BoardPage() {
               />
             </form>
           )}
+          {!boardData && !isLoading && (
+            <p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">Board not found</p>
+          )}
 
           <div className="flex items-center space-x-2">
             <VisibilityButton
               visibility={boardData?.visibility ?? "private"}
               boardPublicId={boardId ?? ""}
               queryParams={queryParams}
-              isLoading={isLoading}
+              isLoading={!boardData}
               isAdmin={workspace.role === "admin"}
             />
             <Filters
               labels={boardData?.labels ?? []}
               members={boardData?.workspace.members ?? []}
               position="left"
-              isLoading={isLoading}
+              isLoading={!boardData}
             />
             <Button
               iconLeft={
@@ -283,11 +287,11 @@ export default function BoardPage() {
               onClick={() => {
                 if (boardId) openNewListForm(boardId);
               }}
-              disabled={isLoading}
+              disabled={!boardData}
             >
               New list
             </Button>
-            <BoardDropdown isLoading={isLoading} />
+            <BoardDropdown isLoading={!boardData} />
           </div>
         </div>
 
@@ -298,7 +302,7 @@ 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 ? (
             <>
               {boardData?.lists.length === 0 ? (
                 <div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
@@ -370,13 +374,12 @@ export default function BoardPage() {
                                           }}
                                           key={card.publicId}
                                           href={`/cards/${card.publicId}`}
-                                          className={`mb-2 flex !cursor-pointer flex-col ${
-                                            card.publicId.startsWith(
-                                              "PLACEHOLDER",
-                                            )
-                                              ? "pointer-events-none"
-                                              : ""
-                                          }`}
+                                          className={`mb-2 flex !cursor-pointer flex-col ${card.publicId.startsWith(
+                                            "PLACEHOLDER",
+                                          )
+                                            ? "pointer-events-none"
+                                            : ""
+                                            }`}
                                           ref={provided.innerRef}
                                           {...provided.draggableProps}
                                           {...provided.dragHandleProps}
@@ -404,7 +407,7 @@ export default function BoardPage() {
                 </DragDropContext>
               )}
             </>
-          )}
+          ) : null}
         </div>
         <Modal modalSize={modalContentType === "NEW_CARD" ? "md" : "sm"}>
           {modalContentType === "DELETE_BOARD" && (
diff --git a/apps/web/src/views/card/index.tsx b/apps/web/src/views/card/index.tsx
index 29eed41a..051743fc 100644
--- a/apps/web/src/views/card/index.tsx
+++ b/apps/web/src/views/card/index.tsx
@@ -148,12 +148,13 @@ export default function CardPage() {
         <div className="flex h-full w-full flex-col overflow-hidden">
           <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8">
             <div className="mb-8 flex w-full items-center justify-between">
-              {isLoading ? (
+              {!card && isLoading && (
                 <div className="flex space-x-2">
                   <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
                   <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
                 </div>
-              ) : (
+              )}
+              {card && (
                 <>
                   <Link
                     className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
@@ -184,40 +185,49 @@ export default function CardPage() {
                   </div>
                 </>
               )}
+              {!card && !isLoading && (
+                <p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+                  Card not found
+                </p>
+              )}
             </div>
-            <div className="mb-10 flex w-full max-w-2xl justify-between">
-              <form
-                onSubmit={handleSubmit(onSubmit)}
-                className="w-full space-y-6"
-              >
-                <div className="mt-2">
-                  <ContentEditable
-                    placeholder="Add description..."
-                    html={watch("description")}
-                    disabled={false}
-                    onChange={(e) => setValue("description", e.target.value)}
-                    onBlur={handleSubmit(onSubmit)}
-                    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"
-                  />
+            {card && (
+              <>
+                <div className="mb-10 flex w-full max-w-2xl justify-between">
+                  <form
+                    onSubmit={handleSubmit(onSubmit)}
+                    className="w-full space-y-6"
+                  >
+                    <div className="mt-2">
+                      <ContentEditable
+                        placeholder="Add description..."
+                        html={watch("description")}
+                        disabled={false}
+                        onChange={(e) => setValue("description", e.target.value)}
+                        onBlur={handleSubmit(onSubmit)}
+                        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"
+                      />
+                    </div>
+                  </form>
                 </div>
-              </form>
-            </div>
-            <div className="border-t-[1px] border-light-600 pt-12 dark:border-dark-400">
-              <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
-                Activity
-              </h2>
-              <div>
-                <ActivityList
-                  cardPublicId={cardId}
-                  activities={activities ?? []}
-                  isLoading={isLoading}
-                  isAdmin={workspace.role === "admin"}
-                />
-              </div>
-              <div className="mt-6">
-                <NewCommentForm cardPublicId={cardId} />
-              </div>
-            </div>
+                <div className="border-t-[1px] border-light-600 pt-12 dark:border-dark-400">
+                  <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
+                    Activity
+                  </h2>
+                  <div>
+                    <ActivityList
+                      cardPublicId={cardId}
+                      activities={activities ?? []}
+                      isLoading={!card}
+                      isAdmin={workspace.role === "admin"}
+                    />
+                  </div>
+                  <div className="mt-6">
+                    <NewCommentForm cardPublicId={cardId} />
+                  </div>
+                </div>
+              </>
+            )}
           </div>
         </div>
         <div className="w-[475px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
@@ -226,7 +236,7 @@ export default function CardPage() {
             <ListSelector
               cardPublicId={cardId}
               lists={formattedLists}
-              isLoading={isLoading}
+              isLoading={!card}
             />
           </div>
           <div className="mb-4 flex w-full">
@@ -234,7 +244,7 @@ export default function CardPage() {
             <LabelSelector
               cardPublicId={cardId}
               labels={formattedLabels}
-              isLoading={isLoading}
+              isLoading={!card}
             />
           </div>
           <div className="flex w-full">
@@ -242,7 +252,7 @@ export default function CardPage() {
             <MemberSelector
               cardPublicId={cardId}
               members={formattedMembers}
-              isLoading={isLoading}
+              isLoading={!card}
             />
           </div>
         </div>