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;
+ }
}