From 553b59460cb2e02b5d220cbaa626697bebf9024a Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Fri, 19 Jan 2024 18:51:17 +0800
Subject: [PATCH] add script nav

---
 app/web/src/nova/ed/logic/ed-global.ts        |  8 ++
 .../nova/ed/panel/popup/script/workbench.tsx  | 85 ++++++++++++++++++-
 app/web/src/utils/script/mount.tsx            | 10 ++-
 3 files changed, 101 insertions(+), 2 deletions(-)

diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 263786af..5bbb424f 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -70,6 +70,14 @@ const target = {
 export const active = {
   should_render_main: true,
   hover: { id: "" },
+  script_nav: {
+    list: [] as {
+      item_id: string;
+      comp_id?: string;
+      instance?: { item_id: string; comp_id?: string };
+    }[],
+    idx: -1,
+  },
   text: { id: "", content: "", timeout: null as any, el: null as any },
   get item_id() {
     if (target.active_id === false) {
diff --git a/app/web/src/nova/ed/panel/popup/script/workbench.tsx b/app/web/src/nova/ed/panel/popup/script/workbench.tsx
index d693a1a6..12a91171 100644
--- a/app/web/src/nova/ed/panel/popup/script/workbench.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/workbench.tsx
@@ -22,10 +22,61 @@ export const EdScriptWorkbench = () => {
     }
   }, [active.item_id]);
 
+  const scriptNav = {
+    canNext: active.script_nav.idx < active.script_nav.list.length - 1,
+    canBack: active.script_nav.list.length > 0,
+  };
+
   return (
     <div className="flex flex-1 items-stretch">
       <div className="flex flex-1 flex-col ">
-        <div className="flex border-b">
+        <div className="flex border-b items-stretch">
+          {active.script_nav.list.length > 0 && (
+            <div className="border-r px-2 flex items-center">
+              <div
+                className={cx(scriptNav.canBack ? "" : "text-slate-200")}
+                onClick={() => {
+                  if (scriptNav.canBack) {
+                    active.script_nav.idx = active.script_nav.idx - 1;
+                    const item = active.script_nav.list.pop();
+
+                    if (item) {
+                      active.item_id = item.item_id;
+                      active.comp_id = item.comp_id || "";
+                      active.instance = {
+                        item_id: item.instance?.item_id || "",
+                        comp_id: item.instance?.comp_id || "",
+                      };
+                      p.render();
+                    }
+                  }
+                }}
+              >
+                <ChevronLeft />
+              </div>
+              <div
+                className={cx(scriptNav.canNext ? "" : "text-slate-200")}
+                onClick={() => {
+                  if (scriptNav.canNext) {
+                    active.script_nav.idx = active.script_nav.idx + 1;
+                    const item = active.script_nav.list[active.script_nav.idx];
+
+                    if (item) {
+                      active.item_id = item.item_id;
+                      active.comp_id = item.comp_id || "";
+                      active.instance = {
+                        item_id: item.instance?.item_id || "",
+                        comp_id: item.instance?.comp_id || "",
+                      };
+                      p.render();
+                    }
+                  }
+                }}
+              >
+                <ChevronRight />
+              </div>
+            </div>
+          )}
           {p.ui.popup.script.type === "prop-master" && <CompTitleMaster />}
           {p.ui.popup.script.type === "prop-instance" && <CompTitleInstance />}
           {p.ui.popup.script.type === "item" && (
@@ -153,3 +204,35 @@ const ArrowRight = () => (
     ></path>
   </svg>
 );
+
+export const ChevronRight = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={15}
+    height={15}
+    fill="none"
+    viewBox="0 0 15 15"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M6.158 3.135a.5.5 0 01.707.023l3.75 4a.5.5 0 010 .684l-3.75 4a.5.5 0 11-.73-.684L9.566 7.5l-3.43-3.658a.5.5 0 01.023-.707z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export const ChevronLeft = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="15"
+    height="15"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14 18l-6-6 6-6 1.4 1.4-4.6 4.6 4.6 4.6L14 18z"
+    ></path>
+  </svg>
+);
diff --git a/app/web/src/utils/script/mount.tsx b/app/web/src/utils/script/mount.tsx
index dd720f8b..70b47780 100644
--- a/app/web/src/utils/script/mount.tsx
+++ b/app/web/src/utils/script/mount.tsx
@@ -59,8 +59,15 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
             const args = r.path.split("_");
             if (args.length === 3) {
               const loc = extractLoc(args, p);
-              console.log(loc.meta);
               if (loc.meta) {
+                active.script_nav.list.length = active.script_nav.idx;
+                active.script_nav.list.push({
+                  item_id: active.item_id,
+                  comp_id: active.comp_id,
+                  instance: active.instance,
+                });
+                active.script_nav.idx = active.script_nav.idx + 1;
+
                 if (loc.meta.item.component?.id && loc.meta.instances) {
                   active.comp_id = loc.meta.item.component?.id;
                   active.instance = {
@@ -87,6 +94,7 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
                 } else {
                   active.item_id = loc.meta.item.id;
                 }
+
                 p.render();
               }
             }