Add Bootstrap for improved styling and enhance mod installation UI with loading indicators

Author: Stoppedwumm

package-lock.json

@@ -14,6 +14,7 @@
     "@iarna/toml": "^2.2.5",
     "adm-zip": "^0.5.16",
     "axios": "^1.9.0",
+    "bootstrap": "^5.3.6",
     "cli-progress": "^3.12.0",
     "node-fetch": "^3.3.2",
     "tar": "^7.4.3",

package.json

@@ -18,7 +18,7 @@ document.getElementById("search").addEventListener("click", async function() {
             <p>Downloads: ${project.downloads}</p>
             <p>Follows: ${project.follows}</p>
             <a href="https://modrinth.com/${project.project_type}/${project.slug}" target="_blank">View on Modrinth</a>
-            <button class="install" onclick="installMod('${project.slug}')">Install</button>
+            <button class="install btn btn-primary" onclick="installMod('${project.slug}')" ${mods.find(mod => new String(mod.metadata[0].id).includes(project.slug)) ? "disabled=1" : ""} id="${project.slug}">${mods.find(mod => mod.metadata[0].id == project.slug) ? "Installed" : "Install"}</button>
         `
         resultDiv.appendChild(projectDiv)
     }
@@ -27,14 +27,15 @@ document.getElementById("search").addEventListener("click", async function() {
 const modsDiv = document.getElementById("installedMods")
 for (var i = 0; i < mods.length; i++) {
     let mod = mods[i]
+    console.log(mod)
     let modDiv = document.createElement("div")
     modDiv.className = "mod"
     modDiv.innerHTML = `
         <h3>${mod.metadata[0].name}</h3>
         <p>${mod.metadata[0].description}</p>
         <p>Version: ${mod.metadata[0].version}</p>
         <p>Path: ${mod.path}</p>
-        <button class="uninstall" onclick="uninstallMod('${mod.path}')">Uninstall</button>
+        <button class="uninstall btn btn-primary" onclick="uninstallMod('${mod.path}')"} id="${mod.path}">Uninstall</button>
     `
     modsDiv.appendChild(modDiv)
 }

ui/chrome/js/moddashboard.js

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mod Dashboard</title>
     <link rel="stylesheet" href="../css/main.css">
+    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script>
         async function installMod(modId) {
             let depsdownloaded = []
@@ -32,12 +33,37 @@
                     }
                 }
             }
+            document.getElementById(modId).innerHTML = ""
+            const spinner = document.createElement("div")
+            spinner.className = "spinner-border text-dark"
+            spinner.role = "status"
+            const span = document.createElement("span")
+            span.className = "visually-hidden"
+            span.innerText = "Loading..."
+            spinner.appendChild(span)
+            document.getElementById(modId).appendChild(spinner)
             const mainMod = await downloadMod(modId)
-            loopThroughDependencies(mainMod)
+            await loopThroughDependencies(mainMod)
+            setTimeout(() => {
+                location.reload()
+            }, 3000)
         }
 
         async function uninstallMod(path) {
+            // add spinner
+            const spinner = document.createElement("div")
+            spinner.className = "spinner-border text-dark"
+            spinner.role = "status"
+            const span = document.createElement("span")
+            span.className = "visually-hidden"
+            span.innerText = "Loading..."
+            spinner.appendChild(span)
+            document.getElementById(path).innerHTML = ""
+            document.getElementById(path).appendChild(spinner)
             window.mcAPI.deleteFromModsFolder(path)
+            setTimeout(() => {
+                location.reload()
+            }, 3000)
         }
     </script>
 </head>