Replace webpack with only esbuild, replace react with preact

reduce node_modules size to only 18M

reduce js file bundle to 20%

web/src/component/FilesInFolder.jsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import {useParams} from "react-router";
+import {useState, useEffect} from "react";
+import {useNavigate} from "react-router-dom";
+import {useQuery} from "./Common";
+import FilesTable from "./FilesTable";
+import {Tr} from "../translate";
+
+function FilesInFolder(props) {
+  let params = useParams();
+  const query = useQuery();
+  const navigator = useNavigate();
+  const [files, setFiles] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const offset = parseInt(query.get("o")) || 0;
+  const [newFoldername, setNewFoldername] = useState("");
+  const [folderPath, setFolderPath] = useState("");
+  const limit = 10;
+
+  function refresh() {
+    setIsLoading(true);
+    fetch("/api/v1/get_files_in_folder", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({
+        folder_id: parseInt(params.id),
+        offset: offset,
+        limit: limit,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+        } else {
+          setFiles(data.files);
+          setFolderPath(data.folder);
+          if (data.files.length > 0) {
+            setNewFoldername(data.files[0].foldername);
+          }
+        }
+      })
+      .catch((error) => alert(error))
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }
+
+  useEffect(() => {
+    refresh();
+  }, [params.id, offset]);
+
+  function nextPage() {
+    navigator(`/folders/${params.id}?o=${offset + limit}`);
+  }
+
+  function lastPage() {
+    const offsetValue = offset - limit;
+    if (offsetValue < 0) {
+      return;
+    }
+    navigator(`/folders/${params.id}?o=${offsetValue}`);
+  }
+
+  function updateFoldername() {
+    setIsLoading(true);
+    fetch("/api/v1/update_foldername", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({
+        id: parseInt(params.id),
+        foldername: newFoldername,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+        } else {
+          refresh();
+        }
+      })
+      .catch((error) => alert(error))
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }
+
+  function resetFoldername() {
+    setIsLoading(true);
+    fetch("/api/v1/reset_foldername", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({
+        id: parseInt(params.id),
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+        } else {
+          refresh();
+        }
+      })
+      .catch((error) => alert(error))
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }
+
+  return (
+    <div className="page">
+      <h3>{Tr("Files in Folder")}</h3>
+      <div className="search_toolbar">
+        <button onClick={lastPage}>{Tr("Last page")}</button>
+        <button disabled>
+          {isLoading
+            ? Tr("Loading...")
+            : `${offset} - ${offset + files.length}`}
+        </button>
+        <button onClick={nextPage}>{Tr("Next page")}</button>
+      </div>
+      <FilesTable setPlayingFile={props.setPlayingFile} files={files} />
+      <span>{folderPath}</span>
+      <div>
+        <input
+          type="text"
+          value={newFoldername}
+          onChange={(e) => setNewFoldername(e.target.value)}
+        />
+        <div>
+          <button onClick={() => updateFoldername()}>{Tr("Save")}</button>
+          <button onClick={() => resetFoldername()}>{Tr("Reset")}</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FilesInFolder;