use Layout.js

aiida_worktree/web/frontend/src/App.css

@@ -38,113 +38,6 @@
   }
 }
 
-/* Home page sidebar Menu */
-
-.sidebar {
-  width: 50px; /* Initial width */
-  height: 100vh;
-  background-color: #333;
-  padding-top: 20px;
-  position: fixed;
-  transition: width 0.3s;
-  overflow: hidden;
-}
-
-.sidebar:hover {
-  width: 200px; /* Expanded width */
-}
-
-.logo-container {
-  width: 50px; /* Logo container width */
-  text-align: center;
-}
-
-.sidebar img {
-  width: 30px; /* Adjust as per your logo's dimensions */
-  cursor: pointer;
-}
-
-.sidebar nav ul {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 20px;
-}
-
-.sidebar nav ul li {
-  padding: 10px;
-}
-
-.sidebar:hover nav ul li {
-  opacity: 1;
-}
-
-.sidebar nav ul li a {
-  color: white;
-  text-decoration: none;
-}
-
-.content {
-  margin-left: 50px; /* Match the initial width of the sidebar */
-  padding: 20px;
-  transition: margin-left 0.3s;
-}
-
-.sidebar:hover ~ .content {
-  margin-left: 200px; /* Match the expanded width of the sidebar */
-}
-
-/* ... existing styles ... */
-
-.sidebar ul li a {
-  display: flex;
-  align-items: center;
-  color: white;
-  text-decoration: none;
-}
-
-.sidebar ul li a span {
-  margin-left: 10px;
-  display: none; /* Hide text labels by default */
-}
-
-.sidebar:hover ul li a span {
-  display: inline; /* Show text labels on hover */
-}
-
-/* Icon styles */
-.sidebar nav ul li a .fa-icon {
-  min-width: 20px; /* Ensure icons have space */
-}
-
-/* Pagination styles */
-.pagination {
-  display: flex;
-  list-style-type: none;
-  justify-content: center;
-  padding: 0;
-}
-
-.pagination li {
-  margin: 0 5px;
-}
-
-.pagination li a {
-  border: 1px solid #007bff;
-  padding: 5px 10px;
-  text-decoration: none;
-  color: #007bff;
-  border-radius: 5px;
-}
-
-.pagination li a:hover {
-  background-color: #007bff;
-  color: white;
-}
-
-.pagination .active a {
-  background-color: #007bff;
-  color: white;
-}
 
 /* Table styles */
 .table {
@@ -260,3 +153,9 @@
   padding: 10px; /* Optional: Adds some space inside the div */
   text-align: center; /* Optional: Aligns the text to the center */
 }
+
+.worktree-item {
+  display: flex;
+  flex-grow: 1;
+  margin-left: 250px; /* Same as sidebar width */
+}

aiida_worktree/web/frontend/src/App.js

@@ -1,37 +1,26 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHome, faTree, faDotCircle, faCog } from '@fortawesome/free-solid-svg-icons';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Home from './components/Home';
-import WorkTree from './components/WorkTree';
+import WorkTreeTable from './components/WorkTreeTable';
 import Node from './components/Node';
-import WorkTreeGraph from './components/WorkTreeGraph'; // Import the component for the detail page
-import Settings from './components/Settings'; // Import your Settings component
+import WorkTreeItem from './components/WorkTreeItem';
+import Settings from './components/Settings';
+import Layout from './components/Layout'; // Import the Layout component
 import './App.css';
 
 function App() {
   return (
     <Router>
       <div className="App">
-        <div className="sidebar">
-          <nav>
-            <ul>
-              <li><Link to="/"><FontAwesomeIcon icon={faHome} /><span>Home</span></Link></li>
-              <li><Link to="/worktree"><FontAwesomeIcon icon={faTree} /><span>WorkTree</span></Link></li>
-              <li><Link to="/node"><FontAwesomeIcon icon={faDotCircle} /><span>Node</span></Link></li>
-              <li><Link to="/settings"><FontAwesomeIcon icon={faCog} /><span>Settings</span></Link></li>
-            </ul>
-          </nav>
-        </div>
-        <div className="content">
+        <Layout> {/* Wrap the routes with the Layout component */}
           <Routes>
-            <Route path="/worktree" element={<WorkTree />} />
+            <Route path="/worktree" element={<WorkTreeTable />} />
             <Route path="/node" element={<Node />} />
             <Route path="/settings" element={<Settings />} />
             <Route path="/" element={<Home />} />
-            <Route path="/worktree/:pk" element={<WorkTreeGraph />} />
+            <Route path="/worktree/:pk" element={<WorkTreeItem />} />
           </Routes>
-        </div>
+        </Layout>
       </div>
     </Router>
   );

aiida_worktree/web/frontend/src/components/Layout.css

@@ -0,0 +1,78 @@
+
+/* Home page sidebar Menu */
+
+.sidebar {
+  width: 50px; /* Initial width */
+  height: 100vh;
+  background-color: #333;
+  padding-top: 20px;
+  position: fixed;
+  transition: width 0.3s;
+  overflow: hidden;
+}
+
+.sidebar:hover {
+  width: 200px; /* Expanded width */
+}
+
+.logo-container {
+  width: 50px; /* Logo container width */
+  text-align: center;
+}
+
+.sidebar img {
+  width: 30px; /* Adjust as per your logo's dimensions */
+  cursor: pointer;
+}
+
+.sidebar nav ul {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 20px;
+}
+
+.sidebar nav ul li {
+  padding: 10px;
+}
+
+.sidebar:hover nav ul li {
+  opacity: 1;
+}
+
+.sidebar nav ul li a {
+  color: white;
+  text-decoration: none;
+}
+
+.content {
+  margin-left: 50px; /* Match the initial width of the sidebar */
+  padding: 20px;
+  transition: margin-left 0.3s;
+}
+
+.sidebar:hover ~ .content {
+  margin-left: 200px; /* Match the expanded width of the sidebar */
+}
+
+/* ... existing styles ... */
+
+.sidebar ul li a {
+  display: flex;
+  align-items: center;
+  color: white;
+  text-decoration: none;
+}
+
+.sidebar ul li a span {
+  margin-left: 10px;
+  display: none; /* Hide text labels by default */
+}
+
+.sidebar:hover ul li a span {
+  display: inline; /* Show text labels on hover */
+}
+
+/* Icon styles */
+.sidebar nav ul li a .fa-icon {
+  min-width: 20px; /* Ensure icons have space */
+}

aiida_worktree/web/frontend/src/components/Layout.js

@@ -0,0 +1,28 @@
+// src/components/Layout.js
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHome, faTree, faDotCircle, faCog } from '@fortawesome/free-solid-svg-icons';
+import './Layout.css'; // Import layout-specific styles
+
+const Layout = ({ children }) => {
+  return (
+    <div className="App">
+      <div className="sidebar">
+        <nav>
+          <ul>
+            <li><Link to="/"><FontAwesomeIcon icon={faHome} /><span>Home</span></Link></li>
+            <li><Link to="/worktree"><FontAwesomeIcon icon={faTree} /><span>WorkTree</span></Link></li>
+            <li><Link to="/node"><FontAwesomeIcon icon={faDotCircle} /><span>Node</span></Link></li>
+            <li><Link to="/settings"><FontAwesomeIcon icon={faCog} /><span>Settings</span></Link></li>
+          </ul>
+        </nav>
+      </div>
+      <div className="content">
+        {children} {/* This is where your page-specific content will be rendered */}
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

aiida_worktree/web/frontend/src/components/WorkTreeGraph.tsx → aiida_worktree/web/frontend/src/components/WorkTreeItem.tsx

@@ -14,7 +14,7 @@ import {
   LayoutAction,
   TopMenu,
   EditorWrapper,
-} from './WorkTreeGraphStyles'; // Import your styles
+} from './WorkTreeItemStyles'; // Import your styles
 
 
 
@@ -133,7 +133,6 @@ function WorkTreeGraph() {
   ), [worktreeHierarchy, editor, showNodeDetails, selectedNode]); // Specify dependencies
 
   return (
-    <div className="App">
       <PageContainer>
         <TopMenu>
           <Button onClick={() => setSelectedView('Editor')}>Editor</Button>
@@ -155,7 +154,6 @@ function WorkTreeGraph() {
             {editorComponent}
           </EditorWrapper>
       </PageContainer>
-    </div>
   );
 }
 

aiida_worktree/web/frontend/src/components/WorkTreeGraphStyles.ts → aiida_worktree/web/frontend/src/components/WorkTreeItemStyles.ts

@@ -3,8 +3,8 @@ import styled from "styled-components";
 export const PageContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  width: 100vw;
+  height: 95vh;
+  width: 95vw;
   background-color: #f4f4f4;
 `;
 

aiida_worktree/web/frontend/src/components/WorkTreeTable.css

@@ -0,0 +1,46 @@
+/* WorkTree.css */
+
+/* Pagination styles */
+.pagination {
+    display: flex;
+    list-style-type: none;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .pagination li {
+    margin: 0 5px;
+  }
+
+  .pagination li a {
+    border: 1px solid #007bff;
+    padding: 5px 10px;
+    text-decoration: none;
+    color: #007bff;
+    border-radius: 5px;
+  }
+
+  .pagination li a:hover {
+    background-color: #007bff;
+    color: white;
+  }
+
+  .pagination .active a {
+    background-color: #007bff;
+    color: white;
+  }
+
+.action-button {
+    background-color: #007BFF; /* Set the background color */
+    color: #fff; /* Set the text color */
+    border: none;
+    border-radius: 1px;
+    cursor: pointer;
+    margin-right: 16px; /* Add some spacing between buttons */
+    padding: 4px 4px;
+    font-size: 10px; /* Adjust the font size */
+}
+
+.action-button:hover {
+    background-color: #0056b3; /* Change the background color on hover */
+}

aiida_worktree/web/frontend/src/components/WorkTree.js → aiida_worktree/web/frontend/src/components/WorkTreeTable.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { FaPlay, FaPause, FaTrash } from 'react-icons/fa'; // Import icons from react-icons
-import './WorkTree.css'; // Import a custom CSS file for styling
+import './WorkTreeTable.css'; // Import a custom CSS file for styling
 
 
 function WorkTree() {