feat: add clear button to catalog search field

Author: martinPavesio

src/pages/CatalogPage.module.css

@@ -16,7 +16,7 @@
 
 .search {
   width: 100%;
-  padding: 9px 12px 9px 38px;
+  padding: 9px 34px 9px 38px;
   background: var(--bg-card);
   border: 1px solid var(--border-strong);
   border-radius: 8px;
@@ -30,6 +30,22 @@
 .search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
 .search::placeholder { color: var(--text-secondary); }
 
+.clearBtn {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 0 2px;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.1s;
+}
+.clearBtn:hover { color: var(--text-primary); }
+
 /* ── Table scroll wrapper ─────────────────────────────── */
 .tableScroll { overflow-x: auto; }
 .tableScroll table { table-layout: fixed; width: 100%; }

src/pages/CatalogPage.tsx

@@ -68,6 +68,9 @@ export function CatalogPage() {
             onChange={e => setQuery(e.target.value)}
             autoComplete="off"
           />
+          {query && (
+            <button className={styles.clearBtn} onClick={() => setQuery('')} aria-label="Clear search">×</button>
+          )}
         </div>
         <p className="count-label">
           Showing <b>{filtered.length.toLocaleString()}</b> of <b>{packages.length.toLocaleString()}</b> packages