chore: add favorites option inside a page (#5512)

web/core/components/pages/editor/header/extra-options.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import { useState } from "react";
 import { observer } from "mobx-react";
-import { CircleAlert, Sparkle } from "lucide-react";
+import { CircleAlert } from "lucide-react";
 // editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
 // ui
-import { ArchiveIcon, Tooltip } from "@plane/ui";
+import { ArchiveIcon, FavoriteStar, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 // components
-import { GptAssistantPopover } from "@/components/core";
 import { LockedComponent } from "@/components/icons/locked-component";
 import { PageInfoPopover, PageOptionsDropdown } from "@/components/pages";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
-import { useInstance } from "@/hooks/store";
 import useOnlineStatus from "@/hooks/use-online-status";
 // store
 import { IPage } from "@/store/pages/page";
@@ -29,18 +26,37 @@ type Props = {
 
 export const PageExtraOptions: React.FC<Props> = observer((props) => {
   const { editorRef, handleDuplicatePage, hasConnectionFailed, page, readOnlyEditorRef } = props;
-  // states
-  const [gptModalOpen, setGptModal] = useState(false);
-  // store hooks
-  const { config } = useInstance();
   // derived values
-  const { archived_at, isContentEditable, is_locked } = page;
+  const {
+    archived_at,
+    isContentEditable,
+    is_favorite,
+    is_locked,
+    canCurrentUserFavoritePage,
+    addToFavorites,
+    removePageFromFavorites,
+  } = page;
   // use online status
   const { isOnline } = useOnlineStatus();
-
-  const handleAiAssistance = async (response: string) => {
-    if (!editorRef) return;
-    editorRef.current?.setEditorValueAtCursorPosition(response);
+  // favorite handler
+  const handleFavorite = () => {
+    if (is_favorite) {
+      removePageFromFavorites().then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Page removed from favorites.",
+        })
+      );
+    } else {
+      addToFavorites().then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Page added to favorites.",
+        })
+      );
+    }
   };
 
   return (
@@ -74,28 +90,8 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
           </div>
         </Tooltip>
       )}
-      {isContentEditable && config?.has_openai_configured && (
-        <GptAssistantPopover
-          isOpen={gptModalOpen}
-          handleClose={() => {
-            setGptModal((prevData) => !prevData);
-            // this is done so that the title do not reset after gpt popover closed
-            // reset(getValues());
-          }}
-          onResponse={handleAiAssistance}
-          placement="top-end"
-          button={
-            <button
-              type="button"
-              className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
-              onClick={() => setGptModal((prevData) => !prevData)}
-            >
-              <Sparkle className="h-4 w-4" />
-              AI
-            </button>
-          }
-          className="!min-w-[38rem]"
-        />
+      {canCurrentUserFavoritePage && (
+        <FavoriteStar selected={is_favorite} onClick={handleFavorite} iconClassName="text-custom-text-100" />
       )}
       <PageInfoPopover editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current} />
       <PageOptionsDropdown

web/core/components/pages/list/block-item-action.tsx

@@ -7,12 +7,10 @@ import { Earth, Info, Lock, Minus } from "lucide-react";
 import { Avatar, FavoriteStar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
 import { PageQuickActions } from "@/components/pages/dropdowns";
-// constants
-import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
-import { useMember, usePage, useProject } from "@/hooks/store";
+import { useMember, usePage } from "@/hooks/store";
 
 type Props = {
   workspaceSlug: string;
@@ -23,24 +21,24 @@ type Props = {
 
 export const BlockItemAction: FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, pageId, parentRef } = props;
-
   // store hooks
   const page = usePage(pageId);
   const { getUserDetails } = useMember();
-  const { getProjectById } = useProject();
-
   // derived values
-  const { access, created_at, is_favorite, owned_by, addToFavorites, removePageFromFavorites } = page;
-
-  // derived values
-  const project = getProjectById(projectId);
-  const isViewerOrGuest =
-    project?.member_role && [EUserProjectRoles.VIEWER, EUserProjectRoles.GUEST].includes(project.member_role);
+  const {
+    access,
+    created_at,
+    is_favorite,
+    owned_by,
+    canCurrentUserFavoritePage,
+    addToFavorites,
+    removePageFromFavorites,
+  } = page;
   const ownerDetails = owned_by ? getUserDetails(owned_by) : undefined;
 
   // handlers
   const handleFavorites = () => {
-    if (is_favorite)
+    if (is_favorite) {
       removePageFromFavorites().then(() =>
         setToast({
           type: TOAST_TYPE.SUCCESS,
@@ -48,7 +46,7 @@ export const BlockItemAction: FC<Props> = observer((props) => {
           message: "Page removed from favorites.",
         })
       );
-    else
+    } else {
       addToFavorites().then(() =>
         setToast({
           type: TOAST_TYPE.SUCCESS,
@@ -56,7 +54,9 @@ export const BlockItemAction: FC<Props> = observer((props) => {
           message: "Page added to favorites.",
         })
       );
+    }
   };
+
   return (
     <>
       {/* page details */}
@@ -81,7 +81,7 @@ export const BlockItemAction: FC<Props> = observer((props) => {
       </Tooltip>
 
       {/* favorite/unfavorite */}
-      {!isViewerOrGuest && (
+      {canCurrentUserFavoritePage && (
         <FavoriteStar
           onClick={(e) => {
             e.preventDefault();

web/core/store/pages/page.ts

@@ -24,6 +24,7 @@ export interface IPage extends TPage {
   canCurrentUserChangeAccess: boolean;
   canCurrentUserArchivePage: boolean;
   canCurrentUserDeletePage: boolean;
+  canCurrentUserFavoritePage: boolean;
   isContentEditable: boolean;
   // helpers
   oldName: string;
@@ -133,6 +134,7 @@ export class Page implements IPage {
       canCurrentUserChangeAccess: computed,
       canCurrentUserArchivePage: computed,
       canCurrentUserDeletePage: computed,
+      canCurrentUserFavoritePage: computed,
       isContentEditable: computed,
       // actions
       update: action,
@@ -255,6 +257,14 @@ export class Page implements IPage {
     return this.isCurrentUserOwner || currentUserProjectRole === EUserProjectRoles.ADMIN;
   }
 
+  /**
+   * @description returns true if the current logged in user can favorite the page
+   */
+  get canCurrentUserFavoritePage() {
+    const currentUserProjectRole = this.store.user.membership.currentProjectRole;
+    return !!currentUserProjectRole && currentUserProjectRole >= EUserProjectRoles.MEMBER;
+  }
+
   /**
    * @description returns true if the page can be edited
    */