chore: created a global mark as favorite component (#4203)

web/components/core/favorite-star.tsx

@@ -0,0 +1,28 @@
+import { Star } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  buttonClassName?: string;
+  iconClassName?: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  selected: boolean;
+};
+
+export const FavoriteStar: React.FC<Props> = (props) => {
+  const { buttonClassName, iconClassName, onClick, selected } = props;
+
+  return (
+    <button type="button" className={cn("h-4 w-4 grid place-items-center", buttonClassName)} onClick={onClick}>
+      <Star
+        className={cn(
+          "h-4 w-4 text-custom-text-300 transition-all",
+          {
+            "fill-yellow-500 stroke-yellow-500": selected,
+          },
+          iconClassName
+        )}
+      />
+    </button>
+  );
+};

web/components/core/index.ts

@@ -1,7 +1,8 @@
 export * from "./filters";
 export * from "./modals";
 export * from "./sidebar";
-export * from "./theme";
 export * from "./activity";
+export * from "./favorite-star";
+export * from "./theme";
 export * from "./image-picker-popover";
 export * from "./page-title";

web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx

@@ -1,17 +1,18 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Star, User2 } from "lucide-react";
+import { User2 } from "lucide-react";
-// hooks
-import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
-import { CycleQuickActions } from "@/components/cycles";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
-import { renderFormattedDate } from "@/helpers/date-time.helper";
-import { useCycle, useEventTracker, useMember } from "@/hooks/store";
-// components
 // ui
-// helpers
+import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
+// components
+import { FavoriteStar } from "@/components/core";
+import { CycleQuickActions } from "@/components/cycles";
 // constants
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useCycle, useEventTracker, useMember } from "@/hooks/store";
 
 type Props = {
   cycleId: string;
@@ -112,15 +113,13 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
           </span>
         )}
 
-        {cycle.is_favorite ? (
+        <FavoriteStar
-          <button type="button" onClick={handleRemoveFromFavorites}>
+          onClick={(e) => {
-            <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+            if (cycle.is_favorite) handleRemoveFromFavorites(e);
-          </button>
+            else handleAddToFavorites(e);
-        ) : (
+          }}
-          <button type="button" onClick={handleAddToFavorites}>
+          selected={!!cycle.is_favorite}
-            <Star className="h-3.5 w-3.5 text-custom-text-200" />
+        />
-          </button>
-        )}
 
         {workspaceSlug && projectId && (
           <CycleQuickActions

web/components/cycles/board/cycles-board-card.tsx

@@ -2,25 +2,23 @@ import { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// components
+import { Info } from "lucide-react";
-import { Info, Star } from "lucide-react";
+// types
 import type { TCycleGroups } from "@plane/types";
-import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
-import { CycleQuickActions } from "@/components/cycles";
-// hooks
 // ui
-// icons
+import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
-// helpers
+// components
-// import { copyTextToClipboard } from "@/helpers/string.helper";
+import { FavoriteStar } from "@/components/core";
+import { CycleQuickActions } from "@/components/cycles";
 // constants
 import { CYCLE_STATUS } from "@/constants/cycle";
 import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
+// helpers
 import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
-// constants
+// hooks
 import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-//.types
 
 export interface ICyclesBoardCard {
   workspaceSlug: string;
@@ -234,16 +232,15 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
               <div className="z-[5] flex items-center gap-1.5">
-                {isEditingAllowed &&
+                {isEditingAllowed && (
-                  (cycleDetails.is_favorite ? (
+                  <FavoriteStar
-                    <button type="button" onClick={handleRemoveFromFavorites}>
+                    onClick={(e) => {
-                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                      if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
-                    </button>
+                      else handleAddToFavorites(e);
-                  ) : (
+                    }}
-                    <button type="button" onClick={handleAddToFavorites}>
+                    selected={!!cycleDetails.is_favorite}
-                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                  />
-                    </button>
+                )}
-                  ))}
 
                 <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
               </div>

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

@@ -3,12 +3,13 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // icons
-import { Check, Info, Star, User2 } from "lucide-react";
+import { Check, Info, User2 } from "lucide-react";
 // types
 import type { TCycleGroups } from "@plane/types";
 // ui
 import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { CycleQuickActions } from "@/components/cycles";
 // constants
 import { CYCLE_STATUS } from "@/constants/cycle";
@@ -231,17 +232,15 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
                 </div>
               </Tooltip>
 
-              {isEditingAllowed &&
+              {isEditingAllowed && !isArchived && (
-                !isArchived &&
+                <FavoriteStar
-                (cycleDetails.is_favorite ? (
+                  onClick={(e) => {
-                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                    else handleAddToFavorites(e);
-                  </button>
+                  }}
-                ) : (
+                  selected={!!cycleDetails.is_favorite}
-                  <button type="button" onClick={handleAddToFavorites}>
+                />
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
+              )}
-                  </button>
-                ))}
               <CycleQuickActions
                 cycleId={cycleId}
                 projectId={projectId}

web/components/modules/module-card-item.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// icons
+import { Info } from "lucide-react";
-import { Info, Star } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@@ -224,16 +224,15 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
             )}
 
             <div className="z-[5] flex items-center gap-1.5">
-              {isEditingAllowed &&
+              {isEditingAllowed && (
-                (moduleDetails.is_favorite ? (
+                <FavoriteStar
-                  <button type="button" onClick={handleRemoveFromFavorites}>
+                  onClick={(e) => {
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                    if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
-                  </button>
+                    else handleAddToFavorites(e);
-                ) : (
+                  }}
-                  <button type="button" onClick={handleAddToFavorites}>
+                  selected={!!moduleDetails.is_favorite}
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                />
-                  </button>
+              )}
-                ))}
               {workspaceSlug && projectId && (
                 <ModuleQuickActions
                   moduleId={moduleId}

web/components/modules/module-list-item.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// icons
+import { Check, Info, User2 } from "lucide-react";
-import { Check, Info, Star, User2 } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@@ -212,17 +212,15 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
               </div>
             </Tooltip>
 
-            {isEditingAllowed &&
+            {isEditingAllowed && !isArchived && (
-              !isArchived &&
+              <FavoriteStar
-              (moduleDetails.is_favorite ? (
+                onClick={(e) => {
-                <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
+                  if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
-                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                  else handleAddToFavorites(e);
-                </button>
+                }}
-              ) : (
+                selected={moduleDetails.is_favorite}
-                <button type="button" onClick={handleAddToFavorites} className="z-[1]">
+              />
-                  <Star className="h-3.5 w-3.5 text-custom-text-300" />
+            )}
-                </button>
-              ))}
             {workspaceSlug && projectId && (
               <ModuleQuickActions
                 moduleId={moduleId}

web/components/pages/list/block.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Circle, Info, Lock, Minus, Star, UsersRound } from "lucide-react";
+import { Circle, Info, Lock, Minus, UsersRound } from "lucide-react";
 import { Avatar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { PageQuickActions } from "@/components/pages";
 // helpers
-import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useMember, usePage } from "@/hooks/store";
@@ -86,21 +86,14 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
         </Tooltip>
 
         {/* favorite/unfavorite */}
-        <button
+        <FavoriteStar
-          type="button"
-          className="h-4 w-4 grid place-items-center"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
             handleFavorites();
           }}
-        >
+          selected={is_favorite}
-          <Star
-            className={cn("h-4 w-4 text-custom-text-300 transition-all", {
-              "fill-yellow-500 stroke-yellow-500": is_favorite,
-            })}
         />
-        </button>
 
         {/* quick actions dropdown */}
         <PageQuickActions pageId={pageId} projectId={projectId} workspaceSlug={workspaceSlug} />

web/components/project/card.tsx

@@ -2,23 +2,23 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Star, Trash2 } from "lucide-react";
+import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Trash2 } from "lucide-react";
+// types
 import type { IProject } from "@plane/types";
 // ui
 import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project";
-// helpers
+// constants
 import { EUserProjectRoles } from "@/constants/project";
+// helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useProject } from "@/hooks/store";
-// types
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// hooks
-// constants
 
 type Props = {
   project: IProject;
@@ -166,19 +166,19 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                 >
                   <LinkIcon className="h-3 w-3 text-white" />
                 </button>
-                <button
+                <FavoriteStar
-                  className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
+                  buttonClassName="h-6 w-6 bg-white/10"
+                  iconClassName={cn("h-3 w-3", {
+                    "text-white": !project.is_favorite,
+                  })}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (project.is_favorite) handleRemoveFromFavorites();
                     else handleAddToFavorites();
                   }}
-                >
+                  selected={project.is_favorite}
-                  <Star
-                    className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
                 />
-                </button>
               </div>
             )}
           </div>

web/components/project/sidebar-list-item.tsx

@@ -273,7 +273,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   {project.is_favorite && (
                     <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
                       <span className="flex items-center justify-start gap-2">
-                        <Star className="h-3.5 w-3.5 fill-orange-400 stroke-[1.5] text-orange-400" />
+                        <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500" />
                         <span>Remove from favorites</span>
                       </span>
                     </CustomMenu.MenuItem>

web/components/views/view-list-item.tsx

@@ -2,11 +2,13 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react";
+import { LinkIcon, PencilIcon, TrashIcon } from "lucide-react";
+// types
 import { IProjectView } from "@plane/types";
 // ui
 import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views";
 // constants
 import { EUserProjectRoles } from "@/constants/project";
@@ -15,7 +17,6 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useProjectView, useUser } from "@/hooks/store";
-// types
 
 type Props = {
   view: IProjectView;
@@ -91,32 +92,17 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                   <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
                     {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
                   </p>
-                  {isEditingAllowed &&
+                  {isEditingAllowed && (
-                    (view.is_favorite ? (
+                    <FavoriteStar
-                      <button
-                        type="button"
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                          handleRemoveFromFavorites();
+                        if (view.is_favorite) handleRemoveFromFavorites();
+                        else handleAddToFavorites();
                       }}
-                        className="grid place-items-center"
+                      selected={view.is_favorite}
-                      >
+                    />
-                        <StarIcon className="h-3.5 w-3.5 fill-orange-400 text-orange-400" strokeWidth={2} />
+                  )}
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleAddToFavorites();
-                        }}
-                        className="grid place-items-center"
-                      >
-                        <StarIcon size={14} strokeWidth={2} />
-                      </button>
-                    ))}
 
                   <CustomMenu ellipsis>
                     {isEditingAllowed && (