Fix visualizer layout issues and refactor App.jsx architecture

[Copilot]

This PR addresses several critical issues with the DSA Website's architecture and user interface:

Issues Fixed

1. Visualizer Width Problem

The search, graph, and greedy algorithm visualizers were constrained to only 50% of the available width due to a grid-template-columns: 1fr 1fr layout. This cramped the visualization space and made it difficult to see complex algorithms clearly.

Before: Visualization area took 50% width
After: Visualization area takes 66% width (2fr vs 1fr for code panel)

2. App.jsx Architectural Problems

The main App component had grown to 650+ lines and contained embedded business logic for linked list pages, violating separation of concerns principles.

Before:

// App.jsx contained inline page components like:
function LinkedListPage({ nodes, setNodes, code, setCode, ... }) {
  // 80+ lines of component logic embedded in App.jsx
}

After:

// Clean imports of dedicated page components
import { 
  DoublyLinkedListPage, 
  SinglyLinkedListPage, 
  CircularLinkedListPage 
} from './features/linkedList/pages'

3. CSS Import Chaos

App.jsx was importing 23 CSS files globally, creating potential style conflicts and violating component encapsulation.

Before: 23 global CSS imports in App.jsx
After: 2 essential global imports, with components managing their own styles

Changes Made

File Structure Improvements

Created a new src/features/linkedList/pages/ directory with extracted page components:

• DoublyLinkedListPage.jsx
• SinglyLinkedListPage.jsx
• CircularLinkedListPage.jsx
• index.js (export aggregator)

Layout Fixes

Updated grid layouts in visualizer templates:

• SearchVisualizerTemplate.css
• GraphVisualizerTemplate.css
• GreedyVisualizerTemplate.css

Changed from grid-template-columns: 1fr 1fr to grid-template-columns: 2fr 1fr to give visualizations more space.

CSS Architecture

Removed 21 CSS imports from App.jsx, leveraging the fact that components already import their own styles. This follows React best practices and eliminates potential style conflicts.

Impact

• 36% reduction in App.jsx file size (650 → 417 lines)
• 91% reduction in global CSS imports (23 → 2 files)
• 32% more space for visualizations (50% → 66% width)
• Better maintainability through proper separation of concerns
• Eliminated style conflicts between components

All changes are backward compatible and preserve existing functionality while significantly improving code organization and user experience.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.