(feat) refactor file structure

frontend/components/editor.py

@@ -0,0 +1,88 @@
+from functools import partial
+import streamlit as st
+from streamlit_elements import mui, editor, sync, lazy, event
+
+from utils.os_utils import save_file
+from .dashboard import Dashboard
+
+
+class Editor(Dashboard.Item):
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        self._dark_theme = False
+        self._index = 0
+        self._tabs = {}
+        self._editor_box_style = {
+            "flex": 1,
+            "minHeight": 0,
+            "borderBottom": 1,
+            "borderTop": 1,
+            "borderColor": "divider"
+        }
+
+    def save_file(self):
+        if len(self._tabs) > 0:
+            label = list(self._tabs.keys())[self._index]
+            content = self.get_content(label)
+            file_name = label.split("/")[-1]
+            path = "/".join(label.split("/")[:-1])
+            save_file(name=file_name, content=content, path=path)
+            st.info("File saved")
+
+    def _change_tab(self, _, index):
+        self._index = index
+
+    @property
+    def tabs(self):
+        return self._tabs
+    
+    def update_content(self, label, content):
+        self._tabs[label]["content"] = content
+
+    def add_tab(self, label, default_content, language):
+        self._tabs[label] = {
+            "content": default_content,
+            "language": language,
+        }
+
+    def remove_tab(self, label):
+        del self._tabs[label]
+
+    def get_content(self, label):
+        return self._tabs[label]["content"]
+
+    def __call__(self):
+        with mui.Paper(key=self._key, sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"}, elevation=1):
+
+            with self.title_bar("0px 15px 0px 15px"):
+                with mui.Grid(container=True, spacing=4, sx={"display": "flex", "alignItems": "center"}):
+                    with mui.Grid(item=True, xs=10, sx={"display": "flex", "alignItems": "center"}):
+                        mui.icon.Terminal()
+                        mui.Typography("Editor", variant="h6", sx={"marginLeft": 1})
+                        with mui.Tabs(value=self._index, onChange=self._change_tab, scrollButtons=True,
+                                      variant="scrollable", sx={"flex": 1}):
+                            for label in self._tabs.keys():
+                                mui.Tab(label=label)
+                    with mui.Grid(item=True, xs=2, sx={"display": "flex", "justifyContent": "flex-end"}):
+                        mui.Button("Apply Changes", variant="contained", onClick=sync())
+                        mui.Button("Save Changes", variant="contained", onClick=self.save_file, sx={"mx": 1})
+
+            for index, (label, tab) in enumerate(self._tabs.items()):
+                with mui.Box(sx=self._editor_box_style, hidden=(index != self._index)):
+                    editor.Monaco(
+                        css={"padding": "0 2px 0 2px"},
+                        defaultValue=tab["content"],
+                        language=tab["language"],
+                        onChange=lazy(partial(self.update_content, label)),
+                        theme="vs-dark" if self._dark_mode else "light",
+                        path=label,
+                        options={
+                            "wordWrap": True,
+                            "fontSize": 16.5,
+                        }
+                    )
+
+            with mui.Stack(direction="row", spacing=2, alignItems="center", sx={"padding": "10px"}):
+                event.Hotkey("ctrl+s", sync(), bindInputs=True, overrideDefault=True)