Replace webpack with only esbuild

reduce node_modules size to only 18M

web/src/component/Share.jsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router";
+import FilesTable from "./FilesTable";
+import { Tr, tr, langCodeContext } from "../translate";
+
+function Share(props) {
+  let params = useParams();
+  const { langCode } = useContext(langCodeContext);
+
+  const [file, setFile] = useState({});
+  useEffect(() => {
+    fetch("/api/v1/get_file_info", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        id: parseInt(params.id),
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setFile(data);
+      })
+      .catch((error) => {
+        alert("get_file_info error: " + error);
+      });
+  }, [params]);
+
+  // change title
+  useEffect(() => {
+    const oldTitle = document.title;
+
+    document.title = `${tr("Share", langCode)}🎵: ${
+      file.filename
+    } - MSW Open Music`;
+
+    // set title back
+    return () => {
+      document.title = oldTitle;
+    };
+  }, [file]);
+
+  return (
+    <div className="page">
+      <h3>{Tr("Share with others!")}</h3>
+      <p>
+        {Tr("Share link")}:{" "}
+        <a href={window.location.href}>{window.location.href}</a>
+      </p>
+      <p>
+        👇 {Tr("Click the filename below to enjoy music!")}
+        <br />
+      </p>
+      <FilesTable setPlayingFile={props.setPlayingFile} files={[file]} />
+    </div>
+  );
+}
+
+export default Share;