From 4bd4356d1c554731e251aa5f40ba21ea25efa262 Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Mon, 4 Dec 2023 11:32:55 +0700
Subject: [PATCH] wip fix

---
 app/web/src/nova/ed/ed-right.tsx              | 25 ++++++++++++-
 app/web/src/nova/ed/logic/ed-global.ts        |  1 +
 app/web/src/nova/ed/panel/side/prop-comp.tsx  | 33 +++++++++++++++++
 .../src/nova/ed/panel/side/prop-comp/item.tsx |  3 ++
 .../src/nova/ed/panel/side/prop-instance.tsx  | 20 ++++++++++
 app/web/src/nova/ed/panel/side/side-style.tsx | 37 +++++++++++++++++++
 6 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 app/web/src/nova/ed/panel/side/prop-comp.tsx
 create mode 100644 app/web/src/nova/ed/panel/side/prop-comp/item.tsx
 create mode 100644 app/web/src/nova/ed/panel/side/prop-instance.tsx
 create mode 100644 app/web/src/nova/ed/panel/side/side-style.tsx

diff --git a/app/web/src/nova/ed/ed-right.tsx b/app/web/src/nova/ed/ed-right.tsx
index fb724fdf..2bdb546d 100644
--- a/app/web/src/nova/ed/ed-right.tsx
+++ b/app/web/src/nova/ed/ed-right.tsx
@@ -1,8 +1,19 @@
 import { useGlobal } from "web-utils";
-import { EDGlobal } from "./logic/ed-global";
+import { EDGlobal, active } from "./logic/ed-global";
+import { EdSidePropComp } from "./panel/side/prop-comp";
+import { getMetaById } from "./logic/tree/build";
+import { EdSideStyle } from "./panel/side/side-style";
+import { EdSidePropInstance } from "./panel/side/prop-instance";
 
 export const EdRight = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
+  const meta = getMetaById(p, active.item_id);
+
+  const isComponent =
+    meta?.item.type === "item" &&
+    meta?.item.component?.id &&
+    meta?.item.component.id !== active.comp_id;
+  const showProp = isComponent && p.ui.side.prop;
   return (
     <div
       className={cx(
@@ -12,7 +23,17 @@ export const EdRight = () => {
         "border-l"
       )}
     >
-      
+      {!meta ? (
+        <>Select an item</>
+      ) : (
+        <>
+          {isComponent ? (
+            <EdSidePropInstance meta={meta} />
+          ) : (
+            <EdSideStyle meta={meta} />
+          )}
+        </>
+      )}
     </div>
   );
 };
diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 2a755561..c6130a60 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -195,6 +195,7 @@ export const EDGlobal = {
     group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
   },
   ui: {
+    side: { prop: false },
     layout: {
       left: parseInt(localStorage.getItem("prasi-layout-left") || "250"),
       right: parseInt(localStorage.getItem("prasi-layout-right") || "250"),
diff --git a/app/web/src/nova/ed/panel/side/prop-comp.tsx b/app/web/src/nova/ed/panel/side/prop-comp.tsx
new file mode 100644
index 00000000..b67c437f
--- /dev/null
+++ b/app/web/src/nova/ed/panel/side/prop-comp.tsx
@@ -0,0 +1,33 @@
+import { useGlobal } from "web-utils";
+import { EDGlobal, EdMeta } from "../../logic/ed-global";
+import { IItem } from "../../../../utils/types/item";
+import { FC } from "react";
+
+export const EdSidePropComp: FC<{ meta: EdMeta }> = ({ meta }) => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+
+  const item = meta?.item as IItem;
+  if (!item) return null;
+
+  return (
+    <div className="flex flex-col text-[12px]">
+      <div className="flex border-b p-1 h-[35px] items-center bg-slate-50 justify-between select-none">
+        <div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
+          {item.name}
+        </div>
+        <div
+          className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
+          onClick={() => {
+            p.ui.side.prop = false;
+            p.render();
+          }}
+        >
+          Close
+        </div>
+      </div>
+      <div className="flex flex-1 relative overflow-auto">
+        <div className="absolute inset-0"></div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/web/src/nova/ed/panel/side/prop-comp/item.tsx b/app/web/src/nova/ed/panel/side/prop-comp/item.tsx
new file mode 100644
index 00000000..ae7984b2
--- /dev/null
+++ b/app/web/src/nova/ed/panel/side/prop-comp/item.tsx
@@ -0,0 +1,3 @@
+export const EdPropCompItem = () => {
+  return <div></div>;
+};
diff --git a/app/web/src/nova/ed/panel/side/prop-instance.tsx b/app/web/src/nova/ed/panel/side/prop-instance.tsx
new file mode 100644
index 00000000..223f7db6
--- /dev/null
+++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx
@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { useGlobal } from "web-utils";
+import { EDGlobal, EdMeta } from "../../logic/ed-global";
+
+export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+
+  return (
+    <div className="flex flex-col text-[12px]">
+      <div className="flex border-b p-1 h-[35px] items-center bg-slate-50 justify-between select-none">
+        <div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
+          {meta.item.name}
+        </div>
+        <div className="border px-1 cursor-pointer bg-white hover:bg-blue-100">
+          Edit Component
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/web/src/nova/ed/panel/side/side-style.tsx b/app/web/src/nova/ed/panel/side/side-style.tsx
new file mode 100644
index 00000000..bab2015f
--- /dev/null
+++ b/app/web/src/nova/ed/panel/side/side-style.tsx
@@ -0,0 +1,37 @@
+import { FC } from "react";
+import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { useGlobal } from "web-utils";
+import { IItem } from "../../../../utils/types/item";
+import { EdSidePropComp } from "./prop-comp";
+
+export const EdSideStyle: FC<{ meta: EdMeta }> = ({ meta }) => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+
+  const item = meta?.item as IItem;
+  if (!item) return null;
+
+  if (item.component?.id === active.comp_id && p.ui.side.prop) {
+    return <EdSidePropComp meta={meta} />;
+  }
+
+  return (
+    <div className="flex flex-col text-[12px]">
+      <div className="flex border-b p-1 h-[35px] items-center bg-slate-50 justify-between select-none">
+        <div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
+          {item.name}
+        </div>
+        {item.component?.id === active.comp_id && (
+          <div
+            className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
+            onClick={() => {
+              p.ui.side.prop = true;
+              p.render();
+            }}
+          >
+            Edit Props
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};