[WEB-4921] refactor: implement propel tabs everywhere

[JayashTripathy]

Description

This PR replaces all the instances of tabs with propel tabs. And removes tabs from the ui package.

Type of Change

• [x] Improvement (change that would cause existing functionality to not work as expected)
• [x] Code refactoring

Summary by CodeRabbit

• Refactor

  • Migrated tab navigation components across analytics, image picker, licensing, and page sections to use an updated component library for improved consistency and maintainability.

• Style

  • Minor layout adjustments to spacing and alignment in discount badges and progress sections.

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

[makeplane[bot]]

Linked to Plane Work Item(s)

• [WEB-4921] Implement Tabs Component from Propel

This comment was auto-generated by Plane

[coderabbitai[bot]]

Walkthrough

Migrated tab components across the codebase from Headless UI to a new custom Tabs component from @plane/propel/tabs, removed the deprecated tabs module from packages/ui, and applied minor styling adjustments. Old Tabs/TabList implementations deleted from public API.

Changes

Cohort / File(s)	Summary
Tabs Migration to @plane/propel apps/web/core/components/analytics/work-items/modal/content.tsx, apps/web/core/components/core/image-picker-popover.tsx, apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx, apps/web/core/components/license/modal/card/base-paid-plan-card.tsx, apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx, apps/web/core/components/pages/navigation-pane/root.tsx, apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx, apps/web/core/components/pages/navigation-pane/tabs-list.tsx	Replaced Headless UI Tab components (Tab.Group, Tab.List, Tab, Tab.Panel) with new Tabs, Tabs.List, Tabs.Trigger, Tabs.Content from @plane/propel/tabs. Updated state management from index-based (selectedIndex) to value-based (value/onValueChange). Replaced active state styling from computed logic to data-[selected] attributes. Removed manual tab indicator position calculations.
UI Package Tabs Module Removal packages/ui/src/index.ts, packages/ui/src/tabs/index.ts, packages/ui/src/tabs/tabs.tsx, packages/ui/src/tabs/tab-list.tsx	Removed deprecated Tabs, TabList, and related types (TabContent, TabItem, TTabsProps) from the public UI package API. Eliminated Headless UI-based tab implementations including local storage persistence, size-based styling, and custom tab configuration logic. Removed re-exports from barrel files.
Styling & Layout Adjustments apps/web/core/components/license/modal/card/plan-upgrade.tsx, apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx	Updated yearly discount badge layout (added height, line-height, flex centering). Removed horizontal padding from analytics progress container.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• Key attention areas:
  • Verify all tab value-to-content bindings are correctly mapped across the refactored components, particularly in image-picker-popover.tsx (image selection behavior and popover closure)
  • Confirm the removal of PAGE_NAVIGATION_PANE_TAB_KEYS constant from public exports doesn't break external consumers
  • Review the deprecated Tabs/TabList removal from packages/ui to ensure no lingering internal dependencies
  • Validate that the new Tabs component from @plane/propel provides equivalent functionality (local storage, default values, event handling)

Possibly related PRs

• #7585: Introduces the new Tabs implementation in @plane/propel package that this PR adopts across the codebase, replacing the Headless UI-based tabs module.

Suggested reviewers

• anmolsinghbhatia

Poem

🐰 The tabs did hop from UI's store,
To propel's embrace, oh what a tour!
No more indices, just values so true,
The old ones depart—tab-da-da-zing, we're through! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	The description includes a brief explanation and identifies the change type (Improvement and Code refactoring), but lacks detailed context, test scenarios, and references required by the template.	Add more detail about implementation approach, include test scenarios verifying tab functionality across all modified components, and link the related issue (WEB-4921) as a reference.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: replacing all tab instances with propel tabs, which is the primary objective reflected throughout the changeset.

✨ 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 refactor/tabs-implementation

---

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.}