From 804a5ffc98811ef785a49b86d9e3a2911253e988 Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Mon, 22 Jan 2024 22:58:08 +0700
Subject: [PATCH] wip fix

---
 app/web/src/nova/ed/panel/popup/code/code.tsx | 500 +++++++++---------
 biome.json                                    |   5 +
 2 files changed, 255 insertions(+), 250 deletions(-)
 create mode 100644 biome.json

diff --git a/app/web/src/nova/ed/panel/popup/code/code.tsx b/app/web/src/nova/ed/panel/popup/code/code.tsx
index cd52527b..405b6da0 100644
--- a/app/web/src/nova/ed/panel/popup/code/code.tsx
+++ b/app/web/src/nova/ed/panel/popup/code/code.tsx
@@ -8,276 +8,276 @@ import { Tooltip } from "../../../../../utils/ui/tooltip";
 import { EDGlobal } from "../../../logic/ed-global";
 import { CodeAssign } from "./assign";
 import {
-  iconChevronDown,
-  iconGear,
-  iconLoading,
-  iconLog,
-  iconTrash,
+	iconChevronDown,
+	iconGear,
+	iconLoading,
+	iconLog,
+	iconTrash,
 } from "./icons";
 import { CodeNameItem, CodeNameList, codeName } from "./name-list";
 
 export const code = {
-  mode: "" as "" | "old" | "new",
+	mode: "" as "" | "old" | "new",
 };
 
 export const EdPopCode = () => {
-  const p = useGlobal(EDGlobal, "EDITOR");
+	const p = useGlobal(EDGlobal, "EDITOR");
 
-  useEffect(() => {
-    (async () => {
-      if (code.mode === "new") {
-        if (p.ui.popup.code.open) {
-          const id_code = await p.sync.activity("site", {
-            action: p.ui.popup.code.open ? "open" : "close",
-            id: p.site.id,
-            type: "code",
-            name: p.ui.popup.code.name,
-          });
+	useEffect(() => {
+		(async () => {
+			if (code.mode === "new") {
+				if (p.ui.popup.code.open) {
+					const id_code = await p.sync.activity("site", {
+						action: p.ui.popup.code.open ? "open" : "close",
+						id: p.site.id,
+						type: "code",
+						name: p.ui.popup.code.name,
+					});
 
-          if (id_code) {
-            p.ui.popup.code.id = id_code;
-            p.render();
-          }
-        }
-        p.ui.popup.code.init = true;
-      }
-    })();
-  }, [p.ui.popup.code.open]);
+					if (id_code) {
+						p.ui.popup.code.id = id_code;
+						p.render();
+					}
+				}
+				p.ui.popup.code.init = true;
+			}
+		})();
+	}, [p.ui.popup.code.open]);
 
-  useEffect(() => {
-    if (code.mode === "") {
-      db.code.findFirst({ where: { id_site: p.site.id } }).then((e) => {
-        code.mode = !!e ? "new" : "old";
-        p.render();
-      });
-    }
-  }, []);
+	useEffect(() => {
+		if (code.mode === "") {
+			db.code.findFirst({ where: { id_site: p.site.id } }).then((e) => {
+				code.mode = e ? "new" : "old";
+				p.render();
+			});
+		}
+	}, []);
 
-  return (
-    <Modal
-      fade={false}
-      open={p.ui.popup.code.open}
-      onOpenChange={(open) => {
-        if (!open) {
-          p.ui.popup.code.open = false;
-          p.render();
-        }
-      }}
-    >
-      <div
-        className={cx("bg-white select-none fixed inset-[50px] bottom-0 flex")}
-      >
-        {!code.mode && <Loading note="checking-version" backdrop={false} />}
-        {code.mode === "new" && <CodeBody />}
-        {code.mode === "old" && (
-          <div className="flex items-center justify-center flex-col flex-1">
-            <div>This site still using old code</div>
-            <div
-              onClick={() => {
-                if (
-                  confirm(
-                    "Old code will not load, are you sure want to upgrade ?"
-                  )
-                ) {
-                  code.mode = "new";
-                  p.ui.popup.code.open = false;
-                  p.render();
-                }
-              }}
-              className="border border-blue-500 cursor-pointer bg-blue-100 p-2 hover:bg-blue-200"
-            >
-              Upgrade to New Code Project
-            </div>
-            <div className="text-xs py-2">
-              Warning: old code will not load once upgraded.
-            </div>
-          </div>
-        )}
-      </div>
-    </Modal>
-  );
+	return (
+		<Modal
+			fade={false}
+			open={p.ui.popup.code.open}
+			onOpenChange={(open) => {
+				if (!open) {
+					p.ui.popup.code.open = false;
+					p.render();
+				}
+			}}
+		>
+			<div
+				className={cx("bg-white select-none fixed inset-[50px] bottom-0 flex")}
+			>
+				{!code.mode && <Loading note="checking-version" backdrop={false} />}
+				{code.mode === "new" && <CodeBody />}
+				{code.mode === "old" && (
+					<div className="flex items-center justify-center flex-col flex-1">
+						<div>This site still using old code</div>
+						<div
+							onClick={() => {
+								if (
+									confirm(
+										"Old code will not load, are you sure want to upgrade ?",
+									)
+								) {
+									code.mode = "new";
+									p.ui.popup.code.open = false;
+									p.render();
+								}
+							}}
+							className="border border-blue-500 cursor-pointer bg-blue-100 p-2 hover:bg-blue-200"
+						>
+							Upgrade to New Code Project
+						</div>
+						<div className="text-xs py-2">
+							Warning: old code will not load once upgraded.
+						</div>
+					</div>
+				)}
+			</div>
+		</Modal>
+	);
 };
 
 const CodeBody = () => {
-  const p = useGlobal(EDGlobal, "EDITOR");
-  const local = useLocal({ namePicker: false, codeAssign: false });
- 
-  const vscode_url = isLocalhost()
-    ? "http://localhost:3000?"
-    : "https://prasi-vsc.avolut.com/?tkn=prasi&";
+	const p = useGlobal(EDGlobal, "EDITOR");
+	const local = useLocal({ namePicker: false, codeAssign: false });
 
-  return (
-    <div className="relative w-full h-full flex flex-col">
-      <div className="border-b flex h-[40px] items-stretch">
-        <Popover
-          placement="bottom"
-          offset={0}
-          arrow={false}
-          backdrop={false}
-          content={
-            <CodeNameList
-              onPick={async (e) => {
-                local.namePicker = false;
-                p.ui.popup.code.name = e.name;
-                p.ui.popup.code.id = "";
-                p.render();
+	const vscode_url = isLocalhost()
+		? "http://localhost:3000?"
+		: "https://prasi-vsc.avolut.com/?tkn=prasi&";
 
-                const id_code = await p.sync.activity("site", {
-                  action: "open",
-                  id: p.site.id,
-                  type: "code",
-                  name: p.ui.popup.code.name,
-                });
+	return (
+		<div className="relative w-full h-full flex flex-col">
+			<div className="border-b flex h-[40px] items-stretch">
+				<Popover
+					placement="bottom"
+					offset={0}
+					arrow={false}
+					backdrop={false}
+					content={
+						<CodeNameList
+							onPick={async (e) => {
+								local.namePicker = false;
+								p.ui.popup.code.name = e.name;
+								p.ui.popup.code.id = "";
+								p.render();
 
-                if (id_code) {
-                  p.ui.popup.code.id = id_code;
-                  p.render();
-                }
-              }}
-            />
-          }
-          popoverClassName="bg-white shadow-md"
-          className={cx(
-            "flex items-center px-2 w-[200px] hover:bg-blue-50  space-x-1",
-            "cursor-pointer justify-between"
-          )}
-          open={local.namePicker}
-          onOpenChange={(open) => {
-            local.namePicker = open;
-            local.render();
-          }}
-        >
-          <div className="capitalize overflow-ellipsis flex-1 flex items-center space-x-2">
-            <CodeNameItem name={p.ui.popup.code.name} />
-          </div>
-          <div
-            dangerouslySetInnerHTML={{
-              __html: iconChevronDown,
-            }}
-          ></div>
-        </Popover>
+								const id_code = await p.sync.activity("site", {
+									action: "open",
+									id: p.site.id,
+									type: "code",
+									name: p.ui.popup.code.name,
+								});
 
-        {p.ui.popup.code.name !== "site" && p.ui.popup.code.name !== "SSR" && (
-          <>
-            <Tooltip
-              content={"Delete Code Module"}
-              className="flex items-center border-l relative hover:bg-red-50 cursor-pointer px-2 transition-all text-red-500"
-              placement="bottom"
-              onClick={async () => {
-                if (
-                  prompt(
-                    "Are you sure want to delete this code?\ntype 'yes' to confirm:"
-                  ) === "yes"
-                ) {
-                  await db.code.delete({
-                    where: { id: p.ui.popup.code.id },
-                  });
+								if (id_code) {
+									p.ui.popup.code.id = id_code;
+									p.render();
+								}
+							}}
+						/>
+					}
+					popoverClassName="bg-white shadow-md"
+					className={cx(
+						"flex items-center px-2 w-[200px] hover:bg-blue-50  space-x-1",
+						"cursor-pointer justify-between",
+					)}
+					open={local.namePicker}
+					onOpenChange={(open) => {
+						local.namePicker = open;
+						local.render();
+					}}
+				>
+					<div className="capitalize overflow-ellipsis flex-1 flex items-center space-x-2">
+						<CodeNameItem name={p.ui.popup.code.name} />
+					</div>
+					<div
+						dangerouslySetInnerHTML={{
+							__html: iconChevronDown,
+						}}
+					></div>
+				</Popover>
 
-                  codeName.list = codeName.list.filter(
-                    (e) => e.id !== p.ui.popup.code.id
-                  );
+				{p.ui.popup.code.name !== "site" && p.ui.popup.code.name !== "SSR" && (
+					<>
+						<Tooltip
+							content={"Delete Code Module"}
+							className="flex items-center border-l relative hover:bg-red-50 cursor-pointer px-2 transition-all text-red-500"
+							placement="bottom"
+							onClick={async () => {
+								if (
+									prompt(
+										"Are you sure want to delete this code?\ntype 'yes' to confirm:",
+									) === "yes"
+								) {
+									await db.code.delete({
+										where: { id: p.ui.popup.code.id },
+									});
 
-                  p.ui.popup.code.name = codeName.list[0].name;
-                  p.ui.popup.code.id = codeName.list[0].id;
-                  p.render();
-                }
-              }}
-            >
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: iconTrash,
-                }}
-              ></div>
-            </Tooltip>
-            <Popover
-              open={local.codeAssign}
-              onOpenChange={(open) => {
-                local.codeAssign = open;
-                local.render();
-              }}
-              backdrop={false}
-              placement="bottom"
-              popoverClassName="p-0 shadow-lg bg-white"
-              content={
-                <CodeAssign
-                  onClose={() => {
-                    local.codeAssign = false;
-                    local.render();
-                  }}
-                  id_code={p.ui.popup.code.id}
-                />
-              }
-              className="flex items-center border-l relative hover:bg-blue-50 cursor-pointer px-2 transition-all"
-            >
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: iconGear,
-                }}
-              ></div>
-            </Popover>
-          </>
-        )}
-        <Tooltip
-          content="STDOUT Log"
-          delay={0}
-          placement="bottom"
-          className={cx(
-            "flex items-stretch relative border-l",
-            p.ui.popup.code.error && "bg-red-500 text-white"
-          )}
-          onClick={() => {
-            p.ui.popup.code.show_log = !p.ui.popup.code.show_log;
-            p.render();
-          }}
-        >
-          {p.ui.popup.code.show_log && (
-            <div className="absolute bottom-[-4px] left-0 right-[1px] h-[5px] bg-white"></div>
-          )}
-          <div
-            className={cx(
-              "border-r flex text-center items-center hover:bg-blue-50 cursor-pointer px-2 transition-all",
-              p.ui.popup.code.loading
-                ? "border-b-2 border-b-orange-400"
-                : "border-b-2 border-b-transparent"
-            )}
-            dangerouslySetInnerHTML={{
-              __html: p.ui.popup.code.loading ? iconLog : iconLoading,
-            }}
-          ></div>
-        </Tooltip>
-      </div>
-      {p.ui.popup.code.show_log && (
-        <div className="h-[150px] overflow-auto font-mono p-2 text-xs whitespace-pre-wrap border-b">
-          <div>{p.ui.popup.code.log || "stdout is empty..."}</div>
-        </div>
-      )}
+									codeName.list = codeName.list.filter(
+										(e) => e.id !== p.ui.popup.code.id,
+									);
 
-      <div className="flex flex-1 relative">
-        {!p.ui.popup.code.open || !p.ui.popup.code.id ? (
-          <Loading backdrop={false} />
-        ) : (
-          <>
-            <iframe
-              className="flex flex-1 absolute inset-0 w-full h-full z-10"
-              src={`${vscode_url}folder=/site/code/${p.site.id}/${p.ui.popup.code.id}`}
-            ></iframe>
-            <div className="flex flex-1 absolute inset-0 z-0 items-center justify-center">
-              Loading VSCode...
-            </div>
-          </>
-        )}
-      </div>
+									p.ui.popup.code.name = codeName.list[0].name;
+									p.ui.popup.code.id = codeName.list[0].id;
+									p.render();
+								}
+							}}
+						>
+							<div
+								dangerouslySetInnerHTML={{
+									__html: iconTrash,
+								}}
+							></div>
+						</Tooltip>
+						<Popover
+							open={local.codeAssign}
+							onOpenChange={(open) => {
+								local.codeAssign = open;
+								local.render();
+							}}
+							backdrop={false}
+							placement="bottom"
+							popoverClassName="p-0 shadow-lg bg-white"
+							content={
+								<CodeAssign
+									onClose={() => {
+										local.codeAssign = false;
+										local.render();
+									}}
+									id_code={p.ui.popup.code.id}
+								/>
+							}
+							className="flex items-center border-l relative hover:bg-blue-50 cursor-pointer px-2 transition-all"
+						>
+							<div
+								dangerouslySetInnerHTML={{
+									__html: iconGear,
+								}}
+							></div>
+						</Popover>
+					</>
+				)}
+				<Tooltip
+					content="STDOUT Log"
+					delay={0}
+					placement="bottom"
+					className={cx(
+						"flex items-stretch relative border-l",
+						p.ui.popup.code.error && "bg-red-500 text-white",
+					)}
+					onClick={() => {
+						p.ui.popup.code.show_log = !p.ui.popup.code.show_log;
+						p.render();
+					}}
+				>
+					{p.ui.popup.code.show_log && (
+						<div className="absolute bottom-[-4px] left-0 right-[1px] h-[5px] bg-white"></div>
+					)}
+					<div
+						className={cx(
+							"border-r flex text-center items-center hover:bg-blue-50 cursor-pointer px-2 transition-all",
+							p.ui.popup.code.loading
+								? "border-b-2 border-b-orange-400"
+								: "border-b-2 border-b-transparent",
+						)}
+						dangerouslySetInnerHTML={{
+							__html: p.ui.popup.code.loading ? iconLog : iconLoading,
+						}}
+					></div>
+				</Tooltip>
+			</div>
+			{p.ui.popup.code.show_log && (
+				<div className="h-[150px] overflow-auto font-mono p-2 text-xs whitespace-pre-wrap border-b">
+					<div>{p.ui.popup.code.log || "stdout is empty..."}</div>
+				</div>
+			)}
 
-      {(local.namePicker || local.codeAssign) && (
-        <div
-          className="fixed inset-0 z-50"
-          onClick={() => {
-            local.namePicker = false;
-            local.codeAssign = false;
-            local.render();
-          }}
-        ></div>
-      )}
-    </div>
-  );
+			<div className="flex flex-1 relative">
+				{!p.ui.popup.code.open || !p.ui.popup.code.id ? (
+					<Loading backdrop={false} />
+				) : (
+					<>
+						<iframe
+							className="flex flex-1 absolute inset-0 w-full h-full z-10"
+							src={`${vscode_url}folder=/site/code/${p.site.id}/${p.ui.popup.code.id}`}
+						></iframe>
+						<div className="flex flex-1 absolute inset-0 z-0 items-center justify-center">
+							Loading VSCode...
+						</div>
+					</>
+				)}
+			</div>
+
+			{(local.namePicker || local.codeAssign) && (
+				<div
+					className="fixed inset-0 z-50"
+					onClick={() => {
+						local.namePicker = false;
+						local.codeAssign = false;
+						local.render();
+					}}
+				></div>
+			)}
+		</div>
+	);
 };
diff --git a/biome.json b/biome.json
new file mode 100644
index 00000000..4214ad93
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,5 @@
+{
+  "linter": {
+    "enabled": false
+  }
+}
\ No newline at end of file