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.
2026-02-06 18:34:23 -05:00
parent f9eee53ed0
commit 346ddc16be
4 changed files with 138 additions and 54 deletions
--- a/apps/web/src/views/card/components/Dropdown.tsx
+++ b/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
      ? [
          {
--- a/apps/web/src/views/card/index.tsx
+++ b/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}
-                          onBlur={canEdit ? () => handleSubmit(onSubmit)() : undefined}
+                          onChange={
+                            canEdit
+                              ? (e) => setValue("description", e)
+                              : undefined
+                          }
+                          onBlur={
+                            canEdit ? () => handleSubmit(onSubmit)() : undefined
+                          }
                          workspaceMembers={board?.workspace.members ?? []}
                          readOnly={!canEdit}
                        />
--- a/apps/web/src/views/public/board/CardModal.tsx
+++ b/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
-                className="absolute right-[2rem] top-[2rem] rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
-                onClick={(e) => {
-                  e.preventDefault();
-                  closeModal();
+              <div className="absolute right-[2rem] top-[2rem] flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={handleCopyCardLink}
+                  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(() => {
-                    void router.replace(
-                      {
-                        pathname: router.pathname,
-                        query: {
-                          ...router.query,
-                          workspaceSlug,
-                          boardSlug: [boardSlug],
+                    setTimeout(() => {
+                      void router.replace(
+                        {
+                          pathname: router.pathname,
+                          query: {
+                            ...router.query,
+                            workspaceSlug: workspaceSlug ?? "",
+                            boardSlug: [boardSlug ?? ""],
+                          },
                        },
-                      },
-                      undefined,
-                      { shallow: true },
-                    );
-                  }, 400);
-                }}
-              >
-                <HiXMark
-                  size={18}
-                  className="dark:text-dark-9000 text-light-900"
-                />
-              </button>
+                        undefined,
+                        { shallow: true },
+                      );
+                    }, 400);
+                  }}
+                >
+                  <HiXMark
+                    size={18}
+                    className="text-light-900 dark:text-dark-900"
+                  />
+                </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" />
--- a/apps/web/src/views/public/board/index.tsx
+++ b/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 = () => {
-    return (
-      <button
-        onClick={async () => {
-          try {
-            await navigator.clipboard.writeText(window.location.href);
-          } catch (error) {
-            console.error(error);
-          }
-
-          showPopup({
-            header: t`Link copied`,
-            icon: "success",
-            message: t`Board URL copied to clipboard`,
-          });
-        }}
-        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 handleCopyBoardLink = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      showPopup({
+        header: t`Link copied`,
+        icon: "success",
+        message: t`Board URL copied to clipboard`,
+      });
+    } catch (error) {
+      console.error(error);
+      showPopup({
+        header: t`Unable to copy link`,
+        icon: "error",
+        message: t`Please try again.`,
+      });
+    }
  };

+  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;