From 4220b2bff9572abf8c34c0249fb8acb01c421c42 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Wed, 8 Oct 2025 22:04:52 +0100
Subject: [PATCH] feat: add template card page

---
 .../[boardId]/cards/[cardId]/index.tsx        | 18 +++++++++++
 .../{[...boardId] => [boardId]}/index.tsx     |  0
 apps/web/src/views/board/index.tsx            | 16 ++++++++--
 apps/web/src/views/card/index.tsx             | 32 +++++++++++--------
 4 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 apps/web/src/pages/templates/[boardId]/cards/[cardId]/index.tsx
 rename apps/web/src/pages/templates/{[...boardId] => [boardId]}/index.tsx (100%)

diff --git a/apps/web/src/pages/templates/[boardId]/cards/[cardId]/index.tsx b/apps/web/src/pages/templates/[boardId]/cards/[cardId]/index.tsx
new file mode 100644
index 00000000..680e153b
--- /dev/null
+++ b/apps/web/src/pages/templates/[boardId]/cards/[cardId]/index.tsx
@@ -0,0 +1,18 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import Popup from "~/components/Popup";
+import CardView, { CardRightPanel } from "~/views/card";
+
+const CardPage: NextPageWithLayout = () => {
+  return (
+    <>
+      <CardView isTemplate />
+      <Popup />
+    </>
+  );
+};
+
+CardPage.getLayout = (page) =>
+  getDashboardLayout(page, <CardRightPanel isTemplate />, true);
+
+export default CardPage;
diff --git a/apps/web/src/pages/templates/[...boardId]/index.tsx b/apps/web/src/pages/templates/[boardId]/index.tsx
similarity index 100%
rename from apps/web/src/pages/templates/[...boardId]/index.tsx
rename to apps/web/src/pages/templates/[boardId]/index.tsx
diff --git a/apps/web/src/views/board/index.tsx b/apps/web/src/views/board/index.tsx
index 22e91cd7..83907ae1 100644
--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -39,7 +39,7 @@ import VisibilityButton from "./components/VisibilityButton";
 type PublicListId = string;
 
 export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
-  const params = useParams() as { boardId: string[] } | null;
+  const params = useParams() as { boardId: string | string[] } | null;
   const router = useRouter();
   const utils = api.useUtils();
   const { showPopup } = usePopup();
@@ -49,7 +49,13 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
     useState<PublicListId>("");
   const [isInitialLoading, setIsInitialLoading] = useState(true);
 
-  const boardId = params?.boardId.length ? params.boardId[0] : null;
+  const boardId = params?.boardId
+    ? Array.isArray(params.boardId)
+      ? params.boardId[0]
+      : params.boardId
+    : null;
+
+  console.log("params", params);
 
   const updateBoard = api.board.update.useMutation();
 
@@ -497,7 +503,11 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
                                               e.preventDefault();
                                           }}
                                           key={card.publicId}
-                                          href={`/cards/${card.publicId}`}
+                                          href={
+                                            isTemplate
+                                              ? `/templates/${boardId}/cards/${card.publicId}`
+                                              : `/cards/${card.publicId}`
+                                          }
                                           className={`mb-2 flex !cursor-pointer flex-col ${
                                             card.publicId.startsWith(
                                               "PLACEHOLDER",
diff --git a/apps/web/src/views/card/index.tsx b/apps/web/src/views/card/index.tsx
index 1634bee2..e89ba50d 100644
--- a/apps/web/src/views/card/index.tsx
+++ b/apps/web/src/views/card/index.tsx
@@ -37,7 +37,7 @@ interface FormValues {
   description: string;
 }
 
-export function CardRightPanel() {
+export function CardRightPanel({ isTemplate }: { isTemplate?: boolean }) {
   const router = useRouter();
   const cardId = Array.isArray(router.query.cardId)
     ? router.query.cardId[0]
@@ -121,19 +121,21 @@ export function CardRightPanel() {
           isLoading={!card}
         />
       </div>
-      <div className="flex w-full flex-row">
-        <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`Members`}</p>
-        <MemberSelector
-          cardPublicId={cardId ?? ""}
-          members={formattedMembers}
-          isLoading={!card}
-        />
-      </div>
+      {!isTemplate && (
+        <div className="flex w-full flex-row">
+          <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`Members`}</p>
+          <MemberSelector
+            cardPublicId={cardId ?? ""}
+            members={formattedMembers}
+            isLoading={!card}
+          />
+        </div>
+      )}
     </div>
   );
 }
 
-export default function CardPage() {
+export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
   const router = useRouter();
   const utils = api.useUtils();
   const {
@@ -228,7 +230,7 @@ export default function CardPage() {
                   <>
                     <Link
                       className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
-                      href={`/boards/${board?.publicId}`}
+                      href={`${isTemplate ? "/templates" : "/boards"}/${board?.publicId}`}
                     >
                       {board?.name}
                     </Link>
@@ -296,9 +298,11 @@ export default function CardPage() {
                         isAdmin={workspace.role === "admin"}
                       />
                     </div>
-                    <div className="mt-6">
-                      <NewCommentForm cardPublicId={cardId} />
-                    </div>
+                    {!isTemplate && (
+                      <div className="mt-6">
+                        <NewCommentForm cardPublicId={cardId} />
+                      </div>
+                    )}
                   </div>
                 </>
               )}