refactor: migrate web Tabs to @makeplane/propel

[anmolsinghbhatia]

Description

Replace in-repo @plane/propel/tabs with published @makeplane/propel/components/tabs at the remaining web call sites: workspace analytics, the cover image picker, and the page navigation pane.

Tabs.List / Tabs.Trigger / Tabs.Content / Tabs.Indicator map to TabsList / Tab / TabsPanel. Tab takes label instead of children. The sliding indicator is dropped; tabs use variant="contained".

Published Tabs and TabsPanel omit className, so fill-height layouts wrap the panel in a one-row grid (analytics and page nav) and the tabs root in a flex container (page nav).

Cover picker follow-up: the 36rem shell was unchanged, but published TabsList is inline-flex, so Images / Upload hugged content (~123px) instead of spanning the panel like the old full-width bar. The list is stretched to full width with equal-width tabs so the picker matches the previous size. Unsplash search, static image pick, and upload behavior are unchanged.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Media

Screen.Recording.2026-09-04.at.4.18.39.PM.mov

Test Scenarios

• Workspace analytics: open /<workspace>/analytics, switch Overview / Scope / Demand / Supply (and any disabled tabs). Confirm the URL updates, filter actions stay on the right, and the active panel fills remaining height and scrolls.
• Cover image picker: Add Project → Change cover. Confirm the popover stays ~36rem, Images / Upload (and Unsplash if configured) span the full width, and the 4-column thumbnail grid matches the previous size. Search Unsplash, pick a static image, upload a file; Cancel still closes without saving.
• Page navigation pane: open a project page with the pane visible. Switch Outline / Info / Assets. Confirm the active panel fills the pane and paneTab survives pane toggle.
• Regression: disabled analytics tabs do not navigate; image picker still hides Unsplash when it is not configured.

References

Summary by CodeRabbit

• Improvements
  • Updated tab navigation across analytics, workspace navigation, and image selection with a more consistent interface.
  • Improved tab layouts so panels use available space more effectively and remain visually aligned.
  • Refined image picker panels with a cleaner, contained presentation.
  • Existing image search, image selection, and upload workflows remain unchanged.

[coldtea-pr-lens]

◈ PR Lens

🟢 +0 new · 🟠 ~5 changed · 🔴 -0 removed · 0 flows · 7 files · commit 6a38bef

Architecture

5 components touched across 2 lanes.

Open full size

Inside the changed components — 1 view

Component view — Web App Tabs Migration

Internal view of web app UI modules (analytics dashboard, image picker popover, and page navigation pane) migrating to the updated @⁠makeplane/propel tabs API.

Data flow

No data-flow sequence changed in this PR.

Drill down

Client Applications — 5 components

🟡 CHANGED Plane Web App

Next.js and React Router web client for Plane workspaces, projects, and document management.

• apps/web/package.json
• pnpm-lock.yaml

🟡 CHANGED @⁠makeplane/propel

Published Propel design system component library providing standardized UI primitives including Tab, Tabs, TabsList, and TabsPanel.

• pnpm-lock.yaml

🟡 CHANGED Analytics Tab View

Workspace and project analytics dashboard tab switcher, refactored to contained Propel tabs with grid-based tab panel rendering.

• apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx:14-101

🟡 CHANGED Image Picker Popover

Cover image selection and upload modal with tabs for Unsplash search, static presets, and file upload.

• apps/web/core/components/core/image-picker-popover.tsx:17-384

🟡 CHANGED Page Navigation Pane

Document sidebar navigation managing Outline, Page Info, and Asset panels via Propel TabsList and TabsPanel.

• apps/web/core/components/pages/navigation-pane/root.tsx:13-122
• apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx:8-38
• apps/web/core/components/pages/navigation-pane/tabs-list.tsx:8-24

View

• Architecture lens
• Data flow lens
• Expand every detail
• Show unchanged neighbours

Tip

Draw a diff before it is even a pull request: npx @coldtea/pr-lens-cli analyze --base origin/main reads the diff with your own model key, and npx @coldtea/pr-lens-cli render .pr-lens/graph.json draws the same lenses on your machine.

🪧 More tips

• Run PR Lens on your own machine: npx skills add coldteadotai/pr-lens installs the agent skill. Then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• The boxes under View are live. Tick Architecture lens or Data flow lens to choose which diagrams appear, or Expand every detail to open every drill-down at once. The comment redraws in place a few seconds later.
• Show unchanged neighbours lists the components this change did not touch alongside the ones it did, so the drill-down shows what the changed code sits next to.
• GitHub will not let you zoom an image in a comment. The link under each diagram opens it full size on a page of its own, where you can.
• The CLI's render picks up .github/pr-lens.yml automatically and applies your corrections (renames, exclusions, lane pins) at draw time.
• Would you rather run it from CI on a key of your own? Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and a model key in your repository secrets, say GEMINI_API_KEY. The Action asks Gemini by default, or OpenAI and any endpoint speaking /chat/completions through its provider input.
• PR Lens is free for open source. A star on the repository is what keeps it going.
• Push a new commit and the whole comment re-renders for the new head. An older run never overwrites a newer one, so a slow render cannot put a stale diagram back.
• The diagrams follow your GitHub theme, so dark mode gets the dark render and light mode the light one, and the moving dots show this pull request's data in motion.

---

◈ Rendered by PR Lens · crafted with ❤️ by the Coldtea team · Come say hi on Discord

[github-actions]

React Doctor found 1 new issue in 1 file · 1 warning · score 89 / 100 (Great) · 1 fixed · vs preview

1 warning

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

• ⚠️ L55 React function has high control-flow complexity no-high-complexity-react-function

_{Reviewed by React Doctor for commit 6a38bef. See inline comments for fixes.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: fdaf1747-7701-43b5-af6a-1ccad51f44c2

📥 Commits

Reviewing files that changed from the base of the PR and between da1a7ab and 6a38bef.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
• apps/web/core/components/core/image-picker-popover.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

🚧 Files skipped from review as they are similar to previous changes (5)

• apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
• apps/web/core/components/pages/navigation-pane/tabs-list.tsx
• apps/web/core/components/pages/navigation-pane/root.tsx
• apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
• apps/web/core/components/core/image-picker-popover.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The web application migrated analytics, image picker, and navigation pane tabs from the old compound API to the new Propel tab components. Flex and grid wrappers now provide full-height tab layouts where the new components do not accept className.

Changes

Propel Tabs API Migration

Layer / File(s)	Summary
Analytics tabs migration apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx	The analytics page now uses TabsList, Tab, and TabsPanel. Disabled tabs use the disabled prop.
Image picker tabs migration apps/web/core/components/core/image-picker-popover.tsx	The image picker now uses the new tab components. Flex and grid wrappers preserve the tab content layout for search, static images, and uploads.
Navigation pane tabs migration apps/web/core/components/pages/navigation-pane/root.tsx, apps/web/core/components/pages/navigation-pane/tabs-list.tsx, apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx	The navigation pane now uses TabsList, Tab, and TabsPanel with the contained variant and full-height layout wrappers.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 6a38b

This change migrates tab interfaces to the published Propel components while retaining the existing tab behaviors and layout intent. No concrete merge-blocking risk is identified.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely describes the main change: migrating the remaining web Tabs usages to @makeplane/propel.
Description check	✅ Passed	The description is complete and relevant. It explains the migration, layout changes, preserved behavior, change type, media, and detailed test scenarios. The References section is empty, but no relate…

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/migrate-tabs-to-propel

---

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

[Copilot]

🟡 Changes recommended

The cover image picker layout changes remove prior panel spacing/padding in a way that likely contradicts the PR’s stated goal of matching the previous picker sizing.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR refactors remaining web call sites to use the published @makeplane/propel/components/tabs API instead of the in-repo @plane/propel/tabs, aligning workspace analytics, the cover image picker, and the page navigation pane with the new tabs primitives and layout constraints (notably around missing className support).

Changes:

• Migrated tab triggers/panels to Tab / TabsList / TabsPanel and updated props (e.g., label).
• Adjusted fill-height layouts by adding flex/grid wrappers where panels/roots can’t be styled directly.
• Updated the cover image picker tab strip to stretch full-width using wrapper selectors to match prior sizing.

File summaries

File	Description
apps/web/core/components/pages/navigation-pane/tabs-list.tsx	Swaps the list/trigger implementation to TabsList + Tab with label.
apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx	Replaces Tabs.Content with TabsPanel and wraps panels in a 1-row grid for fill-height behavior.
apps/web/core/components/pages/navigation-pane/root.tsx	Updates tabs root import and adds wrappers to preserve full-height layout with the published Tabs.
apps/web/core/components/core/image-picker-popover.tsx	Migrates picker tabs to published components and reworks layout/scrolling and full-width tabs.
apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx	Migrates analytics tabs to published components and wraps panels in a 1-row grid for fill-height behavior.

Review details

• Files reviewed: 5/5 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.