From 224e28cab660d3e5633c43706c3a1e2b9e3d5b3b Mon Sep 17 00:00:00 2001
From: Hassaan Ali <mrhassaan929@gmail.com>
Date: Tue, 3 Jun 2025 02:43:32 +0500
Subject: [PATCH 1/5] clear search added

---
 src/components/ModsList.astro | 36 ++++++++++++++++++++++++++++++++---
 src/icons/XmarkIcon.astro     | 17 +++++++++++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 src/icons/XmarkIcon.astro

diff --git a/src/components/ModsList.astro b/src/components/ModsList.astro
index bb617f2..d8277bd 100644
--- a/src/components/ModsList.astro
+++ b/src/components/ModsList.astro
@@ -1,6 +1,7 @@
 ---
 import { icon, library } from '@fortawesome/fontawesome-svg-core'
 import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
+import Xmark from '~/icons/XmarkIcon.astro'
 import { type ZenTheme } from '~/mods'
 import { getPath, type Locale } from '~/utils/i18n'
 
@@ -31,13 +32,24 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
 
 <div id="mods-list-container" class="flex flex-1 flex-col">
   <div class="flex flex-col items-center gap-4">
-    <div class="flex w-full flex-col items-center justify-center gap-6">
+    <div
+      class="flex w-full flex-row items-center justify-center gap-4 rounded-full border-2 border-dark px-6 py-2"
+    >
       <input
-        class="w-full rounded-full border-2 border-dark bg-transparent px-6 py-2 text-lg outline-none"
+        class="w-full bg-transparent text-lg outline-none"
         id="search"
         placeholder={translations.search}
         type="text"
       />
+      <button
+        id="clear-search"
+        title="Clear search"
+        class="hidden rounded-full p-1 transition-colors duration-150 hover:bg-subtle"
+        aria-label="Clear search"
+        tabindex="0"
+      >
+        <Xmark />
+      </button>
     </div>
 
     <div class="mb-1 flex w-full items-center justify-between gap-4 sm:mb-2">
@@ -68,7 +80,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
         </button>
       </div>
 
-      <div class="hidden items-center gap-2 px-4 py-2 sm:flex">
+      <div class="hidden items-center gap-2 px-4 py-1 sm:flex">
         <label class="text-md font-semibold" for="limit">
           {translations.sort.perPage}
         </label>
@@ -191,6 +203,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
       const modsGrid = document.getElementById('mods-grid')
       const noResults = document.getElementById('no-results')
       const pagination = document.getElementById('pagination')
+      const clearSearchButton = document.getElementById('clear-search')
 
       // Sort icon elements
       const createdSortDefault = document.getElementById('created-sort-default')
@@ -218,6 +231,8 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
           updatedAsc: updatedSortAsc instanceof HTMLSpanElement ? updatedSortAsc : null,
           updatedDesc: updatedSortDesc instanceof HTMLSpanElement ? updatedSortDesc : null,
         },
+        clearSearchButton:
+          clearSearchButton instanceof HTMLButtonElement ? clearSearchButton : null,
       }
     }
 
@@ -282,6 +297,21 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
             }
           }, 300) // 300ms debounce
         })
+        if (this.elements.clearSearchButton) {
+          this.elements.searchInput.addEventListener('input', () => {
+            if (this.elements.searchInput.value.trim() === '') {
+              this.elements.clearSearchButton.classList.add('hidden')
+            } else {
+              this.elements.clearSearchButton.classList.remove('hidden')
+            }
+          })
+
+          this.elements.clearSearchButton.addEventListener('click', () => {
+            this.elements.searchInput.value = ''
+            this.setState({ search: '', page: 1 })
+            this.elements.clearSearchButton.classList.add('hidden') // Add this line
+          })
+        }
       }
 
       // Sort buttons
diff --git a/src/icons/XmarkIcon.astro b/src/icons/XmarkIcon.astro
new file mode 100644
index 0000000..02851a3
--- /dev/null
+++ b/src/icons/XmarkIcon.astro
@@ -0,0 +1,17 @@
+---
+const { class: className, ...props } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="18"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class:list={['lucide lucide-xmark-icon lucide-xmark', className]}
+  {...props}><path d="M18 6L6 18M6 6l12 12"></path></svg
+>

From b849220f66fb4720964a220fcb56c5d002477d66 Mon Sep 17 00:00:00 2001
From: Hassaan Ali <mrhassaan929@gmail.com>
Date: Tue, 3 Jun 2025 03:29:51 +0500
Subject: [PATCH 2/5] fixed padding

---
 src/components/ModsList.astro | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ModsList.astro b/src/components/ModsList.astro
index d8277bd..ed47126 100644
--- a/src/components/ModsList.astro
+++ b/src/components/ModsList.astro
@@ -33,10 +33,10 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
 <div id="mods-list-container" class="flex flex-1 flex-col">
   <div class="flex flex-col items-center gap-4">
     <div
-      class="flex w-full flex-row items-center justify-center gap-4 rounded-full border-2 border-dark px-6 py-2"
+      class="flex w-full flex-row items-center justify-center rounded-full border-2 border-dark pr-6"
     >
       <input
-        class="w-full bg-transparent text-lg outline-none"
+        class="w-full overflow-visible rounded-full bg-transparent py-2 pl-6 pr-4 text-lg outline-none"
         id="search"
         placeholder={translations.search}
         type="text"
@@ -305,11 +305,11 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
               this.elements.clearSearchButton.classList.remove('hidden')
             }
           })
-
+          // Clear search
           this.elements.clearSearchButton.addEventListener('click', () => {
             this.elements.searchInput.value = ''
             this.setState({ search: '', page: 1 })
-            this.elements.clearSearchButton.classList.add('hidden') // Add this line
+            this.elements.clearSearchButton.classList.add('hidden')
           })
         }
       }

From d4a7908f80c33de149fd9033f9407b1496f75cc9 Mon Sep 17 00:00:00 2001
From: Hassaan-Ali <76115782+hassaancode@users.noreply.github.com>
Date: Tue, 3 Jun 2025 05:09:29 +0500
Subject: [PATCH 3/5] Update cspell.json

---
 cspell.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/cspell.json b/cspell.json
index e2ef9c7..1a8d3d2 100644
--- a/cspell.json
+++ b/cspell.json
@@ -50,7 +50,8 @@
     "Briel",
     "Otero",
     "Pdzly",
-    "ferrocyante"
+    "ferrocyante",
+    "xmark"
   ],
   "flagWords": [],
   "ignorePaths": [

From 3001846d807fec256a1778b8ef5d614adb3bdcb1 Mon Sep 17 00:00:00 2001
From: Hassaan-Ali <76115782+hassaancode@users.noreply.github.com>
Date: Tue, 3 Jun 2025 06:42:24 +0500
Subject: [PATCH 4/5] removed overflow visible

---
 src/components/ModsList.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ModsList.astro b/src/components/ModsList.astro
index ed47126..0296a18 100644
--- a/src/components/ModsList.astro
+++ b/src/components/ModsList.astro
@@ -36,7 +36,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
       class="flex w-full flex-row items-center justify-center rounded-full border-2 border-dark pr-6"
     >
       <input
-        class="w-full overflow-visible rounded-full bg-transparent py-2 pl-6 pr-4 text-lg outline-none"
+        class="w-full rounded-full bg-transparent py-2 pl-6 pr-4 text-lg outline-none"
         id="search"
         placeholder={translations.search}
         type="text"

From b16166f3db4e87c37e6be18c8a7d23b059bfdc42 Mon Sep 17 00:00:00 2001
From: Shintaro Jokagi <61367823+taroj1205@users.noreply.github.com>
Date: Wed, 4 Jun 2025 13:16:23 +1200
Subject: [PATCH 5/5] chore(cspell): remove duplicate word in cspell.json

---
 cspell.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cspell.json b/cspell.json
index 479ade8..4793b09 100644
--- a/cspell.json
+++ b/cspell.json
@@ -50,7 +50,6 @@
     "Otero",
     "patreon",
     "Pdzly",
-    "ferrocyante",
     "Ribaric",
     "taroj",
     "testid",