From fa87ff14b7abcaddc7d53e56fe97d0c6602d2c72 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 17 Apr 2025 17:13:21 +0530
Subject: [PATCH] [WIKI-319] chore: remove bottom border when toolbar is hidden
 (#6943)

* chore: remove border when toolbar is hidden

* chore: add stricter conditions
---
 .../components/pages/editor/toolbar/mobile-root.tsx |  9 +++++++--
 web/core/components/pages/editor/toolbar/root.tsx   |  8 +++++---
 .../components/pages/editor/toolbar/toolbar.tsx     | 13 +++++++++++--
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/web/core/components/pages/editor/toolbar/mobile-root.tsx b/web/core/components/pages/editor/toolbar/mobile-root.tsx
index a3cde27f4c..ccc04ab6eb 100644
--- a/web/core/components/pages/editor/toolbar/mobile-root.tsx
+++ b/web/core/components/pages/editor/toolbar/mobile-root.tsx
@@ -1,8 +1,11 @@
 import { observer } from "mobx-react";
+// plane imports
 import { EditorRefApi } from "@plane/editor";
-// components
 import { Header, EHeaderVariant } from "@plane/ui";
+// components
 import { PageExtraOptions, PageToolbar } from "@/components/pages";
+// hooks
+import { usePageFilters } from "@/hooks/use-page-filters";
 // plane web hooks
 import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
@@ -18,6 +21,8 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
   const { editorRef, page, storeType } = props;
   // derived values
   const { isContentEditable } = page;
+  // page filters
+  const { isStickyToolbarEnabled } = usePageFilters();
 
   return (
     <>
@@ -25,7 +30,7 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
         <PageExtraOptions editorRef={editorRef} page={page} storeType={storeType} />
       </Header>
       <Header variant={EHeaderVariant.TERNARY}>
-        {isContentEditable && editorRef && <PageToolbar editorRef={editorRef} />}
+        {isContentEditable && editorRef && <PageToolbar editorRef={editorRef} isHidden={!isStickyToolbarEnabled} />}
       </Header>
     </>
   );
diff --git a/web/core/components/pages/editor/toolbar/root.tsx b/web/core/components/pages/editor/toolbar/root.tsx
index 3618600e95..901ce7f5ea 100644
--- a/web/core/components/pages/editor/toolbar/root.tsx
+++ b/web/core/components/pages/editor/toolbar/root.tsx
@@ -26,6 +26,7 @@ export const PageEditorToolbarRoot: React.FC<Props> = observer((props) => {
   const { isFullWidth, isStickyToolbarEnabled } = usePageFilters();
   // derived values
   const resolvedEditorRef = editorRef.current;
+  const shouldHideToolbar = !isStickyToolbarEnabled || !isContentEditable;
 
   if (!resolvedEditorRef) return null;
 
@@ -33,16 +34,17 @@ export const PageEditorToolbarRoot: React.FC<Props> = observer((props) => {
     <div id="page-toolbar-container">
       <div
         className={cn(
-          "hidden md:flex items-center relative min-h-[52px] page-toolbar-content border-b border-custom-border-200 px-page-x transition-all duration-200 ease-in-out",
+          "hidden md:flex items-center relative min-h-[52px] page-toolbar-content px-page-x border-b border-transparent transition-all duration-200 ease-in-out",
           {
             "wide-layout": isFullWidth,
+            "border-custom-border-200": true,
           }
         )}
       >
         <div className="max-w-full w-full flex items-center justify-between">
           <div>
-            {isStickyToolbarEnabled && editorReady && isContentEditable && editorRef.current && (
-              <PageToolbar editorRef={editorRef?.current} />
+            {editorReady && resolvedEditorRef && (
+              <PageToolbar editorRef={resolvedEditorRef} isHidden={shouldHideToolbar} />
             )}
           </div>
           <PageExtraOptions editorRef={resolvedEditorRef} page={page} storeType={storeType} />
diff --git a/web/core/components/pages/editor/toolbar/toolbar.tsx b/web/core/components/pages/editor/toolbar/toolbar.tsx
index 8d378acdb1..a9c374f685 100644
--- a/web/core/components/pages/editor/toolbar/toolbar.tsx
+++ b/web/core/components/pages/editor/toolbar/toolbar.tsx
@@ -15,6 +15,7 @@ import { cn } from "@/helpers/common.helper";
 
 type Props = {
   editorRef: EditorRefApi;
+  isHidden: boolean;
 };
 
 type ToolbarButtonProps = {
@@ -63,7 +64,8 @@ ToolbarButton.displayName = "ToolbarButton";
 
 const toolbarItems = TOOLBAR_ITEMS.document;
 
-export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
+export const PageToolbar: React.FC<Props> = (props) => {
+  const { editorRef, isHidden } = props;
   // states
   const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
 
@@ -96,7 +98,14 @@ export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
   );
 
   return (
-    <div className="flex flex-wrap items-center divide-x divide-custom-border-200">
+    <div
+      className={cn(
+        "flex flex-wrap items-center divide-x divide-custom-border-200 opacity-100 transition-opacity duration-200 ease-in-out",
+        {
+          "opacity-0 pointer-events-none": isHidden,
+        }
+      )}
+    >
       <CustomMenu
         customButton={
           <span className="text-custom-text-300 text-sm border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 h-7 w-24 rounded px-2 flex items-center justify-between gap-2 whitespace-nowrap text-left">