Adding Sidebar and empty scene context

sotopia-lab · Nov 22, 2024 · ef126e1 · ef126e1
1 parent 2fcdd4c
commit ef126e1
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 29 deletions.
diff --git a/examples/experimental/nodes/frontend/package-lock.json b/examples/experimental/nodes/frontend/package-lock.json
diff --git 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
@@ -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;
diff --git 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
@@ -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
@@ -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;
+  }
diff --git a/examples/experimental/nodes/frontend/src/components/Sidebar/SceneContext.tsx 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>
+  );
+};
diff --git a/examples/experimental/nodes/frontend/src/components/Sidebar/Sidebar.css 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;
+  }