[WEB-2202] chore: user favorites mutation and code refactor

packages/types/src/favorite/favorite.d.ts

@@ -15,6 +15,7 @@ export type IFavorite = {
   name: string;
   entity_type: string;
   entity_data: {
+    id?: string;
     name: string;
     logo_props?: TLogoProps | undefined;
   };

web/core/components/workspace/sidebar/favorites/favorite-folder.tsx

@@ -20,7 +20,7 @@ import { useFavorite } from "@/hooks/store/use-favorite";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // constants
-import { FavoriteItem } from "./favorite-item";
+import { FavoriteRoot } from "./favorite-items";
 import { getDestinationStateSequence } from "./favorites.helpers";
 import { NewFavoriteFolder } from "./new-fav-folder";
 
@@ -314,8 +314,9 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                   })}
                 >
                   {favorite.children.map((child) => (
-                    <FavoriteItem
+                    <FavoriteRoot
                       key={child.id}
+                      workspaceSlug={workspaceSlug.toString()}
                       favorite={child}
                       handleRemoveFromFavorites={handleRemoveFromFavorites}
                       handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}

web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx

@@ -0,0 +1,41 @@
+"use client";
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+// ui
+import { DragHandle, Tooltip } from "@plane/ui";
+// helper
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  sort_order: number | null;
+  isDragging: boolean;
+};
+
+export const FavoriteItemDragHandle: FC<Props> = observer((props) => {
+  const { sort_order, isDragging } = props;
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <Tooltip
+      isMobile={isMobile}
+      tooltipContent={sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
+      position="top-right"
+      disabled={isDragging}
+    >
+      <div
+        className={cn(
+          "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+          {
+            "cursor-not-allowed opacity-60": sort_order === null,
+            "cursor-grabbing": isDragging,
+          }
+        )}
+      >
+        <DragHandle className="bg-transparent" />
+      </div>
+    </Tooltip>
+  );
+});

web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx

@@ -0,0 +1,48 @@
+"use client";
+import React, { FC } from "react";
+import { MoreHorizontal, Star } from "lucide-react";
+import { IFavorite } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  ref: React.MutableRefObject<HTMLDivElement | null>;
+  isMenuActive: boolean;
+  favorite: IFavorite;
+  onChange: (value: boolean) => void;
+  handleRemoveFromFavorites: (favorite: IFavorite) => void;
+};
+
+export const FavoriteItemQuickAction: FC<Props> = (props) => {
+  const { ref, isMenuActive, onChange, handleRemoveFromFavorites, favorite } = props;
+  return (
+    <CustomMenu
+      customButton={
+        <span
+          ref={ref}
+          className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
+          onClick={() => onChange(!isMenuActive)}
+        >
+          <MoreHorizontal className="size-4" />
+        </span>
+      }
+      className={cn(
+        "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+        {
+          "opacity-100 pointer-events-auto": isMenuActive,
+        }
+      )}
+      customButtonClassName="grid place-items-center"
+      placement="bottom-start"
+    >
+      <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
+        <span className="flex items-center justify-start gap-2">
+          <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500 flex-shrink-0" />
+          <span>Remove from favorites</span>
+        </span>
+      </CustomMenu.MenuItem>
+    </CustomMenu>
+  );
+};

web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx

@@ -0,0 +1,25 @@
+"use client";
+import React, { FC } from "react";
+import Link from "next/link";
+
+type Props = {
+  href: string;
+  title: string;
+  icon: JSX.Element;
+  isSidebarCollapsed: boolean;
+};
+
+export const FavoriteItemTitle: FC<Props> = (props) => {
+  const { href, title, icon, isSidebarCollapsed } = props;
+
+  const linkClass = "flex items-center gap-1.5 truncate w-full";
+  const collapsedClass =
+    "group/project-item cursor-pointer relative group w-full flex items-center justify-center gap-1.5 rounded px-2 py-1 outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90 truncate p-0 size-8 aspect-square mx-auto";
+
+  return (
+    <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable>
+      <span className="flex items-center justify-center size-5">{icon}</span>
+      {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
+    </Link>
+  );
+};