Merge pull request #12339 from overleaf/ii-react-history-editor-and-change-list-init

[web] History editor and change list initialisation

GitOrigin-RevId: bb7800301d28c296bd524212cd27ddcd8defd149

services/web/frontend/js/features/history/components/change-list/change-list.tsx

@@ -0,0 +1,13 @@
+import ToggleSwitch from './toggle-switch'
+import Main from './main'
+
+function ChangeList() {
+  return (
+    <aside className="change-list">
+      <ToggleSwitch />
+      <Main />
+    </aside>
+  )
+}
+
+export default ChangeList

services/web/frontend/js/features/history/components/change-list/main.tsx

@@ -0,0 +1,5 @@
+function Main() {
+  return <div>Change List</div>
+}
+
+export default Main

services/web/frontend/js/features/history/components/change-list/toggle-switch.tsx

@@ -0,0 +1,5 @@
+function ToggleSwitch() {
+  return <div>Toggle Switch</div>
+}
+
+export default ToggleSwitch

services/web/frontend/js/features/history/components/editor/editor.tsx

@@ -0,0 +1,13 @@
+import Toolbar from './toolbar'
+import Main from './main'
+
+function Editor() {
+  return (
+    <div className="point-in-time-panel">
+      <Toolbar />
+      <Main />
+    </div>
+  )
+}
+
+export default Editor

services/web/frontend/js/features/history/components/editor/main.tsx

@@ -0,0 +1,5 @@
+function Main() {
+  return <div>Main (editor)</div>
+}
+
+export default Main

services/web/frontend/js/features/history/components/editor/toolbar.tsx

@@ -0,0 +1,5 @@
+function Toolbar() {
+  return <div>Toolbar</div>
+}
+
+export default Toolbar

services/web/frontend/js/features/history/components/history-root.tsx

@@ -1,15 +1,20 @@
 import { createPortal } from 'react-dom'
 import HistoryFileTree from './history-file-tree'
+import ChangeList from './change-list/change-list'
+import Editor from './editor/editor'
 
-export default function HistoryRoot() {
-  const fileTreeContainer = document.getElementById('history-file-tree')
+const fileTreeContainer = document.getElementById('history-file-tree')
 
+export default function HistoryRoot() {
   return (
     <>
       {fileTreeContainer
         ? createPortal(<HistoryFileTree />, fileTreeContainer)
         : null}
-      History
+      <div className="history-react">
+        <ChangeList />
+        <Editor />
+      </div>
     </>
   )
 }

services/web/frontend/stylesheets/app/editor.less

@@ -1,5 +1,6 @@
 @import './editor/file-tree.less';
 @import './editor/history.less';
+@import './editor/history-react.less';
 @import './editor/toolbar.less';
 @import './editor/left-menu.less';
 @import './editor/pdf.less';

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -0,0 +1,22 @@
+@changesListWidth: 320px;
+
+.history-react {
+  .point-in-time-panel {
+    .full-size;
+    margin-right: @changesListWidth;
+  }
+
+  .change-list {
+    border-left: 1px solid @editor-border-color;
+    height: 100%;
+    width: @changesListWidth;
+    position: absolute;
+    right: 0;
+  }
+
+  .editor-dark {
+    .change-list {
+      border-color: @editor-dark-toolbar-border-color;
+    }
+  }
+}