Skip to content

refactor(web): decouple detail sidebars from main nav#38241

Merged
hyoban merged 13 commits into
mainfrom
codex/refactor-main-nav-detail-sidebar
Jul 1, 2026
Merged

refactor(web): decouple detail sidebars from main nav#38241
hyoban merged 13 commits into
mainfrom
codex/refactor-main-nav-detail-sidebar

Conversation

@hyoban

@hyoban hyoban commented Jul 1, 2026

Copy link
Copy Markdown
Member

Important

  1. Make sure you have read our contribution guidelines
  2. Ensure there is an associated issue and you have been assigned to it
  3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

This refactors the console navigation ownership so MainNav only owns the global navigation bundle. Feature-owned detail sidebars now render from their respective detail layouts and share a neutral DetailSidebarFrame under app/components/detail-sidebar.

Changes include:

  • Move detail sidebar frame and persisted expand/collapse storage out of main-nav.
  • Hide the global main nav from MainNavLayout on detail routes that render their own sidebar.
  • Move app, dataset, agent, deployment, and snippet detail sidebar rendering into their feature layouts.
  • Move snippet detail sidebar components from main-nav into the snippets feature.
  • Add boundary tests to prevent feature detail sidebar modules from being pulled into main-nav again.

No linked issue was provided for this local Codex task.

Validation:

  • pnpm -C web test app/components/main-nav/__tests__/index.spec.tsx app/components/main-nav/__tests__/layout.spec.tsx app/components/detail-sidebar/__tests__/index.spec.tsx
  • pnpm -C web test 'app/(commonLayout)/app/(appDetailLayout)/[appId]/__tests__/layout-main.spec.tsx' 'app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx' app/components/snippets/components/__tests__/snippet-layout.spec.tsx
  • pnpm -C web test app/components/app/configuration/hooks/__tests__/use-configuration.spec.tsx
  • pnpm -C web type-check
  • pnpm -C web lint:tss
  • git diff --check

Note: cd web && pnpm exec vp staged was attempted, but this checkout reports no staged config in vite.config.ts. The commit hook did run eslint --fix --pass-on-unpruned-suppressions successfully.

From Codex

Screenshots

Before After
N/A N/A

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran make lint && make type-check (backend) and cd web && pnpm exec vp staged (frontend) to appease the lint gods

@github-actions github-actions Bot added the web This relates to changes on the web. label Jul 1, 2026
@codecov

codecov Bot commented Jul 1, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 90.22556% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.36%. Comparing base (93981cf) to head (2716a9b).

Files with missing lines Patch % Lines
web/app/components/detail-sidebar/index.tsx 83.07% 11 Missing ⚠️
web/app/components/main-nav/routes.ts 93.93% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff            @@
##             main   #38241     +/-   ##
=========================================
  Coverage   85.36%   85.36%             
=========================================
  Files        4979     4973      -6     
  Lines      262037   259605   -2432     
  Branches    49629    49388    -241     
=========================================
- Hits       223682   221613   -2069     
+ Misses      33971    33693    -278     
+ Partials     4384     4299     -85     
Flag Coverage Δ
dify-ui 94.93% <ø> (ø)
web 85.07% <90.22%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@hyoban hyoban marked this pull request as ready for review July 1, 2026 05:57
@dosubot dosubot Bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jul 1, 2026
@hyoban hyoban enabled auto-merge July 1, 2026 05:57
@dosubot dosubot Bot added the refactor label Jul 1, 2026
@hyoban hyoban added this pull request to the merge queue Jul 1, 2026
@dosubot dosubot Bot added the lgtm This PR has been approved by a maintainer label Jul 1, 2026
Merged via the queue into main with commit edf2126 Jul 1, 2026
38 checks passed
@hyoban hyoban deleted the codex/refactor-main-nav-detail-sidebar branch July 1, 2026 06:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer refactor size:L This PR changes 100-499 lines, ignoring generated files. web This relates to changes on the web.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants