feat: add functionality to copy card link (#358)

* Implemented link copying feature in CardDropdown and CardModal components.
* Updated Dropdown component to accept new props for card identification.

apps/web/src/views/card/components/Dropdown.tsx

@@ -1,6 +1,7 @@
 import { t } from "@lingui/core/macro";
 import {
   HiEllipsisHorizontal,
+  HiLink,
   HiOutlineCheckCircle,
   HiOutlineTrash,
 } from "react-icons/hi2";
@@ -10,18 +11,54 @@ import { authClient } from "@kan/auth/client";
 import Dropdown from "~/components/Dropdown";
 import { usePermissions } from "~/hooks/usePermissions";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 
 export default function CardDropdown({
+  cardPublicId,
+  isTemplate,
+  boardPublicId,
   cardCreatedBy,
 }: {
+  cardPublicId: string;
+  isTemplate?: boolean;
+  boardPublicId?: string;
   cardCreatedBy?: string | null;
 }) {
   const { openModal } = useModal();
+  const { showPopup } = usePopup();
   const { canEditCard, canDeleteCard } = usePermissions();
   const { data: session } = authClient.useSession();
   const isCreator = cardCreatedBy && session?.user.id === cardCreatedBy;
 
+  const handleCopyCardLink = async () => {
+    const path =
+      isTemplate && boardPublicId
+        ? `/templates/${boardPublicId}/cards/${cardPublicId}`
+        : `/cards/${cardPublicId}`;
+    const url = `${window.location.origin}${path}`;
+    try {
+      await navigator.clipboard.writeText(url);
+      showPopup({
+        header: t`Link copied`,
+        icon: "success",
+        message: t`Card URL copied to clipboard`,
+      });
+    } catch (error) {
+      console.error(error);
+      showPopup({
+        header: t`Unable to copy link`,
+        icon: "error",
+        message: t`Please try again.`,
+      });
+    }
+  };
+
   const items = [
+    {
+      label: t`Copy card link`,
+      action: handleCopyCardLink,
+      icon: <HiLink className="h-[16px] w-[16px] text-dark-900" />,
+    },
     ...(canEditCard
       ? [
           {

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

@@ -5,6 +5,8 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { IoChevronForwardSharp } from "react-icons/io5";
 
+import { authClient } from "@kan/auth/client";
+
 import Avatar from "~/components/Avatar";
 import Editor from "~/components/Editor";
 import FeedbackModal from "~/components/FeedbackModal";
@@ -14,8 +16,6 @@ import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
 import { EditYouTubeModal } from "~/components/YouTubeEmbed/EditYouTubeModal";
-import { authClient } from "@kan/auth/client";
-
 import { usePermissions } from "~/hooks/usePermissions";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -317,7 +317,12 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
                 </Link>
               </div>
               <div className="flex items-center gap-2">
-                <Dropdown cardCreatedBy={card?.createdBy} />
+                <Dropdown
+                  cardPublicId={cardId}
+                  isTemplate={isTemplate}
+                  boardPublicId={boardId}
+                  cardCreatedBy={card?.createdBy}
+                />
               </div>
             </>
           )}
@@ -374,8 +379,14 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
                       <div className="mt-2">
                         <Editor
                           content={card.description}
-                          onChange={canEdit ? (e) => setValue("description", e) : undefined}
+                          onChange={
-                          onBlur={canEdit ? () => handleSubmit(onSubmit)() : undefined}
+                            canEdit
+                              ? (e) => setValue("description", e)
+                              : undefined
+                          }
+                          onBlur={
+                            canEdit ? () => handleSubmit(onSubmit)() : undefined
+                          }
                           workspaceMembers={board?.workspace.members ?? []}
                           readOnly={!canEdit}
                         />

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

@@ -1,12 +1,13 @@
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { useEffect, useRef, useState } from "react";
-import { HiXMark } from "react-icons/hi2";
+import { HiLink, HiXMark } from "react-icons/hi2";
 
 import Badge from "~/components/Badge";
 import Editor from "~/components/Editor";
 import LabelIcon from "~/components/LabelIcon";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import ActivityList from "~/views/card/components/ActivityList";
 import { AttachmentThumbnails } from "~/views/card/components/AttachmentThumbnails";
@@ -23,10 +24,29 @@ export function CardModal({
 }) {
   const router = useRouter();
   const { closeModal, isOpen } = useModal();
+  const { showPopup } = usePopup();
   const [showFade, setShowFade] = useState(false);
   const [showTopFade, setShowTopFade] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  const handleCopyCardLink = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      showPopup({
+        header: t`Link copied`,
+        icon: "success",
+        message: t`Card URL copied to clipboard`,
+      });
+    } catch (error) {
+      console.error(error);
+      showPopup({
+        header: t`Unable to copy link`,
+        icon: "error",
+        message: t`Please try again.`,
+      });
+    }
+  };
+
   const { data, isLoading } = api.card.byId.useQuery(
     {
       cardPublicId: cardPublicId ?? "",
@@ -65,33 +85,44 @@ export function CardModal({
         <div className="h-full p-8">
           <div className="mb-6">
             <div className="flex w-full items-center justify-between">
-              <button
+              <div className="absolute right-[2rem] top-[2rem] flex items-center gap-1">
-                className="absolute right-[2rem] top-[2rem] rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+                <button
-                onClick={(e) => {
+                  type="button"
-                  e.preventDefault();
+                  onClick={handleCopyCardLink}
-                  closeModal();
+                  className="rounded p-1.5 transition-all hover:bg-light-200 focus:outline-none dark:hover:bg-dark-100"
+                  aria-label="Copy card link"
+                >
+                  <HiLink className="h-4 w-4 text-light-900 dark:text-dark-900" />
+                </button>
+                <button
+                  type="button"
+                  className="rounded p-1.5 transition-all hover:bg-light-200 focus:outline-none dark:hover:bg-dark-100"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    closeModal();
 
-                  setTimeout(() => {
+                    setTimeout(() => {
-                    void router.replace(
+                      void router.replace(
-                      {
+                        {
-                        pathname: router.pathname,
+                          pathname: router.pathname,
-                        query: {
+                          query: {
-                          ...router.query,
+                            ...router.query,
-                          workspaceSlug,
+                            workspaceSlug: workspaceSlug ?? "",
-                          boardSlug: [boardSlug],
+                            boardSlug: [boardSlug ?? ""],
+                          },
                         },
-                      },
+                        undefined,
-                      undefined,
+                        { shallow: true },
-                      { shallow: true },
+                      );
-                    );
+                    }, 400);
-                  }, 400);
+                  }}
-                }}
+                >
-              >
+                  <HiXMark
-                <HiXMark
+                    size={18}
-                  size={18}
+                    className="text-light-900 dark:text-dark-900"
-                  className="dark:text-dark-9000 text-light-900"
+                  />
-                />
+                </button>
-              </button>
+              </div>
               {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" />

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

@@ -30,7 +30,7 @@ export default function PublicBoardView() {
   const { showPopup } = usePopup();
   const [isRouteLoaded, setIsRouteLoaded] = useState(false);
   const { openModal } = useModal();
-  
+
   const { ref: scrollRef, onMouseDown } = useDragToScroll({
     enabled: true,
     direction: "horizontal",
@@ -70,30 +70,35 @@ export default function PublicBoardView() {
     },
   );
 
-  const CopyBoardLink = () => {
+  const handleCopyBoardLink = async () => {
-    return (
+    try {
-      <button
+      await navigator.clipboard.writeText(window.location.href);
-        onClick={async () => {
+      showPopup({
-          try {
+        header: t`Link copied`,
-            await navigator.clipboard.writeText(window.location.href);
+        icon: "success",
-          } catch (error) {
+        message: t`Board URL copied to clipboard`,
-            console.error(error);
+      });
-          }
+    } catch (error) {
-
+      console.error(error);
-          showPopup({
+      showPopup({
-            header: t`Link copied`,
+        header: t`Unable to copy link`,
-            icon: "success",
+        icon: "error",
-            message: t`Board URL copied to clipboard`,
+        message: t`Please try again.`,
-          });
+      });
-        }}
+    }
-        className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
-        aria-label={`Copy board URL`}
-      >
-        <HiLink className={`h-4 w-4 text-light-900 dark:text-dark-900`} />
-      </button>
-    );
   };
 
+  const CopyBoardLink = () => (
+    <button
+      type="button"
+      onClick={handleCopyBoardLink}
+      className="rounded p-1.5 transition-all hover:bg-light-200 focus:outline-none dark:hover:bg-dark-100"
+      aria-label="Copy board URL"
+    >
+      <HiLink className="h-4 w-4 text-light-900 dark:text-dark-900" />
+    </button>
+  );
+
   const pathWithoutQuery = router.asPath.split("?")[0];
   const splitPath = pathWithoutQuery?.split("/") ?? [];
   const cardPublicId = splitPath.length > 3 ? splitPath[3] : null;