fix: build issues

gui/app/App.tsx

@@ -3,6 +3,7 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import { Menu } from "./components/Sidebar";
 import { Bounce, ToastContainer } from "react-toastify";
+import { Suspense } from "react";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -24,7 +25,9 @@ export const App = ({ children }: APPProps) => {
       className={`${geistSans.variable} ${geistMono.variable} antialiased flex h-screen overflow-hidden`}
     >
       <Menu></Menu>
-      <div className="p-2 overflow-auto w-full">{children}</div>
+      <div className="p-2 overflow-auto w-full">
+        <Suspense>{children}</Suspense>
+      </div>
       <ToastContainer
         position="bottom-right"
         autoClose={5000}

gui/app/components/ModTable.tsx

@@ -32,7 +32,7 @@ export const ModTable = () => {
               <Checkbox />
             </TableCell>
             <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
-              Apple MacBook Pro 17"
+              Apple MacBook Pro 17
             </TableCell>
             <TableCell>Sliver</TableCell>
             <TableCell>Laptop</TableCell>

gui/app/components/Sidebar.tsx

@@ -32,7 +32,7 @@ export const Menu = () => {
             packsData.map((pack) => {
               return (
                 <SidebarItem
-                  href={`/pack/?id=${pack._id}`}
+                  href={`/pack?id=${pack._id}`}
                   key={pack._id}
                   theme={{
                     content: {

gui/app/pack/new/page.tsx

@@ -5,7 +5,6 @@ import { Label, TextInput, Select } from "flowbite-react";
 import { useState } from "react";
 import { HiUser, HiAnnotation } from "react-icons/hi";
 import { Button } from "flowbite-react";
-import { useRouter } from "next/navigation";
 
 import mc from "../../../api/mc_version.json";
 import { PACKS_ENDPOINT, PACK_ENDPOINT } from "@/api/ENDPOINTS";
@@ -13,7 +12,6 @@ import { toast } from "react-toastify";
 const mcr = mc.reverse();
 
 export default function PackNew() {
-  const router = useRouter();
   const [image, setImage] = useState<null | string>(null);
   const [imageMime, setImageMime] = useState<null | string>(null);
   const [packInfo, setPackInfo] = useState({
@@ -96,7 +94,10 @@ export default function PackNew() {
         closeOnClick: true,
         draggable: true,
       });
-      router.push(`/pack/?id=${data.id}`);
+      const ur = new URL(window.location.href);
+      ur.searchParams.set("id", data.id);
+      ur.pathname = "/pack";
+      window.location.href = ur.href;
     }
 
     _submit();

src/api/pack.py

@@ -8,6 +8,7 @@ from io import BytesIO
 import base64
 import json
 
+
 @apiPack.route("/<id>", methods=["GET"])
 def getPack(id):
     if not os.path.exists(f"{PACKS_FOLDER}/{id}/packfile.json"):
@@ -21,12 +22,15 @@ def getPack(id):
 
     return jsonify(pack)
 
+
 @apiPack.route("/<id>/image", methods=["GET"])
 def getPackImage(id):
     if not os.path.exists(f"{PACKS_FOLDER}/{id}/packicon.png"):
         return redirect(url_for("static", filename="defaulticon.png"))
 
-    return send_file(f"{PACKS_FOLDER}/{id}/packicon.png")
+    with open(f"{PACKS_FOLDER}/{id}/packicon.png", mode="rb") as fp:
+        f = BytesIO(fp.read())
+        return send_file(f, mimetype="image/png")
 
 
 @apiPack.route("/<id>/image/edit", methods=["POST"])