From d1d47b2767347b66e0a616f0c6425b70a3b656d9 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Thu, 23 Mar 2023 10:35:20 +0200
Subject: [PATCH] Merge pull request #12339 from
 overleaf/ii-react-history-editor-and-change-list-init

[web] History editor and change list initialisation

GitOrigin-RevId: bb7800301d28c296bd524212cd27ddcd8defd149
---
 .../components/change-list/change-list.tsx    | 13 +++++++++++
 .../history/components/change-list/main.tsx   |  5 +++++
 .../components/change-list/toggle-switch.tsx  |  5 +++++
 .../history/components/editor/editor.tsx      | 13 +++++++++++
 .../history/components/editor/main.tsx        |  5 +++++
 .../history/components/editor/toolbar.tsx     |  5 +++++
 .../history/components/history-root.tsx       | 11 +++++++---
 .../web/frontend/stylesheets/app/editor.less  |  1 +
 .../stylesheets/app/editor/history-react.less | 22 +++++++++++++++++++
 9 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 services/web/frontend/js/features/history/components/change-list/change-list.tsx
 create mode 100644 services/web/frontend/js/features/history/components/change-list/main.tsx
 create mode 100644 services/web/frontend/js/features/history/components/change-list/toggle-switch.tsx
 create mode 100644 services/web/frontend/js/features/history/components/editor/editor.tsx
 create mode 100644 services/web/frontend/js/features/history/components/editor/main.tsx
 create mode 100644 services/web/frontend/js/features/history/components/editor/toolbar.tsx
 create mode 100644 services/web/frontend/stylesheets/app/editor/history-react.less

diff --git a/services/web/frontend/js/features/history/components/change-list/change-list.tsx b/services/web/frontend/js/features/history/components/change-list/change-list.tsx
new file mode 100644
index 0000000000..1e1b0faf56
--- /dev/null
+++ b/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
diff --git a/services/web/frontend/js/features/history/components/change-list/main.tsx b/services/web/frontend/js/features/history/components/change-list/main.tsx
new file mode 100644
index 0000000000..435e44bea6
--- /dev/null
+++ b/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
diff --git a/services/web/frontend/js/features/history/components/change-list/toggle-switch.tsx b/services/web/frontend/js/features/history/components/change-list/toggle-switch.tsx
new file mode 100644
index 0000000000..93b447a7b2
--- /dev/null
+++ b/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
diff --git a/services/web/frontend/js/features/history/components/editor/editor.tsx b/services/web/frontend/js/features/history/components/editor/editor.tsx
new file mode 100644
index 0000000000..6e8e9dcb5f
--- /dev/null
+++ b/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
diff --git a/services/web/frontend/js/features/history/components/editor/main.tsx b/services/web/frontend/js/features/history/components/editor/main.tsx
new file mode 100644
index 0000000000..78a01e80ed
--- /dev/null
+++ b/services/web/frontend/js/features/history/components/editor/main.tsx
@@ -0,0 +1,5 @@
+function Main() {
+  return <div>Main (editor)</div>
+}
+
+export default Main
diff --git a/services/web/frontend/js/features/history/components/editor/toolbar.tsx b/services/web/frontend/js/features/history/components/editor/toolbar.tsx
new file mode 100644
index 0000000000..9cf7fb1b87
--- /dev/null
+++ b/services/web/frontend/js/features/history/components/editor/toolbar.tsx
@@ -0,0 +1,5 @@
+function Toolbar() {
+  return <div>Toolbar</div>
+}
+
+export default Toolbar
diff --git a/services/web/frontend/js/features/history/components/history-root.tsx b/services/web/frontend/js/features/history/components/history-root.tsx
index 5932eaf58b..90e361d931 100644
--- a/services/web/frontend/js/features/history/components/history-root.tsx
+++ b/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'
+
+const fileTreeContainer = document.getElementById('history-file-tree')
 
 export default function HistoryRoot() {
-  const fileTreeContainer = document.getElementById('history-file-tree')
-
   return (
     <>
       {fileTreeContainer
         ? createPortal(<HistoryFileTree />, fileTreeContainer)
         : null}
-      History
+      <div className="history-react">
+        <ChangeList />
+        <Editor />
+      </div>
     </>
   )
 }
diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less
index 232f3b4665..f4f91cd7d5 100644
--- a/services/web/frontend/stylesheets/app/editor.less
+++ b/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';
diff --git a/services/web/frontend/stylesheets/app/editor/history-react.less b/services/web/frontend/stylesheets/app/editor/history-react.less
new file mode 100644
index 0000000000..e158198d5f
--- /dev/null
+++ b/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;
+    }
+  }
+}