feat: download of specific mods

gui/app/components/ModTable.tsx

@@ -18,6 +18,7 @@ export const ModTable = (props: {
   mods: Mod[];
   updatePack: () => void;
   packID: string;
+  downloadMods: (mods: string[]) => void;
 }) => {
   const [selectedMods, setSelectedMods] = useState<string[]>([]);
 
@@ -130,7 +131,10 @@ export const ModTable = (props: {
                   <TableCell>{mod.url}</TableCell>
                   <TableCell>
                     <div className="flex gap-2">
-                      <Button size="sm">
+                      <Button
+                        size="sm"
+                        onClick={() => props.downloadMods([mod.slug])}
+                      >
                         Download <HiDownload className="ml-2 h-4 w-4" />
                       </Button>
                       <Button
@@ -154,14 +158,23 @@ export const ModTable = (props: {
             <TableCell></TableCell>
             <TableCell></TableCell>
             <TableCell>
-              <Button
-                color={"red"}
-                size="sm"
-                disabled={selectedMods.length == 0}
-                onClick={() => deleteSelectedMods()}
-              >
-                Delete Selected <HiTrash className="ml-2 h-4 w-4" />
-              </Button>
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  disabled={selectedMods.length == 0}
+                  onClick={() => props.downloadMods(selectedMods)}
+                >
+                  Download Selected <HiDownload className="ml-2 h-4 w-4" />
+                </Button>
+                <Button
+                  color={"red"}
+                  size="sm"
+                  disabled={selectedMods.length == 0}
+                  onClick={() => deleteSelectedMods()}
+                >
+                  Delete Selected <HiTrash className="ml-2 h-4 w-4" />
+                </Button>
+              </div>
             </TableCell>
           </TableRow>
         </TableBody>

gui/app/pack/page.tsx

@@ -281,6 +281,24 @@ export default function PackPage() {
     setdownloadModalOpen(true);
   }
 
+  async function downloadMods(mods: string[]) {
+    if (!packData) return;
+
+    fetch(`${DOWNLOAD_ENDPOINT["downloadMods"]}`, {
+      method: "POST",
+      body: JSON.stringify({
+        pack_id: packData._id,
+        mods: mods,
+      }),
+      headers: {
+        "content-type": "application/json",
+        accept: "application/json",
+      },
+    });
+
+    setdownloadModalOpen(true);
+  }
+
   return (
     <div>
       {packDataLoading && (
@@ -342,6 +360,7 @@ export default function PackPage() {
             <ModTable
               mods={packData.mods}
               updatePack={_getPacksData}
+              downloadMods={downloadMods}
               packID={id}
             />
           </div>
@@ -386,7 +405,15 @@ export default function PackPage() {
           <Button onClick={() => addMod()}>Save</Button>
         </ModalFooter>
       </Modal>
-      <Modal show={downloadModalOpen}>
+      <Modal
+        show={downloadModalOpen}
+        dismissible={downloadProgressFile.current == downloadProgressFile.total}
+        onClose={() => {
+          if (downloadProgressFile.current == downloadProgressFile.total) {
+            setdownloadModalOpen(false);
+          }
+        }}
+      >
         <ModalHeader>Download progress</ModalHeader>
         <ModalBody>
           <div className="mb-4">