Skip to content

[Refactor] [Studio]: modularize studio shell and dashboard components - #204

Merged
Gautam25Raj merged 1 commit into
masterfrom
refactor/studio-shell-modular-dashboard
Sep 13, 2026
Merged

Gautam25Raj merged 1 commit into
masterfrom
refactor/studio-shell-modular-dashboard

Conversation

@Gautam25Raj

Copy link
Copy Markdown
Collaborator

Description

This PR refactors apps/studio/components/dashboard from a flat, monolithic structure into a modular, production-ready architecture:

  • Lean StudioShell: Reduces StudioShell.tsx from ~300 lines of mixed concerns down to an elegant declarative layout container.
  • Lazy-Loaded Modals (DashboardModalsHost): Uses next/dynamic to code-split WorkspaceSearchModal, NewDocumentModal, and ImportProfileModal, removing heavy modal code from the initial page chunk.
  • Modular Subdirectories:
    • account-menu/: Separates dropdown logic, item rows, and theme toggle.
    • sidebar/: Separates desktop aside (StudioSidebar), header branding (StudioSidebarHeader), and nav groups (StudioNavigation).
    • header/: Separates mobile navigation topbar (MobileHeader) and slide-out drawer (MobileNavDrawer).
    • hooks/: Extracts useCreateDocument (quota checking, tier validation, routing) and useStudioShortcuts (Ctrl+K keyboard listener and custom event bus).
  • Auto-Dismiss Account Menu: Fixes the issue where clicking navigation items (Profile, Billing, AI credits, Settings, Log In, Logout) kept the dropdown open on screen by dismissing the menu upon item selection and route changes.
  • Zero Breaking Changes: Preserves backwards-compatible re-exports across legacy entry paths and adds an index barrel export.
  • Contract Tests: Adds contract tests for navigation items and matching logic.

Linked Issue

Fixes #203

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📝 Documentation update
  • 🧪 Tests (adding or updating tests)

Checklist

  • I have read the CONTRIBUTING.md document.
  • My code follows the style guidelines of this project.
  • I have performed a self-review of my own code.
  • I have commented my code, particularly in hard-to-understand areas.
  • My changes generate no new warnings.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.
  • Any dependent changes have been merged and published in downstream modules.

@Gautam25Raj Gautam25Raj added frontend UI/client-side code ui/ux Design or user experience improvements labels Sep 13, 2026
@Gautam25Raj
Gautam25Raj merged commit 4c8b502 into master Sep 13, 2026
11 checks passed
@Gautam25Raj
Gautam25Raj deleted the refactor/studio-shell-modular-dashboard branch September 13, 2026 14:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend UI/client-side code ui/ux Design or user experience improvements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: Studio account menu does not close when clicking items inside it

1 participant