fix: migrate ImagePickerPopover to Propel Tabs component and render only enabled tabs

[prateekshourya29]

Description

• 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

Type of Change

• [x] Bug fix (non-breaking change which fixes an issue)
• [x] Code refactoring

Summary by CodeRabbit

• Refactor

  • Updated image picker popover component with improved internal structure for better usability.
  • Enhanced tab navigation system with dynamic tab rendering.

• Style

  • Increased container height for better visual spacing in the image picker interface.
  • Minor update to upload status messaging.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

📝 Walkthrough

Walkthrough

The image-picker-popover component replaces Headless UI Tab components with a custom Tabs implementation from @plane/propel/tabs. The migration includes restructuring the tab rendering flow, introducing dynamic tab enabling logic, adjusting container height from md:h-[28rem] to md:h-[36rem], reorganizing tab content into separate Tabs.Content blocks, and updating the upload button label text from "Uploading..." to "Uploading".

Changes

Cohort / File(s)	Summary
Tab library migration & dynamic enabling apps/web/core/components/core/image-picker-popover.tsx	Replaced Headless UI Tab.Group/Tab.List/Tab/Tab.Panels/Tab.Panel with @plane/propel/tabs (Tabs, Tabs.List, Tabs.Trigger, Tabs.Indicator, Tabs.Content). Added computed enabledTabs filtering. Updated imports to remove Headless UI Tab and add @plane/propel/tabs. Reorganized unsplash, images, and upload panels into separate Tabs.Content blocks with explicit value-based rendering.
Layout & styling adjustments apps/web/core/components/core/image-picker-popover.tsx	Updated container height from md:h-[28rem] to md:h-[36rem]. Adjusted wrapper structure to accommodate new Tabs layout.
Content & button text refinements apps/web/core/components/core/image-picker-popover.tsx	Changed upload button label from "Uploading..." to "Uploading". Updated tab trigger rendering and content placement to reflect new Tabs component structure.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Areas requiring extra attention:
  • Verify that dynamic tab enabling via enabledTabs computation correctly filters and displays only enabled tabs
  • Confirm layout height change (md:h-[28rem] → md:h-[36rem]) maintains proper visual alignment and scroll behavior
  • Validate that all tab content (unsplash, images, upload) renders correctly under the new Tabs.Content structure
  • Check that tab selection and navigation behavior works as expected with the new @plane/propel/tabs implementation

Poem

🐰 Tabs were shuffled, new library in sight, From Headless UI's grip to Propel's bright light, Dynamic tabs now dance, enabled with care, A taller container breathes cleaner air, Upload buttons whisper softly, "uploading" they say! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers the main changes and includes the Type of Change section, but lacks detailed test scenarios, screenshots, and references as specified in the template.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the primary change: migrating ImagePickerPopover to Propel Tabs component and implementing dynamic rendering of only enabled tabs.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch fix-image-picker

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[makeplane[bot]]

Linked to Plane Work Item(s)

• [WEB-5822] Remove unsplash images tab from the image picker if it is not configured

This comment was auto-generated by Plane