fix: minor bugs and ux improvements

apps/app/components/core/board-view/single-issue.tsx

@@ -165,19 +165,15 @@ export const SingleBoardIssue: React.FC<Props> = ({
   const handleCopyText = () => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Issue link copied to clipboard",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Some error occurred",
-        });
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
       });
+    });
   };
 
   useEffect(() => {
@@ -201,14 +197,14 @@ export const SingleBoardIssue: React.FC<Props> = ({
           <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
             {type && !isNotAllowed && (
               <CustomMenu width="auto" ellipsis>
-                <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
                 {type !== "issue" && removeIssue && (
                   <CustomMenu.MenuItem onClick={removeIssue}>
                     <>Remove from {type}</>
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                  Delete permanently
+                  Delete issue
                 </CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
               </CustomMenu>
@@ -236,7 +232,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
               isNotAllowed={isNotAllowed}
-              position="left"
             />
           )}
           {properties.state && selectedGroup !== "state_detail.name" && (
@@ -258,6 +253,24 @@ export const SingleBoardIssue: React.FC<Props> = ({
               {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
           )}
+          {properties.labels && (
+            <div className="flex flex-wrap gap-1">
+              {issue.label_details.map((label) => (
+                <span
+                  key={label.id}
+                  className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
+                >
+                  <span
+                    className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                    }}
+                  />
+                  {label.name}
+                </span>
+              ))}
+            </div>
+          )}
           {properties.assignee && (
             <ViewAssigneeSelect
               issue={issue}

apps/app/components/core/link-modal.tsx

@@ -84,31 +84,31 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
                       <div className="mt-2 space-y-3">
                         <div>
                           <Input
-                            id="title"
-                            label="Title"
-                            name="title"
-                            type="text"
-                            placeholder="Enter title"
+                            id="url"
+                            label="URL"
+                            name="url"
+                            type="url"
+                            placeholder="Enter URL"
                             autoComplete="off"
-                            error={errors.title}
+                            error={errors.url}
                             register={register}
                             validations={{
-                              required: "Title is required",
+                              required: "URL is required",
                             }}
                           />
                         </div>
                         <div>
                           <Input
-                            id="url"
-                            label="URL"
-                            name="url"
-                            type="url"
-                            placeholder="Enter URL"
+                            id="title"
+                            label="Title"
+                            name="title"
+                            type="text"
+                            placeholder="Enter title"
                             autoComplete="off"
-                            error={errors.url}
+                            error={errors.title}
                             register={register}
                             validations={{
-                              required: "URL is required",
+                              required: "Title is required",
                             }}
                           />
                         </div>

apps/app/components/core/list-view/single-issue.tsx

@@ -124,19 +124,15 @@ export const SingleListIssue: React.FC<Props> = ({
   const handleCopyText = () => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Issue link copied to clipboard",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Some error occurred",
-        });
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
       });
+    });
   };
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
@@ -196,6 +192,24 @@ export const SingleListIssue: React.FC<Props> = ({
             {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
           </div>
         )}
+        {properties.labels && (
+          <div className="flex flex-wrap gap-1">
+            {issue.label_details.map((label) => (
+              <span
+                key={label.id}
+                className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
+              >
+                <span
+                  className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                  }}
+                />
+                {label.name}
+              </span>
+            ))}
+          </div>
+        )}
         {properties.assignee && (
           <ViewAssigneeSelect
             issue={issue}
@@ -205,14 +219,14 @@ export const SingleListIssue: React.FC<Props> = ({
         )}
         {type && !isNotAllowed && (
           <CustomMenu width="auto" ellipsis>
-            <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
             {type !== "issue" && removeIssue && (
               <CustomMenu.MenuItem onClick={removeIssue}>
                 <>Remove from {type}</>
               </CustomMenu.MenuItem>
             )}
             <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-              Delete permanently
+              Delete issue
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
           </CustomMenu>

apps/app/components/core/sidebar/links-list.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 // icons
 import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { ExternalLinkIcon } from "components/icons";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
@@ -26,9 +27,17 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
   return (
     <>
       {links.map((link) => (
-        <div key={link.id} className="group relative">
+        <div key={link.id} className="relative">
           {!isNotAllowed && (
-            <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover:opacity-100">
+            <div className="absolute top-1.5 right-1.5 z-10 flex items-center gap-1">
+              <Link href={link.url}>
+                <a
+                  className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 outline-none"
+                  target="_blank"
+                >
+                  <ExternalLinkIcon width="14" height="14" />
+                </a>
+              </Link>
               <button
                 type="button"
                 className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
@@ -38,16 +47,18 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
               </button>
             </div>
           )}
-          <Link href={link.url} target="_blank">
-            <a className="group relative flex gap-2 rounded-md border bg-gray-100 p-2">
+          <Link href={link.url}>
+            <a className="relative flex gap-2 rounded-md border bg-gray-50 p-2" target="_blank">
               <div className="mt-0.5">
                 <LinkIcon className="h-3.5 w-3.5" />
               </div>
               <div>
-                <h5>{link.title}</h5>
-                {/* <p className="mt-0.5 text-gray-500">
-                Added {timeAgo(link.created_at)} ago by {link.created_by_detail.email}
-              </p> */}
+                <h5 className="w-4/5">{link.title}</h5>
+                <p className="mt-0.5 text-gray-500">
+                  Added {timeAgo(link.created_at)}
+                  <br />
+                  by {link.created_by_detail.email}
+                </p>
               </div>
             </a>
           </Link>

apps/app/components/cycles/single-cycle-card.tsx

@@ -70,19 +70,16 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
   const handleCopyText = () => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Cycle link copied to clipboard",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Some error occurred",
-        });
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
       });
+    });
   };
 
   return (
@@ -99,11 +96,9 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
                 </a>
               </Link>
               <CustomMenu width="auto" ellipsis>
-                <CustomMenu.MenuItem onClick={handleCopyText}>Copy cycle link</CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={handleDeleteCycle}>
-                  Delete cycle permanently
-                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={handleDeleteCycle}>Delete cycle</CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={handleCopyText}>Copy cycle link</CustomMenu.MenuItem>
               </CustomMenu>
             </div>
             <div className="grid grid-cols-3 gap-x-2 gap-y-3 text-xs">

apps/app/components/icons/external-link-icon.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ExternalLinkIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 122.6 122.88"
+  >
+    <g>
+      <path
+        d="M110.6,72.58c0-3.19,2.59-5.78,5.78-5.78c3.19,0,5.78,2.59,5.78,5.78v33.19c0,4.71-1.92,8.99-5.02,12.09 c-3.1,3.1-7.38,5.02-12.09,5.02H17.11c-4.71,0-8.99-1.92-12.09-5.02c-3.1-3.1-5.02-7.38-5.02-12.09V17.19 C0,12.48,1.92,8.2,5.02,5.1C8.12,2,12.4,0.08,17.11,0.08h32.98c3.19,0,5.78,2.59,5.78,5.78c0,3.19-2.59,5.78-5.78,5.78H17.11 c-1.52,0-2.9,0.63-3.91,1.63c-1.01,1.01-1.63,2.39-1.63,3.91v88.58c0,1.52,0.63,2.9,1.63,3.91c1.01,1.01,2.39,1.63,3.91,1.63h87.95 c1.52,0,2.9-0.63,3.91-1.63s1.63-2.39,1.63-3.91V72.58L110.6,72.58z M112.42,17.46L54.01,76.6c-2.23,2.27-5.89,2.3-8.16,0.07 c-2.27-2.23-2.3-5.89-0.07-8.16l56.16-56.87H78.56c-3.19,0-5.78-2.59-5.78-5.78c0-3.19,2.59-5.78,5.78-5.78h26.5 c5.12,0,11.72-0.87,15.65,3.1c2.48,2.51,1.93,22.52,1.61,34.11c-0.08,3-0.15,5.29-0.15,6.93c0,3.19-2.59,5.78-5.78,5.78 c-3.19,0-5.78-2.59-5.78-5.78c0-0.31,0.08-3.32,0.19-7.24C110.96,30.94,111.93,22.94,112.42,17.46L112.42,17.46z"
+        fill={color}
+      />
+    </g>
+  </svg>
+  // <svg
+  //   width={width}
+  //   height={height}
+  //   className={className}
+  //   viewBox="0 0 24 24"
+  //   fill="none"
+  //   xmlns="http://www.w3.org/2000/svg"
+  // >
+  //   <path
+  //     d="M5.2 13.1998C4.86667 13.1998 4.58333 13.0831 4.35 12.8498C4.11667 12.6165 4 12.3331 4 11.9998C4 11.6665 4.11667 11.3831 4.35 11.1498C4.58333 10.9165 4.86667 10.7998 5.2 10.7998C5.53333 10.7998 5.81667 10.9165 6.05 11.1498C6.28333 11.3831 6.4 11.6665 6.4 11.9998C6.4 12.3331 6.28333 12.6165 6.05 12.8498C5.81667 13.0831 5.53333 13.1998 5.2 13.1998ZM12 13.1998C11.6667 13.1998 11.3833 13.0831 11.15 12.8498C10.9167 12.6165 10.8 12.3331 10.8 11.9998C10.8 11.6665 10.9167 11.3831 11.15 11.1498C11.3833 10.9165 11.6667 10.7998 12 10.7998C12.3333 10.7998 12.6167 10.9165 12.85 11.1498C13.0833 11.3831 13.2 11.6665 13.2 11.9998C13.2 12.3331 13.0833 12.6165 12.85 12.8498C12.6167 13.0831 12.3333 13.1998 12 13.1998ZM18.8 13.1998C18.4667 13.1998 18.1833 13.0831 17.95 12.8498C17.7167 12.6165 17.6 12.3331 17.6 11.9998C17.6 11.6665 17.7167 11.3831 17.95 11.1498C18.1833 10.9165 18.4667 10.7998 18.8 10.7998C19.1333 10.7998 19.4167 10.9165 19.65 11.1498C19.8833 11.3831 20 11.6665 20 11.9998C20 12.3331 19.8833 12.6165 19.65 12.8498C19.4167 13.0831 19.1333 13.1998 18.8 13.1998Z"
+  //     fill="black"
+  //   />
+  // </svg>
+);

apps/app/components/icons/index.ts

@@ -1,19 +1,26 @@
 export * from "./attachment-icon";
 export * from "./blocked-icon";
 export * from "./blocker-icon";
+export * from "./bolt-icon";
 export * from "./calendar-month-icon";
 export * from "./cancel-icon";
 export * from "./clipboard-icon";
+export * from "./comment-icon";
 export * from "./completed-cycle-icon";
 export * from "./current-cycle-icon";
 export * from "./cycle-icon";
+export * from "./discord-icon";
+export * from "./document-icon";
 export * from "./edit-icon";
 export * from "./ellipsis-horizontal-icon";
+export * from "./external-link-icon";
+export * from "./github-icon";
 export * from "./heartbeat-icon";
 export * from "./layer-diagonal-icon";
 export * from "./lock-icon";
 export * from "./menu-icon";
 export * from "./plus-icon";
+export * from "./question-mark-circle-icon";
 export * from "./setting-icon";
 export * from "./signal-cellular-icon";
 export * from "./tag-icon";
@@ -22,9 +29,3 @@ export * from "./upcoming-cycle-icon";
 export * from "./user-group-icon";
 export * from "./user-icon-circle";
 export * from "./user-icon";
-export * from "./question-mark-circle-icon";
-export * from "./bolt-icon";
-export * from "./document-icon";
-export * from "./discord-icon";
-export * from "./github-icon";
-export * from "./comment-icon";