Update frontend/src/Layout.jsx

frontend/src/Layout.jsx

@@ -1,3 +1,5 @@
+// frontend/src/Layout.jsx
+
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { createPageUrl } from "./utils";
@@ -6,17 +8,16 @@ import {
   LayoutDashboard,
   History as HistoryIcon,
   ChevronLeft,
-  Sparkles
+  Sparkles,
 } from "lucide-react";
-
-import { cn } from "./lib/utils";
+import { cn } from "@/lib/utils";
 
 export default function Layout({ children, currentPageName }) {
   const [collapsed, setCollapsed] = useState(false);
 
   const navItems = [
     { name: "Dashboard", icon: LayoutDashboard, page: "Dashboard" },
-    { name: "History", icon: HistoryIcon, page: "History" }
+    { name: "History", icon: HistoryIcon, page: "History" },
   ];
 
   return (
@@ -62,7 +63,6 @@ export default function Layout({ children, currentPageName }) {
         <nav className="flex-1 p-3 space-y-1">
           {navItems.map((item) => {
             const isActive = currentPageName === item.page;
-            const Icon = item.icon;
             return (
               <Link
                 key={item.name}
@@ -74,19 +74,21 @@ export default function Layout({ children, currentPageName }) {
                     : "text-slate-500 hover:bg-slate-50 hover:text-slate-700"
                 )}
               >
-                <Icon
+                <item.icon
                   className={cn(
                     "h-5 w-5 flex-shrink-0",
                     isActive ? "text-indigo-600" : "text-slate-400 group-hover:text-slate-600"
                   )}
                 />
-                {!collapsed && <span className="font-medium text-sm">{item.name}</span>}
+                {!collapsed && (
+                  <span className="font-medium text-sm">{item.name}</span>
+                )}
               </Link>
             );
           })}
         </nav>
 
-        {/* Expand button when collapsed */}
+        {/* Collapse Toggle (when collapsed) */}
         {collapsed && (
           <button
             onClick={() => setCollapsed(false)}
@@ -96,7 +98,7 @@ export default function Layout({ children, currentPageName }) {
           </button>
         )}
 
-        {/* Pro badge */}
+        {/* Pro Badge */}
         {!collapsed && (
           <div className="p-3">
             <div className="p-4 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 text-white">
@@ -115,7 +117,7 @@ export default function Layout({ children, currentPageName }) {
         )}
       </aside>
 
-      {/* Main content */}
+      {/* Main Content */}
       <main
         className={cn(
           "flex-1 transition-all duration-300",