Add mod search via Nexus GraphQL API and user toast feedback

renderer/index.html

@@ -56,6 +56,7 @@
             <main class="content">
                 <h1 id="title">Silk Fly Launcher</h1>
                 <div class="view" id="view"></div>
+                <div class="toast-div" id="toast-div"></div>
             </main>
         </div>
 

renderer/renderer.js

@@ -139,7 +139,7 @@ async function navigate(page) {
 
             view.appendChild(onlineModsTemplateCopy);
 
-            mods = await nexus.getLatestMods();
+            mods = await nexus.getMods();
             if (mods == undefined) {
                 break;
             }
@@ -172,7 +172,7 @@ async function navigate(page) {
                     const modPicture = modTemplateCopy.getElementById("mod-icon");
                     modPicture.src = mod.picture_url;
                 }
-                if (mod.version && mod.updated_timestamp) {
+                if (mod.version && mod.updated_time) {
                     const modVersionText = modTemplateCopy.getElementById("mod-version");
                     modVersionText.innerText = `V${mod.version} last updated on ${mod.updated_time.slice(0, 10)}`;
                 }
@@ -397,7 +397,8 @@ async function setBepinexVersion() {
 
 async function searchInstalledMods() {
     const searchInput = document.getElementById("search-input");
-    console.log(searchInput.value);
+    await nexus.searchInstalled(searchInput.value);
+    navigate("refresh");
 }
 
 //////////////////////////////////////////////////////
@@ -420,7 +421,8 @@ async function verifyNexusAPI() {
 
 async function searchNexusMods() {
     const searchInput = document.getElementById("search-input");
-    console.log(searchInput.value);
+    await nexus.search(searchInput.value);
+    navigate("refresh");
 }
 
 //////////////////////////////////////////////////////
@@ -501,3 +503,20 @@ async function autoDetectGamePath() {
         document.getElementById("silksong-path-input").value = await files.loadSilksongPath();
     }
 }
+
+function showToast(message, type = "info", duration = 3000) {
+    const toastDiv = document.getElementById("toast-div");
+    const toast = document.createElement("p");
+
+    toast.classList.add("toast", type);
+    toast.innerText = message;
+    toastDiv.appendChild(toast);
+    toast.classList.add("show");
+
+    setTimeout(() => {
+        toast.classList.remove("show");
+        toast.addEventListener("transitionend", () => toast.remove());
+    }, duration);
+}
+
+electronAPI.onShowToast(showToast);

renderer/style.css

@@ -235,7 +235,7 @@ body {
 }
 
 .mods-container {
-    height: 80%;
+    height: 70%;
     transform: translateY(50px);
     padding: 20px;
     overflow: auto;
@@ -382,3 +382,40 @@ body {
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
+
+.toast-div {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 10;
+}
+
+.toast {
+    width: 300px;
+    background: var(--transparent-black);
+    padding: 10px 20px;
+    border: 1px solid var(--secondary-color);
+    border-radius: 32px;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.3s ease;
+}
+
+.toast.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.toast.error {
+    color: #f44336;
+}
+.toast.info {
+    color: var(--text-color);
+}
+.toast.warning {
+    color: #ff9800;
+}