[WEB-5822] fix: migrate ImagePickerPopover to Propel Tabs component and render only enabled tabs #8290

- Replace custom tab implementation with Propel Tabs
- Dynamically render only enabled tabs based on configuration
- Filter tabs by isEnabled property for cleaner conditional rendering
- Improve tab navigation and accessibility with Propel components

Author: prateekshourya29

apps/web/core/components/core/image-picker-popover.tsx

@@ -5,10 +5,11 @@ import { useDropzone } from "react-dropzone";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import useSWR from "swr";
-import { Tab, Popover } from "@headlessui/react";
+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 { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
@@ -80,6 +81,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
     [hasUnsplashConfigured]
   );
 
+  const enabledTabs = useMemo(() => tabOptions.filter((tab) => tab.isEnabled), [tabOptions]);
+
   const { data: unsplashImages, error: unsplashError } = useSWR(
     `UNSPLASH_IMAGES_${searchParams}`,
     () => fileService.getUnsplashImages(searchParams),
@@ -191,25 +194,19 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
         >
           <div
             ref={imagePickerRef}
-            className="flex h-96 w-80 flex-col overflow-auto rounded-sm border border-strong bg-surface-1 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
+            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]"
           >
-            <Tab.Group>
-              <Tab.List as="span" className="inline-block rounded-sm bg-layer-1 p-1">
-                {tabOptions.map((tab) => (
-                  <Tab
-                    key={tab.key}
-                    className={({ selected }) =>
-                      `rounded-sm px-4 py-1 text-center text-13 outline-none transition-colors ${
-                        selected ? "bg-accent-primary text-on-color" : "text-primary"
-                      }`
-                    }
-                  >
+            <Tabs defaultValue={enabledTabs[0]?.key || "images"} className="flex h-full flex-col p-3">
+              <Tabs.List className="flex rounded bg-layer-3 p-1">
+                {enabledTabs.map((tab) => (
+                  <Tabs.Trigger key={tab.key} value={tab.key} size="md">
                     {tab.title}
-                  </Tab>
+                  </Tabs.Trigger>
                 ))}
-              </Tab.List>
-              <Tab.Panels className="vertical-scrollbar scrollbar-md h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
-                <Tab.Panel className="mt-4 h-full w-full space-y-4">
+                <Tabs.Indicator />
+              </Tabs.List>
+              <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">
                   {(unsplashImages || !unsplashError) && (
                     <>
                       <div className="flex items-center gap-x-2">
@@ -276,8 +273,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       )}
                     </>
                   )}
-                </Tab.Panel>
-                <Tab.Panel className="mt-4 h-full w-full space-y-4">
+                </Tabs.Content>
+                <Tabs.Content 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
@@ -293,8 +290,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </div>
                     ))}
                   </div>
-                </Tab.Panel>
-                <Tab.Panel className="mt-4 h-full w-full">
+                </Tabs.Content>
+                <Tabs.Content 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
@@ -357,13 +354,13 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                         disabled={!image}
                         loading={isImageUploading}
                       >
-                        {isImageUploading ? "Uploading..." : "Upload & Save"}
+                        {isImageUploading ? "Uploading" : "Upload & Save"}
                       </Button>
                     </div>
                   </div>
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
+                </Tabs.Content>
+              </div>
+            </Tabs>
           </div>
         </Popover.Panel>
       )}