Clean UI and fix a bug related to empty Silksong path

forge.config.cjs

@@ -23,15 +23,6 @@ if (buildTarget == "zip" || buildTarget == "all") {
     });
 }
 
-async function fileExists(filePath) {
-    try {
-        await fs.access(filePath);
-        return true;
-    } catch {
-        return false;
-    }
-}
-
 module.exports = {
     packagerConfig: {
         asar: true,

main.js

@@ -463,9 +463,10 @@ async function createNexus(api) {
     } catch (error) {
         if (error.mStatusCode == 401) {
             mainWindow.webContents.send("showToast", "Invalid Nexus API key", "error");
-        }
+        } else if (error.code == "ENOTFOUND") {
-        if (error.code == "ENOTFOUND") {
             mainWindow.webContents.send("showToast", "Unable to communicate with Nexus servers", "error");
+        } else {
+            mainWindow.webContents.send("showToast", "Unable to create Nexus API ", "error");
         }
         nexus = undefined;
     }
@@ -646,24 +647,15 @@ async function searchInstalledMods(keywords, offset = 0, count = 10, sortFilter
         modsInfo.push(modInfo);
     }
 
-    const modsInfoFiltered = modsInfo.filter((mod) => mod.name.toLowerCase().includes(keywords.toLowerCase()));
+    const result = sortAndFilterModsList(modsInfo, keywords, offset, count, sortFilter, sortOrder);
-    const sortFactor = sortOrder == "ASC" ? 1 : -1;
+    installedCachedModList = result.list;
-
+    installedTotalModsCount = result.totalCount;
-    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]));
-    }
-
-    installedTotalModsCount = modsInfoSorted.length;
-    installedCachedModList = modsInfoSorted.slice(offset, offset + count);
 }
 
 async function checkInstalledMods() {
+    if (!loadSilksongPath()) {
+        return;
+    }
     const bepinexPluginsPath = path.join(loadSilksongPath(), "BepInEx", "plugins");
 
     for (const [key, modInfo] of Object.entries(installedModsStore.store)) {
@@ -730,6 +722,23 @@ ipcMain.handle("deactivate-mod", async (event, modId) => {
     }
 });
 
+function sortAndFilterModsList(list, keywords, offset, count, sortFilter, sortOrder) {
+    const listFiltered = list.filter((element) => element.name.toLowerCase().includes(keywords.toLowerCase()));
+    const sortFactor = sortOrder == "ASC" ? 1 : -1;
+
+    let listSorted;
+    if (sortFilter == "name" || sortFilter == "createdAt" || sortFilter == "updatedAt") {
+        listSorted = listFiltered.sort((a, b) => sortFactor * a[sortFilter].localeCompare(b[sortFilter]));
+    } else if (sortFilter == "downloads" || sortFilter == "endorsements" || sortFilter == "size") {
+        if (sortFilter == "size") {
+            sortFilter = "fileSize";
+        }
+        listSorted = listFiltered.sort((a, b) => sortFactor * (a[sortFilter] - b[sortFilter]));
+    }
+
+    return { list: listSorted.slice(offset, offset + count), totalCount: listSorted.length };
+}
+
 //////////////////////////////////////////////////////
 //////////////////// UNCATEGORIZE ////////////////////
 

renderer/assets/icons/folder.svg

@@ -1 +1 @@
-<svg role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="m 13,5.384615 v 5.07693 q 0,0.66346 -0.47596,1.13942 -0.47596,0.47596 -1.13942,0.47596 H 2.61538 q -0.663457,0 -1.139418,-0.47596 Q 1,11.125005 1,10.461545 V 3.538465 Q 1,2.875005 1.475962,2.399045 1.951923,1.923075 2.61538,1.923075 h 2.3077 q 0.66346,0 1.13942,0.47597 0.47596,0.47596 0.47596,1.13942 v 0.23077 h 4.84616 q 0.66346,0 1.13942,0.47596 Q 13,4.721155 13,5.384615 z"/></svg>
+<svg role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="#ffffff"><path d="m 13,5.384615 v 5.07693 q 0,0.66346 -0.47596,1.13942 -0.47596,0.47596 -1.13942,0.47596 H 2.61538 q -0.663457,0 -1.139418,-0.47596 Q 1,11.125005 1,10.461545 V 3.538465 Q 1,2.875005 1.475962,2.399045 1.951923,1.923075 2.61538,1.923075 h 2.3077 q 0.66346,0 1.13942,0.47597 0.47596,0.47596 0.47596,1.13942 v 0.23077 h 4.84616 q 0.66346,0 1.13942,0.47596 Q 13,4.721155 13,5.384615 z"/></svg>

renderer/assets/icons/github.svg

@@ -1 +1 @@
-<svg class="social-github" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="m 7,1.1480539 c -3.313515,0 -6,2.68652 -6,6 0,2.65087 1.719175,4.9003701 4.103505,5.6933601 C 5.403301,12.897114 5.5,12.711544 5.5,12.552834 l 0,-1.11716 C 3.831039,11.798964 3.483359,10.728164 3.483359,10.728164 3.210913,10.034324 2.817388,9.8497439 2.817388,9.8497439 c -0.544456,-0.37205 0.04101,-0.36474 0.04101,-0.36474 0.602563,0.0425 0.919922,0.6186401 0.919922,0.6186401 0.535136,0.91698 1.403301,0.65187 1.746088,0.49855 0.05371,-0.38773 0.208951,-0.6523401 0.380854,-0.8022501 -1.333048,-0.15137 -2.733437,-0.66603 -2.733437,-2.96534 0,-0.65528 0.234379,-1.19045 0.618204,-1.61036 -0.0625,-0.15137 -0.267612,-0.76171 0.05764,-1.5879 0,0 0.503913,-0.16113 1.650349,0.61523 0.478981,-0.13282 0.992214,-0.19969 1.501981,-0.20214 0.509767,0.002 1.023903,0.0693 1.502913,0.20214 1.145534,-0.77636 1.648427,-0.61523 1.648427,-0.61523 0.326709,0.82616 0.121107,1.4365 0.0591,1.5879 0.384786,0.41991 0.61768,0.95508 0.61768,1.61036 0,2.30467 -1.403797,2.81199 -2.739729,2.96044 0.214806,0.18606 0.411641,0.5517401 0.411641,1.1113201 0,0.80274 0,1.44923 0,1.64647 0,0.15967 0.09615,0.34669 0.400369,0.28812 C 11.283214,12.046534 13,9.7984539 13,7.1480839 c 0,-3.31348 -2.686544,-6.00003 -6,-6.00003 z"/></svg>
+<svg class="social-github" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="#ffffff"><path d="m 7,1.1480539 c -3.313515,0 -6,2.68652 -6,6 0,2.65087 1.719175,4.9003701 4.103505,5.6933601 C 5.403301,12.897114 5.5,12.711544 5.5,12.552834 l 0,-1.11716 C 3.831039,11.798964 3.483359,10.728164 3.483359,10.728164 3.210913,10.034324 2.817388,9.8497439 2.817388,9.8497439 c -0.544456,-0.37205 0.04101,-0.36474 0.04101,-0.36474 0.602563,0.0425 0.919922,0.6186401 0.919922,0.6186401 0.535136,0.91698 1.403301,0.65187 1.746088,0.49855 0.05371,-0.38773 0.208951,-0.6523401 0.380854,-0.8022501 -1.333048,-0.15137 -2.733437,-0.66603 -2.733437,-2.96534 0,-0.65528 0.234379,-1.19045 0.618204,-1.61036 -0.0625,-0.15137 -0.267612,-0.76171 0.05764,-1.5879 0,0 0.503913,-0.16113 1.650349,0.61523 0.478981,-0.13282 0.992214,-0.19969 1.501981,-0.20214 0.509767,0.002 1.023903,0.0693 1.502913,0.20214 1.145534,-0.77636 1.648427,-0.61523 1.648427,-0.61523 0.326709,0.82616 0.121107,1.4365 0.0591,1.5879 0.384786,0.41991 0.61768,0.95508 0.61768,1.61036 0,2.30467 -1.403797,2.81199 -2.739729,2.96044 0.214806,0.18606 0.411641,0.5517401 0.411641,1.1113201 0,0.80274 0,1.44923 0,1.64647 0,0.15967 0.09615,0.34669 0.400369,0.28812 C 11.283214,12.046534 13,9.7984539 13,7.1480839 c 0,-3.31348 -2.686544,-6.00003 -6,-6.00003 z"/></svg>

renderer/assets/icons/settings.svg

@@ -3,7 +3,8 @@
    focusable="false"
    aria-hidden="true"
    viewBox="0 0 14 14"
-   xmlns="http://www.w3.org/2000/svg">
+   xmlns="http://www.w3.org/2000/svg"
+   fill="#ffffff">
   <path
      d="m 8.8752116,12.181305 v -0.845421 c 0.3824271,-0.154001 0.726847,-0.36571 1.0522956,-0.605995 l 0.7732288,0.43071 c 0.129524,0.07348 0.274423,0.111383 0.423312,0.111383 0.07294,0 0.14588,-0.0105 0.216596,-0.02797 0.216594,-0.05726 0.40349,-0.194791 0.514241,-0.381738 L 12.886967,9.137646 C 13.120376,8.7467822 12.980643,8.2446393 12.57519,8.0191521 L 11.798888,7.5845715 c 0.02336,-0.1937454 0.05915,-0.3841963 0.05915,-0.58406 0,-0.200282 -0.03578,-0.3919096 -0.05915,-0.5854981 L 12.57519,5.9817665 C 12.769673,5.8719503 12.910975,5.6936322 12.97129,5.4831529 13.02958,5.2718895 12.99661,5.0497752 12.88697,4.8614422 L 11.854885,3.1377619 C 11.699911,2.8751729 11.41463,2.7284127 11.122019,2.7284127 c -0.144899,0 -0.288488,0.034775 -0.421219,0.1098161 L 9.9275724,3.2698799 C 9.6021235,3.0301169 9.256657,2.8177291 8.8752766,2.6630465 V 1.8201103 C 8.8752766,1.3669134 8.4961856,1 8.0281931,1 H 5.9710286 C 5.5019897,1 5.1238146,1.3669134 5.1238146,1.8201103 V 2.6630465 C 4.7434808,2.8178336 4.3959207,3.0302213 4.0729577,3.2698799 L 3.2988145,2.8372867 C 3.1697472,2.7645994 3.0251103,2.7282557 2.8783147,2.7282557 c -0.073855,0 -0.1488238,0.010461 -0.2218277,0.027978 C 2.4398921,2.8119249 2.256332,2.9484095 2.1422449,3.1364026 L 1.1123216,4.8612069 c -0.23151155,0.3921709 -0.09407,0.8935296 0.3104686,1.1203242 l 0.7773489,0.433247 c -0.023163,0.193484 -0.059268,0.3851637 -0.059268,0.5855242 0,0.1997591 0.036177,0.39021 0.059268,0.583354 L 1.4227902,8.0174787 C 1.0182522,8.2431227 0.88081119,8.7454488 1.1123216,9.1373584 L 2.1421142,10.86198 c 0.1140877,0.186948 0.2977122,0.32453 0.5142421,0.381738 0.071957,0.0183 0.1458801,0.02797 0.218622,0.02797 0.149086,0 0.2937219,-0.03791 0.4237052,-0.111384 l 0.7722463,-0.430711 c 0.3249255,0.240286 0.6724201,0.452176 1.0528194,0.606022 v 0.84542 C 5.1237492,12.632693 5.5019241,13 5.9709632,13 h 2.0571645 c 0.4679925,1.83e-4 0.8470835,-0.367176 0.8470835,-0.818855 z M 4.663215,7.0004593 c 0,-1.2491741 1.0468009,-2.2607289 2.334205,-2.2607289 1.2928991,0 2.3395692,1.0114764 2.3395692,2.2607289 0,1.2470298 -1.0466701,2.2585586 -2.3395692,2.2585586 C 5.7100159,9.2589655 4.663215,8.2474891 4.663215,7.0004593 Z" />
 </svg>

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

@@ -3,7 +3,8 @@
    focusable="false"
    aria-hidden="true"
    viewBox="0 0 14 14"
-   xmlns="http://www.w3.org/2000/svg">
+   xmlns="http://www.w3.org/2000/svg"
+   fill="#ffffff">
   <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

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

@@ -3,7 +3,8 @@
    focusable="false"
    aria-hidden="true"
    viewBox="0 0 14 14"
-   xmlns="http://www.w3.org/2000/svg">
+   xmlns="http://www.w3.org/2000/svg"
+   fill="#ffffff">
   <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

renderer/assets/icons/start-modded.svg

@@ -3,7 +3,8 @@
    focusable="false"
    aria-hidden="true"
    viewBox="0 0 14 14"
-   xmlns="http://www.w3.org/2000/svg">
+   xmlns="http://www.w3.org/2000/svg"
+   fill="#ffffff">
   <path
      d="m 10.781355,12.15887 v -0.352258 c 0.159345,-0.06416 0.302854,-0.152379 0.438458,-0.252498 l 0.32218,0.179463 c 0.05396,0.03062 0.114338,0.0464 0.176383,0.0464 0.03039,0 0.06079,-0.0044 0.09023,-0.01163 0.09026,-0.02386 0.168121,-0.08116 0.214269,-0.159057 l 0.430036,-0.718594 c 0.09725,-0.16286 0.03902,-0.372086 -0.129909,-0.466039 l -0.323454,-0.181075 c 0.0098,-0.08074 0.02464,-0.160081 0.02464,-0.243358 0,-0.08345 -0.01491,-0.1632952 -0.02464,-0.2439564 L 12.323,9.5757277 c 0.08104,-0.04575 0.139914,-0.1200624 0.165044,-0.2077546 0.02429,-0.08803 0.0105,-0.180574 -0.03513,-0.2590459 L 12.022891,8.3907278 c -0.06457,-0.1094124 -0.18344,-0.1705615 -0.305364,-0.1705615 -0.06038,0 -0.1202,0.01449 -0.175508,0.045756 L 11.21984,8.4457815 C 11.084235,8.3458802 10.940291,8.257386 10.781381,8.192935 V 7.8417121 C 10.781381,7.6528803 10.623426,7.5 10.428427,7.5 H 9.5712702 C 9.375837,7.5 9.2182616,7.6528803 9.2182616,7.8417121 V 8.192935 C 9.0597901,8.2574296 8.9149709,8.3459242 8.7804031,8.4457815 L 8.4578409,8.265535 C 8.4040669,8.235247 8.3438034,8.220105 8.2826318,8.220105 c -0.030776,0 -0.062013,0.00436 -0.092425,0.011662 -0.090237,0.023205 -0.166733,0.080074 -0.2142681,0.1584039 L 7.5468008,9.1088332 c -0.096463,0.1634049 -0.039188,0.3723033 0.1293616,0.466802 l 0.3238982,0.1805187 c -0.00962,0.080625 -0.024687,0.1604849 -0.024687,0.2439671 0,0.08324 0.015076,0.162588 0.024687,0.243065 l -0.3238977,0.180759 c -0.168558,0.09401 -0.2258256,0.30332 -0.1293616,0.466615 l 0.4290822,0.718592 c 0.047526,0.0779 0.1240501,0.13522 0.2142681,0.159057 0.029976,0.0076 0.060788,0.01162 0.091088,0.01162 0.062124,0 0.1223876,-0.0158 0.1765454,-0.04641 l 0.3217708,-0.179464 c 0.1353866,0.100125 0.280177,0.188406 0.4386774,0.25251 v 0.352258 c 0,0.18823 0.1575741,0.341274 0.3530085,0.341274 h 0.8571563 c 0.194997,7.6e-5 0.352954,-0.15299 0.352954,-0.341189 z m -1.75501,-2.158683 c 0,-0.520488 0.4361698,-0.9419688 0.9725912,-0.9419688 0.5387118,0 0.9748248,0.4214483 0.9748248,0.9419688 0,0.519595 -0.436113,0.941065 -0.9748248,0.941065 C 9.4625148,10.94123 9.026345,10.519782 9.026345,10.000187 Z" />
   <path

renderer/assets/icons/start-vanilla.svg

@@ -3,7 +3,8 @@
    focusable="false"
    aria-hidden="true"
    viewBox="0 0 14 14"
-   xmlns="http://www.w3.org/2000/svg">
+   xmlns="http://www.w3.org/2000/svg"
+   fill="#ffffff">
   <path
      d="m 2.1464844,1.0019531 c -0.1349019,-0.006832 -0.2388263,0.00771 -0.3085938,0.044922 -1.11627905,0.5953992 -1.11627905,11.3108509 0,11.9062499 C 2.9541697,13.548524 13,8.1907983 13,7 13,5.8836266 4.1700127,1.1044327 2.1464844,1.0019531 Z m 0.7617187,1.25 C 4.5101631,2.3330828 11.5,6.1162044 11.5,7 c 0,0.9427153 -7.9541697,5.184248 -8.8378906,4.712891 -0.883721,-0.471358 -0.883721,-8.954424 0,-9.4257816 0.055233,-0.02946 0.1392964,-0.040565 0.2460937,-0.035156 z" />
 </svg>

renderer/index.html

@@ -17,43 +17,44 @@
                     <h5 class="logo-title">Silk Fly Launcher</h5>
                 </div>
 
-                <nav class="nav">
+                <div class="sidebar-content">
-                    <div class="nav-section">
+                    <nav class="nav">
-                        <span class="nav-title">Execute Silksong</span>
+                        <div class="nav-section">
-                        <button class="horizontal-div" onclick="launch('vanilla')">
+                            <span class="nav-title">Execute Silksong</span>
-                            <img src="assets/icons/start-vanilla.svg" class="icons invert-color" />
+                            <button class="horizontal-div" onclick="launch('vanilla')">
-                            Run Vanilla
+                                <img src="assets/icons/start-vanilla.svg" class="icons" />
-                        </button>
+                                Run Vanilla
-                        <button class="horizontal-div" onclick="launch('modded')">
+                            </button>
-                            <img src="assets/icons/start-modded.svg" class="icons invert-color" />
+                            <button class="horizontal-div" onclick="launch('modded')">
-                            Run Modded
+                                <img src="assets/icons/start-modded.svg" class="icons" />
-                        </button>
+                                Run Modded
-                    </div>
+                            </button>
+                        </div>
 
-                    <div class="nav-section">
+                        <div class="nav-section">
-                        <span class="nav-title">Mods</span>
+                            <span class="nav-title">Mods</span>
-                        <button class="horizontal-div" onclick="navigate('mods-installed')">
+                            <button class="horizontal-div" onclick="navigate('mods-installed')">
-                            <img src="assets/icons/folder.svg" class="icons invert-color" />
+                                <img src="assets/icons/folder.svg" class="icons" />
-                            Installed
+                                Installed
-                        </button>
+                            </button>
-                        <button class="horizontal-div" onclick="navigate('mods-thunderstore')">
+                            <button class="horizontal-div" onclick="navigate('mods-thunderstore')">
-                            <img src="assets/icons/thunderstore.svg" class="icons" />
+                                <img src="assets/icons/thunderstore.svg" class="icons" />
-                            Thunderstore
+                                Thunderstore
-                        </button>
+                            </button>
-                        <button class="horizontal-div" onclick="navigate('mods-online')">
+                            <button class="horizontal-div" onclick="navigate('mods-online')">
-                            <img src="assets/icons/nexus-mods.svg" class="icons" />
+                                <img src="assets/icons/nexus-mods.svg" class="icons" />
-                            Nexus
+                                Nexus
-                        </button>
+                            </button>
-                    </div>
+                        </div>
+                    </nav>
 
-                    <div class="nav-section">
+                    <nav class="nav">
-                        <span class="nav-title">Settings</span>
                         <button class="horizontal-div" onclick="navigate('general-settings')">
-                            <img src="assets/icons/settings.svg" class="icons invert-color" />
+                            <img src="assets/icons/settings.svg" class="icons" />
-                            General
+                            Settings
                         </button>
-                    </div>
+                    </nav>
-                </nav>
+                </div>
             </aside>
 
             <!-- Main content -->
@@ -80,12 +81,12 @@
                     </div>
                 </div>
                 <div class="horizontal-div">
-                    <img onclick="electronAPI.openExternalLink('https://github.com/Gabi-Zar/Silk-Fly-Launcher')" src="assets/icons/github.svg" alt="Github logo" class="logo-img invert-color" />
+                    <img onclick="electronAPI.openExternalLink('https://github.com/Gabi-Zar/Silk-Fly-Launcher')" src="assets/icons/github.svg" alt="Github logo" class="logo-img" />
                 </div>
             </div>
             <br />
             <ul>
-                <li>Silk Fly Launcher is a launcher and mod manager for Silksong mods from Nexus, built with Electron.</li>
+                <li>Silk Fly Launcher is a launcher and mod manager for Silksong mods from Nexus and Thunderstore, built with Electron.</li>
                 <li>This product is licensed under the <a href="" class="link" onclick="electronAPI.openWindow('LICENSE')">GNU General Public License Version 3</a>.</li>
                 <li>This product uses third-party modules or assets under <a href="" class="link" onclick="electronAPI.openWindow('THIRD-PARTY-LICENSES')">third-party licenses</a>.</li>
                 <li>
@@ -115,7 +116,7 @@
                         <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>
+                <button class="default-button square-button" onclick="inverseSort()"><img class="icons" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
             </div>
             <div class="mods-container" id="mods-container"></div>
             <div class="separated-div">
@@ -148,7 +149,7 @@
                         <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>
+                <button class="default-button square-button" onclick="inverseSort()"><img class="icons" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
             </div>
             <div class="mods-container" id="mods-container"></div>
             <div class="separated-div">
@@ -180,7 +181,7 @@
                         <li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</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>
+                <button class="default-button square-button" onclick="inverseSort()"><img class="icons" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
             </div>
             <div class="mods-container" id="mods-container"></div>
             <div class="separated-div">

renderer/renderer.js

@@ -56,7 +56,6 @@ const welcomeTemplate = document.getElementById("welcome-template");
 const silksongPathTemplate = document.getElementById("path-template");
 const nexusTemplate = document.getElementById("nexus-template");
 const styleTemplate = document.getElementById("style-template");
-const tutorialTemplate = document.getElementById("tutorial-template");
 
 //////////////////////////////////////////////////////
 ////////////////////// STARTUP ///////////////////////
@@ -376,6 +375,11 @@ async function welcomeNavigate() {
             break;
 
         case 2:
+            pageDiv.appendChild(styleTemplate.content.cloneNode(true));
+            toggleSelectedListButton("themes-menu", actualTheme[0]);
+            break;
+
+        case 3:
             pageDiv.appendChild(nexusTemplate.content.cloneNode(true));
             const nexusLink = document.getElementById("external-link");
             const nexusAPIForm = document.getElementById("nexus-api-form");
@@ -392,16 +396,7 @@ async function welcomeNavigate() {
             setNexusAPI();
             break;
 
-        case 3:
-            pageDiv.appendChild(styleTemplate.content.cloneNode(true));
-            toggleSelectedListButton("themes-menu", actualTheme[0]);
-            break;
-
         case 4:
-            pageDiv.appendChild(tutorialTemplate.content.cloneNode(true));
-            break;
-
-        case 5:
             electronAPI.loadMainPage();
             break;
     }

renderer/style.css

@@ -49,6 +49,13 @@ body {
     flex-direction: column;
 }
 
+.sidebar-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+}
+
 .logo {
     height: 70px;
     display: flex;
@@ -75,10 +82,6 @@ body {
     height: 100px;
 }
 
-.invert-color {
-    filter: invert(1);
-}
-
 .nav {
     padding: 20px;
 }

renderer/welcome.html

@@ -22,7 +22,7 @@
         <template id="welcome-template">
             <h1 class="title">Welcome to Silk Fly Launcher</h1>
             <div class="horizontal-div welcome-div">
-                <p>Silk Fly Launcher is a launcher and mod manager for Silksong mods from Nexus, built with Electron.</p>
+                <p>Silk Fly Launcher is a launcher and mod manager for Silksong mods from Nexus and Thunderstore, built with Electron.</p>
                 <p>Made with ♥ by <a href="" class="link" onclick="electronAPI.openExternalLink('https://github.com/Gabi-Zar')">GabiZar</a>.</p>
             </div>
         </template>
@@ -47,22 +47,6 @@
             </div>
         </template>
 
-        <template id="nexus-template">
-            <h1 class="title">Enter your nexus API key</h1>
-            <p>
-                Please enter your nexus API key. To get your API key go to
-                <a href="https://www.nexusmods.com/settings/api-keys" class="link" id="external-link">https://www.nexusmods.com/settings/api-keys</a> and click on new personnal API key
-            </p>
-            <div class="horizontal-div">
-                <img class="nexus-check-image" id="nexus-check-image" src="assets/icons/cross.svg" />
-                <form class="horizontal-div input-form" id="nexus-api-form">
-                    <input class="input" id="nexus-api-input" type="text" placeholder="Enter your nexus api" />
-                    <button class="default-button" onclick="setNexusAPI()">Set</button>
-                </form>
-                <button class="default-button" onclick="resetNexusAPI()">Reset</button>
-            </div>
-        </template>
-
         <template id="style-template">
             <h1 class="title">Chose the theme of the app</h1>
             <div class="horizontal-div welcome-div">
@@ -82,9 +66,27 @@
             </div>
         </template>
 
-        <template id="tutorial-template">
+        <template id="nexus-template">
-            <h1 class="title">Tutorial to download mod from nexus</h1>
+            <h1 class="title">Additional set up for nexus mods</h1>
-            <p>After clicking on "Download," a Nexus Mods window will pop up. Please log in, then click on "Download with Mod Manager."The Nexus window should close, and the mod will start downloading.</p>
+            <h2>If you don't want to use nexus mods just click on next.</h2>
+            <br />
+            <br />
+            <p>
+                1. Please enter your nexus API key. To get your API key go to
+                <a href="https://www.nexusmods.com/settings/api-keys" class="link" id="external-link">https://www.nexusmods.com/settings/api-keys</a> and click on "new personnal API key".
+            </p>
+            <br />
+            <div class="horizontal-div">
+                <img class="nexus-check-image" id="nexus-check-image" src="assets/icons/cross.svg" />
+                <form class="horizontal-div input-form" id="nexus-api-form">
+                    <input class="input" id="nexus-api-input" type="text" placeholder="Enter your nexus api" />
+                    <button class="default-button" onclick="setNexusAPI()">Set</button>
+                </form>
+                <button class="default-button" onclick="resetNexusAPI()">Reset</button>
+            </div>
+            <br />
+            <br />
+            <p>2. To download a mod from Nexus Mods you need to log in to your Nexus Mods account and then click on "Download with Mod Manager".</p>
         </template>
 
         <script src="renderer.js"></script>