fix prop-master

app/web/src/nova/ed/panel/side/prop-master.tsx

@@ -67,9 +67,8 @@ export const EdSidePropComp: FC<{ meta: IMeta }> = ({ meta }) => {
     });
 
     filtered = filtered.sort((a, b) => {
-
-      if (a.data?.name.startsWith('new_prop')) return 1;
-      if (b.data?.name.startsWith('new_prop')) return -1;
+      if (a.data?.name.startsWith("new_prop")) return 1;
+      if (b.data?.name.startsWith("new_prop")) return -1;
       if (
         a.data &&
         b.data &&
@@ -82,6 +81,34 @@ export const EdSidePropComp: FC<{ meta: IMeta }> = ({ meta }) => {
     });
   }
 
+  const grouped: Record<string, NodeModel<PropItem>[]> = {};
+  for (const item of filtered) {
+    let [group, ...names] = item.text.split("__");
+    let name = names.join("_");
+
+    if (!name && !item.text.endsWith("__")) {
+      name = group;
+      group = "_";
+    }
+
+    if (!grouped[group]) {
+      grouped[group] = [];
+    }
+
+    grouped[group].push(item);
+  }
+  const final_tree: NodeModel<PropItem>[] = [];
+  for (const items of Object.values(grouped)) {
+    const idx = items.findIndex((e) => e.text.endsWith("__"));
+    const plucked = items.splice(idx, 1);
+    items.unshift(plucked[0]);
+    for (const item of items) {
+      final_tree.push(item);
+    }
+  }
+
+  let hide = localStorage.getItem("prasi-prop-hide")?.split(",") || [];
+
   return (
     <div className="flex flex-col text-[12px] flex-1">
       <div className="flex border-b p-1 h-[28px] items-center bg-slate-50 justify-between select-none">
@@ -158,7 +185,7 @@ export const EdSidePropComp: FC<{ meta: IMeta }> = ({ meta }) => {
             })}
           >
             <TypedTree
-              tree={filtered}
+              tree={final_tree}
               sort={false}
               onDrop={(tree, { dragSourceId, relativeIndex }) => {
                 const doc = meta.mitem?.doc;
@@ -178,6 +205,21 @@ export const EdSidePropComp: FC<{ meta: IMeta }> = ({ meta }) => {
                   node={node}
                   render={render}
                   params={params}
+                  hidden={
+                    node.text.includes("__") &&
+                    hide.includes(node.text.split("__")[0])
+                  }
+                  toggleExpand={(node) => {
+                    const group = node.text.split("__")[0];
+                    if (hide.includes(group)) {
+                      hide = hide.filter((e) => e !== group);
+                    } else {
+                      hide.push(group);
+                    }
+
+                    localStorage.setItem("prasi-prop-hide", hide?.join(","));
+                    local.render();
+                  }}
                 />
               )}
               rootId={"root"}

app/web/src/nova/ed/panel/side/prop-master/tree-item.tsx

@@ -1,4 +1,4 @@
-import { NodeRender } from "@minoru/react-dnd-treeview";
+import { NodeModel, NodeRender } from "@minoru/react-dnd-treeview";
 import { FC } from "react";
 import { useLocal } from "web-utils";
 import { TypedMap } from "yjs-types";
@@ -6,6 +6,7 @@ import { MItem } from "../../../../../utils/types/item";
 import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn";
 import { Popover } from "../../../../../utils/ui/popover";
 import { EdPropPopoverForm, propPopover } from "./prop-form";
+import { ChevronDown, ChevronRight } from "../../tree/node/item/indent";
 
 export type PropItem = {
   name: string;
@@ -18,7 +19,9 @@ export const EdPropCompTreeItem: FC<{
   node: Parameters<NodeRender<PropItem>>[0];
   params: Parameters<NodeRender<PropItem>>[1];
   render: () => void;
-}> = ({ node, params, render }) => {
+  hidden: boolean;
+  toggleExpand: (node: NodeModel<PropItem>) => void;
+}> = ({ node, params, render, hidden, toggleExpand }) => {
   const local = useLocal({ closing: false });
 
   if (node.id === "root") {
@@ -30,12 +33,43 @@ export const EdPropCompTreeItem: FC<{
   else if (node.data?.prop.meta?.type === "file") type = "FILE";
   else if (node.data?.prop.meta?.type === "content-element") type = "JSX";
 
-  const plabel = node.data?.prop.label;
+  let is_group = false;
+  let is_header = false;
+  if (node.text.split("__").length >= 2) {
+    is_group = true;
+    if (node.text.endsWith("__")) {
+      is_header = true;
+    }
+  }
+
+  if (hidden && !is_header) return null;
+
+  let plabel = node.data?.prop.label;
+  if (is_group) {
+    if (!plabel) {
+      plabel = node.text.split("__").slice(1).join(" ");
+    }
+
+    if (!plabel && is_header) {
+      plabel = node.text.split("__").shift();
+    }
+  }
   const label = (
     <div className="flex items-center justify-between flex-1">
-      <div className="flex-1">
-        {node.text}{" "}
-        {plabel && <span className="border px-1 ml-2 text-xs">{plabel}</span>}
+      {is_header && (
+        <div
+          className={"pr-1"}
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            toggleExpand(node);
+          }}
+        >
+          {!hidden ? <ChevronDown /> : <ChevronRight />}
+        </div>
+      )}
+      <div className={cx("flex-1", is_group && !is_header && "pl-4")}>
+        <>{plabel || node.text}</>
       </div>
       {node.data?.prop.typings && (
         <div className="text-[7px] h-[14px] px-1 border border-slate-400 ml-1 text-slate-500 flex items-center">
@@ -47,6 +81,7 @@ export const EdPropCompTreeItem: FC<{
       </div>
     </div>
   );
+
   return (
     <div className="flex items-stretch border-b text-[14px] min-h-[27px]">
       <div