Add sorting for Nexus Mods search results and installed mods.

Update list menu to highlight the selected item.

main.js

@@ -13,6 +13,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const gotTheLock = app.requestSingleInstanceLock();
 const isDev = !app.isPackaged;
+const VERSION = "1.0.0";
 
 const store = new Store();
 const bepinexStore = new Store({ cwd: "bepinex-version" });
@@ -27,8 +28,8 @@ const Nexus = NexusModule.default;
 let nexusAPI = store.get("nexus-api");
 let nexus = undefined;
 createNexus();
-let cachedModList = undefined;
+let installedCachedModList = undefined;
-let query = "";
+let onlineCachedModList = undefined;
 
 let bepinexFolderPath = `${silksongPath}/BepInEx`;
 let bepinexBackupPath = `${silksongPath}/BepInEx-Backup`;
@@ -188,29 +189,10 @@ async function saveModInfo(modId, suppr = false) {
         return;
     }
 
-    const modInfo = await nexus.getModInfo(modId);
+    const modInfo = onlineCachedModList.find((mod) => mod.modId == modId);
-
+    installedModsStore.set(String(modId), modInfo);
-    installedModsStore.set(`${modId}.mod_id`, modInfo.mod_id);
-    installedModsStore.set(`${modId}.name`, modInfo.name);
-    installedModsStore.set(`${modId}.summary`, modInfo.summary);
-    installedModsStore.set(`${modId}.picture_url`, modInfo.picture_url);
-    installedModsStore.set(`${modId}.version`, modInfo.version);
-    installedModsStore.set(`${modId}.updated_time`, modInfo.updated_time);
-    installedModsStore.set(`${modId}.author`, modInfo.author);
 }
 
-ipcMain.handle("load-installed-mods-info", () => {
-    let modsInfo = [];
-    for (const [key, modInfo] of Object.entries(installedModsStore.store)) {
-        modsInfo.push(modInfo);
-    }
-
-    modsInfo.sort((a, b) => a.name.localeCompare(b.name));
-    modsInfo = modsInfo.filter((mod) => mod.name.toLowerCase().includes(query.toLowerCase())).sort((a, b) => a.name.localeCompare(b.name));
-
-    return modsInfo;
-});
-
 //////////////////////////////////////////////////////
 /////////////////// DATA HANDLING ////////////////////
 
@@ -286,7 +268,7 @@ async function installBepinex() {
 
         const res = await fetch(GITHUB_URL, {
             headers: {
-                "User-Agent": "SilkFlyLauncher/1.0.0",
+                "User-Agent": `SilkFlyLauncher/${VERSION}`,
                 Accept: "application/vnd.github+json",
             },
         });
@@ -377,7 +359,7 @@ async function createNexus() {
     }
 
     try {
-        nexus = await Nexus.create(nexusAPI, "silk-fly-launcher", "1.0.0", "hollowknightsilksong");
+        nexus = await Nexus.create(nexusAPI, "silk-fly-launcher", VERSION, "hollowknightsilksong");
     } catch (error) {
         console.log(error);
         nexus = undefined;
@@ -397,16 +379,18 @@ async function verifyNexusAPI() {
     }
 }
 
-ipcMain.handle("get-mods", async () => {
+ipcMain.handle("get-mods", async (event, type) => {
-    if (!cachedModList) {
+    if (type == "mods-installed") {
-        if (!(await verifyNexusAPI())) {
+        if (!installedCachedModList) {
-            mainWindow.webContents.send("showToast", "Unable to fetch mods.", "error");
+            await searchInstalledMods("");
-            return;
         }
-        cachedModList = await nexus.getLatestAdded();
+        return installedCachedModList;
+    } else if (type == "mods-online") {
+        if (!onlineCachedModList) {
+            await searchNexusMods("");
+        }
+        return onlineCachedModList;
     }
-
-    return cachedModList;
 });
 
 ipcMain.handle("open-download", async (event, link) => {
@@ -462,13 +446,14 @@ async function startDownload(modId, fileId, key, expires) {
 
     saveModInfo(modId);
     mainWindow.webContents.send("showToast", "Mod downloaded successfully.");
+    installedCachedModList = undefined;
 }
 
 async function checkInstalledMods() {
     for (const [key, modInfo] of Object.entries(installedModsStore.store)) {
-        if (!(await fileExists(`${modSavePath}/${modInfo.mod_id}`))) {
+        if (!(await fileExists(`${modSavePath}/${modInfo.modId}`))) {
             saveModInfo(key, true);
-            await fs.rm(`${bepinexFolderPath}/plugins/${modInfo.mod_id}`, { recursive: true });
+            await fs.rm(`${bepinexFolderPath}/plugins/${modInfo.modId}`, { recursive: true });
         }
     }
 }
@@ -482,21 +467,36 @@ ipcMain.handle("uninstall-mod", async (event, modId) => {
         await fs.rm(modPath, { recursive: true });
     }
 
+    for (let i = 0; i < installedCachedModList.length; i++) {
+        if (installedCachedModList[i].modId == modId) {
+            installedCachedModList.splice(i, 1);
+        }
+    }
+
     saveModInfo(modId, true);
 });
 
-ipcMain.handle("search-nexus-mods", async (event, keywords) => {
+ipcMain.handle("search-nexus-mods", async (event, keywords, offset, count, sortFilter, sortOrder) => {
-    const count = 10;
+    await searchNexusMods(keywords, offset, count, sortFilter, sortOrder);
+});
+
+async function searchNexusMods(keywords, offset = 0, count = 10, sortFilter = "downloads", sortOrder = "DESC") {
+    if (keywords.length == 1) {
+        mainWindow.webContents.send("showToast", "Your query must contain at least 2 characters.", "warning");
+        return;
+    }
+
     const endpoint = "https://api.nexusmods.com/v2/graphql";
     const client = new GraphQLClient(endpoint, {
         headers: {
+            "User-Agent": `SilkFlyLauncher/${VERSION}`,
             "Content-Type": "application/json",
         },
     });
 
     const query = gql`
-        query Mods($filter: ModsFilter, $offset: Int, $count: Int) {
+        query Mods($filter: ModsFilter, $offset: Int, $count: Int, $sort: [ModsSort!]) {
-            mods(filter: $filter, offset: $offset, count: $count) {
+            mods(filter: $filter, offset: $offset, count: $count, sort: $sort) {
                 nodes {
                     author
                     endorsements
@@ -505,39 +505,67 @@ ipcMain.handle("search-nexus-mods", async (event, keywords) => {
                     pictureUrl
                     summary
                     updatedAt
+                    createdAt
                     version
+                    downloads
+                    fileSize
                 }
+                totalCount
             }
         }
     `;
 
-    const variables = {
+    let variables = {
         filter: {
             op: "AND",
             gameDomainName: [{ value: "hollowknightsilksong" }],
             name: [{ value: keywords, op: "WILDCARD" }],
         },
-        offset: 0,
+        offset: offset,
         count: count,
+        sort: [{ [sortFilter]: { direction: sortOrder } }],
     };
+    if (!keywords) {
+        delete variables.filter.name;
+    }
 
     const data = await client.request(query, variables);
-    for (let i = 0; i < data.mods.nodes.length; i++) {
+    onlineCachedModList = data.mods.nodes;
-        data.mods.nodes[i].mod_id = data.mods.nodes[i].modId;
+
-        delete data.mods.nodes[i].modId;
+    for (let i = 0; i < onlineCachedModList.length; i++) {
-        data.mods.nodes[i].picture_url = data.mods.nodes[i].pictureUrl;
+        if (onlineCachedModList[i].modId == 26) {
-        delete data.mods.nodes[i].pictureUrl;
+            onlineCachedModList.splice(i, 1);
-        data.mods.nodes[i].endorsement_count = data.mods.nodes[i].endorsements;
-        delete data.mods.nodes[i].endorsements;
-        data.mods.nodes[i].updated_time = data.mods.nodes[i].updatedAt;
-        delete data.mods.nodes[i].updatedAt;
         }
-    cachedModList = data.mods.nodes;
+    }
+
+    return data.mods.totalCount;
+}
+
+ipcMain.handle("search-installed-mods", async (event, keywords, offset, count, sortFilter, sortOrder) => {
+    await searchInstalledMods(keywords, offset, count, sortFilter, sortOrder);
 });
 
-ipcMain.handle("search-installed-mods", async (event, keywords) => {
+async function searchInstalledMods(keywords, offset = 0, count = 10, sortFilter = "name", sortOrder = "ASC") {
-    query = keywords;
+    let modsInfo = [];
-});
+    for (const [key, modInfo] of Object.entries(installedModsStore.store)) {
+        modsInfo.push(modInfo);
+    }
+
+    const modsInfoFiltered = modsInfo.filter((mod) => mod.name.toLowerCase().includes(keywords.toLowerCase()));
+    const sortFactor = sortOrder == "ASC" ? 1 : -1;
+
+    let modsInfoSorted;
+    if (sortFilter == "name" || sortFilter == "createdAt" || sortFilter == "updatedAt") {
+        modsInfoSorted = modsInfoFiltered.sort((a, b) => sortFactor * a[sortFilter].localeCompare(b[sortFilter]));
+    } else if (sortFilter == "downloads" || sortFilter == "endorsements" || sortFilter == "size") {
+        if (sortFilter == "size") {
+            sortFilter = "fileSize";
+        }
+        modsInfoSorted = modsInfoFiltered.sort((a, b) => sortFactor * (a[sortFilter] - b[sortFilter]));
+    }
+
+    installedCachedModList = modsInfoSorted;
+}
 
 //////////////////////////////////////////////////////
 //////////////////// UNCATEGORIZE ////////////////////
@@ -618,3 +646,7 @@ async function downloadAndUnzip(url, path) {
     await extract(tempPath, { dir: path });
     await fs.unlink(tempPath);
 }
+
+ipcMain.handle("get-version", () => {
+    return VERSION;
+});

preload.js

@@ -1,9 +1,7 @@
 const { contextBridge, ipcRenderer } = require("electron");
 
-const VERSION = "1.0.0";
-
 contextBridge.exposeInMainWorld("versions", {
-    silkFlyLauncher: () => VERSION,
+    silkFlyLauncher: () => ipcRenderer.invoke("get-version"),
     node: () => process.versions.node,
     chromium: () => process.versions.chrome,
     electron: () => process.versions.electron,
@@ -23,7 +21,6 @@ contextBridge.exposeInMainWorld("files", {
     loadNexusAPI: () => ipcRenderer.invoke("load-nexus-api"),
     saveTheme: (theme, lacePinState) => ipcRenderer.invoke("save-theme", theme, lacePinState),
     loadTheme: () => ipcRenderer.invoke("load-theme"),
-    loadInstalledModsInfo: () => ipcRenderer.invoke("load-installed-mods-info"),
 });
 
 contextBridge.exposeInMainWorld("electronAPI", {
@@ -48,9 +45,9 @@ contextBridge.exposeInMainWorld("bepinex", {
 
 contextBridge.exposeInMainWorld("nexus", {
     verifyAPI: () => ipcRenderer.invoke("verify-nexus-api"),
-    getMods: () => ipcRenderer.invoke("get-mods"),
+    getMods: (type) => ipcRenderer.invoke("get-mods", type),
     download: (link) => ipcRenderer.invoke("open-download", link),
     uninstall: (modId) => ipcRenderer.invoke("uninstall-mod", modId),
-    search: (keywords) => ipcRenderer.invoke("search-nexus-mods", keywords),
+    search: (keywords, offset, count, sortFilter, sortOrder) => ipcRenderer.invoke("search-nexus-mods", keywords, offset, count, sortFilter, sortOrder),
-    searchInstalled: (keywords) => ipcRenderer.invoke("search-installed-mods", keywords),
+    searchInstalled: (keywords, offset, count, sortFilter, sortOrder) => ipcRenderer.invoke("search-installed-mods", keywords, offset, count, sortFilter, sortOrder),
 });

renderer/assets/icons/sort-order-1.svg

@@ -0,0 +1,11 @@
+<svg
+   role="img"
+   focusable="false"
+   aria-hidden="true"
+   viewBox="0 0 14 14"
+   xmlns="http://www.w3.org/2000/svg">
+  <path
+     d="M 5.75,4.5454543 C 5.75,4.6562497 5.71289,4.7521362 5.6386718,4.8331133 5.5644534,4.9140684 5.4765624,4.9545458 5.375,4.9545458 H 4.625 V 11.5 h -1.5 V 4.9545458 h -0.75 c -0.1015625,0 -0.1894532,-0.040477 -0.2636719,-0.1214325 C 2.0371098,4.7521364 2,4.6562497 2,4.5454543 2,4.434659 2.03711,4.3387842 2.1113281,4.2578297 l 1.5,-1.6363638 C 3.6855468,2.5404886 3.7734374,2.5 3.8749999,2.5 c 0.1015625,0 0.1894532,0.04049 0.2636719,0.1214659 l 1.5,1.6363638 C 5.7128911,4.3387838 5.75,4.434659 5.75,4.5454543 Z" />
+  <path
+     d="M 13,10.272727 C 13,10.125 12.95052,9.9971516 12.851562,9.8891821 12.752602,9.7812421 12.635417,9.7272721 12.5,9.7272721 h -1 V 1 h -2 v 8.7272721 h -1 c -0.1354167,0 -0.2526042,0.053969 -0.3515625,0.16191 C 8.0494797,9.9971513 8,10.125 8,10.272727 c 0,0.147728 0.04948,0.275561 0.1484375,0.3835 l 2.0000005,2.181819 C 10.247396,12.946015 10.364583,13 10.5,13 c 0.135417,0 0.252604,-0.05399 0.351562,-0.161954 l 2,-2.181819 C 12.950521,10.548288 13,10.420455 13,10.272727 Z" />
+</svg>

renderer/assets/icons/sort-order-2.svg

@@ -0,0 +1,11 @@
+<svg
+   role="img"
+   focusable="false"
+   aria-hidden="true"
+   viewBox="0 0 14 14"
+   xmlns="http://www.w3.org/2000/svg">
+  <path
+     d="M 6,3.7272726 C 6,3.8749998 5.9505205,4.0028484 5.8515624,4.1108179 5.7526046,4.2187579 5.6354166,4.2727279 5.5,4.2727279 H 4.4999999 V 13 H 2.5 V 4.2727279 h -1 c -0.1354167,0 -0.2526042,-0.053969 -0.3515625,-0.16191 C 1.0494797,4.0028487 1,3.8749998 1,3.7272726 1,3.5795455 1.0494795,3.4517124 1.1484375,3.3437731 l 2,-2.1818186 C 3.2473957,1.0539848 3.3645832,1 3.4999998,1 3.6354166,1 3.7526041,1.053986 3.8515624,1.1619545 l 2,2.1818186 C 5.9505213,3.4517119 6,3.5795455 6,3.7272726 Z" />
+  <path
+     d="M 12.5,9.4545452 C 12.5,9.34375 12.46289,9.2478637 12.388671,9.1668866 12.314452,9.0859316 12.226563,9.0454541 12.125,9.0454541 h -0.75 V 2.5 h -1.5 v 6.5454541 h -0.75 c -0.1015625,0 -0.1894531,0.040477 -0.2636719,0.1214325 C 8.7871098,9.2478635 8.75,9.34375 8.75,9.4545452 c 0,0.1107961 0.03711,0.2066708 0.1113281,0.287625 L 10.361329,11.378535 C 10.435547,11.459511 10.523437,11.5 10.625,11.5 c 0.101563,0 0.189453,-0.04049 0.263671,-0.121465 l 1.5,-1.6363647 C 12.462891,9.661216 12.5,9.5653413 12.5,9.4545452 Z" />
+</svg>

renderer/index.html

@@ -91,19 +91,47 @@
 
         <template id="installed-mods-template">
             <h2>List Of Installed Mods</h2>
-            <form class="horizontal-div" id="search-form">
+            <div class="horizontal-div">
+                <form class="horizontal-div search-form" id="search-form">
                     <input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
                     <button class="default-button" onclick="searchInstalledMods()">Search</button>
                 </form>
+                <div class="list-div">
+                    <div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
+                    <div class="list-menu longer-button list-menu-inverted" id="sort-menu">
+                        <li id="name" onclick="changeSort('name')">by name</li>
+                        <li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
+                        <li id="endorsements" onclick="changeSort('endorsements')">by endorsements count</li>
+                        <li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
+                        <li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
+                        <li id="size" onclick="changeSort('size')">by size</li>
+                    </div>
+                </div>
+                <button class="default-button square-button" onclick="inverseSort()"><img class="icons invert-color" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
+            </div>
             <div class="mods-container" id="mods-container"></div>
         </template>
 
         <template id="online-mods-template">
             <h2>List Of Nexus Mods</h2>
-            <form class="horizontal-div" id="search-form">
+            <div class="horizontal-div">
+                <form class="horizontal-div search-form" id="search-form">
                     <input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
                     <button class="default-button" onclick="searchNexusMods()">Search</button>
                 </form>
+                <div class="list-div">
+                    <div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
+                    <div class="list-menu longer-button list-menu-inverted" id="sort-menu">
+                        <li id="name" onclick="changeSort('name')">by name</li>
+                        <li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
+                        <li id="endorsements" onclick="changeSort('endorsements')">by endorsements count</li>
+                        <li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
+                        <li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
+                        <li id="size" onclick="changeSort('size')">by size</li>
+                    </div>
+                </div>
+                <button class="default-button square-button" onclick="inverseSort()"><img class="icons invert-color" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
+            </div>
             <div class="mods-container" id="mods-container"></div>
         </template>
 
@@ -113,10 +141,12 @@
                     <div class="horizontal-div">
                         <h3 id="mod-title">Unknown Title</h3>
                         <p id="mod-author">Unknown author</p>
+                        <p id="mod-endorsements-number">? likes</p>
+                        <p id="mod-downloads-number">? download</p>
                     </div>
-                    <p id="mod-description">No description provided</p>
+                    <p id="mod-description" class="long-text">No description provided</p>
                     <p class="transparent-text" id="mod-version">V1.0.0 last update on 01/01/2026</p>
-
+                    <br />
                     <div class="horizontal-div">
                         <a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="uninstall-mod-button">Uninstall</a>
                         <a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="external-link">Website</a>
@@ -134,10 +164,11 @@
                         <h3 id="mod-title">Unknown Title</h3>
                         <p id="mod-author">Unknown author</p>
                         <p id="mod-endorsements-number">? likes</p>
+                        <p id="mod-downloads-number">? download</p>
                     </div>
-                    <p id="mod-description">No description provided</p>
+                    <p id="mod-description" class="long-text">No description provided</p>
                     <p class="transparent-text" id="mod-version">V1.0.0 last update on 01/01/2026</p>
-
+                    <br />
                     <div class="horizontal-div">
                         <a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="download-mod-button">Download</a>
                         <a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="external-link">Website</a>
@@ -155,18 +186,19 @@
                 <input type="text" class="input" id="silksong-path-input" name="silksong-path-input" />
                 <button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
             </div>
+            <br />
             <div class="horizontal-div">
                 <label>Themes: </label>
-                <div class="themes-div">
+                <div class="list-div">
                     <div class="default-button longer-button" id="themes-button" onclick="toggleThemesMenu()">Silksong</div>
-                    <div class="themes-menu longer-button" id="themes-menu">
+                    <div class="list-menu longer-button" id="themes-menu">
-                        <li onclick="changeTheme('Silksong')">Silksong</li>
+                        <li id="Silksong" onclick="changeTheme('Silksong')">Silksong</li>
-                        <li onclick="changeTheme('Citadel of song')">Citadel of song</li>
+                        <li id="Citadel of song" onclick="changeTheme('Citadel of song')">Citadel of song</li>
-                        <li onclick="changeTheme('Cradle')">Cradle</li>
+                        <li id="Cradle" onclick="changeTheme('Cradle')">Cradle</li>
-                        <li onclick="changeTheme('Abyss')">Abyss</li>
+                        <li id="Abyss" onclick="changeTheme('Abyss')">Abyss</li>
-                        <li onclick="changeTheme('Greyroot')">Greyroot</li>
+                        <li id="Greyroot" onclick="changeTheme('Greyroot')">Greyroot</li>
-                        <li onclick="changeTheme('Surface')">Surface</li>
+                        <li id="Surface" onclick="changeTheme('Surface')">Surface</li>
-                        <li onclick="changeTheme('Steel')">Steel</li>
+                        <li id="Steel" onclick="changeTheme('Steel')">Steel</li>
                     </div>
                 </div>
                 <label class="lace-pin-checkbox-container">
@@ -178,6 +210,7 @@
             <br />
             <h2>BepInEx</h2>
             <p class="transparent-text" id="bepinex-version-text"></p>
+            <br />
             <div class="horizontal-div">
                 <button class="default-button" onclick="installBepinex()">Install</button>
                 <button class="important-button" onclick="uninstallBepinex()">Uninstall</button>

renderer/renderer.js

@@ -11,6 +11,12 @@ const modTemplate = document.getElementById("mod-template");
 
 let oldPage;
 let actualTheme = [];
+let searchValueNexus = "";
+let searchValueInstalled = "";
+let onlineSortFilter = "downloads";
+let installedSortFilter = "name";
+let onlineSortOrder = "DESC";
+let installedSortOrder = "ASC";
 
 //////////////////////////////////////////////////////
 ///////////////// CONST FOR WELCOME //////////////////
@@ -40,6 +46,7 @@ async function on_startup() {
         changeTheme(theme[0], theme[1]);
         navigate("home");
     } else if ((await electronAPI.getPage()) == "welcome.html") {
+        changeTheme("Silksong");
         welcomeNavigate();
     }
 }
@@ -69,14 +76,18 @@ async function navigate(page) {
             const installedModsTemplateCopy = installedModsTemplate.content.cloneNode(true);
             const installedModsContainer = installedModsTemplateCopy.getElementById("mods-container");
             const searchFormInstalled = installedModsTemplateCopy.getElementById("search-form");
+            const searchInputInstalled = installedModsTemplateCopy.getElementById("search-input");
 
             searchFormInstalled.addEventListener("submit", async function (event) {
                 event.preventDefault();
             });
+            searchInputInstalled.value = searchValueInstalled;
 
             view.appendChild(installedModsTemplateCopy);
+            toggleSelectedListButton("sort-menu", installedSortFilter);
+            setSortOrderButton();
 
-            const modsInfo = await files.loadInstalledModsInfo();
+            const modsInfo = await nexus.getMods(page);
             if (modsInfo == []) {
                 break;
             }
@@ -91,20 +102,36 @@ async function navigate(page) {
                     const modAuthorText = installedModTemplateCopy.getElementById("mod-author");
                     modAuthorText.innerText = `by ${modInfo.author}`;
                 }
+                if (modInfo.endorsements) {
+                    const modEndorsementsNumber = installedModTemplateCopy.getElementById("mod-endorsements-number");
+                    if (modInfo.endorsements > 1) {
+                        modEndorsementsNumber.innerText = `${modInfo.endorsements} likes`;
+                    } else {
+                        modEndorsementsNumber.innerText = `${modInfo.endorsements} like`;
+                    }
+                }
+                if (modInfo.downloads) {
+                    const modDownloadsNumber = installedModTemplateCopy.getElementById("mod-downloads-number");
+                    if (modInfo.downloads > 1) {
+                        modDownloadsNumber.innerText = `${modInfo.downloads} downloads`;
+                    } else {
+                        modDownloadsNumber.innerText = `${modInfo.downloads} download`;
+                    }
+                }
                 if (modInfo.summary) {
                     const modDescriptionText = installedModTemplateCopy.getElementById("mod-description");
                     modDescriptionText.innerText = modInfo.summary;
                 }
-                if (modInfo.picture_url) {
+                if (modInfo.pictureUrl) {
                     const modPicture = installedModTemplateCopy.getElementById("mod-icon");
-                    modPicture.src = modInfo.picture_url;
+                    modPicture.src = modInfo.pictureUrl;
                 }
-                if (modInfo.version && modInfo.updated_time) {
+                if (modInfo.version && modInfo.updatedAt) {
                     const modVersionText = installedModTemplateCopy.getElementById("mod-version");
-                    modVersionText.innerText = `V${modInfo.version} last updated on ${modInfo.updated_time.slice(0, 10)}`;
+                    modVersionText.innerText = `V${modInfo.version} last updated on ${modInfo.updatedAt.slice(0, 10)}`;
                 }
 
-                const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${modInfo.mod_id}`;
+                const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${modInfo.modId}`;
 
                 const modLinkButton = installedModTemplateCopy.getElementById("external-link");
                 modLinkButton.href = modUrl;
@@ -117,7 +144,7 @@ async function navigate(page) {
                 modDownloadButton = installedModTemplateCopy.getElementById("uninstall-mod-button");
                 modDownloadButton.addEventListener("click", async function (event) {
                     event.preventDefault();
-                    await nexus.uninstall(modInfo.mod_id);
+                    await nexus.uninstall(modInfo.modId);
 
                     navigate("refresh");
                 });
@@ -132,14 +159,18 @@ async function navigate(page) {
             const onlineModsTemplateCopy = onlineModsTemplate.content.cloneNode(true);
             const ModsContainer = onlineModsTemplateCopy.getElementById("mods-container");
             const searchFormNexus = onlineModsTemplateCopy.getElementById("search-form");
+            const searchInputNexus = onlineModsTemplateCopy.getElementById("search-input");
 
             searchFormNexus.addEventListener("submit", async function (event) {
                 event.preventDefault();
             });
+            searchInputNexus.value = searchValueNexus;
 
             view.appendChild(onlineModsTemplateCopy);
+            toggleSelectedListButton("sort-menu", onlineSortFilter);
+            setSortOrderButton();
 
-            mods = await nexus.getMods();
+            mods = await nexus.getMods(page);
             if (mods == undefined) {
                 break;
             }
@@ -156,28 +187,36 @@ async function navigate(page) {
                     const modAuthorText = modTemplateCopy.getElementById("mod-author");
                     modAuthorText.innerText = `by ${mod.author}`;
                 }
-                if (mod.endorsement_count) {
+                if (mod.endorsements) {
                     const modEndorsementsNumber = modTemplateCopy.getElementById("mod-endorsements-number");
-                    if (mod.endorsement_count > 1) {
+                    if (mod.endorsements > 1) {
-                        modEndorsementsNumber.innerText = `${mod.endorsement_count} likes`;
+                        modEndorsementsNumber.innerText = `${mod.endorsements} likes`;
                     } else {
-                        modEndorsementsNumber.innerText = `${mod.endorsement_count} like`;
+                        modEndorsementsNumber.innerText = `${mod.endorsements} like`;
+                    }
+                }
+                if (mod.downloads) {
+                    const modDownloadsNumber = modTemplateCopy.getElementById("mod-downloads-number");
+                    if (mod.downloads > 1) {
+                        modDownloadsNumber.innerText = `${mod.downloads} downloads`;
+                    } else {
+                        modDownloadsNumber.innerText = `${mod.downloads} download`;
                     }
                 }
                 if (mod.summary) {
                     const modDescriptionText = modTemplateCopy.getElementById("mod-description");
                     modDescriptionText.innerText = mod.summary;
                 }
-                if (mod.picture_url) {
+                if (mod.pictureUrl) {
                     const modPicture = modTemplateCopy.getElementById("mod-icon");
-                    modPicture.src = mod.picture_url;
+                    modPicture.src = mod.pictureUrl;
                 }
-                if (mod.version && mod.updated_time) {
+                if (mod.version && mod.updatedAt) {
                     const modVersionText = modTemplateCopy.getElementById("mod-version");
-                    modVersionText.innerText = `V${mod.version} last updated on ${mod.updated_time.slice(0, 10)}`;
+                    modVersionText.innerText = `V${mod.version} last updated on ${mod.updatedAt.slice(0, 10)}`;
                 }
 
-                const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${mod.mod_id}`;
+                const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${mod.modId}`;
 
                 const modLinkButton = modTemplateCopy.getElementById("external-link");
                 modLinkButton.href = modUrl;
@@ -205,7 +244,7 @@ async function navigate(page) {
             const nexusAPIInput = settingsTemplateCopy.getElementById("nexus-api-input");
             const versionsList = settingsTemplateCopy.getElementById("versions-list");
             const versionsDictionnary = {
-                "Silk-Fly-Launcher": `Silk Fly Launcher: v${versions.silkFlyLauncher()}`,
+                "Silk-Fly-Launcher": `Silk Fly Launcher: v${await versions.silkFlyLauncher()}`,
                 Electron: `Electron: v${versions.electron()}`,
                 Node: `Node.js: v${versions.node()}`,
                 Chromium: `Chromium: v${versions.chromium()}`,
@@ -246,6 +285,7 @@ async function navigate(page) {
             view.appendChild(settingsTemplateCopy);
             setBepinexVersion();
             setThemeButton();
+            toggleSelectedListButton("themes-menu", actualTheme[0]);
             verifyNexusAPI();
             break;
     }
@@ -297,6 +337,7 @@ async function welcomeNavigate() {
 
         case 3:
             pageDiv.appendChild(styleTemplate.content.cloneNode(true));
+            toggleSelectedListButton("themes-menu", actualTheme[0]);
             break;
 
         case 4:
@@ -397,8 +438,9 @@ async function setBepinexVersion() {
 
 async function searchInstalledMods() {
     const searchInput = document.getElementById("search-input");
-    await nexus.searchInstalled(searchInput.value);
+    searchValueInstalled = searchInput.value;
-    navigate("refresh");
+    await nexus.searchInstalled(searchValueInstalled, undefined, undefined, installedSortFilter, installedSortOrder);
+    await navigate("refresh");
 }
 
 //////////////////////////////////////////////////////
@@ -420,9 +462,12 @@ async function verifyNexusAPI() {
 }
 
 async function searchNexusMods() {
-    const searchInput = document.getElementById("search-input");
+    let searchInput = document.getElementById("search-input");
-    await nexus.search(searchInput.value);
+    searchValueNexus = searchInput.value;
-    navigate("refresh");
+    await nexus.search(searchValueNexus, undefined, undefined, onlineSortFilter, onlineSortOrder);
+    await navigate("refresh");
+    searchInput = document.getElementById("search-input");
+    searchInput.value = searchValueNexus;
 }
 
 //////////////////////////////////////////////////////
@@ -445,6 +490,7 @@ async function setThemeButton() {
 
 function changeTheme(theme, state) {
     toggleThemesMenu();
+    toggleSelectedListButton("themes-menu", theme);
 
     const lacePinCheckbox = document.getElementById("lace-pin");
     if (lacePinCheckbox) {
@@ -520,3 +566,73 @@ function showToast(message, type = "info", duration = 3000) {
 }
 
 electronAPI.onShowToast(showToast);
+
+function toggleSortMenu() {
+    const sortMenu = document.getElementById("sort-menu");
+    if (sortMenu) {
+        sortMenu.classList.toggle("show");
+    }
+}
+
+function changeSort(sortFilterParameter) {
+    toggleSortMenu();
+    toggleSelectedListButton("sort-menu", sortFilterParameter);
+
+    if (oldPage == "mods-installed") {
+        installedSortFilter = sortFilterParameter;
+        searchInstalledMods();
+    } else if (oldPage == "mods-online") {
+        onlineSortFilter = sortFilterParameter;
+        searchNexusMods();
+    }
+}
+
+function inverseSort() {
+    if (oldPage == "mods-installed") {
+        if (installedSortOrder == "ASC") {
+            installedSortOrder = "DESC";
+        } else {
+            installedSortOrder = "ASC";
+        }
+        searchInstalledMods();
+    } else if (oldPage == "mods-online") {
+        if (onlineSortOrder == "ASC") {
+            onlineSortOrder = "DESC";
+        } else {
+            onlineSortOrder = "ASC";
+        }
+        searchNexusMods();
+    }
+}
+
+function toggleSelectedListButton(ListMenuId, buttonId) {
+    const themesMenu = document.getElementById(ListMenuId);
+    if (themesMenu) {
+        Array.from(themesMenu.children).forEach((child) => {
+            child.classList.remove("selected");
+        });
+    }
+
+    const themesButton = document.getElementById(buttonId);
+    if (themesButton) {
+        themesButton.classList.toggle("selected");
+    }
+}
+
+function setSortOrderButton() {
+    let sortOrder;
+    if (oldPage == "mods-installed") {
+        sortOrder = installedSortOrder;
+    } else if (oldPage == "mods-online") {
+        sortOrder = onlineSortOrder;
+    }
+
+    const sortOrderButton = document.getElementById("sort-order-image");
+    if (sortOrderButton) {
+        if (sortOrder == "ASC") {
+            sortOrderButton.src = "assets/icons/sort-order-2.svg";
+        } else {
+            sortOrderButton.src = "assets/icons/sort-order-1.svg";
+        }
+    }
+}

renderer/style.css

@@ -152,7 +152,6 @@ body {
     display: flex;
     align-items: center;
     gap: 20px;
-    margin-top: 8px;
 }
 
 .separated-div {
@@ -234,6 +233,14 @@ body {
     width: 240px;
 }
 
+.smaller-button {
+    width: 60px;
+}
+
+.square-button {
+    width: 40px;
+}
+
 .mods-container {
     height: 70%;
     transform: translateY(50px);
@@ -302,32 +309,41 @@ body {
     color: var(--secondary-color);
 }
 
-.themes-div {
+.list-div {
     position: relative;
 }
 
-.themes-menu {
+.list-menu {
     display: none;
     position: absolute;
     background: var(--darker-transparent-black);
     border: 1px solid var(--secondary-color);
     border-radius: 4px;
+    z-index: 10;
 }
 
-.themes-menu.show {
+.list-menu-inverted {
+    transform: translateX(-75%);
+}
+
+.list-menu.show {
     display: block;
 }
 
-.themes-menu li {
+.list-menu li {
     padding: 6px;
     display: flex;
     justify-content: center;
 }
 
-.themes-menu li:hover {
+.list-menu li:hover {
     background: var(--background-color);
 }
 
+.list-menu li.selected {
+    background: var(--primary-color);
+}
+
 .lace-pin-checkbox-container {
     display: flex;
     align-items: center;
@@ -419,3 +435,12 @@ body {
 .toast.warning {
     color: #ff9800;
 }
+
+.search-form {
+    display: flex;
+    flex: 1;
+}
+
+.long-text {
+    overflow-wrap: anywhere;
+}

renderer/welcome.html

@@ -55,7 +55,7 @@
             <div class="horizontal-div">
                 <label for="nexus-api-label">Enter your nexus api: </label>
                 <input type="text" class="input" id="nexus-api-input" name="nexus-api-input" />
-                <img class="nexus-check-image" id="nexus-check-image" src="assets/cross.svg" />
+                <img class="nexus-check-image" id="nexus-check-image" src="assets/icons/cross.svg" />
                 <button class="default-button" onclick="verifyNexusAPI()">Verify</button>
             </div>
         </template>
@@ -64,16 +64,16 @@
             <h1 class="title">Chose the theme of the app</h1>
             <div class="horizontal-div welcome-div">
                 <label>Themes: </label>
-                <div class="themes-div">
+                <div class="list-div">
                     <div class="default-button longer-button" id="themes-button" onclick="toggleThemesMenu()">Silksong</div>
-                    <div class="themes-menu longer-button" id="themes-menu">
+                    <div class="list-menu longer-button" id="themes-menu">
-                        <li onclick="changeTheme('Silksong')">Silksong</li>
+                        <li id="Silksong" onclick="changeTheme('Silksong')">Silksong</li>
-                        <li onclick="changeTheme('Citadel of song')">Citadel of song</li>
+                        <li id="Citadel of song" onclick="changeTheme('Citadel of song')">Citadel of song</li>
-                        <li onclick="changeTheme('Cradle')">Cradle</li>
+                        <li id="Cradle" onclick="changeTheme('Cradle')">Cradle</li>
-                        <li onclick="changeTheme('Abyss')">Abyss</li>
+                        <li id="Abyss" onclick="changeTheme('Abyss')">Abyss</li>
-                        <li onclick="changeTheme('Greyroot')">Greyroot</li>
+                        <li id="Greyroot" onclick="changeTheme('Greyroot')">Greyroot</li>
-                        <li onclick="changeTheme('Surface')">Surface</li>
+                        <li id="Surface" onclick="changeTheme('Surface')">Surface</li>
-                        <li onclick="changeTheme('Steel')">Steel</li>
+                        <li id="Steel" onclick="changeTheme('Steel')">Steel</li>
                     </div>
                 </div>
             </div>