Merge pull request 'added search bar in "my mods"' (#3) from amiay/hytale-f2p:develop into develop

Reviewed-on: https://git.sanhost.net/sanasol/hytale-f2p/pulls/3

GUI/index.html

@@ -663,7 +663,11 @@
                     <i class="fas fa-times"></i>
                 </button>
             </div>
-            <div class="mods-modal-body">
+            <div class="mods-modal-body" style="padding-top: 0;">
+                <div class="mods-search-container" style="margin: 1.5rem; margin-bottom: 1rem;">
+                    <i class="fas fa-search"></i>
+                    <input type="text" id="myModsSearch" placeholder="Search installed mods..." class="mods-search" />
+                </div>
                 <div id="installedModsList" class="installed-mods-list">
                 </div>
             </div>

GUI/js/mods.js

@@ -49,6 +49,18 @@ function setupModsEventListeners() {
     closeModalBtn.addEventListener('click', closeMyModsModal);
   }
 
+  const myModsSearchInput = document.getElementById('myModsSearch');
+  if (myModsSearchInput) {
+    let myModsSearchTimeout;
+    myModsSearchInput.addEventListener('input', (e) => {
+      const query = e.target.value.toLowerCase().trim();
+      clearTimeout(myModsSearchTimeout);
+      myModsSearchTimeout = setTimeout(() => {
+        filterInstalledMods(query);
+      }, 300);
+    });
+  }
+
   const modal = document.getElementById('myModsModal');
   if (modal) {
     modal.addEventListener('click', (e) => {
@@ -98,6 +110,10 @@ function openMyModsModal() {
   const modal = document.getElementById('myModsModal');
   if (modal) {
     modal.classList.add('active');
+    const searchInput = document.getElementById('myModsSearch');
+    if (searchInput) {
+      searchInput.value = '';
+    }
     loadInstalledMods();
   }
 }
@@ -106,6 +122,10 @@ function closeMyModsModal() {
   const modal = document.getElementById('myModsModal');
   if (modal) {
     modal.classList.remove('active');
+    const searchInput = document.getElementById('myModsSearch');
+    if (searchInput) {
+      searchInput.value = '';
+    }
   }
 }
 
@@ -127,19 +147,39 @@ async function loadInstalledMods() {
   }
 }
 
+function filterInstalledMods(query) {
+  if (!query || query === '') {
+    displayInstalledMods(installedMods);
+    return;
+  }
+
+  const filtered = installedMods.filter(mod => {
+    const nameMatch = mod.name?.toLowerCase().includes(query);
+    const fileNameMatch = mod.fileName?.toLowerCase().includes(query);
+    const descriptionMatch = mod.description?.toLowerCase().includes(query);
+    const authorMatch = mod.author?.toLowerCase().includes(query);
+    return nameMatch || fileNameMatch || descriptionMatch || authorMatch;
+  });
+
+  displayInstalledMods(filtered);
+}
+
 function displayInstalledMods(mods) {
   const modsContainer = document.getElementById('installedModsList');
   if (!modsContainer) return;
 
   if (mods.length === 0) {
+    const searchInput = document.getElementById('myModsSearch');
+    const isSearching = searchInput && searchInput.value.trim() !== '';
+    
     modsContainer.innerHTML = `
       <div class=\"empty-installed-mods\">
-        <i class=\"fas fa-box-open\"></i>
+        <i class=\"fas fa-${isSearching ? 'search' : 'box-open'}\"></i>
-        <h4 data-i18n="mods.noModsInstalled">No Mods Installed</h4>
+        <h4 data-i18n="${isSearching ? 'mods.noModsFound' : 'mods.noModsInstalled'}">${isSearching ? 'No Mods Found' : 'No Mods Installed'}</h4>
-        <p data-i18n="mods.noModsInstalledDesc">Add mods from CurseForge or import local files</p>
+        <p data-i18n="${isSearching ? 'mods.noModsFoundDesc' : 'mods.noModsInstalledDesc'}">${isSearching ? 'Try a different search term' : 'Add mods from CurseForge or import local files'}</p>
       </div>
     `;
-    if (window.i18n) {
+    if (window.i18n && !isSearching) {
       const container = modsContainer.querySelector('.empty-installed-mods');
       container.querySelector('h4').textContent = window.i18n.t('mods.noModsInstalled');
       container.querySelector('p').textContent = window.i18n.t('mods.noModsInstalledDesc');