From 209b700fd9c54cfd6162bcff2ce3d0d68510114d Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 18 Jul 2024 15:49:25 +0530
Subject: [PATCH] fix: page breadcrumb tooltip persistence (#5137)

---
 .../[projectId]/pages/(detail)/header.tsx     | 94 ++++++++++---------
 1 file changed, 51 insertions(+), 43 deletions(-)

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 cf72be3f2..c04c6d944 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
@@ -7,7 +7,7 @@ import { FileText } from "lucide-react";
 // types
 import { TLogoProps } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, setToast } from "@plane/ui";
+import { Breadcrumbs, Button, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 // helpers
@@ -31,7 +31,7 @@ export const PageDetailsHeader = observer(() => {
   const { currentProjectDetails, loader } = useProject();
   const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = usePage(pageId?.toString() ?? "");
   // use platform
-  const { platform } = usePlatformOS();
+  const { isMobile, platform } = usePlatformOS();
   // derived values
   const isMac = platform === "MacOS";
 
@@ -100,49 +100,57 @@ export const PageDetailsHeader = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink
-                  label={name ?? "Page"}
-                  icon={
-                    <EmojiIconPicker
-                      isOpen={isOpen}
-                      handleToggle={(val: boolean) => setIsOpen(val)}
-                      className="flex items-center justify-center"
-                      buttonClassName="flex items-center justify-center"
-                      label={
-                        <>
-                          {logo_props?.in_use ? (
-                            <Logo logo={logo_props} size={16} type="lucide" />
-                          ) : (
-                            <FileText className="h-4 w-4 text-custom-text-300" />
-                          )}
-                        </>
-                      }
-                      onChange={(val) => {
-                        let logoValue = {};
+                <li className="flex items-center space-x-2" tabIndex={-1}>
+                  <div className="flex flex-wrap items-center gap-2.5">
+                    <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+                      <div className="flex h-5 w-5 items-center justify-center overflow-hidden">
+                        <EmojiIconPicker
+                          isOpen={isOpen}
+                          handleToggle={(val: boolean) => setIsOpen(val)}
+                          className="flex items-center justify-center"
+                          buttonClassName="flex items-center justify-center"
+                          label={
+                            <>
+                              {logo_props?.in_use ? (
+                                <Logo logo={logo_props} size={16} type="lucide" />
+                              ) : (
+                                <FileText className="h-4 w-4 text-custom-text-300" />
+                              )}
+                            </>
+                          }
+                          onChange={(val) => {
+                            let logoValue = {};
 
-                        if (val?.type === "emoji")
-                          logoValue = {
-                            value: convertHexEmojiToDecimal(val.value.unified),
-                            url: val.value.imageUrl,
-                          };
-                        else if (val?.type === "icon") logoValue = val.value;
+                            if (val?.type === "emoji")
+                              logoValue = {
+                                value: convertHexEmojiToDecimal(val.value.unified),
+                                url: val.value.imageUrl,
+                              };
+                            else if (val?.type === "icon") logoValue = val.value;
 
-                        handlePageLogoUpdate({
-                          in_use: val?.type,
-                          [val?.type]: logoValue,
-                        }).finally(() => setIsOpen(false));
-                      }}
-                      defaultIconColor={
-                        logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined
-                      }
-                      defaultOpen={
-                        logo_props?.in_use && logo_props?.in_use === "emoji"
-                          ? EmojiIconPickerTypes.EMOJI
-                          : EmojiIconPickerTypes.ICON
-                      }
-                    />
-                  }
-                />
+                            handlePageLogoUpdate({
+                              in_use: val?.type,
+                              [val?.type]: logoValue,
+                            }).finally(() => setIsOpen(false));
+                          }}
+                          defaultIconColor={
+                            logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined
+                          }
+                          defaultOpen={
+                            logo_props?.in_use && logo_props?.in_use === "emoji"
+                              ? EmojiIconPickerTypes.EMOJI
+                              : EmojiIconPickerTypes.ICON
+                          }
+                        />
+                      </div>
+                      <Tooltip tooltipContent={name ?? "Page"} position="bottom" isMobile={isMobile}>
+                        <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">
+                          {name ?? "Page"}
+                        </div>
+                      </Tooltip>
+                    </div>
+                  </div>
+                </li>
               }
             />
           </Breadcrumbs>