From 89327a3dc28efbba007917cc525bdbdc9351477f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 18 Aug 2025 17:15:46 +0000
Subject: [PATCH 1/4] Initial plan


From 7c2e4d3c0f850020597b8c8a541ec8c432262c03 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 18 Aug 2025 17:22:53 +0000
Subject: [PATCH 2/4] Fix visualizer components width issue - change from 50/50
 to 2:1 layout

Co-authored-by: Prajwal-k-tech <69136413+Prajwal-k-tech@users.noreply.github.com>
---
 src/features/graphs/styles/GraphVisualizerTemplate.css          | 2 +-
 .../greedyAlgorithms/styles/GreedyVisualizerTemplate.css        | 2 +-
 src/features/searchAlgos/styles/SearchVisualizerTemplate.css    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/graphs/styles/GraphVisualizerTemplate.css b/src/features/graphs/styles/GraphVisualizerTemplate.css
index 4cde9ba..3485b54 100644
--- a/src/features/graphs/styles/GraphVisualizerTemplate.css
+++ b/src/features/graphs/styles/GraphVisualizerTemplate.css
@@ -106,7 +106,7 @@
   position: relative;
   z-index: 1;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 2fr 1fr;
   gap: 0.75rem;
   padding: 0.75rem;
 }
diff --git a/src/features/greedyAlgorithms/styles/GreedyVisualizerTemplate.css b/src/features/greedyAlgorithms/styles/GreedyVisualizerTemplate.css
index a39af09..7f5b0b6 100644
--- a/src/features/greedyAlgorithms/styles/GreedyVisualizerTemplate.css
+++ b/src/features/greedyAlgorithms/styles/GreedyVisualizerTemplate.css
@@ -103,7 +103,7 @@
   position: relative;
   z-index: 1;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 2fr 1fr;
   min-height: calc(100vh - 140px);
   gap: 1rem;
   padding: 1rem;
diff --git a/src/features/searchAlgos/styles/SearchVisualizerTemplate.css b/src/features/searchAlgos/styles/SearchVisualizerTemplate.css
index 579a9eb..6dc070a 100644
--- a/src/features/searchAlgos/styles/SearchVisualizerTemplate.css
+++ b/src/features/searchAlgos/styles/SearchVisualizerTemplate.css
@@ -106,7 +106,7 @@
   position: relative;
   z-index: 1;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 2fr 1fr;
   gap: 1rem;
   padding: 1rem;
 }

From 52f89339a6fb54725a68d185861e93894eea3193 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 18 Aug 2025 17:26:54 +0000
Subject: [PATCH 3/4] Refactor App.jsx - extract linked list page components to
 separate files

Co-authored-by: Prajwal-k-tech <69136413+Prajwal-k-tech@users.noreply.github.com>
---
 src/App.jsx                                   | 251 +-----------------
 .../pages/CircularLinkedListPage.jsx          |  89 +++++++
 .../linkedList/pages/DoublyLinkedListPage.jsx |  89 +++++++
 .../linkedList/pages/SinglyLinkedListPage.jsx |  89 +++++++
 src/features/linkedList/pages/index.js        |   3 +
 5 files changed, 276 insertions(+), 245 deletions(-)
 create mode 100644 src/features/linkedList/pages/CircularLinkedListPage.jsx
 create mode 100644 src/features/linkedList/pages/DoublyLinkedListPage.jsx
 create mode 100644 src/features/linkedList/pages/SinglyLinkedListPage.jsx
 create mode 100644 src/features/linkedList/pages/index.js

diff --git a/src/App.jsx b/src/App.jsx
index 8f24c16..b0efe1d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -52,16 +52,11 @@ import CodeViewer from './features/common/components/CodeViewer'
 
 // Feature components - each handles its own visualization
 import LinkedListHome from './features/linkedList/components/LinkedListHome'
-import DoublyLinkedListVisualizer from './features/linkedList/components/DoublyLinkedListVisualizer'
-import SinglyLinkedListVisualizer from './features/linkedList/components/SinglyLinkedListVisualizer'
-import SinglyLinkedListExplanation from './features/linkedList/components/SinglyLinkedListExplanation'
-import SinglyLinkedListCodeViewer from './features/linkedList/components/SinglyLinkedListCodeViewer'
-import CircularLinkedListVisualizer from './features/linkedList/components/CircularLinkedListVisualizer'
-import CircularLinkedListExplanation from './features/linkedList/components/CircularLinkedListExplanation'
-import CircularLinkedListCodeViewer from './features/linkedList/components/CircularLinkedListCodeViewer'
-import DiySection from './features/linkedList/components/DiySection'
-import DoublyLinkedListExplanation from './features/linkedList/components/DoublyLinkedListExplanation'
-import DoublyLinkedListCodeViewer from './features/linkedList/components/DoublyLinkedListCodeViewer'
+import { 
+  DoublyLinkedListPage, 
+  SinglyLinkedListPage, 
+  CircularLinkedListPage 
+} from './features/linkedList/pages'
 import HomePage from './features/home/components/HomePage'
 import AboutUs from './features/about/components/AboutUs'
 import SortingVisualizer from './features/sorting/components/SortingVisualizer'
@@ -111,240 +106,6 @@ import { generateDoublyLinkedListCode } from './utils/doublyLinkedListCodeGenera
 import { setStorageItem, getStorageItem } from './utils/helpers'
 import { MEMORY_POOL_SIZE } from './constants'
 
-/**
- * LinkedListPage wrapper component
- * Handles state coordination between code viewer and visualizer
- * Manages animation synchronization and memory pool
- */
-function LinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
-  // State for animation coordination between CodeViewer and DoublyLinkedListVisualizer
-  const [currentLine, setCurrentLine] = useState(0);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [currentStep, setCurrentStep] = useState('');
-
-  // Function to handle animation state updates from DoublyLinkedListVisualizer
-  const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
-    setCurrentLine(lineNumber);
-    setCurrentStep(step);
-    setIsAnimating(animating);
-  }, []);
-
-  return (
-    <div className="app-container">
-      <div className="linkedlist-bg-overlay"></div>
-     
-      <motion.header 
-        className="app-header"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8 }}
-      >
-        <Link to="/" className="home-button">
-          <FaHome size={18} />
-          <span>Home</span>
-        </Link>
-        <h1 style={{ flex: 1, textAlign: 'center' }}>Linked List Visualizer</h1>
-      </motion.header>
-
-      <motion.div 
-        className="split-view"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.8, delay: 0.2 }}
-      >
-        <motion.div 
-          className="panel panel-left"
-          initial={{ x: -20 }}
-          animate={{ x: 0 }}
-          transition={{ duration: 0.8, delay: 0.4 }}
-        >
-          <h2>C Implementation</h2>
-          <DoublyLinkedListCodeViewer 
-            code={code} 
-            onChange={handleCodeChange}
-            currentLine={currentLine}
-            isAnimating={isAnimating}
-            nodes={nodes}
-          />
-        </motion.div>
-
-        <motion.div 
-          className="panel panel-right"
-          initial={{ x: 20 }}
-          animate={{ x: 0 }}
-          transition={{ duration: 0.8, delay: 0.4 }}
-        >
-          <h2>Interactive Visualization</h2>
-          <DoublyLinkedListVisualizer 
-            nodes={nodes} 
-            onNodesChange={updateNodesAndCode}
-            onMemoryPoolInit={handleMemoryPoolInit}
-            onAnimationUpdate={handleAnimationUpdate}
-          />
-          <DoublyLinkedListExplanation />
-          <DiySection code={code} />
-        </motion.div>
-      </motion.div>
-    </div>
-  );
-}
-
-/**
- * SinglyLinkedListPage wrapper component
- * Handles state coordination between code viewer and visualizer for singly linked lists
- * Manages animation synchronization and memory pool
- */
-function SinglyLinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
-  // State for animation coordination between CodeViewer and SinglyLinkedListVisualizer
-  const [currentLine, setCurrentLine] = useState(0);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [currentStep, setCurrentStep] = useState('');
-
-  // Function to handle animation state updates from SinglyLinkedListVisualizer
-  const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
-    setCurrentLine(lineNumber);
-    setCurrentStep(step);
-    setIsAnimating(animating);
-  }, []);
-
-  return (
-    <div className="app-container">
-      <div className="linkedlist-bg-overlay"></div>
-     
-      <motion.header 
-        className="app-header"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8 }}
-      >
-        <Link to="/" className="home-button">
-          <FaHome size={18} />
-          <span>Home</span>
-        </Link>
-        <h1 style={{ flex: 1, textAlign: 'center' }}>Singly Linked List Visualizer</h1>
-      </motion.header>
-
-      <motion.div 
-        className="split-view"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.8, delay: 0.2 }}
-      >
-        <motion.div 
-          className="panel panel-left"
-          initial={{ x: -20 }}
-          animate={{ x: 0 }}
-          transition={{ duration: 0.8, delay: 0.4 }}
-        >
-          <h2>C Implementation</h2>
-          <SinglyLinkedListCodeViewer 
-            code={code} 
-            onChange={handleCodeChange}
-            currentLine={currentLine}
-            isAnimating={isAnimating}
-            nodes={nodes}
-          />
-        </motion.div>
-
-        <motion.div 
-          className="panel panel-right"
-          initial={{ x: 20 }}
-          animate={{ x: 0 }}
-          transition={{ duration: 0.8, delay: 0.4 }}
-        >
-          <h2>Interactive Visualization</h2>
-          <SinglyLinkedListVisualizer 
-            nodes={nodes} 
-            onNodesChange={updateNodesAndCode}
-            onMemoryPoolInit={handleMemoryPoolInit}
-            onAnimationUpdate={handleAnimationUpdate}
-          />
-          <SinglyLinkedListExplanation />
-          <DiySection code={code} />
-        </motion.div>
-      </motion.div>
-    </div>
-  );
-}
-
-/**
- * CircularLinkedListPage wrapper component
- * Handles state coordination between code viewer and visualizer for circular linked lists
- * Manages animation synchronization and memory pool
- */
-function CircularLinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
-  // State for animation coordination between CodeViewer and CircularLinkedListVisualizer
-  const [currentLine, setCurrentLine] = useState(0);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [currentStep, setCurrentStep] = useState('');
-
-  // Function to handle animation state updates from CircularLinkedListVisualizer
-  const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
-    setCurrentLine(lineNumber);
-    setCurrentStep(step);
-    setIsAnimating(animating);
-  }, []);
-
-  return (
-    <div className="app-container">
-      <div className="linkedlist-bg-overlay"></div>
-     
-      <motion.header 
-        className="app-header"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8 }}
-      >
-        <Link to="/" className="home-button">
-          <FaHome size={18} />
-          <span>Home</span>
-        </Link>
-        <h1 style={{ flex: 1, textAlign: 'center' }}>Circular Linked List Visualizer</h1>
-      </motion.header>
-
-      <motion.div 
-        className="split-view"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.8, delay: 0.2 }}
-      >
-        <motion.div 
-          className="panel panel-left"
-          initial={{ x: -20 }}
-          animate={{ x: 0 }}
-          transition={{ duration: 0.8, delay: 0.4 }}
-        >
-          <h2>C Implementation</h2>
-          <CircularLinkedListCodeViewer 
-            code={code} 
-            onChange={handleCodeChange}
-            currentLine={currentLine}
-            isAnimating={isAnimating}
-            nodes={nodes}
-          />
-        </motion.div>
-
-        <motion.div 
-          className="panel panel-right"
-          initial={{ x: 20 }}
-          animate={{ x: 0 }}
-          transition={{ duration: 0.8, delay: 0.4 }}
-        >
-          <h2>Interactive Visualization</h2>
-          <CircularLinkedListVisualizer 
-            nodes={nodes} 
-            onNodesChange={updateNodesAndCode}
-            onMemoryPoolInit={handleMemoryPoolInit}
-            onAnimationUpdate={handleAnimationUpdate}
-          />
-          <CircularLinkedListExplanation />
-          <DiySection code={code} />
-        </motion.div>
-      </motion.div>
-    </div>
-  );
-}
-
 // Redirection component for the pathfinding visualizer
 function PathfindingRedirect() {
   useEffect(() => {
@@ -560,7 +321,7 @@ function App() {
             path="/doubly-linkedlist" 
             element={
               <ErrorBoundary>
-                <LinkedListPage
+                <DoublyLinkedListPage
                   nodes={nodes}
                   setNodes={setNodes}
                   code={code}
diff --git a/src/features/linkedList/pages/CircularLinkedListPage.jsx b/src/features/linkedList/pages/CircularLinkedListPage.jsx
new file mode 100644
index 0000000..d439428
--- /dev/null
+++ b/src/features/linkedList/pages/CircularLinkedListPage.jsx
@@ -0,0 +1,89 @@
+import { useState, useCallback } from 'react'
+import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { FaHome } from 'react-icons/fa'
+
+import CircularLinkedListCodeViewer from '../components/CircularLinkedListCodeViewer'
+import CircularLinkedListVisualizer from '../components/CircularLinkedListVisualizer'
+import CircularLinkedListExplanation from '../components/CircularLinkedListExplanation'
+import DiySection from '../components/DiySection'
+
+/**
+ * CircularLinkedListPage - Dedicated page component for circular linked list visualization
+ * Handles state coordination between code viewer and visualizer for circular linked lists
+ * Manages animation synchronization and memory pool
+ */
+function CircularLinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
+  // State for animation coordination between CodeViewer and CircularLinkedListVisualizer
+  const [currentLine, setCurrentLine] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [currentStep, setCurrentStep] = useState('');
+
+  // Function to handle animation state updates from CircularLinkedListVisualizer
+  const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
+    setCurrentLine(lineNumber);
+    setCurrentStep(step);
+    setIsAnimating(animating);
+  }, []);
+
+  return (
+    <div className="app-container">
+      <div className="linkedlist-bg-overlay"></div>
+     
+      <motion.header 
+        className="app-header"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <Link to="/" className="home-button">
+          <FaHome size={18} />
+          <span>Home</span>
+        </Link>
+        <h1 style={{ flex: 1, textAlign: 'center' }}>Circular Linked List Visualizer</h1>
+      </motion.header>
+
+      <motion.div 
+        className="split-view"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+      >
+        <motion.div 
+          className="panel panel-left"
+          initial={{ x: -20 }}
+          animate={{ x: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          <h2>C Implementation</h2>
+          <CircularLinkedListCodeViewer 
+            code={code} 
+            onChange={handleCodeChange}
+            currentLine={currentLine}
+            isAnimating={isAnimating}
+            nodes={nodes}
+          />
+        </motion.div>
+
+        <motion.div 
+          className="panel panel-right"
+          initial={{ x: 20 }}
+          animate={{ x: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          <h2>Interactive Visualization</h2>
+          <CircularLinkedListVisualizer 
+            nodes={nodes} 
+            onNodesChange={updateNodesAndCode}
+            onMemoryPoolInit={handleMemoryPoolInit}
+            onAnimationUpdate={handleAnimationUpdate}
+          />
+          <CircularLinkedListExplanation />
+          <DiySection code={code} />
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}
+
+export default CircularLinkedListPage;
\ No newline at end of file
diff --git a/src/features/linkedList/pages/DoublyLinkedListPage.jsx b/src/features/linkedList/pages/DoublyLinkedListPage.jsx
new file mode 100644
index 0000000..880c7fb
--- /dev/null
+++ b/src/features/linkedList/pages/DoublyLinkedListPage.jsx
@@ -0,0 +1,89 @@
+import { useState, useCallback } from 'react'
+import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { FaHome } from 'react-icons/fa'
+
+import DoublyLinkedListCodeViewer from '../components/DoublyLinkedListCodeViewer'
+import DoublyLinkedListVisualizer from '../components/DoublyLinkedListVisualizer'
+import DoublyLinkedListExplanation from '../components/DoublyLinkedListExplanation'
+import DiySection from '../components/DiySection'
+
+/**
+ * DoublyLinkedListPage - Dedicated page component for doubly linked list visualization
+ * Handles state coordination between code viewer and visualizer
+ * Manages animation synchronization and memory pool
+ */
+function DoublyLinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
+  // State for animation coordination between CodeViewer and DoublyLinkedListVisualizer
+  const [currentLine, setCurrentLine] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [currentStep, setCurrentStep] = useState('');
+
+  // Function to handle animation state updates from DoublyLinkedListVisualizer
+  const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
+    setCurrentLine(lineNumber);
+    setCurrentStep(step);
+    setIsAnimating(animating);
+  }, []);
+
+  return (
+    <div className="app-container">
+      <div className="linkedlist-bg-overlay"></div>
+     
+      <motion.header 
+        className="app-header"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <Link to="/" className="home-button">
+          <FaHome size={18} />
+          <span>Home</span>
+        </Link>
+        <h1 style={{ flex: 1, textAlign: 'center' }}>Doubly Linked List Visualizer</h1>
+      </motion.header>
+
+      <motion.div 
+        className="split-view"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+      >
+        <motion.div 
+          className="panel panel-left"
+          initial={{ x: -20 }}
+          animate={{ x: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          <h2>C Implementation</h2>
+          <DoublyLinkedListCodeViewer 
+            code={code} 
+            onChange={handleCodeChange}
+            currentLine={currentLine}
+            isAnimating={isAnimating}
+            nodes={nodes}
+          />
+        </motion.div>
+
+        <motion.div 
+          className="panel panel-right"
+          initial={{ x: 20 }}
+          animate={{ x: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          <h2>Interactive Visualization</h2>
+          <DoublyLinkedListVisualizer 
+            nodes={nodes} 
+            onNodesChange={updateNodesAndCode}
+            onMemoryPoolInit={handleMemoryPoolInit}
+            onAnimationUpdate={handleAnimationUpdate}
+          />
+          <DoublyLinkedListExplanation />
+          <DiySection code={code} />
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}
+
+export default DoublyLinkedListPage;
\ No newline at end of file
diff --git a/src/features/linkedList/pages/SinglyLinkedListPage.jsx b/src/features/linkedList/pages/SinglyLinkedListPage.jsx
new file mode 100644
index 0000000..11dbb61
--- /dev/null
+++ b/src/features/linkedList/pages/SinglyLinkedListPage.jsx
@@ -0,0 +1,89 @@
+import { useState, useCallback } from 'react'
+import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { FaHome } from 'react-icons/fa'
+
+import SinglyLinkedListCodeViewer from '../components/SinglyLinkedListCodeViewer'
+import SinglyLinkedListVisualizer from '../components/SinglyLinkedListVisualizer'
+import SinglyLinkedListExplanation from '../components/SinglyLinkedListExplanation'
+import DiySection from '../components/DiySection'
+
+/**
+ * SinglyLinkedListPage - Dedicated page component for singly linked list visualization
+ * Handles state coordination between code viewer and visualizer for singly linked lists
+ * Manages animation synchronization and memory pool
+ */
+function SinglyLinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
+  // State for animation coordination between CodeViewer and SinglyLinkedListVisualizer
+  const [currentLine, setCurrentLine] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [currentStep, setCurrentStep] = useState('');
+
+  // Function to handle animation state updates from SinglyLinkedListVisualizer
+  const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
+    setCurrentLine(lineNumber);
+    setCurrentStep(step);
+    setIsAnimating(animating);
+  }, []);
+
+  return (
+    <div className="app-container">
+      <div className="linkedlist-bg-overlay"></div>
+     
+      <motion.header 
+        className="app-header"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <Link to="/" className="home-button">
+          <FaHome size={18} />
+          <span>Home</span>
+        </Link>
+        <h1 style={{ flex: 1, textAlign: 'center' }}>Singly Linked List Visualizer</h1>
+      </motion.header>
+
+      <motion.div 
+        className="split-view"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+      >
+        <motion.div 
+          className="panel panel-left"
+          initial={{ x: -20 }}
+          animate={{ x: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          <h2>C Implementation</h2>
+          <SinglyLinkedListCodeViewer 
+            code={code} 
+            onChange={handleCodeChange}
+            currentLine={currentLine}
+            isAnimating={isAnimating}
+            nodes={nodes}
+          />
+        </motion.div>
+
+        <motion.div 
+          className="panel panel-right"
+          initial={{ x: 20 }}
+          animate={{ x: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          <h2>Interactive Visualization</h2>
+          <SinglyLinkedListVisualizer 
+            nodes={nodes} 
+            onNodesChange={updateNodesAndCode}
+            onMemoryPoolInit={handleMemoryPoolInit}
+            onAnimationUpdate={handleAnimationUpdate}
+          />
+          <SinglyLinkedListExplanation />
+          <DiySection code={code} />
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}
+
+export default SinglyLinkedListPage;
\ No newline at end of file
diff --git a/src/features/linkedList/pages/index.js b/src/features/linkedList/pages/index.js
new file mode 100644
index 0000000..aec47c5
--- /dev/null
+++ b/src/features/linkedList/pages/index.js
@@ -0,0 +1,3 @@
+export { default as DoublyLinkedListPage } from './DoublyLinkedListPage'
+export { default as SinglyLinkedListPage } from './SinglyLinkedListPage'  
+export { default as CircularLinkedListPage } from './CircularLinkedListPage'
\ No newline at end of file

From 5f2e08fbe0d55325b71e98258e26357f2d8979d1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 18 Aug 2025 17:30:16 +0000
Subject: [PATCH 4/4] Optimize CSS imports - move from App.jsx to
 component-level imports

Co-authored-by: Prajwal-k-tech <69136413+Prajwal-k-tech@users.noreply.github.com>
---
 src/App.jsx | 24 ++----------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b0efe1d..fdf5490 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -22,28 +22,8 @@ import { FaHome } from 'react-icons/fa'
 // Global styles - imported in order of specificity
 import './App.css'
 
-import './features/linkedList/styles/LinkedListHome.css'
-import './features/linkedList/styles/LinkedList.css'
-import './features/sorting/styles/Sorting.css'
-import './features/tree/styles/TreeVisualizer.css'
-import './features/tree/styles/TreeHome.css'
-import './features/pathfinding/styles/Pathfinding.css'
-import './features/quiz/styles/Quiz.css'
-import './features/quiz/styles/landingpage.css'
-import './features/archive/styles/landingpage.css'
-import './features/archive/styles/Archive.css'
-import './features/searchAlgos/styles/SearchAlgos.css'
-import './features/searchAlgos/styles/SearchHomepage.css'
-import './features/klee/styles/KleeAlgorithm.css'
-import './features/ds2/styles/DS2HomePage.css'
-import './features/graphs/styles/GraphAlgorithmsList.css'
-import './features/graphs/styles/GraphVisualizerTemplate.css'
-import './features/recursion/styles/RecursionVisualizer.css'
-import './features/hashTable/styles/HashTableVisualizer.css'
-import './features/greedyAlgorithms/styles/GreedyAlgorithmsList.css'
-import './features/greedyAlgorithms/styles/GreedyVisualizerTemplate.css'
-import './features/flowcharts/styles/BlockBuilder.css'
-import './features/pointers/styles/PointerVisualization.css'
+// Global common styles used across multiple components
+import './features/common/styles/common.css'
 
 
 // Shared components