From f9e5f9389db5fba43e2ae8e245460d8aa380111e Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Mon, 20 Nov 2023 14:37:18 +0700
Subject: [PATCH] wip fix script

---
 .vscode/settings.json                         |  5 +-
 app/web/src/nova/ed/ed-base.tsx               |  2 +
 app/web/src/nova/ed/logic/ed-global.ts        |  4 +
 .../src/nova/ed/panel/main/pane-resize.tsx    |  4 +-
 .../src/nova/ed/panel/popup/script/monaco.tsx | 23 +++++
 .../src/nova/ed/panel/popup/script/script.tsx | 94 +++++++++++++++++++
 .../nova/ed/panel/popup/script/workbench.tsx  | 47 ++++++++++
 .../nova/ed/panel/tree/node/item/action.tsx   | 40 +++++++-
 .../src/nova/ed/panel/tree/node/render.tsx    |  5 +
 9 files changed, 217 insertions(+), 7 deletions(-)
 create mode 100644 app/web/src/nova/ed/panel/popup/script/monaco.tsx
 create mode 100644 app/web/src/nova/ed/panel/popup/script/script.tsx
 create mode 100644 app/web/src/nova/ed/panel/popup/script/workbench.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8e1430b5..56d158ae 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,6 +6,5 @@
     "**/CVS": true,
     "**/.DS_Store": true,
     "**/Thumbs.db": true
-  },
-  "hide-files.files": []
-}
\ No newline at end of file
+  }
+}
diff --git a/app/web/src/nova/ed/ed-base.tsx b/app/web/src/nova/ed/ed-base.tsx
index 2c1215dc..e72a918b 100644
--- a/app/web/src/nova/ed/ed-base.tsx
+++ b/app/web/src/nova/ed/ed-base.tsx
@@ -12,6 +12,7 @@ import { EdPopCode } from "./panel/popup/code/code";
 import { EdPopCompGroup } from "./panel/popup/comp/comp-group";
 import { EdPopSite } from "./panel/popup/site/site";
 import { EdScriptInit } from "./panel/script/monaco/init";
+import { EdPopScript } from "./panel/popup/script/script";
 
 export const EdBase = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -47,6 +48,7 @@ export const EdBase = () => {
       </div>
       <>
         <EdPopCode />
+        <EdPopScript />
         <EdPopSite />
         <EdPopCompGroup />
         <EdScriptInit />
diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 3f18a4e8..5bbdfdc4 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -143,6 +143,10 @@ export const EDGlobal = {
         show_log: false,
         list: {} as Record<string, string>,
       },
+      script: {
+        open: false,
+        mode: "js" as "js" | "css" | "html",
+      },
       site: null as null | ((site_id: string) => void | Promise<void>),
       site_form: null as null | {
         group_id: string;
diff --git a/app/web/src/nova/ed/panel/main/pane-resize.tsx b/app/web/src/nova/ed/panel/main/pane-resize.tsx
index 51a79b26..3920692b 100644
--- a/app/web/src/nova/ed/panel/main/pane-resize.tsx
+++ b/app/web/src/nova/ed/panel/main/pane-resize.tsx
@@ -67,8 +67,8 @@ const EdPaneResize = (arg: {
       <div className={cx("relative")}>
         <div
           className={cx(
-            "w-[4px] absolute inset-0 z-50 -mx-[2px] cursor-ew-resize hover:bg-blue-800 transition-all duration-700",
-            local.dragging && "bg-blue-800"
+            "w-[4px] absolute inset-0 -mx-[2px] cursor-ew-resize hover:bg-blue-800 transition-all duration-700",
+            local.dragging && "z-40 bg-blue-800"
           )}
           onDoubleClick={() => {
             arg.onResize(local.default);
diff --git a/app/web/src/nova/ed/panel/popup/script/monaco.tsx b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
new file mode 100644
index 00000000..84807f40
--- /dev/null
+++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
@@ -0,0 +1,23 @@
+import type { Editor as MonacoEditor, OnMount } from "@monaco-editor/react";
+import { jscript } from "../../../../../utils/script/jscript";
+
+export type MonacoEditor = Parameters<OnMount>[0];
+export const ScriptMonaco = () => {
+  const Editor = jscript.editor;
+  if (!Editor) return null;
+
+  return (
+    <Editor
+      options={{
+        minimap: { enabled: false },
+        wordWrap: "wordWrapColumn",
+        autoClosingBrackets: "always",
+        autoIndent: "full",
+        formatOnPaste: true,
+        formatOnType: true,
+        tabSize: 2,
+        useTabStops: true,
+      }}
+    />
+  );
+};
diff --git a/app/web/src/nova/ed/panel/popup/script/script.tsx b/app/web/src/nova/ed/panel/popup/script/script.tsx
new file mode 100644
index 00000000..0b3eb923
--- /dev/null
+++ b/app/web/src/nova/ed/panel/popup/script/script.tsx
@@ -0,0 +1,94 @@
+import { useGlobal } from "web-utils";
+import { jscript } from "../../../../../utils/script/jscript";
+import { Loading } from "../../../../../utils/ui/loading";
+import { Modal } from "../../../../../utils/ui/modal";
+import { EDGlobal } from "../../../logic/ed-global";
+import { ScriptMonaco } from "./monaco";
+import { ScriptWorkbench } from "./workbench";
+
+export const EdPopScript = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+  return (
+    <>
+      <Modal
+        open={p.ui.popup.script.open}
+        onOpenChange={(open) => {
+          if (!open) {
+            p.ui.popup.script.open = false;
+            p.render();
+          }
+        }}
+      >
+        <div className={cx("bg-white select-none flex fixed inset-[50px]")}>
+          <div
+            className={cx(
+              "flex flex-1 relative",
+              css`
+                .monaco-editor {
+                  .mtk9 {
+                    color: #022f62;
+                  }
+                  .mtk1 {
+                    color: #022f62;
+                  }
+                  .mtk22 {
+                    color: #015cc5;
+                  }
+                  .mtk8 {
+                    color: #015cc5;
+                  }
+                  .mtk5 {
+                    color: #55bb8a;
+                  }
+                  .monaco-editor.showUnused .squiggly-inline-unnecessary {
+                    opacity: 0.4;
+                  }
+                  .jsx-expression-braces {
+                    color: #7c3813;
+                  }
+                  .jsx-tag-angle-bracket {
+                    color: #619ac3;
+                  }
+                  .jsx-tag-name {
+                    color: #619ac3;
+                  }
+                  .jsx-tag-order-1 {
+                    color: #23863a;
+                  }
+                  .jsx-tag-order-2 {
+                    color: #4e7ca1;
+                  }
+                  .jsx-tag-order-3 {
+                    color: #020360;
+                  }
+                  .jsx-tag-attribute-key {
+                    color: #6f42c1;
+                  }
+                  .jsx-text {
+                    color: #000000;
+                  }
+                }
+              `
+            )}
+          >
+            {(!jscript.editor || !jscript.build) && (
+              <>
+                {!jscript.editor && !jscript.build && (
+                  <Loading note={"js-code"} backdrop={false} />
+                )}
+                {!jscript.editor && jscript.build && (
+                  <Loading note={"js-editor"} backdrop={false} />
+                )}
+                {!jscript.build && jscript.editor && (
+                  <Loading note={"js-build"} backdrop={false} />
+                )}
+              </>
+            )}
+
+            {jscript.editor && jscript.build && <ScriptWorkbench />}
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
diff --git a/app/web/src/nova/ed/panel/popup/script/workbench.tsx b/app/web/src/nova/ed/panel/popup/script/workbench.tsx
new file mode 100644
index 00000000..2a8d807d
--- /dev/null
+++ b/app/web/src/nova/ed/panel/popup/script/workbench.tsx
@@ -0,0 +1,47 @@
+import { useGlobal } from "web-utils";
+import { ScriptMonaco } from "./monaco";
+import { EDGlobal } from "../../../logic/ed-global";
+
+export const ScriptWorkbench = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+  return (
+    <div className="flex flex-1 items-stretch">
+      <div className="flex flex-1 flex-col ">
+        <div className="flex p-2 border-b space-x-2">
+          {[
+            { type: "js", color: "#e9522c" },
+            { type: "css", color: "#188228" },
+            { type: "html", color: "#2c3e83" },
+          ].map((e) => {
+            return (
+              <div
+                className={cx(
+                  css`
+                    color: ${e.color};
+                    border: 1px solid ${e.color};
+                  `,
+                  "uppercase text-white text-[12px] cursor-pointer transition-all hover:opacity-100 w-[40px] text-center",
+                  p.ui.popup.script.mode === e.type
+                    ? css`
+                        background: ${e.color};
+                        color: white;
+                      `
+                    : "opacity-30"
+                )}
+                onClick={() => {
+                  p.ui.popup.script.mode = e.type as any;
+                  p.render();
+                }}
+              >
+                {e.type}
+              </div>
+            );
+          })}
+        </div>
+        <div className="relative flex flex-1">
+          <ScriptMonaco />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/web/src/nova/ed/panel/tree/node/item/action.tsx b/app/web/src/nova/ed/panel/tree/node/item/action.tsx
index f80d8bcb..1042646f 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/action.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/action.tsx
@@ -1,5 +1,6 @@
 import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
-import { EdMeta } from "../../../../logic/ed-global";
+import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
+import { useGlobal } from "web-utils";
 
 export const EdTreeAction = ({
   node,
@@ -8,5 +9,40 @@ export const EdTreeAction = ({
   node: NodeModel<EdMeta>;
   prm: RenderParams;
 }) => {
-  return <></>;
+  const p = useGlobal(EDGlobal, "EDITOR");
+  const item = node.data?.item;
+  if (!item) return null;
+  return (
+    <div className="flex items-center pr-2">
+      <div
+        className={cx(
+          "border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
+          item.adv?.js || item.adv?.css || item.adv?.html
+            ? `opacity-100`
+            : cx(
+                `opacity-0 action-script transition-all`,
+                css`
+                  &:hover {
+                    opacity: 1 !important;
+                  }
+                `
+              ),
+          !(item.adv?.js || item.adv?.css || item.adv?.html) &&
+            `bg-orange-100  border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
+          item.adv?.js &&
+            `bg-orange-100  border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
+          item.adv?.css &&
+            `bg-green-100  border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
+          item.adv?.html &&
+            `bg-blue-100  border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
+        )}
+        onClick={() => {
+          p.ui.popup.script.open = true;
+          p.render();
+        }}
+      >
+        {"</>"}
+      </div>
+    </div>
+  );
 };
diff --git a/app/web/src/nova/ed/panel/tree/node/render.tsx b/app/web/src/nova/ed/panel/tree/node/render.tsx
index 77316f87..625325fc 100644
--- a/app/web/src/nova/ed/panel/tree/node/render.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/render.tsx
@@ -39,6 +39,11 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
               display: flex;
             }
           }
+          &:hover {
+            .action-script {
+              opacity: 0.6;
+            }
+          }
         `,
         active.item_id === item.id
           ? ["bg-blue-100"]