From ef126e139e9ce17dad6866e416c93e87ca2536fb Mon Sep 17 00:00:00 2001
From: Arpandeep Khatua <arpandeepk@gmail.com>
Date: Thu, 21 Nov 2024 20:57:11 -0800
Subject: [PATCH] Adding Sidebar and empty scene context

---
 .../nodes/frontend/package-lock.json          | 57 ++++++++++++
 .../experimental/nodes/frontend/package.json  |  3 +
 .../experimental/nodes/frontend/src/App.tsx   | 28 ++++--
 .../src/components/CodeEditor/FileSystem.css  | 33 ++++++-
 .../src/components/CodeEditor/FileSystem.tsx  | 86 +++++++++++++++----
 .../src/components/Sidebar/SceneContext.css   |  8 ++
 .../src/components/Sidebar/SceneContext.tsx   | 11 +++
 .../src/components/Sidebar/Sidebar.css        | 24 ++++++
 .../src/components/Sidebar/Sidebar.tsx        | 21 +++++
 9 files changed, 242 insertions(+), 29 deletions(-)
 create mode 100644 examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.css
 create mode 100644 examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.tsx
 create mode 100644 examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.css
 create mode 100644 examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.tsx

diff --git a/examples/experimental/nodes/frontend/package-lock.json b/examples/experimental/nodes/frontend/package-lock.json
index 6caed8a0..8253eb3a 100644
--- a/examples/experimental/nodes/frontend/package-lock.json
+++ b/examples/experimental/nodes/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "@types/node": "^16.18.119",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "@types/react-resizable": "^3.0.8",
         "@uiw/codemirror-theme-github": "^4.23.6",
         "@uiw/react-codemirror": "^4.23.6",
         "class-variance-authority": "^0.7.0",
@@ -27,6 +28,8 @@
         "lucide-react": "^0.460.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
+        "react-resizable": "^3.0.5",
         "react-scripts": "5.0.1",
         "socket.io-client": "^4.8.1",
         "tailwind-merge": "^2.5.4",
@@ -4157,6 +4160,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-resizable": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-3.0.8.tgz",
+      "integrity": "sha512-Pcvt2eGA7KNXldt1hkhVhAgZ8hK41m0mp89mFgQi7LAAEZiaLgm4fHJ5zbJZ/4m2LVaAyYrrRRv1LHDcrGQanA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -14346,12 +14358,44 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz",
+      "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/react-draggable/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "license": "MIT"
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14367,6 +14411,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/examples/experimental/nodes/frontend/package.json b/examples/experimental/nodes/frontend/package.json
index 4be66871..f22fa3a1 100644
--- a/examples/experimental/nodes/frontend/package.json
+++ b/examples/experimental/nodes/frontend/package.json
@@ -14,6 +14,7 @@
     "@types/node": "^16.18.119",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/react-resizable": "^3.0.8",
     "@uiw/codemirror-theme-github": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "class-variance-authority": "^0.7.0",
@@ -22,6 +23,8 @@
     "lucide-react": "^0.460.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-resizable": "^3.0.5",
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^2.5.4",
diff --git a/examples/experimental/nodes/frontend/src/App.tsx b/examples/experimental/nodes/frontend/src/App.tsx
index 61f84e2a..ceb7a2b1 100644
--- a/examples/experimental/nodes/frontend/src/App.tsx
+++ b/examples/experimental/nodes/frontend/src/App.tsx
@@ -6,10 +6,9 @@ import { FileSystem } from './components/CodeEditor/FileSystem';
 import { Terminal } from './components/Terminal/Terminal';
 import { ChatInterface } from './components/ChatInterface/ChatInterface';
 import { Browser } from './components/Browser/Browser';
+import { Sidebar } from './components/Sidebar/Sidebar';
+import { SceneContext } from './components/Sidebar/SceneContext';
 
-// const socket = io();
-
-// Add this to your frontend code
 const socket = io('http://localhost:8000', {
   transports: ['websocket'],
   reconnection: true
@@ -27,6 +26,8 @@ type FilesType = {
   [key: string]: string;
 };
 
+type PanelOption = 'fileSystem' | 'sceneContext';
+
 const App: React.FC = () => {
   const [files, setFiles] = useState<FilesType>({
     "/workspace/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Document</title>\n</head>\n<body>\n    <h1>Hello World</h1>\n</body>\n</html>",
@@ -40,6 +41,7 @@ const App: React.FC = () => {
   const [terminalMessages, setTerminalMessages] = useState<string[]>([]);
   const [activeTab, setActiveTab] = useState<'editor' | 'browser'>('editor');
   const [browserUrl, setBrowserUrl] = useState('https://example.com');
+  const [activePanel, setActivePanel] = useState<PanelOption>('fileSystem');
 
   useEffect(() => {
     const handleNewMessage = (data: any) => {
@@ -100,12 +102,24 @@ const App: React.FC = () => {
     }
   };
 
+  const handleSidebarSelect = (option: PanelOption) => {
+    setActivePanel(option);
+  };
+
   return (
     <div className="App">
+      <Sidebar onSelect={handleSidebarSelect} />
       <div id="ide-container">
-        <div id="file-explorer">
-          <FileSystem onFileSelect={setCurrentFile} />
-        </div>
+        {activePanel === 'fileSystem' && (
+          <div id="file-explorer">
+            <FileSystem onFileSelect={setCurrentFile} />
+          </div>
+        )}
+        {activePanel === 'sceneContext' && (
+          <div id="scene-context">
+            <SceneContext />
+          </div>
+        )}
         <div id="code-interface">
           <div className="tabs">
             <button
@@ -144,4 +158,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.css b/examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.css
index 770c8dfc..0e3bfda6 100644
--- a/examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.css
+++ b/examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.css
@@ -20,17 +20,44 @@
   .file-item {
     display: flex;
     align-items: center;
-    padding: 3px 12px;
+    padding: 3px 0;
     cursor: pointer;
     font-size: 13px;
     color: #cccccc;
+    user-select: none;
+  }
+  
+  .folder-arrow {
+    display: flex;
+    align-items: center;
+    margin-right: 4px;
+    color: #c5c5c5;
+    width: 14px;
+    height: 14px;
+  }
+  
+  /* Language-specific icon colors */
+  .html-icon { color: #e34f26; }
+  .css-icon { color: #264de4; }
+  .js-icon { color: #f0db4f; }
+  .python-icon { color: #4b8bbe; }
+  .ts-icon { color: #3178c6; }
+  .json-icon { color: #f0db4f; }
+  .md-icon { color: #ffffff; }
+  
+  .folder-children {
+    transition: all 0.2s ease;
   }
 
   .file-item:hover {
     background-color: #2a2d2e;
   }
 
-  .folder-icon, .file-icon {
+  .folder-icon {
+    margin-right: 6px;
+    color: #dcb67a;  /* Folder color */
+  }
+
+  .file-icon {
     margin-right: 6px;
-    color: #c5c5c5;
   }
diff --git a/examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.tsx b/examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.tsx
index 57b04897..9bff35ba 100644
--- a/examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.tsx
+++ b/examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.tsx
@@ -1,5 +1,9 @@
-import React from 'react';
-import { Folder, File } from 'lucide-react';
+import React, { useState } from 'react';
+import { ChevronRight, ChevronDown, File } from 'lucide-react';
+import {
+  SiHtml5, SiCss3, SiJavascript, SiPython,
+  SiTypescript, SiJson, SiMarkdown
+} from 'react-icons/si';
 import './FileSystem.css'; // Import the CSS file
 
 const files = [
@@ -15,29 +19,73 @@ interface FileSystemProps {
   onFileSelect: (fileName: string) => void;
 }
 
+
+const getFileIcon = (fileName: string) => {
+  const ext = fileName.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'html': return <SiHtml5 size={10} className="file-icon html-icon" />;
+    case 'css': return <SiCss3 size={10} className="file-icon css-icon" />;
+    case 'js': return <SiJavascript size={10} className="file-icon js-icon" />;
+    case 'py': return <SiPython size={10} className="file-icon python-icon" />;
+    case 'ts':
+    case 'tsx': return <SiTypescript size={10} className="file-icon ts-icon" />;
+    case 'json': return <SiJson size={10} className="file-icon json-icon" />;
+    case 'md': return <SiMarkdown size={10} className="file-icon md-icon" />;
+    default: return <File size={10} className="file-icon" />;
+  }
+};
+
 export const FileSystem: React.FC<FileSystemProps> = ({ onFileSelect }) => {
-  const renderItem = (item: any, depth: number = 0) => (
-    <div
-      key={item.name}
-      className="file-item"
-      style={{ paddingLeft: `${depth * 12 + 12}px` }}
-      onClick={() => item.type === 'file' && onFileSelect(`/workspace/${item.name}`)}
-    >
-      {item.type === 'folder' ?
-        <Folder size={16} className="folder-icon" /> :
-        <File size={16} className="file-icon" />
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set(['workspace']));
+
+  const toggleFolder = (folderName: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setExpandedFolders(prev => {
+      const next = new Set(prev);
+      if (next.has(folderName)) {
+        next.delete(folderName);
+      } else {
+        next.add(folderName);
       }
-      <span>{item.name}</span>
-    </div>
-  );
+      return next;
+    });
+  };
+
+  const renderItem = (item: any, depth: number = 0) => {
+    const isExpanded = expandedFolders.has(item.name);
+    
+    return (
+      <div
+        key={item.name}
+        className="file-item"
+        style={{ paddingLeft: `${depth * 16 + (item.type === 'file' ? 20 : 12)}px` }}
+        onClick={() => item.type === 'file' && onFileSelect(`/workspace/${item.name}`)}
+      >
+        {item.type === 'folder' ? (
+          <>
+            <span className="folder-arrow" onClick={(e) => toggleFolder(item.name, e)}>
+              {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+            </span>
+          </>
+        ) : (
+          getFileIcon(item.name)
+        )}
+        <span>{item.name}</span>
+      </div>
+    );
+  };
 
   const renderFolder = (folder: any, depth: number = 0) => (
     <div key={folder.name}>
       {renderItem(folder, depth)}
-      {folder.children && folder.children.map((child: any) =>
-        child.type === 'folder' ?
-          renderFolder(child, depth + 1) :
-          renderItem(child, depth + 1)
+      {expandedFolders.has(folder.name) && folder.children && (
+        <div className="folder-children">
+          {folder.children.map((child: any) =>
+            child.type === 'folder' ?
+              renderFolder(child, depth + 1) :
+              renderItem(child, depth + 1)
+          )}
+        </div>
       )}
     </div>
   );
diff --git a/examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.css b/examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.css
new file mode 100644
index 00000000..1a5a6d62
--- /dev/null
+++ b/examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.css
@@ -0,0 +1,8 @@
+#scene-context {
+    width: 260px;
+    background-color: #252526;
+    color: #cccccc;
+    border-right: 1px solid #333;
+    overflow-y: auto;
+    padding: 0px 0 0 10px;
+  }
\ No newline at end of file
diff --git a/examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.tsx b/examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.tsx
new file mode 100644
index 00000000..717b6215
--- /dev/null
+++ b/examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import './SceneContext.css';
+
+
+export const SceneContext: React.FC = () => {
+  return (
+    <div>
+      {/* Scene context content will go here */}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.css b/examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.css
new file mode 100644
index 00000000..cb556922
--- /dev/null
+++ b/examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.css
@@ -0,0 +1,24 @@
+.sidebar {
+    width: 50px;
+    background-color: #333;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0;
+    border-right: 1px solid #444;
+  }
+  
+  .sidebar-button {
+    background: none;
+    border: none;
+    color: #fff;
+    margin: 5px 0;
+    cursor: pointer;
+    font-size: 12px;
+    text-align: center;
+  }
+  
+  .sidebar-button:hover {
+    background-color: #444;
+  }
\ No newline at end of file
diff --git a/examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.tsx b/examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 00000000..d21ae4e3
--- /dev/null
+++ b/examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { FaCogs, FaFolderOpen } from 'react-icons/fa'; // Import the file icon
+import './Sidebar.css';
+
+interface SidebarProps {
+    onSelect: (option: 'fileSystem' | 'sceneContext') => void;
+  }
+
+export const Sidebar: React.FC<SidebarProps> = ({ onSelect }) => {
+  return (
+    <div className="sidebar">
+      <button className="sidebar-button" onClick={() => onSelect('fileSystem')}>
+        <FaFolderOpen size={24} />
+      </button>
+      <button className="sidebar-button" onClick={() => onSelect('sceneContext')}>
+        <FaCogs size={24} />
+      </button>
+      {/* Add more icons as needed */}
+    </div>
+  );
+};
\ No newline at end of file