wip fix

app/web/package.json

@@ -15,6 +15,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@paralleldrive/cuid2": "2.2.2",
     "react-contenteditable": "^3.3.7",
+    "react-dropzone": "14.2.3",
     "@parcel/packager-wasm": "^2.10.3",
     "@parcel/service-worker": "^2.10.3",
     "recast": "^0.23.4",

app/web/src/base/load/api/api-proxy.tsx

@@ -46,11 +46,19 @@ export const apiProxy = (api_url: string) => {
                   }
 
                   if (api_ref) {
+                    if (actionName === "_raw") {
+                      const url = `${base_url}${rest.join("")}`;
+
+                      const result = await fetchSendApi(url, rest);
+                      resolve(result);
+                      return;
+                    }
+
                     if (!api_ref.apiEntry) api_ref.apiEntry = {};
                     if (api_ref.apiEntry && !api_ref.apiEntry[actionName]) {
                       reject(
                         `API ${actionName.toString()} not found, existing API: \n   - ${Object.keys(
-                          api_ref || {}
+                          api_ref.apiEntry || {}
                         ).join("\n   - ")}`
                       );
                       return;

app/web/src/base/root.tsx

@@ -29,7 +29,6 @@ export const Root: FC<{}> = ({}) => {
   prasiContext.render = local.render;
 
   const Provider = GlobalContext.Provider as FC<{ value: any; children: any }>;
-
   const found = local.router.lookup(location.pathname);
 
   if (found) {

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

@@ -18,6 +18,7 @@ import { EdPopScript } from "./panel/popup/script/pop-script";
 import { EdPopSite } from "./panel/popup/site/site-popup";
 import { EdPageHistoryMain } from "./panel/main/main-history";
 import { jscript } from "../../utils/script/jscript";
+import { useEffect } from "react";
 
 export const EdBase = () => {
   const p = useGlobal(EDGlobal, "EDITOR");

app/web/src/nova/ed/ed-mid.tsx

@@ -10,6 +10,7 @@ import { useGlobal } from "web-utils";
 import { ResponsiveToggle } from "./panel/header/right/responsive-toggle";
 import { EdCompEditable } from "./panel/header/mid/comp-editable";
 import { MobileQRButton } from "./panel/side/style/tools/mobile-qr";
+import { EdFileBrowser } from "./panel/file/file-browser";
 
 export const EdMid: FC<{}> = () => {
   const p = useGlobal(EDGlobal, "EDITORF");
@@ -37,6 +38,7 @@ export const EdMid: FC<{}> = () => {
           </div>
         </div>
         <div className="flex items-stretch flex-1 justify-end">
+          <EdFileBrowser />
           {p.site.responsive !== "desktop-only" && <MobileQRButton />}
           <label className=" text-slate-400 flex items-center pr-1">
             <div className=" px-1"> Zoom</div>

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

@@ -231,7 +231,7 @@ export const EDGlobal = {
       open: {} as Record<string, string[]>,
     },
     popup: {
-      file: { enabled: false },
+      file: { enabled: false, open: true },
       code: {
         init: false,
         open: false,

app/web/src/nova/ed/panel/file/file-browser.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useEffect } from "react";
+import { useDropzone } from "react-dropzone";
+import { useGlobal, useLocal } from "web-utils";
+import { apiProxy } from "../../../../base/load/api/api-proxy";
+import { Modal } from "../../../../utils/ui/modal";
+import { EDGlobal } from "../../logic/ed-global";
+import { EdFileTree } from "./file-tree";
+import { FEntry } from "./type";
+
+export const EdFileBrowser = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+  const local = useLocal({
+    entry: {} as Record<string, FEntry[]>,
+  });
+
+  useEffect(() => {
+    if (!p.script.api && p.site.config?.api_url) {
+      p.script.api = apiProxy(p.site.config.api_url);
+      p.render();
+    }
+
+    p.script.api._raw(`/_file/?dir`).then((e: FEntry[]) => {
+      if (Array.isArray(e)) {
+        local.entry = { "/": e };
+        p.ui.popup.file.enabled = true;
+        p.render();
+      }
+    });
+  }, []);
+
+  const onDrop = useCallback((acceptedFiles: any[]) => {
+    console.log(acceptedFiles);
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    noClick: true,
+  });
+
+  if (!p.ui.popup.file.enabled) return null;
+
+  return (
+    <>
+      <div
+        className="items-center flex px-2 cursor-pointer border border-transparent hover:bg-slate-200 transition-all hover:border-black"
+        onClick={() => {
+          p.ui.popup.file.open = true;
+          p.render();
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M20 10a1 1 0 001-1V6a1 1 0 00-1-1h-2.5a1 1 0 01-.8-.4l-.9-1.2A1 1 0 0015 3h-2a1 1 0 00-1 1v5a1 1 0 001 1zM20 21a1 1 0 001-1v-3a1 1 0 00-1-1h-2.9a1 1 0 01-.88-.55l-.42-.85a1 1 0 00-.92-.6H13a1 1 0 00-1 1v5a1 1 0 001 1zM3 5a2 2 0 002 2h3"></path>
+          <path d="M3 3v13a2 2 0 002 2h3"></path>
+        </svg>{" "}
+        <div className="pl-1">Files</div>
+      </div>
+
+      <Modal
+        fade={false}
+        open={p.ui.popup.file.open}
+        onOpenChange={(open) => {
+          if (!open) {
+            p.ui.popup.file.open = false;
+            p.render();
+          }
+        }}
+      >
+        <div
+          {...getRootProps()}
+          className={cx(
+            "bg-white select-none fixed inset-[50px] flex",
+            css`
+              outline: none;
+            `
+          )}
+        >
+          <input {...getInputProps()} />
+          {isDragActive && (
+            <div className="absolute inset-0 flex items-center justify-center flex-col bg-blue-50 border-4 border-blue-500">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="lucide lucide-upload"
+                viewBox="0 0 24 24"
+              >
+                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path>
+                <path d="M17 8L12 3 7 8"></path>
+                <path d="M12 3L12 15"></path>
+              </svg>
+              <div>Drag Here to Upload</div>
+            </div>
+          )}
+
+          <div className="flex flex-1 items-stretch">
+            <div className="flex min-w-[200px] border-r">
+              <EdFileTree entry={local.entry} />
+            </div>
+            <div>Moko</div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};

app/web/src/nova/ed/panel/file/file-tree.tsx

@@ -0,0 +1,52 @@
+import {
+  MultiBackend,
+  NodeModel,
+  Tree as DNDTree,
+  getBackendOptions,
+} from "@minoru/react-dnd-treeview";
+import { DndProvider } from "react-dnd";
+import { FEntry } from "./type";
+import { FC } from "react";
+
+const Tree = DNDTree<FEntry>;
+
+export const EdFileTree: FC<{ entry: Record<string, FEntry[]> }> = ({
+  entry,
+}) => {
+  const tree: NodeModel<FEntry>[] = [];
+  for (const [path, entries] of Object.entries(entry)) {
+    const arr = path.split("/");
+    const name = arr.pop() || "/";
+    tree.push({ id: path, text: name, parent: arr.join("/") });
+    for (const e of entries) {
+      if (e.type === "dir") {
+        tree.push({
+          id: (path === "/" ? "" : path) + "/" + e.name,
+          text: e.name,
+          parent: path,
+        });
+      }
+    }
+  }
+
+  return (
+    <DndProvider backend={MultiBackend} options={getBackendOptions()}>
+      <Tree
+        tree={tree}
+        dragPreviewRender={() => <></>}
+        rootId=""
+        initialOpen={true}
+        onDrop={async (newTree, opt) => {}}
+        render={(node, { depth, isOpen, onToggle, hasChild }) => (
+          <div
+            className={cx(css`
+              padding-left: ${(depth * 10) + 10}px;
+            `)}
+          >
+            {node.text}
+          </div>
+        )}
+      ></Tree>
+    </DndProvider>
+  );
+};

app/web/src/nova/ed/panel/file/type.ts

@@ -0,0 +1,5 @@
+export type FEntry = {
+  name: string;
+  size: number;
+  type: "dir" | "file";
+};