chore: issue sidebar and peek overview improvement (#3488)

* chore: issue peek overview and sidebar properties focused state improvement

* fix: added name of the issue in issue relation

* chore: issue sidebar and peek overview properties improvement

* chore: issue assignee improvement for sidebar and peek overview

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

web/components/issues/issue-detail/parent-select.tsx

@@ -64,6 +64,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
           {
             "cursor-not-allowed": disabled,
             "hover:bg-custom-background-80": !disabled,
+            "bg-custom-background-80": isParentIssueModalOpen,
           },
           className
         )}
@@ -72,15 +73,20 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
       >
         {issue.parent_id && parentIssue ? (
           <div className="flex items-center gap-1 bg-green-500/20 text-green-700 rounded px-1.5 py-1">
-            <Link
-              href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
-              className="text-xs font-medium"
-            >
-              {parentIssueProjectDetails?.identifier}-{parentIssue.sequence_id}
-            </Link>
+            <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name}>
+              <Link
+                href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs font-medium mt-0.5"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {parentIssueProjectDetails?.identifier}-{parentIssue.sequence_id}
+              </Link>
+            </Tooltip>
 
             {!disabled && (
-              <Tooltip tooltipContent="Remove">
+              <Tooltip tooltipContent="Remove" position="bottom">
                 <span
                   onClick={(e) => {
                     e.preventDefault();
@@ -96,7 +102,15 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
         ) : (
           <span className="text-sm text-custom-text-400">Add parent issue</span>
         )}
-        {!disabled && <Pencil className="h-4 w-4 flex-shrink-0 hidden group-hover:inline" />}
+        {!disabled && (
+          <span
+            className={cn("p-1 flex-shrink-0 opacity-0 group-hover:opacity-100", {
+              "text-custom-text-400": !issue.parent_id && !parentIssue,
+            })}
+          >
+            <Pencil className="h-2.5 w-2.5 flex-shrink-0" />
+          </span>
+        )}
       </button>
     </>
   );

web/components/issues/issue-detail/relation-select.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { CircleDot, CopyPlus, Pencil, X, XCircle } from "lucide-react";
 // hooks
@@ -101,59 +102,72 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
       <button
         type="button"
         className={cn(
-          "group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
+          "group flex items-center gap-2 px-2 py-0.5 rounded outline-none",
           {
             "cursor-not-allowed": disabled,
             "hover:bg-custom-background-80": !disabled,
+            "bg-custom-background-80": isRelationModalOpen === relationKey,
           },
           className
         )}
         onClick={() => toggleRelationModal(relationKey)}
         disabled={disabled}
       >
-        {relationIssueIds.length > 0 ? (
-          <div className="flex items-center gap-2 flex-wrap">
-            {relationIssueIds.map((relationIssueId) => {
-              const currentIssue = issueMap[relationIssueId];
-              if (!currentIssue) return;
+        <div className="flex items-start justify-between w-full">
+          {relationIssueIds.length > 0 ? (
+            <div className="flex items-center gap-2 py-0.5 flex-wrap">
+              {relationIssueIds.map((relationIssueId) => {
+                const currentIssue = issueMap[relationIssueId];
+                if (!currentIssue) return;
 
-              const projectDetails = getProjectById(currentIssue.project_id);
+                const projectDetails = getProjectById(currentIssue.project_id);
 
-              return (
-                <div
-                  key={relationIssueId}
-                  className={`group flex items-center gap-1 rounded px-1.5 py-1 ${issueRelationObject[relationKey].className}`}
-                >
-                  <a
-                    href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${currentIssue.id}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs font-medium"
-                    onClick={(e) => e.stopPropagation()}
+                return (
+                  <div
+                    key={relationIssueId}
+                    className={`group flex items-center gap-1 rounded px-1.5 pt-1 pb-1 leading-3 hover:bg-custom-background-90 ${issueRelationObject[relationKey].className}`}
                   >
-                    {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
-                  </a>
-                  {!disabled && (
-                    <Tooltip tooltipContent="Remove">
-                      <span
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
-                        }}
+                    <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name}>
+                      <Link
+                        href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${currentIssue.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-xs font-medium mt-0.5"
+                        onClick={(e) => e.stopPropagation()}
                       >
-                        <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
-                      </span>
+                        {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
+                      </Link>
                     </Tooltip>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <span className="text-sm text-custom-text-400">{issueRelationObject[relationKey].placeholder}</span>
-        )}
-        {!disabled && <Pencil className="h-4 w-4 flex-shrink-0 hidden group-hover:inline" />}
+                    {!disabled && (
+                      <Tooltip tooltipContent="Remove" position="bottom">
+                        <span
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
+                          }}
+                        >
+                          <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                        </span>
+                      </Tooltip>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <span className="text-sm text-custom-text-400">{issueRelationObject[relationKey].placeholder}</span>
+          )}
+          {!disabled && (
+            <span
+              className={cn("p-1 flex-shrink-0 opacity-0 group-hover:opacity-100", {
+                "text-custom-text-400": relationIssueIds.length === 0,
+              })}
+            >
+              <Pencil className="h-2.5 w-2.5 flex-shrink-0" />
+            </span>
+          )}
+        </div>
       </button>
     </>
   );

web/components/issues/issue-detail/sidebar.tsx

@@ -184,7 +184,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 projectId={projectId?.toString() ?? ""}
                 placeholder="Add assignees"
                 multiple
-                buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "transparent-with-text"}
+                buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={`text-sm justify-between ${
@@ -233,6 +233,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
+                showPlaceholderIcon
               />
             </div>
 
@@ -257,6 +258,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
+                showPlaceholderIcon
               />
             </div>
 
@@ -332,8 +334,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex items-center gap-2 min-h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex gap-2 min-h-8">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                 <RelatedIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Relates to</span>
               </div>
@@ -347,8 +349,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex items-center gap-2 min-h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex gap-2 min-h-8">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                 <XCircle className="h-4 w-4 flex-shrink-0" />
                 <span>Blocking</span>
               </div>
@@ -362,8 +364,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex items-center gap-2 min-h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex gap-2 min-h-8">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                 <CircleDot className="h-4 w-4 flex-shrink-0" />
                 <span>Blocked by</span>
               </div>
@@ -377,8 +379,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex items-center gap-2 min-h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex gap-2 min-h-8">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                 <CopyPlus className="h-4 w-4 flex-shrink-0" />
                 <span>Duplicate of</span>
               </div>