chore(repo): create branch for layout collaboration

[petervachon]

This branch tests the process for creating and contributing new page layouts.

Initial PR creates a unique link to share with team members for feedback and collaboration.

[github-actions]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-canvas	🟢 Ready	Preview, Logs	Jan 28, 2026, 02:22:41 AM
apollo-ui-react	🟢 Ready	Preview, Logs	Jan 28, 2026, 02:21:27 AM
apollo-vertex	🟢 Ready	Preview, Logs	Jan 28, 2026, 02:20:25 AM
apollo-wind	🟢 Ready	Preview, Logs	Jan 28, 2026, 02:20:01 AM

[github-actions]

🤖 AI Code Review (Claude)

⚠️ Automated Review: This is an AI-generated review. Use as guidance, not gospel.

Code Review: Page Layout Collaboration Templates

Summary

This PR introduces a new "Page Layouts" section to the apollo-vertex app with three page layout templates (Dashboard, Detail, and List). The main addition is a comprehensive DashboardLayoutTemplate with interactive features like dynamic data generation, multiple view states, and various chart components. The Detail and List templates are minimal placeholders.

Code Quality

✅ Positive Aspects

• Good component organization with reusable chart components (DonutChart, Sparkline, TrendChart, GradientBars, UserActivityBars)
• Clean separation of template components in a dedicated /templates folder
• Responsive design considerations with proper z-index management

⚠️ Issues to Address

1. Large Component Size: DashboardLayoutTemplate.tsx (1021 lines) is extremely large and difficult to maintain. This should be broken down into smaller, focused components:

   • Extract the hero section into its own component
   • Create separate components for each card type
   • Move state management logic to custom hooks
   • Consider extracting the background rendering logic

2. Hard-coded Magic Values: Multiple hard-coded values throughout:

   z-[10001] // In dropdown-menu and select components
   left: '-208px', top: '-252px' // In background gradients

   These should be constants with descriptive names or CSS custom properties.

3. Inconsistent Z-Index Management: The PR modifies z-index values in multiple places (z-50 → z-[10001]) without clear documentation of the stacking context strategy. This can lead to z-index conflicts.

4. Type Path Reference Change:

   -import "./.next/types/routes.d.ts";
   +import "./.next/dev/types/routes.d.ts";

   This change in next-env.d.ts appears to be an auto-generated file modification. Verify this won't break production builds.

5. Missing Prop Types Documentation: Complex components like DashboardLayoutTemplate would benefit from JSDoc comments explaining the purpose and behavior.

6. Inline Styles: Extensive use of inline styles throughout the components. While acceptable for dynamic values, static styles should be in CSS classes for better maintainability.

Type Safety

✅ Good: All new components have proper TypeScript interfaces defined for their props.

⚠️ Could Improve:

• Some state variables could benefit from explicit typing rather than relying on inference
• The backgroundMode prop could use a union type instead of string:

  backgroundMode?: 'flat' | 'default' | 'expressive';

Testing

⚠️ Not Applicable: As noted in the project context, playground apps don't require tests. However, the reusable chart components (DonutChart, Sparkline, etc.) may warrant tests if they're intended for use outside the playground.

Performance

⚠️ Concerns

1. Large State Objects: The component manages extensive state that could benefit from useMemo or state reducers:

   const [cardData, setCardData] = useState({ /* 14 properties */ });
   const [issueBreakdown, setIssueBreakdown] = useState([/* array data */]);
   // ... 7 more state variables

2. Complex Data Generation: The generateNewData() function performs many calculations and random operations that could impact performance when called frequently.

3. Animation Performance: Multiple simultaneous transitions and animations (expressive backgrounds, card expansions) without optimization techniques like will-change or GPU acceleration hints.

4. SVG Rendering: Chart components render SVGs that recalculate on every render. Consider memoization:

   const chartPath = useMemo(() => calculatePath(data), [data]);

Security

✅ No Issues Found:

• No XSS vulnerabilities detected
• No unsafe operations on user input
• External avatar URLs use trusted unsplash.com domain
• All dynamic content is properly handled by React

Additional Observations

1. Package Dependencies: Adding chart.js and react-chartjs-2 to root package.json but not using them in the actual implementation. The PR implements custom chart components instead. Consider removing these unused dependencies.

2. Background Mode Logic: The backgroundMode prop is passed to ShellLayout but the template also implements its own expressive background logic with isInputFocused. This creates duplicate/conflicting background rendering logic.

3. Accessibility: Missing ARIA labels and keyboard navigation support for interactive elements like the expandable cards.

4. Fullscreen Toggle: The FullscreenShellToggle component manipulates DOM elements directly through refs and parent traversal, which is fragile:

   const shellElement = container.closest('[class*="h-screen"]')?.parentElement;

   Consider a more robust approach using context or CSS classes.

Recommendation

REQUEST_CHANGES

Required Changes:

1. Refactor DashboardLayoutTemplate: Break down into smaller components (max 300 lines per component)
2. Remove unused dependencies: Delete chart.js and react-chartjs-2 from package.json if not being used
3. Fix z-index strategy: Document and standardize z-index values across the application
4. Extract magic numbers: Create constants for hard-coded positioning values

Suggested Improvements (Non-blocking):

• Add performance optimizations (memoization) to chart components
• Improve accessibility with ARIA labels
• Consider using CSS custom properties for theming values
• Add JSDoc comments to complex components
• Refactor the background mode rendering to avoid duplication

The core functionality is sound and demonstrates good React patterns, but the component size and organization need improvement before merging.

---

This automated review is temporary for solo development. Will be replaced with human reviews once the team grows.

[github-actions]

⚠️ AI Review: Please review the concerns raised above before merging.

[CalinaCristian]

Current Stack

• main
  • chore(repo): create branch for layout collaboration #131 testing0122 ← THIS PR

Managed with stacked-prs