From 1062860c1af1238c4d61fe61b83c28f3c9ec97cf Mon Sep 17 00:00:00 2001
From: Palanikannan M <akashmalinimurugu@gmail.com>
Date: Thu, 26 Mar 2026 20:01:32 +0530
Subject: [PATCH] fix: migrate page navigation pane tabs from headless ui to
 propel

---
 .../components/pages/navigation-pane/root.tsx | 14 ++++----
 .../pages/navigation-pane/tabs-list.tsx       | 36 ++++++-------------
 2 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/apps/web/core/components/pages/navigation-pane/root.tsx b/apps/web/core/components/pages/navigation-pane/root.tsx
index 0c3370d4781..079cf8b5f64 100644
--- a/apps/web/core/components/pages/navigation-pane/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/root.tsx
@@ -4,13 +4,13 @@
  * See the LICENSE file for details.
  */
 
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ArrowRightCircle } from "lucide-react";
-import { Tab } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { Tabs } from "@plane/propel/tabs";
 import { Tooltip } from "@plane/propel/tooltip";
 // hooks
 import { useQueryParams } from "@/hooks/use-query-params";
@@ -26,7 +26,6 @@ import { PageNavigationPaneTabsList } from "./tabs-list";
 import type { INavigationPaneExtension } from "./types/extensions";
 
 import {
-  PAGE_NAVIGATION_PANE_TAB_KEYS,
   PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
   PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM,
   PAGE_NAVIGATION_PANE_WIDTH,
@@ -55,7 +54,6 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
     PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM
   ) as TPageNavigationPaneTab | null;
   const activeTab: TPageNavigationPaneTab = navigationPaneQueryParam || "outline";
-  const selectedIndex = PAGE_NAVIGATION_PANE_TAB_KEYS.indexOf(activeTab);
 
   // Check if any extension is currently active based on query parameters
   const ActiveExtension = extensions.find((extension) => {
@@ -75,8 +73,8 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
   const { t } = useTranslation();
 
   const handleTabChange = useCallback(
-    (index: number) => {
-      const updatedTab = PAGE_NAVIGATION_PANE_TAB_KEYS[index];
+    (value: string) => {
+      const updatedTab = value as TPageNavigationPaneTab;
       const isUpdatedTabInfo = updatedTab === "info";
       const updatedRoute = updateQueryParams({
         paramsToAdd: { [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: updatedTab },
@@ -112,10 +110,10 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
         {ActiveExtension ? (
           <ActiveExtension.component page={page} extensionData={ActiveExtension.data} storeType={storeType} />
         ) : showNavigationTabs ? (
-          <Tab.Group as={React.Fragment} selectedIndex={selectedIndex} onChange={handleTabChange}>
+          <Tabs value={activeTab} onValueChange={handleTabChange}>
             <PageNavigationPaneTabsList />
             <PageNavigationPaneTabPanelsRoot page={page} versionHistory={versionHistory} />
-          </Tab.Group>
+          </Tabs>
         ) : null}
       </div>
     </aside>
diff --git a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
index 76469a7c971..3ba55f6a2c3 100644
--- a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
@@ -4,9 +4,9 @@
  * See the LICENSE file for details.
  */
 
-import { Tab } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { Tabs } from "@plane/propel/tabs";
 // plane web components
 import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";
 
@@ -15,29 +15,15 @@ export function PageNavigationPaneTabsList() {
   const { t } = useTranslation();
 
   return (
-    <Tab.List className="relative mx-3.5 flex items-center rounded-md bg-layer-3 p-0.5">
-      {({ selectedIndex }) => (
-        <>
-          {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
-            <Tab
-              key={tab.key}
-              type="button"
-              className="relative z-[1] flex-1 py-1.5 text-13 font-semibold outline-none"
-            >
-              {t(tab.i18n_label)}
-            </Tab>
-          ))}
-          {/* active tab indicator */}
-          <div
-            className="pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-sm bg-layer-3-selected transition-all duration-500 ease-in-out"
-            style={{
-              left: `calc(${(selectedIndex / ORDERED_PAGE_NAVIGATION_TABS_LIST.length) * 100}% + 2px)`,
-              height: "calc(100% - 4px)",
-              width: `calc(${100 / ORDERED_PAGE_NAVIGATION_TABS_LIST.length}% - 4px)`,
-            }}
-          />
-        </>
-      )}
-    </Tab.List>
+    <div className="mx-3.5">
+      <Tabs.List>
+        {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
+          <Tabs.Trigger key={tab.key} value={tab.key}>
+            {t(tab.i18n_label)}
+          </Tabs.Trigger>
+        ))}
+        <Tabs.Indicator />
+      </Tabs.List>
+    </div>
   );
 }