feat: public card modal

apps/web/src/components/modal.tsx

@@ -6,9 +6,14 @@ import { useModal } from "~/providers/modal";
 interface Props {
   children: React.ReactNode;
   modalSize?: "sm" | "md" | "lg";
+  positionFromTop?: string;
 }
 
-const Modal: React.FC<Props> = ({ children, modalSize = "sm" }) => {
+const Modal: React.FC<Props> = ({
+  children,
+  modalSize = "sm",
+  positionFromTop = "25vh",
+}) => {
   const { isOpen, closeModal } = useModal();
 
   const modalSizeMap = {
@@ -44,7 +49,7 @@ const Modal: React.FC<Props> = ({ children, modalSize = "sm" }) => {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel
-                className={`bg-white/1 relative mt-[25vh] w-full transform rounded-lg border border-light-600 text-left shadow-3xl-light backdrop-blur-[10px] transition-all dark:border-dark-600 dark:bg-dark-100/20 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
+                className={`relative mt-[${positionFromTop}] w-full transform rounded-lg border border-light-600 bg-white/90 text-left shadow-3xl-light backdrop-blur-[6px] transition-all dark:border-dark-600 dark:bg-dark-100/90 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
               >
                 {children}
               </Dialog.Panel>

apps/web/src/views/public/board/CardModal.tsx

@@ -0,0 +1,117 @@
+import { useRouter } from "next/router";
+import { HiXMark } from "react-icons/hi2";
+
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import ActivityList from "~/views/card/components/ActivityList";
+
+export function CardModal({
+  cardPublicId,
+  workspaceSlug,
+  boardSlug,
+}: {
+  cardPublicId: string | null | undefined;
+  workspaceSlug: string | null | undefined;
+  boardSlug: string | null | undefined;
+}) {
+  const router = useRouter();
+  const { closeModal, isOpen } = useModal();
+
+  const { data, isLoading } = api.card.byId.useQuery(
+    {
+      cardPublicId: cardPublicId ?? "",
+    },
+    {
+      enabled: isOpen && !!cardPublicId,
+    },
+  );
+
+  const labels = data?.labels ?? [];
+
+  return (
+    <div className="flex h-full flex-1 flex-row">
+      <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="flex w-full items-center justify-between">
+            <button
+              className="absolute right-[2rem] top-[2rem] rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+              onClick={async (e) => {
+                e.preventDefault();
+                closeModal();
+                try {
+                  await router.replace(
+                    `/${workspaceSlug}/${boardSlug}`,
+                    undefined,
+                    {
+                      shallow: true,
+                    },
+                  );
+                } catch (error) {
+                  console.error(error);
+                }
+              }}
+            >
+              <HiXMark
+                size={18}
+                className="dark:text-dark-9000 text-light-900"
+              />
+            </button>
+            {isLoading ? (
+              <div className="flex space-x-2">
+                <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+              </div>
+            ) : (
+              <>
+                <h1 className="font-medium leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+                  {data?.title}
+                </h1>
+              </>
+            )}
+          </div>
+          <div className="mb-6">
+            {labels.map((label) => (
+              <div
+                key={label.publicId}
+                className="my-1 mr-1 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
+              >
+                <svg
+                  fill={label.colourCode ?? "#3730a3"}
+                  className="h-2 w-2"
+                  viewBox="0 0 6 6"
+                  aria-hidden="true"
+                >
+                  <circle cx={3} cy={3} r={3} />
+                </svg>
+                <div>{label.name}</div>
+              </div>
+            ))}
+          </div>
+
+          {data?.description && (
+            <div className="mb-10 flex w-full max-w-2xl justify-between">
+              <div className="mt-2">
+                <p 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">
+                  {data.description}
+                </p>
+              </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>
+              {cardPublicId && (
+                <ActivityList
+                  cardPublicId={cardPublicId}
+                  activities={data?.activities ?? []}
+                  isLoading={isLoading}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,19 +1,25 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import { HiLink } from "react-icons/hi2";
 
+import Modal from "~/components/modal";
 import { PageHead } from "~/components/PageHead";
 import PatternedBackground from "~/components/PatternedBackground";
 import Popup from "~/components/Popup";
 import ThemeToggle from "~/components/ThemeToggle";
+import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { formatToArray } from "~/utils/helpers";
 import Filters from "~/views/board/components/Filters";
+import { CardModal } from "./CardModal";
 
 export default function PublicBoardView() {
   const router = useRouter();
   const { showPopup } = usePopup();
+  const [isRouteLoaded, setIsRouteLoaded] = useState(false);
+  const { openModal } = useModal();
 
   const boardSlug = Array.isArray(router.query.boardSlug)
     ? router.query.boardSlug[0]
@@ -52,6 +58,25 @@ export default function PublicBoardView() {
     );
   };
 
+  const splitPath = router.asPath.split("/");
+  const cardPublicId = splitPath.length > 3 ? splitPath[3] : null;
+
+  useEffect(() => {
+    if (!isRouteLoaded && router.isReady) {
+      setIsRouteLoaded(true);
+
+      if (cardPublicId) {
+        openModal("CARD");
+      }
+    }
+  }, [
+    router.isReady,
+    isRouteLoaded,
+    setIsRouteLoaded,
+    cardPublicId,
+    openModal,
+  ]);
+
   return (
     <>
       <PageHead
@@ -65,7 +90,7 @@ export default function PublicBoardView() {
       `}</style>
 
       <div className="relative flex h-screen flex-col bg-light-100 px-4 pt-4 dark:bg-dark-50">
-        <div className="relative overflow-hidden rounded-md border pb-8 dark:border-dark-200">
+        <div className="relative h-full overflow-hidden rounded-md border pb-8 dark:border-dark-200">
           <PatternedBackground />
           <div className="z-10 flex w-full justify-between p-8">
             {isLoading ? (
@@ -106,8 +131,12 @@ export default function PublicBoardView() {
                       {list.cards.map((card) => (
                         <Link
                           key={card.publicId}
-                          href={`/cards/${card.publicId}`}
+                          href={`/${data.workspace?.slug}/${data.slug}/${card.publicId}`}
                           className={`mb-2 flex !cursor-pointer flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300`}
+                          shallow={true}
+                          onClick={() => {
+                            openModal("CARD");
+                          }}
                         >
                           <div>{card.title}</div>
                           {card.labels.length || card.members.length ? (
@@ -172,6 +201,13 @@ export default function PublicBoardView() {
         </div>
       </div>
       <Popup />
+      <Modal modalSize={"md"} positionFromTop={"12vh"}>
+        <CardModal
+          cardPublicId={cardPublicId}
+          workspaceSlug={data?.workspace?.slug}
+          boardSlug={data?.slug}
+        />
+      </Modal>
     </>
   );
 }