diff --git a/src/components/search/InstantSearch.tsx b/src/components/search/InstantSearch.tsx index 04055a549435ae7..cbb40dfc21de44b 100644 --- a/src/components/search/InstantSearch.tsx +++ b/src/components/search/InstantSearch.tsx @@ -34,6 +34,22 @@ function SearchBox(props: UseSearchBoxProps) { } }, []); + useEffect(() => { + const params = new URLSearchParams(window.location.search); + + if (query) { + params.set("q", query); + } else { + params.delete("q"); + } + + history.pushState( + null, + "", + `${window.location.pathname}?${params.toString()}`, + ); + }, [query]); + return (
{ const params = new URLSearchParams(window.location.search); @@ -112,12 +134,19 @@ function FilterDropdown({ const refined = items .filter((item) => item.isRefined) .map((item) => item.value); - if (refined.length === 0) return; + + const params = new URLSearchParams(window.location.search); + + if (refined.length === 0) { + params.delete(attribute); + } else { + params.set(attribute, refined.join(",")); + } history.pushState( null, "", - `${window.location.pathname}?${attribute}=${refined.join(",")}`, + `${window.location.pathname}?${params.toString()}`, ); }, [items]); @@ -160,21 +189,28 @@ function FilterDropdown({ className="border-cl1-gray-8 bg-cl1-white dark:border-cl1-gray-1 dark:bg-cl1-gray-0 rounded-sm border p-4 shadow-md" >
- {items.map((item) => ( - - ))} + {items + .sort((a, b) => { + if (a.isRefined && !b.isRefined) return -1; + if (!a.isRefined && b.isRefined) return 1; + return b.count - a.count; + }) + .map((item) => ( + + ))}
@@ -198,8 +234,9 @@ export default function InstantSearchComponent() {
-
+
+
diff --git a/src/styles/input.css b/src/styles/input.css index ba7847b30dbdf10..df3167e6967e8b4 100644 --- a/src/styles/input.css +++ b/src/styles/input.css @@ -1,12 +1,14 @@ -input, -textarea, -select { - background-color: var(--sl-color-bg-nav); - border-color: var(--sl-color-gray-5); - border-width: 2px; -} +@layer theme { + input, + textarea, + select { + background-color: var(--sl-color-bg-nav); + border-color: var(--sl-color-gray-5); + border-width: 2px; + } -input[readonly] { - background-color: var(--sl-color-backdrop-overlay); - cursor: not-allowed; + input[readonly] { + background-color: var(--sl-color-backdrop-overlay); + cursor: not-allowed; + } }