From ce88c9fd860614715050bd2f384f52006dd699b8 Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Wed, 31 Dec 2025 15:02:10 +0530
Subject: [PATCH] refactor: update Tabs component usage in AnalyticsPage and
 ImagePickerPopover

---
 .../(projects)/analytics/[tabId]/page.tsx     | 14 +++++------
 .../components/core/image-picker-popover.tsx  | 24 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
index f3a5fe3e80..b7b27f522e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 // components
 import { cn } from "@plane/utils";
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
@@ -75,9 +75,9 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                       "px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-surface-1"
                     )}
                   >
-                    <Tabs.List className={"overflow-x-auto flex w-fit h-7"}>
+                    <TabsList className={"overflow-x-auto flex w-fit h-7"}>
                       {ANALYTICS_TABS.map((tab) => (
-                        <Tabs.Trigger
+                        <TabsTrigger
                           key={tab.key}
                           value={tab.key}
                           disabled={tab.isDisabled}
@@ -90,22 +90,22 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                           }}
                         >
                           {tab.label}
-                        </Tabs.Trigger>
+                        </TabsTrigger>
                       ))}
-                    </Tabs.List>
+                    </TabsList>
 
                     <div className="flex-shrink-0">
                       <AnalyticsFilterActions />
                     </div>
                   </div>
                   {ANALYTICS_TABS.map((tab) => (
-                    <Tabs.Content
+                    <TabsContent
                       key={tab.key}
                       value={tab.key}
                       className={"h-full overflow-hidden overflow-y-auto px-2"}
                     >
                       <tab.content />
-                    </Tabs.Content>
+                    </TabsContent>
                   ))}
                 </div>
               </Tabs>
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index 42712ab719..84fd35c1b8 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -9,7 +9,7 @@ import { Popover } from "@headlessui/react";
 // plane imports
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsIndicator, TabsTrigger } from "@plane/propel/tabs";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
@@ -197,16 +197,16 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
             className="flex h-96 w-80 flex-col overflow-auto rounded border border-subtle bg-surface-1 shadow-raised-200 md:h-[36rem] md:w-[36rem]"
           >
             <Tabs defaultValue={enabledTabs[0]?.key || "images"} className="flex h-full flex-col p-3">
-              <Tabs.List className="flex rounded bg-layer-3 p-1">
+              <TabsList className="flex rounded bg-layer-3 p-1">
                 {enabledTabs.map((tab) => (
-                  <Tabs.Trigger key={tab.key} value={tab.key} size="md">
+                  <TabsTrigger key={tab.key} value={tab.key} size="md">
                     {tab.title}
-                  </Tabs.Trigger>
+                  </TabsTrigger>
                 ))}
-                <Tabs.Indicator />
-              </Tabs.List>
+                <TabsIndicator />
+              </TabsList>
               <div className="vertical-scrollbar scrollbar-sm p-3 mt-3 flex-1 overflow-y-auto overflow-x-hidden">
-                <Tabs.Content value="unsplash" className="h-full w-full space-y-4">
+                <TabsContent value="unsplash" className="h-full w-full space-y-4">
                   {(unsplashImages || !unsplashError) && (
                     <>
                       <div className="flex items-center gap-x-2">
@@ -273,8 +273,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       )}
                     </>
                   )}
-                </Tabs.Content>
-                <Tabs.Content value="images" className="h-full w-full space-y-4">
+                </TabsContent>
+                <TabsContent value="images" className="h-full w-full space-y-4">
                   <div className="grid grid-cols-4 gap-4">
                     {Object.values(STATIC_COVER_IMAGES).map((imageUrl, index) => (
                       <div
@@ -290,8 +290,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </div>
                     ))}
                   </div>
-                </Tabs.Content>
-                <Tabs.Content value="upload" className="h-full w-full">
+                </TabsContent>
+                <TabsContent value="upload" className="h-full w-full">
                   <div className="flex h-full w-full flex-col gap-y-2">
                     <div className="flex w-full flex-1 items-center gap-3">
                       <div
@@ -358,7 +358,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </Button>
                     </div>
                   </div>
-                </Tabs.Content>
+                </TabsContent>
               </div>
             </Tabs>
           </div>