working frontend from @ishikabhoyar

2025-03-22 22:13:00 +05:30
parent 6426be567a
commit c880a924d4
20 changed files with 5948 additions and 0 deletions
--- a/Frontend/.env
+++ b/Frontend/.env
@@ -0,0 +1 @@
+SERVER_URL="http://localhost:8000"
--- a/Frontend/.gitignore
+++ b/Frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/Frontend/README.md
+++ b/Frontend/README.md
@@ -0,0 +1,13 @@
+# VSCode Clone with React and Vite
+
+This project is a VSCode-like code editor built with React and Vite. It features a customizable UI with an activity bar, sidebar, editor area, panel, and status bar, mimicking the look and feel of Visual Studio Code.
+
+## Features
+
+- **Activity Bar**: Switch between different views like Explorer, Search, Source Control, etc.
+- **Sidebar**: Displays file explorer, search results, and source control information.
+- **Editor Area**: Code editor with syntax highlighting and multiple tabs.
+- **Panel**: Terminal, Problems, and Output views.
+- **Status Bar**: Displays status information and provides quick actions.
+
+## Project Structure
--- a/Frontend/eslint.config.js
+++ b/Frontend/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "lucide-react": "^0.483.0",
+    "monaco-editor": "^0.52.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-resizable-panels": "^2.1.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "vite": "^6.2.0"
+  }
+}
--- a/Frontend/public/vite.svg
+++ b/Frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -0,0 +1,13 @@
+import VSCodeUI from "./components/VSCodeUi"
+import "./index.css"
+
+function App() {
+  return (
+    <div className="App">
+      <VSCodeUI />
+    </div>
+  )
+}
+
+export default App
+
--- a/Frontend/src/assets/react.svg
+++ b/Frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/Frontend/src/components/ActivityBar.jsx
+++ b/Frontend/src/components/ActivityBar.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Files, Search, GitBranch, Bug, Package, User, Settings } from "lucide-react";
+
+const ActivityBar = ({ activeTab, toggleSidebar }) => {
+  const tabs = [
+    { id: "explorer", icon: Files, title: "Explorer" },
+    { id: "search", icon: Search, title: "Search" },
+    { id: "git", icon: GitBranch, title: "Source Control" },
+    { id: "debug", icon: Bug, title: "Run and Debug" },
+    { id: "extensions", icon: Package, title: "Extensions" },
+  ];
+
+  return (
+    <div className="activity-bar">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          className={activeTab === tab.id ? "active" : ""}
+          onClick={() => toggleSidebar(tab.id)}
+          title={tab.title}
+        >
+          <tab.icon size={24} />
+        </button>
+      ))}
+      <div style={{ marginTop: "auto" }}>
+        <button title="Accounts">
+          <User size={24} />
+        </button>
+        <button title="Settings">
+          <Settings size={24} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityBar;
--- a/Frontend/src/components/EditorArea.jsx
+++ b/Frontend/src/components/EditorArea.jsx
@@ -0,0 +1,890 @@
+import React from "react";
+import { useState, useRef, useEffect } from "react";
+import Editor from "@monaco-editor/react";
+import { 
+  X, Plus, Save, FileCode, FileText, Folder, ChevronDown, ChevronRight,
+  File, FilePlus, FolderPlus, Trash2, Edit, MoreHorizontal, Play, 
+  Terminal, Loader
+} from "lucide-react";
+import Sidebar from "./Sidebar";
+import Panel from "./Panel";  // Import Panel component
+
+const EditorArea = ({ 
+  sidebarVisible = true, 
+  activeView = "explorer",
+  panelVisible,
+  setPanelVisible 
+}) => {
+  // Store files with their content in state - start with just README.md
+  const [files, setFiles] = useState([
+    { id: "README.md", language: "markdown", content: getDefaultCode("README.md") },
+  ]);
+  
+  const [activeTab, setActiveTab] = useState(files[0]?.id || "");
+  const [isNewFileModalOpen, setIsNewFileModalOpen] = useState(false);
+  const [newFileName, setNewFileName] = useState("");
+  const [newFileType, setNewFileType] = useState("javascript");
+  const [unsavedChanges, setUnsavedChanges] = useState({});
+  
+  // Sidebar state - now receives visibility from props
+  const [sidebarWidth, setSidebarWidth] = useState(250);
+  const [expandedFolders, setExpandedFolders] = useState({});
+  const [fileStructure, setFileStructure] = useState({
+    'src': {
+      type: 'folder',
+      children: {}
+    },
+    'README.md': {
+      type: 'file',
+      language: 'markdown',
+      id: 'README.md'
+    }
+  });
+
+  // Context menu state
+  const [showContextMenu, setShowContextMenu] = useState(false);
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+  const [contextMenuTarget, setContextMenuTarget] = useState(null);
+  
+  const editorRef = useRef(null);
+  const newFileInputRef = useRef(null);
+  const renameInputRef = useRef(null);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renamePath, setRenamePath] = useState('');
+  const [renameValue, setRenameValue] = useState('');
+
+  // Replace terminal states with panel states
+  const [isRunning, setIsRunning] = useState(false);
+  const [showPanel, setShowPanel] = useState(false);
+  const [panelHeight, setPanelHeight] = useState(200);
+  const [terminalOutput, setTerminalOutput] = useState([]);
+  const [activeRunningFile, setActiveRunningFile] = useState(null);
+
+  // Focus the input when new file modal opens
+  useEffect(() => {
+    if (isNewFileModalOpen && newFileInputRef.current) {
+      newFileInputRef.current.focus();
+    }
+  }, [isNewFileModalOpen]);
+
+  // Focus rename input when renaming
+  useEffect(() => {
+    if (isRenaming && renameInputRef.current) {
+      renameInputRef.current.focus();
+    }
+  }, [isRenaming]);
+
+  // Load files and file structure from localStorage on component mount
+  useEffect(() => {
+    const savedFiles = localStorage.getItem("vscode-clone-files");
+    const savedFileStructure = localStorage.getItem("vscode-clone-structure");
+    
+    if (savedFiles) {
+      try {
+        const parsedFiles = JSON.parse(savedFiles);
+        setFiles(parsedFiles);
+        if (parsedFiles.length > 0) {
+          setActiveTab(parsedFiles[0].id);
+        }
+      } catch (error) {
+        console.error("Failed to load saved files:", error);
+      }
+    }
+    
+    if (savedFileStructure) {
+      try {
+        const parsedStructure = JSON.parse(savedFileStructure);
+        setFileStructure(parsedStructure);
+      } catch (error) {
+        console.error("Failed to load file structure:", error);
+      }
+    }
+  }, []);
+
+  // Save files and file structure to localStorage whenever they change
+  useEffect(() => {
+    localStorage.setItem("vscode-clone-files", JSON.stringify(files));
+  }, [files]);
+  
+  useEffect(() => {
+    localStorage.setItem("vscode-clone-structure", JSON.stringify(fileStructure));
+  }, [fileStructure]);
+
+  // Add this effect to handle editor resize when sidebar changes
+  useEffect(() => {
+    // Force editor to readjust layout when sidebar visibility changes
+    if (editorRef.current) {
+      setTimeout(() => {
+        editorRef.current.layout();
+      }, 300); // Small delay to allow transition to complete
+    }
+  }, [sidebarVisible]);
+
+  // Add this effect to sync the panel state with parent component
+  useEffect(() => {
+    if (panelVisible !== undefined) {
+      setShowPanel(panelVisible);
+    }
+  }, [panelVisible]);
+
+  const handleEditorDidMount = (editor) => {
+    editorRef.current = editor;
+  };
+
+  const handleEditorChange = (value) => {
+    // Mark the current file as having unsaved changes
+    setUnsavedChanges(prev => ({
+      ...prev,
+      [activeTab]: true
+    }));
+    
+    // Update the file content in the files array
+    setFiles(files.map(file => 
+      file.id === activeTab ? { ...file, content: value } : file
+    ));
+  };
+
+  const handleCloseTab = (e, fileId) => {
+    e.stopPropagation();
+    
+    if (unsavedChanges[fileId]) {
+      if (!confirm(`You have unsaved changes in ${fileId}. Close anyway?`)) {
+        return;
+      }
+    }
+    
+    // Remove the file from the files array
+    const newFiles = files.filter(file => file.id !== fileId);
+    setFiles(newFiles);
+    
+    // Update unsavedChanges
+    const newUnsavedChanges = { ...unsavedChanges };
+    delete newUnsavedChanges[fileId];
+    setUnsavedChanges(newUnsavedChanges);
+    
+    // If the active tab is closed, set a new active tab
+    if (activeTab === fileId && newFiles.length > 0) {
+      setActiveTab(newFiles[0].id);
+    }
+  };
+
+  const handleCreateNewFile = (e, path = '') => {
+    e?.preventDefault();
+    
+    if (!newFileName) return;
+    
+    const filePath = path ? `${path}/${newFileName}` : newFileName;
+    
+    // Check if file already exists
+    if (files.some(file => file.id === filePath)) {
+      alert(`A file named "${filePath}" already exists.`);
+      return;
+    }
+    
+    // Determine language based on file extension
+    let language = newFileType;
+    const extension = newFileName.split('.').pop().toLowerCase();
+    if (['jsx', 'js', 'ts', 'tsx'].includes(extension)) {
+      language = 'javascript';
+    } else if (['css', 'scss', 'less'].includes(extension)) {
+      language = 'css';
+    } else if (['html', 'htm'].includes(extension)) {
+      language = 'html';
+    } else if (['json'].includes(extension)) {
+      language = 'json';
+    } else if (['md', 'markdown'].includes(extension)) {
+      language = 'markdown';
+    }
+    
+    // Create new file
+    const newFile = {
+      id: filePath,
+      language,
+      content: ''
+    };
+    
+    setFiles([...files, newFile]);
+    setActiveTab(filePath);
+    
+    // Update file structure
+    updateFileStructure(filePath, 'file', language);
+    
+    setNewFileName('');
+    setIsNewFileModalOpen(false);
+  };
+
+  const updateFileStructure = (path, type, language = null) => {
+    const parts = path.split('/');
+    const fileName = parts.pop();
+    let current = fileStructure;
+    
+    // Navigate to the correct folder
+    if (parts.length > 0) {
+      for (const part of parts) {
+        if (!current[part]) {
+          current[part] = { type: 'folder', children: {} };
+        }
+        current = current[part].children;
+      }
+    }
+    
+    // Add the new item to the structure
+    if (type === 'file') {
+      current[fileName] = { type: 'file', language, id: path };
+    } else if (type === 'folder') {
+      current[fileName] = { type: 'folder', children: {} };
+    }
+    
+    // Update the state with the new structure
+    setFileStructure({...fileStructure});
+  };
+
+  const createNewFolder = (path = '') => {
+    const folderName = prompt("Enter folder name:");
+    if (!folderName) return;
+    
+    const folderPath = path ? `${path}/${folderName}` : folderName;
+    updateFileStructure(folderPath, 'folder');
+    
+    // If the folder is inside another folder, expand the parent
+    if (path) {
+      setExpandedFolders({
+        ...expandedFolders,
+        [path]: true
+      });
+    }
+  };
+
+  const handleSaveFile = () => {
+    // Mark current file as saved
+    setUnsavedChanges(prev => ({
+      ...prev,
+      [activeTab]: false
+    }));
+    
+    // In a real app, you would save to the server here
+    console.log(`File ${activeTab} saved!`);
+  };
+
+  const toggleFolder = (folderPath) => {
+    setExpandedFolders({
+      ...expandedFolders,
+      [folderPath]: !expandedFolders[folderPath]
+    });
+  };
+
+  const openFile = (fileId) => {
+    // Check if file exists in files array
+    const fileExists = files.some(file => file.id === fileId);
+    
+    if (!fileExists) {
+      // Determine language from file structure
+      let language = 'text';
+      const parts = fileId.split('/');
+      const fileName = parts.pop();
+      const extension = fileName.split('.').pop().toLowerCase();
+      
+      if (['jsx', 'js', 'ts', 'tsx'].includes(extension)) {
+        language = 'javascript';
+      } else if (['css', 'scss', 'less'].includes(extension)) {
+        language = 'css';
+      } else if (['html', 'htm'].includes(extension)) {
+        language = 'html';
+      } else if (['json'].includes(extension)) {
+        language = 'json';
+      } else if (['md', 'markdown'].includes(extension)) {
+        language = 'markdown';
+      }
+      
+      // Create new file entry
+      const newFile = {
+        id: fileId,
+        language,
+        content: ''
+      };
+      
+      setFiles([...files, newFile]);
+    }
+    
+    setActiveTab(fileId);
+  };
+
+  const handleContextMenu = (e, path, type) => {
+    e.preventDefault();
+    setContextMenuPosition({ x: e.clientX, y: e.clientY });
+    setContextMenuTarget({ path, type });
+    setShowContextMenu(true);
+  };
+
+  const closeContextMenu = () => {
+    setShowContextMenu(false);
+    setContextMenuTarget(null);
+  };
+
+  const deleteItem = (path, type) => {
+    const confirmDelete = confirm(`Are you sure you want to delete ${path}?`);
+    if (!confirmDelete) return;
+    
+    if (type === 'file') {
+      // Remove from files array
+      setFiles(files.filter(file => file.id !== path));
+      
+      // If it was active, set a new active tab
+      if (activeTab === path) {
+        const newActiveTab = files.find(file => file.id !== path)?.id || '';
+        setActiveTab(newActiveTab);
+      }
+      
+      // Remove from unsavedChanges
+      const newUnsavedChanges = { ...unsavedChanges };
+      delete newUnsavedChanges[path];
+      setUnsavedChanges(newUnsavedChanges);
+    }
+    
+    // Remove from file structure
+    const parts = path.split('/');
+    const itemName = parts.pop();
+    let current = fileStructure;
+    let parent = null;
+    
+    // Navigate to the correct folder
+    if (parts.length > 0) {
+      for (const part of parts) {
+        parent = current;
+        current = current[part].children;
+      }
+      
+      // Delete the item
+      delete current[itemName];
+    } else {
+      // Delete top-level item
+      delete fileStructure[itemName];
+    }
+    
+    // Update the state
+    setFileStructure({...fileStructure});
+  };
+
+  const startRenaming = (path, type) => {
+    setRenamePath(path);
+    
+    const parts = path.split('/');
+    const currentName = parts.pop();
+    setRenameValue(currentName);
+    
+    setIsRenaming(true);
+  };
+
+  const handleRename = (e) => {
+    e.preventDefault();
+    
+    if (!renameValue.trim()) return;
+    
+    const parts = renamePath.split('/');
+    const oldName = parts.pop();
+    const parentPath = parts.join('/');
+    const newPath = parentPath ? `${parentPath}/${renameValue}` : renameValue;
+    
+    // Check if this would overwrite an existing file or folder
+    const parts2 = newPath.split('/');
+    const newName = parts2.pop();
+    let current = fileStructure;
+    
+    // Navigate to parent folder
+    for (let i = 0; i < parts2.length; i++) {
+      current = current[parts2[i]].children;
+    }
+    
+    if (current[newName] && renamePath !== newPath) {
+      alert(`An item named "${newName}" already exists at this location.`);
+      return;
+    }
+    
+    // Get the object data
+    const pathParts = renamePath.split('/');
+    let curr = fileStructure;
+    for (let i = 0; i < pathParts.length - 1; i++) {
+      curr = curr[pathParts[i]].children;
+    }
+    const item = curr[pathParts[pathParts.length - 1]];
+    
+    // Delete from old location
+    delete curr[pathParts[pathParts.length - 1]];
+    
+    // Add to new location
+    const newParts = newPath.split('/');
+    curr = fileStructure;
+    for (let i = 0; i < newParts.length - 1; i++) {
+      curr = curr[newParts[i]].children;
+    }
+    curr[newParts[newParts.length - 1]] = item;
+    
+    // If it's a file, update the files array
+    if (item.type === 'file') {
+      const fileIndex = files.findIndex(file => file.id === renamePath);
+      if (fileIndex !== -1) {
+        const updatedFiles = [...files];
+        updatedFiles[fileIndex] = {
+          ...updatedFiles[fileIndex],
+          id: newPath
+        };
+        setFiles(updatedFiles);
+        
+        // Update active tab if necessary
+        if (activeTab === renamePath) {
+          setActiveTab(newPath);
+        }
+        
+        // Update unsavedChanges
+        if (unsavedChanges[renamePath]) {
+          const newUnsavedChanges = { ...unsavedChanges };
+          newUnsavedChanges[newPath] = newUnsavedChanges[renamePath];
+          delete newUnsavedChanges[renamePath];
+          setUnsavedChanges(newUnsavedChanges);
+        }
+      }
+    }
+    
+    setFileStructure({...fileStructure});
+    setIsRenaming(false);
+  };
+
+  const cancelRename = () => {
+    setIsRenaming(false);
+    setRenamePath('');
+    setRenameValue('');
+  };
+
+  const getFileIcon = (fileName) => {
+    const extension = fileName.split('.').pop().toLowerCase();
+    if (['jsx', 'js', 'ts', 'tsx'].includes(extension)) {
+      return <FileCode size={14} className="mr-1 text-yellow-400" />;
+    } else if (['css', 'scss', 'less'].includes(extension)) {
+      return <FileCode size={14} className="mr-1 text-blue-400" />;
+    } else if (['html', 'htm'].includes(extension)) {
+      return <FileCode size={14} className="mr-1 text-orange-400" />;
+    } else if (['md', 'markdown'].includes(extension)) {
+      return <FileText size={14} className="mr-1 text-white" />;
+    }
+    return <FileText size={14} className="mr-1" />;
+  };
+
+  function getDefaultCode(tabId) {
+    switch (tabId) {
+      case "README.md":
+        return `# VS Code Clone Project
+
+## Overview
+This is a simple VS Code clone built with React and Monaco Editor.
+
+## Features
+- File tree navigation
+- Tab management
+- Code editing with Monaco Editor
+- Syntax highlighting
+
+## Getting Started
+1. Create a new file using the + button in the sidebar
+2. Edit your code in the editor
+3. Save changes using the save button
+
+Happy coding!`;
+      default:
+        return "";
+    }
+  }
+
+  const activeFile = files.find(file => file.id === activeTab);
+  
+  // Calculate editor area style based on sidebar visibility
+  const editorAreaStyle = {
+    marginLeft: sidebarVisible ? `${sidebarWidth}px` : '0px',
+    width: `calc(100% - ${sidebarVisible ? sidebarWidth : 0}px)`
+  };
+
+  // Update the run code function to work with backend
+  const handleRunCode = async () => {
+    if (!activeFile) return;
+    
+    // Show the panel
+    setShowPanel(true);
+    if (setPanelVisible) {
+      setPanelVisible(true);
+    }
+    
+    // Set running state
+    setIsRunning(true);
+    setActiveRunningFile(activeFile.id);
+    
+    // Clear previous output and add new command
+    const fileExtension = activeFile.id.split('.').pop().toLowerCase();
+    const language = getLanguageFromExtension(fileExtension);
+    
+    const newOutput = [
+      { type: 'command', content: `$ run ${activeFile.id}` }
+    ];
+    setTerminalOutput(newOutput);
+  
+    try {
+      // Step 1: Submit code to backend
+      const submitResponse = await fetch('http://localhost:8080/submit', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          language: language,
+          code: activeFile.content
+        }),
+      });
+      
+      if (!submitResponse.ok) {
+        throw new Error(`Server error: ${submitResponse.status}`);
+      }
+      
+      const { id } = await submitResponse.json();
+      setTerminalOutput(prev => [...prev, { type: 'output', content: `Job submitted with ID: ${id}` }]);
+      
+      // Step 2: Poll for status until completed or failed
+      let status = 'pending';
+      while (status !== 'completed' && status !== 'failed') {
+        // Add a small delay between polls
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        const statusResponse = await fetch(`http://localhost:8080/status?id=${id}`);
+        if (!statusResponse.ok) {
+          throw new Error(`Status check failed: ${statusResponse.status}`);
+        }
+        
+        const statusData = await statusResponse.json();
+        status = statusData.status;
+        
+        // Update terminal with status (for any status type)
+        setTerminalOutput(prev => {
+          // Update the last status message or add a new one
+          const hasStatus = prev.some(line => line.content.includes('Status:'));
+          if (hasStatus) {
+            return prev.map(line => 
+              line.content.includes('Status:') 
+                ? { ...line, content: `Status: ${status}` } 
+                : line
+            );
+          } else {
+            return [...prev, { type: 'output', content: `Status: ${status}` }];
+          }
+        });
+      }
+      
+      // Get the result for both completed and failed status
+      const resultResponse = await fetch(`http://localhost:8080/result?id=${id}`);
+      if (!resultResponse.ok) {
+        throw new Error(`Result fetch failed: ${resultResponse.status}`);
+      }
+      
+      const { output } = await resultResponse.json();
+      
+      // Format and display output
+      const outputLines = output.split('\n').map(line => ({ 
+        type: status === 'failed' ? 'warning' : 'output', 
+        content: line 
+      }));
+      
+      setTerminalOutput(prev => [
+        ...prev,
+        { 
+          type: status === 'failed' ? 'warning' : 'output', 
+          content: status === 'failed' 
+            ? '------- EXECUTION FAILED -------' 
+            : '------- EXECUTION RESULT -------'
+        },
+        ...outputLines
+      ]);
+      
+      if (status === 'failed') {
+        console.error('Code execution failed:', output);
+      }
+      
+    } catch (error) {
+      setTerminalOutput(prev => [...prev, { type: 'warning', content: `Error: ${error.message}` }]);
+    } finally {
+      // Set running state to false
+      setIsRunning(false);
+    }
+  };
+  
+  // Helper function to convert file extension to language identifier for API
+  const getLanguageFromExtension = (extension) => {
+    const languageMap = {
+      'java': 'java',
+      'c': 'c',
+      'cpp': 'cpp',
+      'py': 'python',
+      'js': 'javascript',
+      'jsx': 'javascript',
+      'ts': 'typescript',
+      'tsx': 'typescript'
+    };
+    
+    return languageMap[extension] || extension;
+  };
+
+  // Update this function to also update parent state
+  const togglePanel = () => {
+    const newState = !showPanel;
+    setShowPanel(newState);
+    if (setPanelVisible) {
+      setPanelVisible(newState);
+    }
+  };
+
+  return (
+    <div className="editor-container">
+      {sidebarVisible && (
+        <Sidebar
+          activeView={activeView}
+          width={sidebarWidth}
+          fileStructure={fileStructure}
+          expandedFolders={expandedFolders}
+          setExpandedFolders={setExpandedFolders}
+          handleContextMenu={handleContextMenu}
+          openFile={openFile}
+          unsavedChanges={unsavedChanges}
+          activeTab={activeTab}
+          isRenaming={isRenaming}
+          renamePath={renamePath}
+          renameValue={renameValue}
+          handleRename={handleRename}
+          renameInputRef={renameInputRef}
+          cancelRename={cancelRename}
+          setIsNewFileModalOpen={setIsNewFileModalOpen}
+          createNewFolder={createNewFolder}
+        />
+      )}
+      
+      <div className="editor-area" style={editorAreaStyle}>
+        <div className="editor-header">
+          <div className="editor-tabs">
+            {files.map((file) => {
+              // Extract just the filename without path for display
+              const displayName = file.id.includes('/') ? 
+                file.id.split('/').pop() : 
+                file.id;
+                
+              return (
+                <div
+                  key={file.id}
+                  className={`editor-tab ${activeTab === file.id ? "active" : ""}`}
+                  onClick={() => setActiveTab(file.id)}
+                  title={file.id} // Show full path on hover
+                >
+                  <span className="tab-name">
+                    {getFileIcon(file.id)}
+                    {displayName} {/* Show just filename, not full path */}
+                    {unsavedChanges[file.id] && ' •'}
+                  </span>
+                  <button 
+                    className="tab-close" 
+                    onClick={(e) => handleCloseTab(e, file.id)}
+                  >
+                    <X size={12} />
+                  </button>
+                </div>
+              );
+            })}
+            <button 
+              className="editor-tab-new"
+              onClick={() => setIsNewFileModalOpen(true)}
+              title="Create new file"
+            >
+              <Plus size={14} />
+            </button>
+          </div>
+          
+          {/* Run controls */}
+          <div className="editor-run-controls">
+            {activeFile && (
+              <>
+                <button 
+                  className="run-button"
+                  onClick={handleRunCode}
+                  disabled={isRunning}
+                  title="Run code"
+                >
+                  {isRunning ? <Loader size={16} className="animate-spin" /> : <Play size={16} />}
+                  <span>Run</span>
+                </button>
+                <button 
+                  className="terminal-toggle-button"
+                  onClick={togglePanel} // Use the new function
+                  title="Toggle terminal"
+                >
+                  <Terminal size={16} />
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="monaco-container" style={{ 
+          height: showPanel ? `calc(100% - ${panelHeight}px - 30px)` : "100%" 
+        }}>
+          {activeFile ? (
+            <Editor
+              height="100%"
+              defaultLanguage={activeFile.language}
+              language={activeFile.language}
+              value={activeFile.content}
+              theme="vs-dark"
+              onMount={handleEditorDidMount}
+              onChange={handleEditorChange}
+              options={{
+                minimap: { enabled: true },
+                scrollBeyondLastLine: false,
+                fontSize: 14,
+                lineNumbers: "on",
+                renderLineHighlight: "all",
+                automaticLayout: true,
+              }}
+            />
+          ) : (
+            <div className="empty-editor-message">
+              <p>No file open. Create a new file or select a file to start editing.</p>
+            </div>
+          )}
+        </div>
+
+        {/* Use Panel component instead of internal terminal */}
+        {showPanel && (
+          <>
+            <div
+              className="resize-handle resize-handle-horizontal"
+              onMouseDown={(e) => {
+                const startY = e.clientY;
+                const startHeight = panelHeight;
+
+                const onMouseMove = (moveEvent) => {
+                  const newHeight = startHeight - (moveEvent.clientY - startY);
+                  if (newHeight > 100 && newHeight < 500) {
+                    setPanelHeight(newHeight);
+                  }
+                };
+
+                const onMouseUp = () => {
+                  document.removeEventListener("mousemove", onMouseMove);
+                  document.removeEventListener("mouseup", onMouseUp);
+                };
+
+                document.addEventListener("mousemove", onMouseMove);
+                document.addEventListener("mouseup", onMouseUp);
+              }}
+            />
+            <Panel 
+              height={panelHeight}
+              terminalOutput={terminalOutput}
+              isRunning={isRunning}
+              activeRunningFile={activeRunningFile}
+              initialTab="terminal"
+              onClose={togglePanel} // Use the new function
+            />
+          </>
+        )}
+
+        <div className="editor-actions">
+          <button 
+            className="editor-action-button"
+            onClick={handleSaveFile}
+            disabled={!activeTab || !unsavedChanges[activeTab]}
+            title="Save file"
+          >
+            <Save size={16} />
+          </button>
+        </div>
+
+        {isNewFileModalOpen && (
+          <div className="modal-overlay">
+            <div className="new-file-modal">
+              <h3>Create New File</h3>
+              <form onSubmit={handleCreateNewFile}>
+                <input
+                  ref={newFileInputRef}
+                  type="text"
+                  placeholder="File name (e.g., NewFile.jsx)"
+                  value={newFileName}
+                  onChange={(e) => setNewFileName(e.target.value)}
+                />
+                <div className="modal-actions">
+                  <button type="button" onClick={() => setIsNewFileModalOpen(false)}>Cancel</button>
+                  <button type="submit">Create</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        )}
+        
+        {/* Context Menu */}
+        {showContextMenu && (
+          <div 
+            className="context-menu"
+            style={{
+              position: 'fixed',
+              top: contextMenuPosition.y,
+              left: contextMenuPosition.x
+            }}
+          >
+            {contextMenuTarget?.type === 'folder' && (
+              <>
+                <div className="context-menu-item" onClick={() => {
+                  createNewFolder(contextMenuTarget.path);
+                  closeContextMenu();
+                }}>
+                  <FolderPlus size={14} className="mr-1" />
+                  New Folder
+                </div>
+                <div className="context-menu-item" onClick={() => {
+                  setNewFileName('');
+                  setIsNewFileModalOpen(true);
+                  closeContextMenu();
+                }}>
+                  <FilePlus size={14} className="mr-1" />
+                  New File
+                </div>
+              </>
+            )}
+            <div className="context-menu-item" onClick={() => {
+              startRenaming(contextMenuTarget.path, contextMenuTarget.type);
+              closeContextMenu();
+            }}>
+              <Edit size={14} className="mr-1" />
+              Rename
+            </div>
+            <div className="context-menu-item delete" onClick={() => {
+              deleteItem(contextMenuTarget.path, contextMenuTarget.type);
+              closeContextMenu();
+            }}>
+              <Trash2 size={14} className="mr-1" />
+              Delete
+            </div>
+          </div>
+        )}
+      </div>
+      
+      {showContextMenu && (
+        <div 
+          className="context-menu-overlay"
+          onClick={closeContextMenu}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditorArea;
+
--- a/Frontend/src/components/Navbar.jsx
+++ b/Frontend/src/components/Navbar.jsx
@@ -0,0 +1,150 @@
+import React from "react"
+"use client"
+
+import Link from "next/link"
+import { ChevronDown } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu"
+
+export function Navbar() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center justify-between">
+        <Link href="/" className="flex items-center space-x-2">
+          <span className="text-xl font-bold">*Azzle</span>
+        </Link>
+
+        <NavigationMenu className="hidden md:flex">
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>
+                Demo <ChevronDown className="h-4 w-4" />
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <div className="grid gap-3 p-6 w-[400px]">
+                  <NavigationMenuLink asChild>
+                    <Link
+                      href="/demo/features"
+                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    >
+                      <div className="text-sm font-medium leading-none">Features</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                        Explore all the features our platform has to offer
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link
+                      href="/demo/pricing"
+                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    >
+                      <div className="text-sm font-medium leading-none">Pricing</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                        View our flexible pricing plans
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                </div>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <Link href="/about" legacyBehavior passHref>
+                <NavigationMenuLink className="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50">
+                  About
+                </NavigationMenuLink>
+              </Link>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>
+                Services <ChevronDown className="h-4 w-4" />
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <div className="grid gap-3 p-6 w-[400px]">
+                  <NavigationMenuLink asChild>
+                    <Link
+                      href="/services/consulting"
+                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    >
+                      <div className="text-sm font-medium leading-none">Consulting</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                        Expert guidance for your business needs
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link
+                      href="/services/implementation"
+                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    >
+                      <div className="text-sm font-medium leading-none">Implementation</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                        Full-service implementation and support
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                </div>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>
+                Pages <ChevronDown className="h-4 w-4" />
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <div className="grid gap-3 p-6 w-[400px]">
+                  <NavigationMenuLink asChild>
+                    <Link
+                      href="/blog"
+                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    >
+                      <div className="text-sm font-medium leading-none">Blog</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                        Read our latest articles and updates
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link
+                      href="/resources"
+                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    >
+                      <div className="text-sm font-medium leading-none">Resources</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                        Helpful guides and documentation
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                </div>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <Link href="/contact" legacyBehavior passHref>
+                <NavigationMenuLink className="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50">
+                  Contact
+                </NavigationMenuLink>
+              </Link>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+
+        <div className="flex items-center space-x-4">
+          <Button variant="ghost" asChild>
+            <Link href="/login">Login</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/signup">Sign up free</Link>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Navbar
--- a/Frontend/src/components/Panel.jsx
+++ b/Frontend/src/components/Panel.jsx
@@ -0,0 +1,173 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import { X } from "lucide-react";
+
+const Panel = ({ 
+  height,
+  terminalOutput = [],
+  isRunning = false,
+  activeRunningFile = null,
+  initialTab = "terminal",
+  onClose
+}) => {
+  const [activeTab, setActiveTab] = useState(initialTab);
+
+  // Set active tab when initialTab changes
+  useEffect(() => {
+    setActiveTab(initialTab);
+  }, [initialTab]);
+
+  const renderTerminal = () => {
+    return (
+      <div className="panel-terminal">
+        {terminalOutput.length > 0 ? (
+          // Render output from EditorArea when available
+          <>
+            {terminalOutput.map((line, index) => (
+              <div key={index} className={`terminal-line ${line.type === 'warning' ? 'terminal-warning' : 'terminal-output'}`}>
+                {line.type === 'command' ? <span className="terminal-prompt">$</span> : ''} {line.content}
+              </div>
+            ))}
+            {isRunning && (
+              <div className="terminal-line">
+                <span className="terminal-cursor"></span>
+              </div>
+            )}
+          </>
+        ) : (
+          // Default terminal content when no output
+          <>
+            <div className="terminal-line">
+              <span className="terminal-prompt">$</span> npm start
+            </div>
+            <div className="terminal-line terminal-output">Starting the development server...</div>
+            <div className="terminal-line terminal-output">Compiled successfully!</div>
+            <div className="terminal-line terminal-output">You can now view vscode-clone in the browser.</div>
+            <div className="terminal-line terminal-output">Local: http://localhost:3000</div>
+            <div className="terminal-line terminal-output">On Your Network: http://192.168.1.5:3000</div>
+            <div className="terminal-line">
+              <span className="terminal-prompt">$</span>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  const renderProblems = () => {
+    return (
+      <div className="panel-problems">
+        <div className="panel-empty-message">No problems have been detected in the workspace.</div>
+      </div>
+    );
+  };
+
+  const renderOutput = () => {
+    return (
+      <div className="panel-output">
+        <div className="output-line">[Extension Host] Extension host started.</div>
+        <div className="output-line">[Language Server] Language server started.</div>
+        {activeRunningFile && (
+          <div className="output-line">[Running] {activeRunningFile}</div>
+        )}
+      </div>
+    );
+  };
+
+  const getTabContent = () => {
+    switch (activeTab) {
+      case "terminal":
+        return renderTerminal();
+      case "problems":
+        return renderProblems();
+      case "output":
+        return renderOutput();
+      default:
+        return <div>Unknown tab</div>;
+    }
+  };
+
+  return (
+    <div className="panel" style={{ height: `${height}px` }}>
+      <div className="panel-tabs">
+        <div
+          className={`panel-tab ${activeTab === "problems" ? "active" : ""}`}
+          onClick={() => setActiveTab("problems")}
+        >
+          <span className="tab-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="8" x2="12" y2="12"></line>
+              <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+          </span>
+          <span className="tab-name">Problems</span>
+        </div>
+        <div className={`panel-tab ${activeTab === "output" ? "active" : ""}`} onClick={() => setActiveTab("output")}>
+          <span className="tab-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="16" x2="12" y2="12"></line>
+              <line x1="12" y1="8" x2="12.01" y2="8"></line>
+            </svg>
+          </span>
+          <span className="tab-name">Output</span>
+        </div>
+        <div
+          className={`panel-tab ${activeTab === "terminal" ? "active" : ""}`}
+          onClick={() => setActiveTab("terminal")}
+        >
+          <span className="tab-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <polyline points="4 17 10 11 4 5"></polyline>
+              <line x1="12" y1="19" x2="20" y2="19"></line>
+            </svg>
+          </span>
+          <span className="tab-name">Terminal</span>
+        </div>
+
+        {/* Add close button */}
+        <div className="panel-actions">
+          <button className="panel-close-btn" onClick={onClose}>
+            <X size={14} />
+          </button>
+        </div>
+      </div>
+
+      <div className="panel-content">{getTabContent()}</div>
+    </div>
+  );
+};
+
+export default Panel;
+
--- a/Frontend/src/components/Sidebar.jsx
+++ b/Frontend/src/components/Sidebar.jsx
@@ -0,0 +1,321 @@
+import React from "react";
+import { useState, useEffect } from "react";
+
+const Sidebar = ({ 
+  activeView, 
+  width, 
+  fileStructure, 
+  expandedFolders, 
+  setExpandedFolders,
+  handleContextMenu,
+  openFile,
+  unsavedChanges,
+  activeTab,
+  isRenaming,
+  renamePath,
+  renameValue,
+  handleRename,
+  renameInputRef,
+  cancelRename,
+  setIsNewFileModalOpen,  // Add this prop
+  createNewFolder 
+}) => {
+  
+  const toggleFolder = (folderPath) => {
+    setExpandedFolders((prev) => ({
+      ...prev,
+      [folderPath]: !prev[folderPath],
+    }));
+  };
+
+  const renderExplorer = () => {
+    const renderFileTree = (structure, path = "") => {
+      if (!structure) return null;
+
+      return Object.entries(structure).map(([name, item]) => {
+        const currentPath = path ? `${path}/${name}` : name;
+
+        if (item.type === "folder") {
+          const isExpanded = expandedFolders[currentPath];
+          return (
+            <div key={currentPath} className="file-tree-item">
+              <div 
+                className="file-tree-folder" 
+                onClick={() => toggleFolder(currentPath)}
+                onContextMenu={(e) => handleContextMenu(e, currentPath, 'folder')}
+              >
+                <span className="folder-icon">
+                  {isExpanded ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="9 18 15 12 9 6"></polyline>
+                    </svg>
+                  )}
+                </span>
+                <span className="folder-icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#75beff"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                  </svg>
+                </span>
+                <span className="folder-name">{name}</span>
+              </div>
+              {isExpanded && (
+                <div className="file-tree-children">
+                  {renderFileTree(item.children, currentPath)}
+                </div>
+              )}
+            </div>
+          );
+        } else {
+          // It's a file
+          const isActive = activeTab === currentPath;
+          return (
+            <div key={currentPath} className="file-tree-item">
+              <div 
+                className={`file-tree-file ${isActive ? 'active' : ''}`}
+                onClick={() => openFile(currentPath)}
+                onContextMenu={(e) => handleContextMenu(e, currentPath, 'file')}
+              >
+                <span className="file-icon">
+                  {getFileIcon(name)}
+                </span>
+                <span className="file-name">
+                  {isRenaming && renamePath === currentPath ? (
+                    <form onSubmit={handleRename}>
+                      <input
+                        ref={renameInputRef}
+                        type="text"
+                        value={renameValue}
+                        onChange={(e) => setRenameValue(e.target.value)}
+                        onBlur={cancelRename}
+                        className="rename-input"
+                      />
+                    </form>
+                  ) : (
+                    <>
+                      {name}
+                      {unsavedChanges[currentPath] && <span className="unsaved-indicator"> •</span>}
+                    </>
+                  )}
+                </span>
+              </div>
+            </div>
+          );
+        }
+      });
+    };
+
+    return (
+      <div className="sidebar-section">
+        <div className="sidebar-title">
+          <span>EXPLORER</span>
+          <div className="sidebar-actions">
+            <button className="sidebar-action" onClick={() => createNewFolder()}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none" 
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                <line x1="12" y1="11" x2="12" y2="17"></line>
+                <line x1="9" y1="14" x2="15" y2="14"></line>
+              </svg>
+            </button>
+            <button className="sidebar-action" onClick={() => setIsNewFileModalOpen(true)}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                <polyline points="14 2 14 8 20 8"></polyline>
+                <line x1="12" y1="12" x2="12" y2="18"></line>
+                <line x1="9" y1="15" x2="15" y2="15"></line>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div className="file-tree">{renderFileTree(fileStructure)}</div>
+      </div>
+    );
+  };
+
+  const getFileIcon = (fileName) => {
+    const extension = fileName.split('.').pop().toLowerCase();
+    
+    if (['jsx', 'js', 'ts', 'tsx'].includes(extension)) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#e6db74"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+        </svg>
+      );
+    } else if (['css', 'scss', 'less'].includes(extension)) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#66d9ef"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+        </svg>
+      );
+    } else if (['md', 'markdown'].includes(extension)) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#ffffff"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+        </svg>
+      );
+    }
+    
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+        <polyline points="14 2 14 8 20 8"></polyline>
+      </svg>
+    );
+  };
+
+  const renderSearch = () => {
+    return (
+      <div className="sidebar-section">
+        <div className="sidebar-title">SEARCH</div>
+        <div className="sidebar-search">
+          <div className="search-input-container">
+            <input type="text" placeholder="Search" className="search-input" />
+            <span className="search-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderGit = () => {
+    return (
+      <div className="sidebar-section">
+        <div className="sidebar-title">SOURCE CONTROL</div>
+        <div className="sidebar-empty-message">No changes detected</div>
+      </div>
+    );
+  };
+
+  const renderContent = () => {
+    switch (activeView) {
+      case "explorer":
+        return renderExplorer();
+      case "search":
+        return renderSearch();
+      case "git":
+        return renderGit();
+      default:
+        return <div className="sidebar-empty-message">Content for {activeView}</div>;
+    }
+  };
+
+  return (
+    <div className="sidebar" style={{ width: `${width}px` }}>
+      {renderContent()}
+    </div>
+  );
+};
+
+export default Sidebar;
+
--- a/Frontend/src/components/StatusBar.jsx
+++ b/Frontend/src/components/StatusBar.jsx
@@ -0,0 +1,105 @@
+import React from "react";
+"use client"
+
+const StatusBar = ({ togglePanel, panelVisible }) => {
+  return (
+    <div className="status-bar">
+      <div className="status-bar-left">
+        <div className="status-item">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="6" y1="3" x2="6" y2="15"></line>
+            <circle cx="18" cy="6" r="3"></circle>
+            <circle cx="6" cy="18" r="3"></circle>
+            <path d="M18 9a9 9 0 0 1-9 9"></path>
+          </svg>
+          <span>main</span>
+        </div>
+
+        <div className="status-item">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+          <span>0 errors</span>
+        </div>
+
+        <button className="status-item status-button" onClick={togglePanel}>
+          <span>{panelVisible ? "Hide Terminal" : "Show Terminal"}</span>
+        </button>
+      </div>
+
+      <div className="status-bar-right">
+        <div className="status-item">
+          <span>Ln 1, Col 1</span>
+        </div>
+
+        <div className="status-item">
+          <span>Spaces: 2</span>
+        </div>
+
+        <div className="status-item">
+          <span>UTF-8</span>
+        </div>
+
+        <div className="status-item">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
+            <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
+            <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
+            <line x1="12" y1="20" x2="12.01" y2="20"></line>
+          </svg>
+          <span>Connected</span>
+        </div>
+
+        <div className="status-item">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default StatusBar
+
--- a/Frontend/src/components/VSCodeUI.jsx
+++ b/Frontend/src/components/VSCodeUI.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+"use client"
+
+import { useState, useEffect } from "react"
+import ActivityBar from "./ActivityBar"
+import EditorArea from "./EditorArea"
+import StatusBar from "./StatusBar"
+
+const VSCodeUI = () => {
+  const [activeView, setActiveView] = useState("explorer")
+  const [sidebarVisible, setSidebarVisible] = useState(true)
+  const [panelVisible, setPanelVisible] = useState(true)
+  const [panelHeight, setPanelHeight] = useState(200)
+
+  // Effect to handle resize when sidebar visibility changes
+  useEffect(() => {
+    // Force layout recalculation
+    window.dispatchEvent(new Event('resize'));
+  }, [sidebarVisible]);
+
+  const toggleSidebar = (view) => {
+    if (activeView === view && sidebarVisible) {
+      setSidebarVisible(false)
+    } else {
+      setActiveView(view)
+      setSidebarVisible(true)
+    }
+  }
+
+  const togglePanel = () => {
+    setPanelVisible(!panelVisible)
+  }
+
+  return (
+    <div className="vscode-container">
+      <ActivityBar activeTab={activeView} toggleSidebar={toggleSidebar} />
+      <div className="vscode-main">
+        <div className="editor-container">
+          <EditorArea 
+            sidebarVisible={sidebarVisible} 
+            activeView={activeView}
+            panelVisible={panelVisible}
+            setPanelVisible={setPanelVisible}
+          />
+          
+          {/* Remove the duplicate Panel component from here */}
+        </div>
+      </div>
+      <StatusBar togglePanel={togglePanel} panelVisible={panelVisible} />
+    </div>
+  )
+}
+
+export default VSCodeUI
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
--- a/Frontend/src/main.jsx
+++ b/Frontend/src/main.jsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/Frontend/vite.config.js
+++ b/Frontend/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>