From cea3fef52677c7750c067157020194e48f37ebfe Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 29 Nov 2024 14:49:43 +0530
Subject: [PATCH] chore: update page infor dropdown

---
 .../[projectId]/pages/(detail)/header.tsx     |  6 +-
 .../dropdowns/edit-information-popover.tsx    | 71 -----------------
 web/core/components/pages/dropdowns/index.ts  |  1 -
 .../pages/editor/header/extra-options.tsx     |  6 +-
 .../pages/editor/header/info-popover.tsx      | 77 ++++++++++++++++---
 .../pages/editor/header/options-dropdown.tsx  |  2 +-
 6 files changed, 75 insertions(+), 88 deletions(-)
 delete mode 100644 web/core/components/pages/dropdowns/edit-information-popover.tsx

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index 44ba6d7f5f..2d9f0b64d1 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@@ -10,8 +10,8 @@ import { TLogoProps } from "@plane/types";
 import { Breadcrumbs, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, Tooltip, setToast, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
-import { PageEditInformationPopover } from "@/components/pages";
 // helpers
+import { calculateTimeAgoShort } from "@/helpers/date-time.helper";
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getPageName } from "@/helpers/page.helper";
 // hooks
@@ -169,7 +169,9 @@ export const PageDetailsHeader = observer(() => {
         </div>
       </Header.LeftItem>
       <Header.RightItem>
-        <PageEditInformationPopover page={page} />
+        <div className="flex-shrink-0 whitespace-nowrap text-sm text-custom-text-300">
+          Edited {calculateTimeAgoShort(page.updated_at ?? "")} ago
+        </div>
         <PageDetailsHeaderExtraActions />
       </Header.RightItem>
     </Header>
diff --git a/web/core/components/pages/dropdowns/edit-information-popover.tsx b/web/core/components/pages/dropdowns/edit-information-popover.tsx
deleted file mode 100644
index 92e6d8fab5..0000000000
--- a/web/core/components/pages/dropdowns/edit-information-popover.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-// plane ui
-import { Avatar } from "@plane/ui";
-// helpers
-import { calculateTimeAgoShort, renderFormattedDate } from "@/helpers/date-time.helper";
-import { getFileURL } from "@/helpers/file.helper";
-// hooks
-import { useMember } from "@/hooks/store";
-// store
-import { IPage } from "@/store/pages/page";
-
-type Props = {
-  page: IPage;
-};
-
-export const PageEditInformationPopover: React.FC<Props> = observer((props) => {
-  const { page } = props;
-  // router
-  const { workspaceSlug } = useParams();
-  // store hooks
-  const { getUserDetails } = useMember();
-  // derived values
-  const editorInformation = page.updated_by ? getUserDetails(page.updated_by) : undefined;
-  const creatorInformation = page.created_by ? getUserDetails(page.created_by) : undefined;
-
-  return (
-    <div className="flex-shrink-0 relative group/edit-information whitespace-nowrap">
-      <span className="text-sm text-custom-text-300">Edited {calculateTimeAgoShort(page.updated_at ?? "")} ago</span>
-      <div className="hidden group-hover/edit-information:block absolute z-10 top-full right-0 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg space-y-2">
-        <div>
-          <p className="text-xs font-medium text-custom-text-300">Edited by</p>
-          <Link
-            href={`/${workspaceSlug?.toString()}/profile/${page.updated_by}`}
-            className="mt-2 flex items-center gap-1.5 text-sm font-medium"
-          >
-            <Avatar
-              src={getFileURL(editorInformation?.avatar_url ?? "")}
-              name={editorInformation?.display_name}
-              className="flex-shrink-0"
-              size="sm"
-            />
-            <span>
-              {editorInformation?.display_name}{" "}
-              <span className="text-custom-text-300">{renderFormattedDate(page.updated_at)}</span>
-            </span>
-          </Link>
-        </div>
-        <div>
-          <p className="text-xs font-medium text-custom-text-300">Created by</p>
-          <Link
-            href={`/${workspaceSlug?.toString()}/profile/${page.created_by}`}
-            className="mt-2 flex items-center gap-1.5 text-sm font-medium"
-          >
-            <Avatar
-              src={getFileURL(creatorInformation?.avatar_url ?? "")}
-              name={creatorInformation?.display_name}
-              className="flex-shrink-0"
-              size="sm"
-            />
-            <span>
-              {creatorInformation?.display_name}{" "}
-              <span className="text-custom-text-300">{renderFormattedDate(page.created_at)}</span>
-            </span>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-});
diff --git a/web/core/components/pages/dropdowns/index.ts b/web/core/components/pages/dropdowns/index.ts
index 16d9c33720..db98841b0e 100644
--- a/web/core/components/pages/dropdowns/index.ts
+++ b/web/core/components/pages/dropdowns/index.ts
@@ -1,2 +1 @@
-export * from "./edit-information-popover";
 export * from "./quick-actions";
diff --git a/web/core/components/pages/editor/header/extra-options.tsx b/web/core/components/pages/editor/header/extra-options.tsx
index f21959cd93..5c24d6700c 100644
--- a/web/core/components/pages/editor/header/extra-options.tsx
+++ b/web/core/components/pages/editor/header/extra-options.tsx
@@ -58,7 +58,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <div className="flex items-center justify-end gap-3">
+    <div className="flex items-center justify-end gap-2">
       {is_locked && <LockedComponent />}
       {archived_at && (
         <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">
@@ -81,11 +81,11 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
         <FavoriteStar
           selected={is_favorite}
           onClick={handleFavorite}
-          buttonClassName="flex-shrink-0"
+          buttonClassName="flex-shrink-0 size-6"
           iconClassName="text-custom-text-100"
         />
       )}
-      <PageInfoPopover editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current} />
+      <PageInfoPopover editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current} page={page} />
       <PageOptionsDropdown
         editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
         handleDuplicatePage={handleDuplicatePage}
diff --git a/web/core/components/pages/editor/header/info-popover.tsx b/web/core/components/pages/editor/header/info-popover.tsx
index e295d8ea27..fba41713fe 100644
--- a/web/core/components/pages/editor/header/info-popover.tsx
+++ b/web/core/components/pages/editor/header/info-popover.tsx
@@ -1,26 +1,43 @@
 import { useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Info } from "lucide-react";
 // plane editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+// plane ui
+import { Avatar } from "@plane/ui";
 // helpers
-import { getReadTimeFromWordsCount } from "@/helpers/date-time.helper";
+import { getReadTimeFromWordsCount, renderFormattedDate } from "@/helpers/date-time.helper";
+import { getFileURL } from "@/helpers/file.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+// store types
+import { IPage } from "@/store/pages/page";
 
 type Props = {
   editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  page: IPage;
 };
 
 export const PageInfoPopover: React.FC<Props> = (props) => {
-  const { editorRef } = props;
+  const { editorRef, page } = props;
   // states
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   // refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // router
+  const { workspaceSlug } = useParams();
   // popper-js
   const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom-start",
   });
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const editorInformation = page.updated_by ? getUserDetails(page.updated_by) : undefined;
+  const creatorInformation = page.created_by ? getUserDetails(page.created_by) : undefined;
 
   const documentsInfo = editorRef?.getDocumentInfo() || { words: 0, characters: 0, paragraphs: 0 };
 
@@ -55,22 +72,62 @@ export const PageInfoPopover: React.FC<Props> = (props) => {
 
   return (
     <div onMouseEnter={() => setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}>
-      <button type="button" ref={setReferenceElement} className="block">
-        <Info className="size-3.5" />
+      <button type="button" ref={setReferenceElement} className="size-6 grid place-items-center">
+        <Info className="size-4" />
       </button>
       {isPopoverOpen && (
         <div
-          className="z-10 w-64 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg grid grid-cols-2 gap-1.5"
+          className="z-10 w-64 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg"
           ref={setPopperElement}
           style={infoPopoverStyles.popper}
           {...infoPopoverAttributes.popper}
         >
-          {documentInfoCards.map((card) => (
-            <div key={card.key} className="p-2 bg-custom-background-90 rounded">
-              <h6 className="text-base font-semibold">{card.info}</h6>
-              <p className="mt-1.5 text-sm text-custom-text-300">{card.title}</p>
+          <div className="grid grid-cols-2 gap-1.5">
+            {documentInfoCards.map((card) => (
+              <div key={card.key} className="p-2 bg-custom-background-90 rounded">
+                <h6 className="text-base font-semibold">{card.info}</h6>
+                <p className="mt-1.5 text-sm text-custom-text-300">{card.title}</p>
+              </div>
+            ))}
+          </div>
+          <div className="mt-2.5 space-y-2">
+            <div>
+              <p className="text-xs font-medium text-custom-text-300">Edited by</p>
+              <Link
+                href={`/${workspaceSlug?.toString()}/profile/${page.updated_by}`}
+                className="mt-2 flex items-center gap-1.5 text-sm font-medium"
+              >
+                <Avatar
+                  src={getFileURL(editorInformation?.avatar_url ?? "")}
+                  name={editorInformation?.display_name}
+                  className="flex-shrink-0"
+                  size="sm"
+                />
+                <span>
+                  {editorInformation?.display_name}{" "}
+                  <span className="text-custom-text-300">{renderFormattedDate(page.updated_at)}</span>
+                </span>
+              </Link>
             </div>
-          ))}
+            <div>
+              <p className="text-xs font-medium text-custom-text-300">Created by</p>
+              <Link
+                href={`/${workspaceSlug?.toString()}/profile/${page.created_by}`}
+                className="mt-2 flex items-center gap-1.5 text-sm font-medium"
+              >
+                <Avatar
+                  src={getFileURL(creatorInformation?.avatar_url ?? "")}
+                  name={creatorInformation?.display_name}
+                  className="flex-shrink-0"
+                  size="sm"
+                />
+                <span>
+                  {creatorInformation?.display_name}{" "}
+                  <span className="text-custom-text-300">{renderFormattedDate(page.created_at)}</span>
+                </span>
+              </Link>
+            </div>
+          </div>
         </div>
       )}
     </div>
diff --git a/web/core/components/pages/editor/header/options-dropdown.tsx b/web/core/components/pages/editor/header/options-dropdown.tsx
index c7cf53a5f5..adc1b67a8f 100644
--- a/web/core/components/pages/editor/header/options-dropdown.tsx
+++ b/web/core/components/pages/editor/header/options-dropdown.tsx
@@ -180,7 +180,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
         onClose={() => setIsExportModalOpen(false)}
         pageTitle={name ?? ""}
       />
-      <CustomMenu maxHeight="lg" placement="bottom-start" verticalEllipsis closeOnSelect>
+      <CustomMenu maxHeight="lg" placement="bottom-start" buttonClassName="size-6" ellipsis closeOnSelect>
         <CustomMenu.MenuItem
           className="hidden md:flex w-full items-center justify-between gap-2"
           onClick={() => handleFullWidth(!isFullWidth)}