fix

app/web/package.json

@@ -7,20 +7,20 @@
   },
   "dependencies": {
     "@babel/parser": "^7.23.0",
-    "@floating-ui/react": "^0.26.0",
+    "@floating-ui/react": "^0.26.1",
     "@leeoniya/ufuzzy": "^1.0.11",
     "@minoru/react-dnd-treeview": "^3.4.4",
     "@monaco-editor/react": "^4.6.0",
     "@paralleldrive/cuid2": "2.2.2",
-    "@parcel/packager-wasm": "^2.10.0",
+    "@parcel/packager-wasm": "^2.10.1",
-    "@parcel/service-worker": "^2.10.0",
+    "@parcel/service-worker": "^2.10.1",
     "@qiwi/deep-proxy": "^2.0.3",
-    "@swc/wasm-web": "1.3.94-nightly-20231014.1",
+    "@swc/wasm-web": "1.3.96-nightly-20231025.1",
     "algoliasearch": "^4.20.0",
     "date-fns": "^2.30.0",
     "dbgen": "workspace:*",
     "downshift": "^8.2.2",
-    "esbuild-wasm": "^0.19.4",
+    "esbuild-wasm": "^0.19.5",
     "hash-wasm": "^4.10.0",
     "idb-keyval": "^6.2.1",
     "immer": "^10.0.3",
@@ -53,10 +53,10 @@
     "react-dom": "18.2.0",
     "react-is": "^18.2.0",
     "react-use-error-boundary": "^3.0.0",
-    "react-virtuoso": "^4.6.1",
+    "react-virtuoso": "^4.6.2",
     "safe-stable-stringify": "^2.4.3",
     "svgo": "^3.0.2",
-    "textdiff-create": "^1.1.9",
+    "textdiff-create": "^1.1.10",
     "tinycolor2": "^1.6.0",
     "ua-parser-js": "^1.0.36",
     "uuid": "9.0.1",
@@ -67,39 +67,38 @@
     "yjs-types": "^0.0.1"
   },
   "devDependencies": {
-    "@types/lodash.concat": "^4.5.7",
+    "@types/lodash.concat": "^4.5.8",
-    "@types/lodash.find": "^4.6.7",
+    "@types/lodash.find": "^4.6.8",
-    "@types/lodash.findindex": "^4.6.7",
+    "@types/lodash.findindex": "^4.6.8",
-    "@types/lodash.indexof": "^4.0.7",
+    "@types/lodash.indexof": "^4.0.8",
-    "@types/lodash.orderby": "^4.6.7",
+    "@types/lodash.orderby": "^4.6.8",
-    "@types/lodash.slice": "^4.2.7",
+    "@types/lodash.slice": "^4.2.8",
-    "@types/lodash.throttle": "^4.1.7",
+    "@types/lodash.throttle": "^4.1.8",
-    "@types/lodash.transform": "^4.6.7",
+    "@types/lodash.transform": "^4.6.8",
-    "@types/lodash.uniq": "^4.5.7",
+    "@types/lodash.uniq": "^4.5.8",
-    "@types/lodash.uniqby": "^4.7.7",
+    "@types/lodash.uniqby": "^4.7.8",
-    "@types/react-is": "^18.2.2",
+    "@types/react-is": "^18.2.3",
-    "@types/textdiff-create": "^1.0.0",
+    "@types/textdiff-create": "^1.0.1",
-    "@types/ua-parser-js": "^0.7.37",
+    "@types/ua-parser-js": "^0.7.38",
-    "@parcel/config-default": "2.10.0",
+    "@parcel/config-default": "2.10.1",
-    "@parcel/core": "2.10.0",
+    "@parcel/core": "2.10.1",
-    "@parcel/reporter-bundle-analyzer": "^2.10.0",
+    "@parcel/transformer-raw": "^2.10.1",
-    "@parcel/transformer-raw": "^2.10.0",
     "@tinijs/parcel-reporter-copy-public": "0.0.2",
-    "@types/lodash.capitalize": "4.2.7",
+    "@types/lodash.capitalize": "4.2.8",
-    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.debounce": "^4.0.8",
-    "@types/lodash.get": "^4.4.7",
+    "@types/lodash.get": "^4.4.8",
-    "@types/lodash.set": "^4.3.7",
+    "@types/lodash.set": "^4.3.8",
-    "@types/lodash.trim": "4.5.7",
+    "@types/lodash.trim": "4.5.8",
     "@types/prettier": "3.0.0",
-    "@types/react": "^18.2.0",
+    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.0",
+    "@types/react-dom": "^18.2.14",
-    "@types/tinycolor2": "^1.4.4",
+    "@types/tinycolor2": "^1.4.5",
-    "@types/uuid": "9.0.5",
+    "@types/uuid": "9.0.6",
-    "@types/vscode": "^1.83.0",
+    "@types/vscode": "^1.83.1",
-    "parcel": "2.10.0",
+    "parcel": "2.10.1",
     "parcel-bundler-splitable": "0.0.4",
     "postcss": "8.4.31",
-    "tailwindcss": "3.3.3"
+    "tailwindcss": "3.3.4"
   },
   "staticFiles": {
     "staticPath": "public"

app/web/src/render/ed/ed-base.tsx

@@ -7,6 +7,7 @@ import { EdMain } from "./panel/main/main";
 import { EdTree } from "./panel/tree/tree";
 import { edUndoManager } from "./logic/ed-undo";
 import { EdPopCompGroup } from "./panel/popup/comp-group";
+import { EdPaneResize } from "./panel/main/pane-resize";
 
 export const EdBase = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -34,6 +35,20 @@ export const EdBase = () => {
       <div className="flex justify-between"></div>
       <div className="flex flex-1 items-stretch">
         <EdTree />
+        <EdPaneResize
+          size={p.ui.layout.left}
+          onResize={(size) => {
+            if (size > 100) {
+              p.ui.layout.left = size;
+              p.render();
+            }
+          }}
+          onDone={(size) => {
+            if (size > 100) {
+              localStorage.setItem("prasi-layout-left", size.toString());
+            }
+          }}
+        />
         <EdMain />
       </div>
 

app/web/src/render/ed/logic/ed-global.ts

@@ -87,6 +87,10 @@ export const EDGlobal = {
     group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
   },
   ui: {
+    layout: {
+      left: parseInt(localStorage.getItem("prasi-layout-left") || "250"),
+      right: parseInt(localStorage.getItem("prasi-layout-right") || "250"),
+    },
     prevent_indent_hook: false,
     syncing: false,
     tree: {

app/web/src/render/ed/panel/main/main.tsx

@@ -1,3 +1,3 @@
 export const EdMain = () => {
-  return <div className="flex flex-1"></div>;
+  return <div className="flex flex-1 bg-red-500"></div>;
 };

app/web/src/render/ed/panel/main/pane-resize.tsx

@@ -0,0 +1,72 @@
+import { useLocal } from "web-utils";
+
+export const EdPaneResize = (arg: {
+  size: number;
+  onResize: (size: number) => void;
+  onDone: (size: number) => void;
+}) => {
+  const local = useLocal({
+    default: arg.size,
+    dragging: false,
+    sx: 0,
+    size: 0,
+    result: 0,
+    inzone: false,
+  });
+
+  const stopDrag = () => {
+    local.dragging = false;
+    local.render();
+    arg.onDone(arg.size);
+  };
+
+  return (
+    <>
+      {local.dragging && (
+        <div
+          className="absolute inset-0 cursor-ew-resize"
+          onPointerOver={() => {
+            local.inzone = true;
+          }}
+          onPointerMove={(e) => {
+            local.result = Math.max(0, local.size + e.clientX - local.sx);
+            arg.onResize(local.result);
+          }}
+          onPointerUp={stopDrag}
+          onPointerDown={stopDrag}
+        ></div>
+      )}
+      <div className={cx("relative")}>
+        <div
+          className={cx(
+            "w-[4px] absolute inset-0 -mx-[2px] cursor-ew-resize hover:bg-blue-400 transition-all duration-700",
+            local.dragging && "bg-blue-400"
+          )}
+          onDoubleClick={() => {
+            arg.onResize(local.default);
+          }}
+          onPointerUp={stopDrag}
+          onPointerLeave={() => {
+            setTimeout(() => {
+              if (!local.inzone) {
+                stopDrag();
+              }
+            }, 300);
+          }}
+          onPointerDown={(e) => {
+            window.removeEventListener("blur", stopDrag);
+            window.addEventListener("blur", stopDrag);
+
+            e.preventDefault();
+            e.stopPropagation();
+            local.dragging = true;
+            local.sx = e.clientX;
+            local.size = arg.size;
+            local.result = arg.size;
+            local.render();
+          }}
+        ></div>
+      </div>
+    </>
+  );
+};

app/web/src/render/ed/panel/tree/node/item/ctx-menu.tsx

@@ -100,7 +100,7 @@ export const EdTreeCtxMenu = ({
       )}
       <MenuItem
         label="Cut"
-        hotKey={<HotKey shortcut={"X"} />}
+        // hotKey={<HotKey shortcut={"X"} />}
         onClick={() => edActionCut(p, item)}
       />
       <MenuItem

app/web/src/render/ed/panel/tree/tree.tsx

@@ -1,19 +1,29 @@
 import { MultiBackend, getBackendOptions } from "@minoru/react-dnd-treeview";
 import { DndProvider } from "react-dnd";
-import { useGlobal } from "web-utils";
-import { EDGlobal } from "../../logic/ed-global";
 import { EdTreeBody } from "./body";
 import { EdTreeSearch } from "./search";
+import { useGlobal } from "web-utils";
+import { EDGlobal } from "../../logic/ed-global";
 
 export const EdTree = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
   return (
-    <div className="flex flex-col min-w-[300px] relative border-r">
+    <div
-      <EdTreeSearch />
+      className={cx(
-      <div className="tree-body flex relative flex-1 overflow-y-auto overflow-x-hidden">
+        "flex flex-col relative border-r",
-        <div className="absolute inset-0 flex">
+        css`
-          <DndProvider backend={MultiBackend} options={getBackendOptions()}>
+          min-width: ${p.ui.layout.left}px;
-            <EdTreeBody />
+        `
-          </DndProvider>
+      )}
+    >
+      <div className="absolute inset-0 flex flex-col overflow-hidden">
+        <EdTreeSearch />
+        <div className="tree-body flex relative flex-1 overflow-y-auto overflow-x-hidden">
+          <div className="absolute inset-0 flex">
+            <DndProvider backend={MultiBackend} options={getBackendOptions()}>
+              <EdTreeBody />
+            </DndProvider>
+          </div>
         </div>
       </div>
     </div>

app/web/src/utils/sync/ws-client.ts

@@ -16,7 +16,7 @@ import { initIDB } from "./idb";
 const packr = new Packr({ structuredClone: true });
 
 /** CONSTANT */
-const WS_DEBUG = false;
+const WS_DEBUG = true;
 const RECONNECT_TIMEOUT = 1000;
 
 const conf = {