From 0e7c9e5adc9736437f387dd3142f7db387dac865 Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Tue, 5 Mar 2024 12:00:56 +0700
Subject: [PATCH] wip fix

---
 app/srv/ws/sync/actions/code_edit.ts          |  4 ++
 .../src/nova/ed/panel/side/prop-instance.tsx  |  2 +
 .../ed/panel/side/prop-instance/prop-code.tsx |  5 ++-
 .../panel/side/prop-instance/prop-option.tsx  |  2 +-
 .../ed/panel/side/prop-instance/prop-text.tsx |  5 ++-
 .../src/nova/ed/panel/side/prop-master.tsx    |  7 ++--
 .../ed/panel/side/prop-master/prop-form.tsx   | 40 ++++++++++++++++++-
 .../ed/panel/side/prop-master/tree-item.tsx   |  5 ++-
 app/web/src/utils/types/meta-fn.ts            |  1 +
 9 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/app/srv/ws/sync/actions/code_edit.ts b/app/srv/ws/sync/actions/code_edit.ts
index 31a0e0a9..3a6d472f 100644
--- a/app/srv/ws/sync/actions/code_edit.ts
+++ b/app/srv/ws/sync/actions/code_edit.ts
@@ -12,6 +12,8 @@ import { parseJs } from "../editor/parser/parse-js";
 import { snapshot } from "../entity/snapshot";
 import { validate } from "uuid";
 import { gzipAsync } from "utils/diff/diff";
+import { user } from "../entity/user";
+import { loadComponent } from "../editor/load-component";
 const decoder = new TextDecoder();
 
 const timeout = {
@@ -40,6 +42,8 @@ export const code_edit: SAction["code"]["edit"] = async function (
     } else if (comp_id) {
       save_to = "comp";
       const ref = docs.comp[comp_id];
+
+      await loadComponent(comp_id, this);
       if (ref) {
         root = ref.doc.getMap("map").get("root");
         doc = ref.doc as Doc;
diff --git a/app/web/src/nova/ed/panel/side/prop-instance.tsx b/app/web/src/nova/ed/panel/side/prop-instance.tsx
index ae07e9b5..565d469e 100644
--- a/app/web/src/nova/ed/panel/side/prop-instance.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx
@@ -238,6 +238,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
                         <EdPropInstanceCode
                           mprop={mprop}
                           name={name}
+                          label={cprop.label}
                           labelClick={labelClick}
                           onEditCode={createEditScript(p, "value", mprop, name)}
                         />
@@ -247,6 +248,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
                         {type === "text" && (
                           <EdPropInstanceText
                             mprop={mprop}
+                            label={cprop.label}
                             name={name}
                             labelClick={labelClick}
                           />
diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx
index 7bb7a7bf..44fb47a1 100644
--- a/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx
@@ -5,15 +5,16 @@ import { useGlobal } from "web-utils";
 import { EDGlobal, active } from "../../../logic/ed-global";
 
 export const EdPropInstanceCode: FC<{
+  label?: string;
   name: string;
   mprop: FMCompDef;
   labelClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
   onEditCode: React.MouseEventHandler<HTMLDivElement> | undefined;
-}> = ({ name, labelClick, onEditCode }) => {
+}> = ({ label, name, labelClick, onEditCode }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   return (
     <div className="flex items-center min-h-[28px]">
-      <EdPropLabel name={name} labelClick={labelClick} />
+      <EdPropLabel name={label || name} labelClick={labelClick} />
       <div className="flex-1 flex justify-end pr-1">
         <div
           className="m-1 px-1 bg-white cursor-pointer hover:bg-blue-500 hover:text-white hover:border-blue-500 font-mono border border-slate-300 text-[11px] select-none"
diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx
index f409aa9d..2481aec4 100644
--- a/app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx
@@ -100,7 +100,7 @@ else metaOptions = resOpt;
 
   return (
     <div className="flex items-stretch min-h-[28px]">
-      <EdPropLabel name={name} labelClick={labelClick} />
+      <EdPropLabel name={cprop.label || name} labelClick={labelClick} />
       <div className="flex flex-1 justify-end">
         {mode === "dropdown" && (
           <>
diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx
index e6425108..a0bf394d 100644
--- a/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx
@@ -13,9 +13,10 @@ import { EDGlobal } from "../../../logic/ed-global";
 
 export const EdPropInstanceText: FC<{
   name: string;
+  label?: string;
   mprop: FMCompDef;
   labelClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-}> = ({ name, mprop, labelClick }) => {
+}> = ({ label, name, mprop, labelClick }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const val = mprop.get("value");
 
@@ -32,7 +33,7 @@ export const EdPropInstanceText: FC<{
 
   return (
     <div className="flex items-center min-h-[28px]">
-      <EdPropLabel name={name} labelClick={labelClick} />
+      <EdPropLabel name={label || name} labelClick={labelClick} />
       <AutoHeightTextarea
         className="flex-1 outline-none border-l p-1 overflow-hidden focus:bg-blue-50"
         value={local.value || ""}
diff --git a/app/web/src/nova/ed/panel/side/prop-master.tsx b/app/web/src/nova/ed/panel/side/prop-master.tsx
index 307482f8..1b1744fa 100644
--- a/app/web/src/nova/ed/panel/side/prop-master.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-master.tsx
@@ -7,14 +7,13 @@ import {
 } from "@minoru/react-dnd-treeview";
 import { FC, useState } from "react";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { useGlobal, useLocal } from "web-utils";
+import { useGlobal } from "web-utils";
 import { IItem } from "../../../../utils/types/item";
 import { FMCompDef } from "../../../../utils/types/meta-fn";
 import { EDGlobal, IMeta, active } from "../../logic/ed-global";
-import { EdPropCompTreeItem, PropItem } from "./prop-master/tree-item";
-import { propPopover } from "./prop-master/prop-form";
-import { ChevronLeft } from "../popup/script/workbench";
 import { treeRebuild } from "../../logic/tree/build";
+import { propPopover } from "./prop-master/prop-form";
+import { EdPropCompTreeItem, PropItem } from "./prop-master/tree-item";
 
 const propRef = {
   el: null as any,
diff --git a/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx b/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx
index 8e3086f6..cd22e5fe 100644
--- a/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn";
 import { useGlobal, useLocal } from "web-utils";
 import { TypedMap } from "yjs-types";
@@ -23,12 +23,18 @@ export const EdPropPopoverForm: FC<{
   const mmeta = mprop.get("meta");
   const local = useLocal({
     name,
+    label: "",
     rename_timeout: null as any,
   });
 
   if (!mmeta) return null;
   const type = mmeta.get("type");
 
+  useEffect(() => {
+    local.label = mprop.get("label") || local.name.replace(/\_/gi, " ");
+    local.render();
+  }, []);
+
   const rename = () => {
     const keys = Object.keys(mprop.parent?.toJSON());
     if ([...keys, ...invalidKeyword].includes(local.name)) {
@@ -113,6 +119,10 @@ export const EdPropPopoverForm: FC<{
               .toLowerCase()
               .replace(/\W/gi, "_");
 
+            if (!local.label) {
+              local.label = local.name.replace(/\_/gi, " ");
+            }
+
             local.render();
           }}
           onBlur={() => {
@@ -128,6 +138,32 @@ export const EdPropPopoverForm: FC<{
         />
       </div>
 
+      <div className="border-t border-slate-300 px-2 pt-2 pb-1 flex flex-col items-stretch">
+        <div className="uppercase text-xs text-slate-500">Label</div>
+        <input
+          spellCheck={false}
+          type="text"
+          className="p-1 outline-none border focus:border-blue-500"
+          value={local.label}
+          onChange={(e) => {
+            local.label = e.currentTarget.value;
+            local.render();
+          }}
+          onBlur={() => {
+            mprop.set("label", local.label);
+            if (!local.label) {
+              local.label = local.name.replace(/\_/gi, " ");
+              local.render();
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.currentTarget.blur();
+            }
+          }}
+        />
+      </div>
+
       {type === "content-element" && (
         <>
           <div className="border-t border-slate-300 pl-2 pt-1 flex justify-between items-center">
@@ -139,7 +175,7 @@ export const EdPropPopoverForm: FC<{
               EDIT CODE
             </div>
           </div>
-          
+
           <div className="border-t border-slate-300 pl-2 pt-1 flex justify-between items-center">
             <div className="uppercase text-xs label self-stretch flex items-center">
               Visible
diff --git a/app/web/src/nova/ed/panel/side/prop-master/tree-item.tsx b/app/web/src/nova/ed/panel/side/prop-master/tree-item.tsx
index 1a23b112..32efd230 100644
--- a/app/web/src/nova/ed/panel/side/prop-master/tree-item.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-master/tree-item.tsx
@@ -29,9 +29,12 @@ export const EdPropCompTreeItem: FC<{
   if (node.data?.prop.meta?.type === "option") type = "OPT";
   else if (node.data?.prop.meta?.type === "content-element") type = "JSX";
 
+  const plabel = node.data?.prop.label;
   const label = (
     <div className="flex items-center justify-between flex-1">
-      <div>{node.text}</div>
+      <div>
+        {node.text} {plabel && <span className="border px-1 ml-2 text-xs">{plabel}</span>}
+      </div>
       <div className="text-[9px] px-1 border border-slate-400 ml-1 text-slate-500">
         {type}
       </div>
diff --git a/app/web/src/utils/types/meta-fn.ts b/app/web/src/utils/types/meta-fn.ts
index 114ad43f..1e7d4a57 100644
--- a/app/web/src/utils/types/meta-fn.ts
+++ b/app/web/src/utils/types/meta-fn.ts
@@ -29,6 +29,7 @@ export type FNCompDef = {
   idx: number;
   typings: string;
   type: string;
+  label?: string;
   value: any;
   valueBuilt: any;
   gen?: string;