style: cycle ui revamp, and chore: code refactor (#2558)

* chore: cycle custom svg icon added and code refactor

* chore: module code refactor

* style: cycle ui revamp and code refactor

* chore: cycle card view layout fix

* chore: layout fix

* style: module and cycle title tooltip position

web/components/cycles/cycles-list-item.tsx

@@ -1,29 +1,30 @@
 import { FC, MouseEvent, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/router";
+
+// stores
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+import { AssigneesList } from "components/ui";
 // ui
-import { CustomMenu, RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
+import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon } from "@plane/ui";
 // icons
-import {
-  AlarmClock,
-  AlertTriangle,
-  ArrowRight,
-  CalendarDays,
-  LinkIcon,
-  Pencil,
-  Star,
-  Target,
-  Trash2,
-} from "lucide-react";
+import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
 // helpers
-import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import {
+  getDateRangeStatus,
+  findHowManyDaysLeft,
+  renderShortDate,
+  renderShortMonthDate,
+} from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { ICycle } from "types";
-import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { CYCLE_STATUS } from "constants/cycle";
 
 type TCyclesListItem = {
   cycle: ICycle;
@@ -35,34 +36,6 @@ type TCyclesListItem = {
   projectId: string;
 };
 
-const stateGroups = [
-  {
-    key: "backlog_issues",
-    title: "Backlog",
-    color: "#dee2e6",
-  },
-  {
-    key: "unstarted_issues",
-    title: "Unstarted",
-    color: "#26b5ce",
-  },
-  {
-    key: "started_issues",
-    title: "Started",
-    color: "#f7ae59",
-  },
-  {
-    key: "cancelled_issues",
-    title: "Cancelled",
-    color: "#d687ff",
-  },
-  {
-    key: "completed_issues",
-    title: "Completed",
-    color: "#09a953",
-  },
-];
-
 export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const { cycle, workspaceSlug, projectId } = props;
   // store
@@ -78,7 +51,28 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const endDate = new Date(cycle.end_date ?? "");
   const startDate = new Date(cycle.start_date ?? "");
 
-  const handleCopyText = () => {
+  const router = useRouter();
+
+  const cycleTotalIssues =
+    cycle.backlog_issues +
+    cycle.unstarted_issues +
+    cycle.started_issues +
+    cycle.completed_issues +
+    cycle.cancelled_issues;
+
+  const renderDate = cycle.start_date || cycle.end_date;
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100;
+
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+
+  const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
@@ -90,13 +84,6 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
     });
   };
 
-  const progressIndicatorData = stateGroups.map((group, index) => ({
-    id: index,
-    name: group.title,
-    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
-    color: group.color,
-  }));
-
   const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
@@ -123,224 +110,31 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
     });
   };
 
+  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setUpdateModal(true);
+  };
+
+  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
+    const { query } = router;
+    e.preventDefault();
+    e.stopPropagation();
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekCycle: cycle.id },
+    });
+  };
+
   return (
     <>
-      <div className="relative flex items-center gap-1 hover:bg-custom-background-80 transition-all rounded px-2 pl-3">
-        <div className="w-full text-xs py-3">
-          <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-            <a className="w-full h-full relative overflow-hidden flex items-center gap-2">
-              {/* left content */}
-              <div className="relative flex items-center gap-2 overflow-hidden">
-                {/* cycle state */}
-                <div className="flex-shrink-0">
-                  <ContrastIcon
-                    className="h-5 w-5"
-                    color={`${
-                      cycleStatus === "current"
-                        ? "#09A953"
-                        : cycleStatus === "upcoming"
-                        ? "#F7AE59"
-                        : cycleStatus === "completed"
-                        ? "#3F76FF"
-                        : cycleStatus === "draft"
-                        ? "rgb(var(--color-text-200))"
-                        : ""
-                    }`}
-                  />
-                </div>
-
-                {/* cycle title and description */}
-                <div className="max-w-xl">
-                  <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
-                    <div className="text-base font-semibold line-clamp-1 pr-5 overflow-hidden break-words">
-                      {cycle.name}
-                    </div>
-                  </Tooltip>
-                  {cycle.description && (
-                    <div className="mt-1 text-custom-text-200 break-words w-full line-clamp-2">{cycle.description}</div>
-                  )}
-                </div>
-              </div>
-
-              {/* right content */}
-              <div className="ml-auto flex-shrink-0 relative flex items-center gap-3 p-2">
-                {/* cycle status */}
-                <div
-                  className={`rounded-full px-2 py-1
-                    ${
-                      cycleStatus === "current"
-                        ? "bg-green-600/10 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "bg-orange-300/10 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "bg-blue-500/10 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "bg-neutral-400/10 text-neutral-400"
-                        : ""
-                    }`}
-                >
-                  {cycleStatus === "current" ? (
-                    <span className="flex items-center gap-1 whitespace-nowrap">
-                      <RunningIcon className="h-3.5 w-3.5" />
-                      {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
-                    </span>
-                  ) : cycleStatus === "upcoming" ? (
-                    <span className="flex items-center gap-1">
-                      <AlarmClock className="h-3.5 w-3.5" />
-                      {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
-                    </span>
-                  ) : cycleStatus === "completed" ? (
-                    <span className="flex items-center gap-1">
-                      {cycle.total_issues - cycle.completed_issues > 0 && (
-                        <Tooltip
-                          tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
-                            cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
-                          }`}
-                        >
-                          <span>
-                            <AlertTriangle className="h-3.5 w-3.5" />
-                          </span>
-                        </Tooltip>
-                      )}{" "}
-                      Completed
-                    </span>
-                  ) : (
-                    cycleStatus
-                  )}
-                </div>
-
-                {/* cycle start_date and target_date */}
-                {cycleStatus !== "draft" && (
-                  <div className="flex items-center justify-start gap-2 text-custom-text-200">
-                    <div className="flex items-start gap-1 whitespace-nowrap">
-                      <CalendarDays className="h-4 w-4" />
-                      <span>{renderShortDateWithYearFormat(startDate)}</span>
-                    </div>
-
-                    <ArrowRight className="h-4 w-4" />
-
-                    <div className="flex items-start gap-1 whitespace-nowrap">
-                      <Target className="h-4 w-4" />
-                      <span>{renderShortDateWithYearFormat(endDate)}</span>
-                    </div>
-                  </div>
-                )}
-
-                {/* cycle created by */}
-                <div className="flex items-center text-custom-text-200">
-                  {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
-                    <img
-                      src={cycle.owned_by.avatar}
-                      height={16}
-                      width={16}
-                      className="rounded-full"
-                      alt={cycle.owned_by.display_name}
-                    />
-                  ) : (
-                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
-                      {cycle.owned_by.display_name.charAt(0)}
-                    </span>
-                  )}
-                </div>
-
-                {/* cycle progress */}
-                <Tooltip
-                  position="top-right"
-                  tooltipContent={
-                    <div className="flex w-80 items-center gap-2 px-4 py-1">
-                      <span>Progress</span>
-                      <LinearProgressIndicator data={progressIndicatorData} />
-                    </div>
-                  }
-                >
-                  <span
-                    className={`rounded-md px-1.5 py-1
-                    ${
-                      cycleStatus === "current"
-                        ? "border border-green-600 bg-green-600/5 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "border border-orange-300 bg-orange-300/5 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "border border-blue-500 bg-blue-500/5 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "border border-neutral-400 bg-neutral-400/5 text-neutral-400"
-                        : ""
-                    }`}
-                  >
-                    {cycleStatus === "current" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        {cycle.total_issues > 0 ? (
-                          <>
-                            <RadialProgressBar progress={(cycle.completed_issues / cycle.total_issues) * 100} />
-                            <span>{Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %</span>
-                          </>
-                        ) : (
-                          <span className="normal-case">No issues present</span>
-                        )}
-                      </span>
-                    ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1">
-                        <RadialProgressBar progress={100} /> Yet to start
-                      </span>
-                    ) : cycleStatus === "completed" ? (
-                      <span className="flex gap-1">
-                        <RadialProgressBar progress={100} />
-                        <span>{100} %</span>
-                      </span>
-                    ) : (
-                      <span className="flex gap-1">
-                        <RadialProgressBar progress={(cycle.total_issues / cycle.completed_issues) * 100} />
-                        {cycleStatus}
-                      </span>
-                    )}
-                  </span>
-                </Tooltip>
-
-                {/* cycle favorite */}
-                {cycle.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
-                  </button>
-                )}
-              </div>
-            </a>
-          </Link>
-        </div>
-
-        <div className="flex-shrink-0">
-          <CustomMenu width="auto" verticalEllipsis>
-            {!isCompleted && (
-              <CustomMenu.MenuItem onClick={() => setUpdateModal(true)}>
-                <span className="flex items-center justify-start gap-2">
-                  <Pencil className="h-4 w-4" />
-                  <span>Edit Cycle</span>
-                </span>
-              </CustomMenu.MenuItem>
-            )}
-
-            {!isCompleted && (
-              <CustomMenu.MenuItem onClick={() => setDeleteModal(true)}>
-                <span className="flex items-center justify-start gap-2">
-                  <Trash2 className="h-4 w-4" />
-                  <span>Delete cycle</span>
-                </span>
-              </CustomMenu.MenuItem>
-            )}
-
-            <CustomMenu.MenuItem onClick={handleCopyText}>
-              <span className="flex items-center justify-start gap-2">
-                <LinkIcon className="h-4 w-4" />
-                <span>Copy cycle link</span>
-              </span>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-        </div>
-      </div>
-
       <CycleCreateUpdateModal
         data={cycle}
         isOpen={updateModal}
@@ -348,7 +142,6 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         workspaceSlug={workspaceSlug}
         projectId={projectId}
       />
-
       <CycleDeleteModal
         cycle={cycle}
         isOpen={deleteModal}
@@ -356,6 +149,110 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         workspaceSlug={workspaceSlug}
         projectId={projectId}
       />
+      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+        <a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+          <div className="flex items-center gap-3 w-full truncate">
+            <div className="flex items-center gap-4 truncate">
+              <span className="flex-shrink-0">
+                <CircularProgressIndicator size={38} percentage={progress}>
+                  {isCompleted ? (
+                    <span className="text-sm text-custom-primary-100">{`!`}</span>
+                  ) : progress === 100 ? (
+                    <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
+                  ) : (
+                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                  )}
+                </CircularProgressIndicator>
+              </span>
+
+              <div className="flex items-center gap-2.5">
+                <span className="flex-shrink-0">
+                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
+                </span>
+                <Tooltip tooltipContent={cycle.name} position="top">
+                  <span className="text-base font-medium truncate">{cycle.name}</span>
+                </Tooltip>
+              </div>
+            </div>
+            <button onClick={openCycleOverview} className="flex-shrink-0 hidden group-hover:flex z-10">
+              <Info className="h-4 w-4 text-custom-text-400" />
+            </button>
+          </div>
+
+          <div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
+            <div className="flex items-center justify-center">
+              {currentCycle && (
+                <span
+                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                  style={{
+                    color: currentCycle.color,
+                    backgroundColor: `${currentCycle.color}20`,
+                  }}
+                >
+                  {currentCycle.value === "current"
+                    ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
+                    : `${currentCycle.label}`}
+                </span>
+              )}
+            </div>
+
+            {renderDate && (
+              <span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                {" - "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            )}
+
+            <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
+              <div className="flex items-center justify-center gap-1 cursor-default w-16">
+                {cycle.assignees.length > 0 ? (
+                  <AssigneesList users={cycle.assignees} length={2} />
+                ) : (
+                  <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+
+            {cycle.is_favorite ? (
+              <button type="button" onClick={handleRemoveFromFavorites}>
+                <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+              </button>
+            ) : (
+              <button type="button" onClick={handleAddToFavorites}>
+                <Star className="h-3.5 w-3.5 text-custom-text-200" />
+              </button>
+            )}
+
+            <CustomMenu width="auto" ellipsis className="z-10">
+              {!isCompleted && (
+                <>
+                  <CustomMenu.MenuItem onClick={handleEditCycle}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Pencil className="h-3 w-3" />
+                      <span>Edit cycle</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </>
+              )}
+              <CustomMenu.MenuItem onClick={handleCopyText}>
+                <span className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-3 w-3" />
+                  <span>Copy cycle link</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </a>
+      </Link>
     </>
   );
 };