Task 1: Implement Code Splitting for Heavy Modals

Priority: High | Impact: Initial load time, bundle size
Addresses: Performance & Code Splitting

Problem

Heavy modal components (like GithubExportModal, GithubImportModal, PreviewPRModal) are imported statically in
src/components/layout/index.tsx. These are rarely used but add to the initial JavaScript bundle size.

Proposed Changes

[MODIFY] src/components/layout/index.tsx

• Convert static imports of heavy modals to lazy imports using React.lazy.
• Wrap these lazy-loaded modals in a <Suspense> boundary.

[NEW] src/components/modal-loading-fallback/index.tsx

Create a loading fallback component (e.g., a centered spinner) to display while the modal chunk is loading.

Benefits

• Reduces initial bundle size by ~30-50KB.
• Modal code only downloads when the user actually opens it.
• Faster Time to Interactive.

Verification

• Build production bundle and compare bundle sizes before/after.
• Verify modals still open correctly with the loading state.
• Check the network tab to confirm lazy loading behavior.

Task 2: Create a Modal Registry System

Priority: Medium | Impact: Scalability, maintainability
Addresses: Modal Architecture Refactoring

Problem

The current Modals component uses a large if-else chain to render modals, which is hard to maintain and extend.

Proposed Changes

[NEW] src/lib/modal-registry.ts

Create a modal registry system that allows registering modal components with metadata (slug, priority, lazy loading status).

[MODIFY] src/components/layout/index.tsx

Refactor Modals to use the registry instead of the hardcoded if-else chain. The registry should handle resolving which modal to display
based on the active modal state.

Verification

• All modals open and close correctly.
• Priority system prevents modal stacking issues.

Task 3: Centralize Breakpoint Constants

Priority: Low | Impact: Maintainability, consistency
Addresses: Mobile Responsiveness

Problem

The codebase contains scattered hardcoded breakpoint values (e.g., 875px, 600px). src/lib/state/redux/slice-ui.ts explicitly has a //
@todo: Centralize these breakpoint sizes. comment.

Proposed Changes

[NEW] src/lib/constants/breakpoints.ts

Create centralized breakpoint constants (mobile, tablet, desktop) and helper functions (isMobile(), isTablet(), etc.).

[MODIFY] src/lib/state/redux/slice-ui.ts

Replace the hardcoded 875 check with the imported isMobile() helper.

[NEW] src/styles/_breakpoints.css

Create CSS custom properties for breakpoints to be used in stylesheets.

Verification

• Verify responsive behavior matches previous implementation.
• Check mobile/tablet/desktop layouts render correctly.