commit changes on 06 08 2025 001

package-lock.json

@@ -10,13 +10,16 @@
       "dependencies": {
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^7.2.0",
+        "@mui/lab": "^7.0.0-beta.15",
         "@mui/material": "^7.2.0",
+        "@mui/x-tree-view": "^8.9.2",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.11.0",
         "jszip": "^3.10.1",
+        "prismjs": "^1.30.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-scripts": "5.0.1",
@@ -3119,9 +3122,9 @@
       "license": "MIT"
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.2.0.tgz",
-      "integrity": "sha512-d49s7kEgI5iX40xb2YPazANvo7Bx0BLg/MNRwv+7BVpZUzXj1DaVCKlQTDex3gy/0jsCb4w7AY2uH4t4AJvSog==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.0.tgz",
+      "integrity": "sha512-E4eWI90atwCf0rUjuzdlDRI6coA03ZEOAqk5qjEU9IdCLYRlOG65P7WBCpwFYOwDqzUVCHzx8U4q//csULLsOg==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -3154,23 +3157,67 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "7.0.0-beta.15",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-7.0.0-beta.15.tgz",
+      "integrity": "sha512-Paun0L+WrW2gcNI1x9+jSzO+fnV7qvMwBkMX47wkSBPPynhwLoWsK25C/xWUdmGsipApkdWak4c8HhNlqziYOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/system": "^7.3.0",
+        "@mui/types": "^7.4.5",
+        "@mui/utils": "^7.3.0",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^7.3.0",
+        "@mui/material-pigment-css": "^7.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.2.0.tgz",
-      "integrity": "sha512-NTuyFNen5Z2QY+I242MDZzXnFIVIR6ERxo7vntFi9K1wCgSwvIl0HcAO2OOydKqqKApE6omRiYhpny1ZhGuH7Q==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.0.tgz",
+      "integrity": "sha512-t0fb7+zEDTjnVe4hqzNvoGIopzGJ6AyN+qodGRENAFvL/UV3IT/vFIMHloFGnJ9DPmIgWaWasKgefPUU3OsgOQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@mui/core-downloads-tracker": "^7.2.0",
-        "@mui/system": "^7.2.0",
-        "@mui/types": "^7.4.4",
-        "@mui/utils": "^7.2.0",
+        "@babel/runtime": "^7.28.2",
+        "@mui/core-downloads-tracker": "^7.3.0",
+        "@mui/system": "^7.3.0",
+        "@mui/types": "^7.4.5",
+        "@mui/utils": "^7.3.0",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.12",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1",
-        "react-is": "^19.1.0",
+        "react-is": "^19.1.1",
         "react-transition-group": "^4.4.5"
       },
       "engines": {
@@ -3183,7 +3230,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^7.2.0",
+        "@mui/material-pigment-css": "^7.3.0",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3210,13 +3257,13 @@
       "license": "MIT"
     },
     "node_modules/@mui/private-theming": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.2.0.tgz",
-      "integrity": "sha512-y6N1Yt3T5RMxVFnCh6+zeSWBuQdNDm5/UlM0EAYZzZR/1u+XKJWYQmbpx4e+F+1EpkYi3Nk8KhPiQDi83M3zIw==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.0.tgz",
+      "integrity": "sha512-qU6rkH377L9byQrgXVW4rGsXVs7Q7H65Rj4IaITK3Vj2J5IP9nomMxJ77/w5kbJcEcaDEoLK42Ro3qMtHmvd4Q==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@mui/utils": "^7.2.0",
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.3.0",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3237,12 +3284,12 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.2.0.tgz",
-      "integrity": "sha512-yq08xynbrNYcB1nBcW9Fn8/h/iniM3ewRguGJXPIAbHvxEF7Pz95kbEEOAAhwzxMX4okhzvHmk0DFuC5ayvgIQ==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.0.tgz",
+      "integrity": "sha512-O8GNVzpr+ZGzHXCGlYXnc9iSgBldrX3UtPswvLEZX8fyjKfh6wYVvbc7Oa6FdFKdbWWXAnrJ9YTVBQsk2VXDSg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.6",
+        "@babel/runtime": "^7.28.2",
         "@emotion/cache": "^11.14.0",
         "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
@@ -3271,16 +3318,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.2.0.tgz",
-      "integrity": "sha512-PG7cm/WluU6RAs+gNND2R9vDwNh+ERWxPkqTaiXQJGIFAyJ+VxhyKfzpdZNk0z0XdmBxxi9KhFOpgxjehf/O0A==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.0.tgz",
+      "integrity": "sha512-D4VclTIVbMxwrPeDF+PEfwCo9BC+4pYnM1OakA5iFznmE1QRVanyXtpUM3319IhlZolN82EG04iKk3XiiQZmHg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@mui/private-theming": "^7.2.0",
-        "@mui/styled-engine": "^7.2.0",
-        "@mui/types": "^7.4.4",
-        "@mui/utils": "^7.2.0",
+        "@babel/runtime": "^7.28.2",
+        "@mui/private-theming": "^7.3.0",
+        "@mui/styled-engine": "^7.3.0",
+        "@mui/types": "^7.4.5",
+        "@mui/utils": "^7.3.0",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -3311,12 +3358,12 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.4.tgz",
-      "integrity": "sha512-p63yhbX52MO/ajXC7hDHJA5yjzJekvWD3q4YDLl1rSg+OXLczMYPvTuSuviPRCgRX8+E42RXz1D/dz9SxPSlWg==",
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.5.tgz",
+      "integrity": "sha512-ZPwlAOE3e8C0piCKbaabwrqZbW4QvWz0uapVPWya7fYj6PeDkl5sSJmomT7wjOcZGPB48G/a6Ubidqreptxz4g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.6"
+        "@babel/runtime": "^7.28.2"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3328,17 +3375,17 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.2.0.tgz",
-      "integrity": "sha512-O0i1GQL6MDzhKdy9iAu5Yr0Sz1wZjROH1o3aoztuivdCXqEeQYnEjTDiRLGuFxI9zrUbTHBwobMyQH5sNtyacw==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.0.tgz",
+      "integrity": "sha512-YdL6ebwFV7PIOidIsees3HxkZ8hZjj+/atKLuI1ENwvJJ1puiEoLEmuDU72qSbKu911/GeFa7pc7Cn/ZmAj6yQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@mui/types": "^7.4.4",
+        "@babel/runtime": "^7.28.2",
+        "@mui/types": "^7.4.5",
         "@types/prop-types": "^15.7.15",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^19.1.0"
+        "react-is": "^19.1.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -3363,6 +3410,69 @@
       "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
       "license": "MIT"
     },
+    "node_modules/@mui/x-internals": {
+      "version": "8.9.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.9.2.tgz",
+      "integrity": "sha512-qQl0sacWirbvQUdJOrUecsBQkI+vxI3/E1K/Wst6n/rb8ajelsGLMFLQ1PBig73xBT2vADmdcf3XerfH7TKPqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.2.0",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-tree-view": {
+      "version": "8.9.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-8.9.2.tgz",
+      "integrity": "sha512-ExRRhLTwLodeUSUHV7VAkwKfIZmR1jJjv/iTvek3JA0ssyfGyzBVg6bjZtkny8QDRq+TGuvXmHhYTzc08BeZVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-internals": "8.9.2",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -14133,6 +14243,15 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -14811,6 +14930,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -17130,6 +17255,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -5,13 +5,16 @@
   "dependencies": {
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.2.0",
+    "@mui/lab": "^7.0.0-beta.15",
     "@mui/material": "^7.2.0",
+    "@mui/x-tree-view": "^8.9.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.11.0",
     "jszip": "^3.10.1",
+    "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",

src/FileUploadForm.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import axios from "axios";
 import {
   Box,
@@ -17,12 +17,18 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
-  List,
-  ListItem,
-  ListItemText,
+  useMediaQuery,
+  Menu,
+  MenuItem as ContextMenuItem,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import DownloadIcon from "@mui/icons-material/Download";
+import FolderIcon from "@mui/icons-material/Folder";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
+import Prism from './prism-setup';
+import { detectLanguage } from './utils/languageDetect';
 
 const FileUploadForm = () => {
   const [file, setFile] = useState(null);
@@ -32,8 +38,83 @@ const FileUploadForm = () => {
   const [loading, setLoading] = useState(false);
   const [showSnackbar, setShowSnackbar] = useState(false);
   const [showModal, setShowModal] = useState(false);
-  const [fileList, setFileList] = useState([]);
   const [zipBlob, setZipBlob] = useState(null);
+  const [fileListInfo, setFileListInfo] = useState({});
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [expandedIds, setExpandedIds] = useState([]); // ✅ array, not Set
+
+  const [contextAnchor, setContextAnchor] = useState(null);
+  const [contextFile, setContextFile] = useState(null);
+
+  const codeRef = useRef(null);
+
+ 
+
+
+  
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  const buildTree = (files) => {
+    const root = {};
+    for (const path in files) {
+      const parts = path.split("/");
+      let current = root;
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        if (!current[part]) {
+          current[part] = i === parts.length - 1 ? files[path] : {};
+        }
+        current = current[part];
+      }
+    }
+    return root;
+  };
+
+  const renderTree = (node, path = "") => {
+    if (!node || typeof node !== "object") return null;
+
+    return Object.entries(node).map(([key, value]) => {
+      const fullPath = path ? `${path}/${key}` : key;
+      const itemId = fullPath.replaceAll("/", "-");
+      const isFile = value && typeof value.preview !== "undefined";
+
+      return (
+        <TreeItem
+          key={fullPath}
+          itemId={itemId}
+          label={
+            <Box
+              display="flex"
+              alignItems="center"
+              onContextMenu={(e) => handleContextMenu(e, fullPath, value)}
+            >
+              {isFile ? <InsertDriveFileIcon sx={{ mr: 1 }} /> : <FolderIcon sx={{ mr: 1 }} />}
+              <Typography variant="body2">
+                {key}
+                {isFile ? ` (${(value.size / 1024).toFixed(1)} KB)` : ""}
+              </Typography>
+            </Box>
+          }
+          onClick={() => {
+            if (isFile) {
+        setSelectedFile({ name: fullPath, content: value.preview });
+        Prism.highlightAll();
+      } else {
+        setExpandedIds((prev) =>
+          prev.includes(itemId)
+            ? prev.filter((id) => id !== itemId) // collapse
+            : [...prev, itemId] // expand
+        );
+      }
+          }}
+        >
+          {!isFile && renderTree(value, fullPath)}
+        </TreeItem>
+      );
+    });
+  };
 
   const handleDownload = async (e) => {
     e.preventDefault();
@@ -58,12 +139,24 @@ const FileUploadForm = () => {
 
       const JSZip = (await import("jszip")).default;
       const zip = await JSZip.loadAsync(blob);
-      const filenames = Object.keys(zip.files);
-      setFileList(filenames);
+      const fileInfo = {};
+      await Promise.all(
+        Object.entries(zip.files).map(async ([name, file]) => {
+          if (!file.dir) {
+            const content = await file.async("string");
+            fileInfo[name] = {
+              size: file._data.uncompressedSize,
+              preview: content.slice(0, 1000),
+            };
+          }
+        })
+      );
+      setFileListInfo(fileInfo);
+      setExpandedIds([]); // reset tree state
       setShowModal(true);
     } catch (error) {
-      console.error("Error downloading ZIP:", error);
-      alert("Failed to generate project. Check server logs.");
+      console.error("Error:", error);
+      alert("Failed to generate project.");
     } finally {
       setLoading(false);
     }
@@ -81,94 +174,120 @@ const FileUploadForm = () => {
     setShowModal(false);
   };
 
+  const handleContextMenu = (event, filename, value) => {
+    event.preventDefault();
+    if (typeof value.preview === "undefined") return; // not a file
+    setContextFile({ name: filename, content: value.preview });
+    setContextAnchor(event.currentTarget);
+  };
+
+  const handleDownloadFile = () => {
+    if (!contextFile) return;
+    const blob = new Blob([contextFile.content], { type: "text/plain" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = contextFile.name.split("/").pop();
+    a.click();
+    setContextAnchor(null);
+  };
+
+
+// ✅ Expand/collapse logic
+const expandAll = () => {
+  const allPaths = Object.keys(fileListInfo); // files only
+  const allIds = new Set();
+
+  allPaths.forEach((filePath) => {
+    const parts = filePath.split("/");
+    for (let i = 1; i <= parts.length; i++) {
+      const partialPath = parts.slice(0, i).join("/");
+      allIds.add(partialPath.replaceAll("/", "-")); // folder or file
+    }
+  });
+
+  setExpandedIds(Array.from(allIds));
+};
+
+
+const collapseAll = () => {
+  setExpandedIds([]); // ✅ empty array
+};
+
+
+
+
+const { lang, code } = React.useMemo(() => {
+  if (selectedFile && selectedFile.content) {
+    const lines = selectedFile.content.split('\n');
+    const firstLine = lines[0].trim();
+    const hasLang = /^[a-zA-Z]+$/.test(firstLine);
+    const lang = hasLang ? firstLine.toLowerCase() : detectLanguage(selectedFile.content) || 'markdown';
+    const code = hasLang ? lines.slice(1).join('\n') : selectedFile.content;
+    return { lang, code };
+  }
+  return { lang: 'markdown', code: '' };
+}, [selectedFile]);
+
+
+useEffect(() => {
+    if (codeRef.current) {
+      Prism.highlightElement(codeRef.current);
+    }
+  }, [code, lang]);
   return (
-    <Box
-      sx={{
-        backgroundColor: "#121212",
-        minHeight: "100vh",
-        color: "#fff",
-        padding: 4,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
+    <Box sx={{
+      backgroundColor: "#121212",
+      minHeight: "100vh",
+      color: "#fff",
+      padding: 4,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      flexDirection: "column",
+    }}>
       <Paper elevation={6} sx={{ padding: 4, backgroundColor: "#1e1e1e", maxWidth: 600, width: "100%" }}>
         <Box textAlign="center" my={4}>
-          <Typography variant="h4" component="h1">
-            🧠 AI Project Generator
-          </Typography>
+          <Typography variant="h4" component="h1">🧠 AI - Full-Stack Project Generator</Typography>
         </Box>
 
-        <Typography variant="h5" gutterBottom color="primary">
-          📄 Generate Full-Stack Project from Requirements (TXT or PDF)
-        </Typography>
-
         <form onSubmit={handleDownload}>
-          <Grid container spacing={2}>
-            <Grid item xs={12}>
-              <Button
-                variant="contained"
-                component="label"
-                startIcon={<CloudUploadIcon />}
-                fullWidth
-              >
-                {file ? file.name : "Upload Requirement Document"}
-                <input
-                  type="file"
-                  hidden
-                  required
-                  onChange={(e) => setFile(e.target.files[0])}
-                  accept=".pdf,.txt"
-                />
-              </Button>
-            </Grid>
-
-            {/* 👇 Updated: Stack dropdowns one below the other */}
-            <Grid item xs={12}>
+          <Grid container spacing={2} direction="column">
+            <Grid item>
               <FormControl fullWidth>
-                <InputLabel>Frontend</InputLabel>
-                <Select value={frontend} onChange={(e) => setFrontend(e.target.value)} label="Frontend">
-                  <MenuItem value="React">React</MenuItem>
-                  <MenuItem value="Angular">Angular</MenuItem>
-                  <MenuItem value="Vue">Vue</MenuItem>
-                  <MenuItem value="Next.js">Next.js</MenuItem>
-                  <MenuItem value="Svelte">Svelte</MenuItem>
-                  <MenuItem value="HTML/CSS/JS">HTML/CSS/JS</MenuItem>
-                </Select>
+                <Button
+                  variant="contained"
+                  component="label"
+                  startIcon={<CloudUploadIcon />}
+                  fullWidth
+                >
+                  {file ? file.name : "Upload Requirement Document"}
+                  <input type="file" hidden required onChange={(e) => setFile(e.target.files[0])} accept=".pdf,.txt" />
+                </Button>
               </FormControl>
             </Grid>
 
-            <Grid item xs={12}>
-              <FormControl fullWidth>
-                <InputLabel>Backend</InputLabel>
-                <Select value={backend} onChange={(e) => setBackend(e.target.value)} label="Backend">
-                  <MenuItem value="Flask">Flask</MenuItem>
-                  <MenuItem value="Node.js">Node.js</MenuItem>
-                  <MenuItem value="Django">Django</MenuItem>
-                  <MenuItem value="Express.js">Express.js</MenuItem>
-                  <MenuItem value="Spring Boot">Spring Boot</MenuItem>
-                  <MenuItem value="FastAPI">FastAPI</MenuItem>
-                </Select>
-              </FormControl>
-            </Grid>
-
-            <Grid item xs={12}>
-              <FormControl fullWidth>
-                <InputLabel>Database</InputLabel>
-                <Select value={database} onChange={(e) => setDatabase(e.target.value)} label="Database">
-                  <MenuItem value="PostgreSQL">PostgreSQL</MenuItem>
-                  <MenuItem value="MongoDB">MongoDB</MenuItem>
-                  <MenuItem value="MySQL">MySQL</MenuItem>
-                  <MenuItem value="SQLite">SQLite</MenuItem>
-                  <MenuItem value="Firebase">Firebase</MenuItem>
-                  <MenuItem value="Supabase">Supabase</MenuItem>
-                </Select>
-              </FormControl>
-            </Grid>
+            {["Frontend", "Backend", "Database"].map((label, idx) => (
+              <Grid item key={label}>
+                <FormControl fullWidth>
+                  <InputLabel>{label}</InputLabel>
+                  <Select
+                    value={label === "Frontend" ? frontend : label === "Backend" ? backend : database}
+                    onChange={(e) => {
+                      if (label === "Frontend") setFrontend(e.target.value);
+                      else if (label === "Backend") setBackend(e.target.value);
+                      else setDatabase(e.target.value);
+                    }}
+                    label={label}
+                  >
+                    {label === "Frontend" && ["React", "Angular", "Vue", "Next.js", "Svelte", "HTML/CSS/JS"].map(opt => <MenuItem key={opt} value={opt}>{opt}</MenuItem>)}
+                    {label === "Backend" && ["Flask", "Node.js", "Django", "Express.js", "Spring Boot", "FastAPI"].map(opt => <MenuItem key={opt} value={opt}>{opt}</MenuItem>)}
+                    {label === "Database" && ["PostgreSQL", "MongoDB", "MySQL", "SQLite", "Firebase", "Supabase"].map(opt => <MenuItem key={opt} value={opt}>{opt}</MenuItem>)}
+                  </Select>
+                </FormControl>
+              </Grid>
+            ))}
 
-            {/* 👇 Button now comes after selects */}
-            <Grid item xs={12}>
+            <Grid item>
               <Button
                 type="submit"
                 variant="contained"
@@ -184,26 +303,69 @@ const FileUploadForm = () => {
         </form>
       </Paper>
 
-      {/* ✅ File Preview Modal */}
-      <Dialog open={showModal} onClose={() => setShowModal(false)} maxWidth="sm" fullWidth>
-        <DialogTitle>📦 Generated Files Preview</DialogTitle>
+      {/* 📦 Preview Dialog */}
+      <Dialog open={showModal} onClose={() => setShowModal(false)} maxWidth="md" fullWidth>
+        <DialogTitle>📦 Generated Files</DialogTitle>
         <DialogContent dividers>
-          <List dense>
-            {fileList.map((filename, i) => (
-              <ListItem key={i}>
-                <ListItemText primary={filename} />
-              </ListItem>
-            ))}
-          </List>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={5}>
+              <Box mb={1} display="flex" gap={1}>
+                <Button size="small" variant="outlined" onClick={expandAll}>Expand All</Button>
+                <Button size="small" variant="outlined" onClick={collapseAll}>Collapse All</Button>
+              </Box>
+              <SimpleTreeView
+  expandedItems={expandedIds}
+  onExpandedItemsChange={(newItems) => {
+    if (Array.isArray(newItems)) {
+      setExpandedIds(newItems); // ✅ directly set array
+    } else {
+      console.warn("Unexpected expandedItems:", newItems);
+      setExpandedIds([]);
+    }
+  }}
+   onItemToggle={(itemId, isExpanded) => {
+    setExpandedIds((prev) =>
+      isExpanded ? [...prev, itemId] : prev.filter((id) => id !== itemId)
+    );
+  }}
+>
+  {renderTree(buildTree(fileListInfo))}
+</SimpleTreeView>
+            </Grid>
+
+            <Grid item xs={12} md={7}>
+              {selectedFile ? (
+                <>
+                  <Typography variant="subtitle1" gutterBottom>{selectedFile.name}</Typography>
+                  <Paper variant="outlined" sx={{ p: 2, maxHeight: 400, overflowY: "auto", backgroundColor: "#1e1e1e" }}>
+                    <pre className={`line-numbers language-${lang}`} style={{ borderRadius: '8px', overflowX: 'auto' }}>
+  <code ref={codeRef} className={`language-${lang}`}>
+    {code}
+  </code>
+</pre>
+                  </Paper>
+                </>
+              ) : (
+                <Typography color="text.secondary">Select a file to preview its content</Typography>
+              )}
+            </Grid>
+          </Grid>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleZipDownload} variant="contained" color="primary">
-            Download ZIP
-          </Button>
-          <Button onClick={() => setShowModal(false)}>Cancel</Button>
+          <Button onClick={handleZipDownload} variant="contained">Download ZIP</Button>
+          <Button onClick={() => setShowModal(false)}>Close</Button>
         </DialogActions>
       </Dialog>
 
+      {/* 🎯 Context Menu for Download */}
+      <Menu
+        anchorEl={contextAnchor}
+        open={Boolean(contextAnchor)}
+        onClose={() => setContextAnchor(null)}
+      >
+        <ContextMenuItem onClick={handleDownloadFile}>📥 Download File</ContextMenuItem>
+      </Menu>
+
       {/* ✅ Success Snackbar */}
       <Snackbar
         open={showSnackbar}
@@ -211,7 +373,7 @@ const FileUploadForm = () => {
         onClose={() => setShowSnackbar(false)}
         anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
       >
-        <Alert onClose={() => setShowSnackbar(false)} severity="success" sx={{ width: "100%" }}>
+        <Alert severity="success" sx={{ width: "100%" }} onClose={() => setShowSnackbar(false)}>
           ✅ ZIP downloaded successfully!
         </Alert>
       </Snackbar>

src/prism-setup.js

@@ -0,0 +1,32 @@
+// src/prism-setup.js
+import Prism from 'prismjs';
+
+// Prism core styles and plugins
+import 'prismjs/themes/prism-tomorrow.css';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
+
+// Required languages
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-shell-session';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-markup'; // HTML
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-kotlin';
+import 'prismjs/components/prism-swift';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-scala';
+import 'prismjs/components/prism-dart';
+
+export default Prism;

src/utils/languageDetect.js

@@ -0,0 +1,48 @@
+// utils/languageDetect.js
+
+const escapeRegExp = (string) =>
+  string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+export const detectLanguage = (code = '') => {
+  const language_keywords = {
+    python: ['def ', 'print(', 'import ', 'class '],
+  javascript: ['function ', 'console.log(', 'let ', 'const ', 'document.getElementById'],
+  typescript: ['interface ', 'type ', 'let ', 'const ', ': string', ': number'],
+  java: ['import java.', 'ArrayList<', 'System.out', 'void main(', 'public class', 'new '],
+  c: ['#include <stdio.h>', 'printf(', 'scanf(', 'int main('],
+  cpp: ['#include', 'std::', 'cout <<', 'cin >>'],
+  bash: ['#!/bin/bash', 'echo ', 'cd ', 'ls', 'pwd'],
+  shell: ['#!/bin/sh', 'echo ', 'export ', 'fi'],
+  sql: ['SELECT ', 'INSERT ', 'UPDATE ', 'FROM ', 'WHERE ', 'JOIN ', 'DELETE '],
+  html: ['<!DOCTYPE html>', '<html>', '<div>', '<script>'],
+  css: ['color:', 'font-size:', 'margin:', 'padding:'],
+  go: ['package main', 'fmt.Println', 'func main()'],
+  php: ['<?php', 'echo ', '$_', '->'],
+  ruby: ['def ', 'puts ', 'end', 'class '],
+  kotlin: ['fun main(', 'val ', 'var ', 'println('],
+  swift: ['import SwiftUI', 'struct ', 'var body:', 'Text('],
+  rust: ['fn main()', 'println!', 'let mut'],
+  scala: ['object ', 'def ', 'val ', 'println('],
+  dart: ['void main()', 'print(', 'var ', 'class '],
+  };
+
+  let bestMatch = 'plaintext';
+  let maxScore = 0;
+
+  for (const [lang, keywords] of Object.entries(language_keywords)) {
+    let score = 0;
+
+    for (const keyword of keywords) {
+      const regex = new RegExp(escapeRegExp(keyword), 'g');
+      const matches = (code.match(regex) || []).length;
+      score += matches * Math.max(1, keyword.length / 4);
+    }
+
+    if (score > maxScore) {
+      maxScore = score;
+      bestMatch = lang;
+    }
+  }
+
+  return bestMatch;
+};