- {terminalOutput.length > 0 ? (
- // Render output from EditorArea when available
- <>
- {terminalOutput.map((line, index) => (
-
- {line.type === 'command' ?
$ : ''} {line.content}
+ // Auto-scroll terminal to the bottom when content changes
+ useEffect(() => {
+ if (terminalRef.current) {
+ terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+ }
+ }, [terminalOutput]);
+
+ // Handle keyboard input for the terminal
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (!isRunning) return;
+
+ if (e.key === "Enter") {
+ if (inputBuffer.trim() && onInputSubmit) {
+ e.preventDefault();
+ // Update parent's userInput state directly and call submit in the same function
+ // instead of using setTimeout which creates a race condition
+ onUserInputChange(inputBuffer);
+ onInputSubmit(inputBuffer); // Pass inputBuffer directly to avoid race condition
+ setInputBuffer("");
+ }
+ } else if (e.key === "Backspace") {
+ setInputBuffer((prev) => prev.slice(0, -1));
+ } else if (e.key.length === 1) {
+ setInputBuffer((prev) => prev + e.key);
+ }
+ };
+
+ const terminalElement = terminalRef.current;
+ terminalElement?.addEventListener("keydown", handleKeyDown);
+
+ return () => {
+ terminalElement?.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [isRunning, inputBuffer, onInputSubmit, onUserInputChange]);
+
+ // Render the terminal tab
+ const renderTerminal = () => (
+
terminalRef.current?.focus()} // Focus when clicked
+ >
+ {terminalOutput.length > 0 ? (
+ <>
+ {terminalOutput.map((line, index) => {
+ const typeClass =
+ line.type === "warning"
+ ? "terminal-warning"
+ : line.type === "error"
+ ? "terminal-error"
+ : "terminal-output";
+
+ return (
+
+ {line.timestamp && (
+ {line.timestamp}
+ )}
+ {line.type === "command" && $}
+ {line.content}
- ))}
- {waitingForInput && (
-
- Input:
- onUserInputChange && onUserInputChange(e.target.value)}
- placeholder="Enter input for your program here..."
- onKeyDown={(e) => {
- if (e.key === 'Enter' && onInputSubmit) {
- onInputSubmit();
- }
- }}
- autoFocus
- />
-
- )}
-
- ) : (
- // Default terminal content when no output
- <>
-
-
$ npm start
+ );
+ })}
+
+ {isRunning && (
+
+ $ {inputBuffer}
+
-
Starting the development server...
-
Compiled successfully!
-
You can now view vscode-clone in the browser.
-
Local: http://localhost:3000
-
On Your Network: http://192.168.1.5:3000
-
- $
-
-
- )}
-
- );
- };
+ )}
+
+ ) : (
+
+ $
+
+
+ )}
+
+ );
- const renderProblems = () => {
- return (
-
-
No problems have been detected in the workspace.
-
- );
- };
+ // Render other tabs
+ const renderProblems = () => (
+
+
No problems have been detected in the workspace.
+
+ );
- const renderOutput = () => {
- return (
-
-
[Extension Host] Extension host started.
-
[Language Server] Language server started.
- {activeRunningFile && (
-
[Running] {activeRunningFile}
- )}
-
- );
- };
+ const renderOutput = () => (
+
+
[Extension Host] Extension host started.
+
[Language Server] Language server started.
+ {activeRunningFile && (
+
[Running] {activeRunningFile}
+ )}
+
+ );
+ const renderDebugConsole = () => (
+
+
Debug session not yet started.
+
Press F5 to start debugging.
+
+ );
+
+ const renderPorts = () => (
+
+
No forwarded ports detected.
+
+ );
+
+ const renderComments = () => (
+
+
No comments have been added to this workspace.
+
+ );
+
+ // Get content for the active tab
const getTabContent = () => {
switch (activeTab) {
case "terminal":
@@ -99,6 +148,12 @@ const Panel = ({
return renderProblems();
case "output":
return renderOutput();
+ case "debug":
+ return renderDebugConsole();
+ case "ports":
+ return renderPorts();
+ case "comments":
+ return renderComments();
default:
return
Unknown tab
;
}
@@ -107,76 +162,29 @@ const Panel = ({
return (
-
setActiveTab("problems")}
- >
-
-
-
- Problems
-
-
setActiveTab("output")}>
-
-
-
- Output
-
-
setActiveTab("terminal")}
- >
-
-
-
-
Terminal
-
+ {["problems", "output", "debug", "terminal", "ports", "comments"].map((tab) => (
+
setActiveTab(tab)}
+ >
+ {tab.toUpperCase()}
+
+ ))}
- {/* Add close button */}
+ {/*
+
+
*/}
@@ -186,5 +194,4 @@ const Panel = ({
);
};
-export default Panel;
-
+export default Panel;
\ No newline at end of file
diff --git a/Frontend/src/components/Sidebar.jsx b/Frontend/src/components/Sidebar.jsx
index 1f26a69..c0002d1 100644
--- a/Frontend/src/components/Sidebar.jsx
+++ b/Frontend/src/components/Sidebar.jsx
@@ -31,10 +31,10 @@ const Sidebar = ({
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 (
@@ -75,21 +75,6 @@ const Sidebar = ({
)}
-
-
-
{name}
{isExpanded && (
@@ -137,7 +122,7 @@ const Sidebar = ({
}
});
};
-
+
return (
@@ -184,10 +169,38 @@ const Sidebar = ({
);
};
-
const getFileIcon = (fileName) => {
const extension = fileName.split('.').pop().toLowerCase();
-
+
+ if (fileName.toLowerCase() === 'readme.md') {
+ return (
+
+ );
+ }
+
if (['jsx', 'js', 'ts', 'tsx'].includes(extension)) {
return (