Merged in feat/SW-342-filtering-and-sorting-mobile (pull request #919)

Feat/SW-342 filtering and sorting mobile

* feat(SW-342): add sort and filter on mobile

* Use zustand for state management

* Add count and translations

* Clear filters

* Small fixes

* Fixes


Approved-by: Pontus Dreij

components/HotelReservation/SelectHotel/HotelSorter/hotelSorter.module.css

@@ -1,9 +0,0 @@
-.container {
-  width: 339px;
-}
-
-@media (max-width: 768px) {
-  .container {
-    display: none;
-  }
-}

components/HotelReservation/SelectHotel/HotelSorter/index.tsx

@@ -6,16 +6,15 @@ import { useIntl } from "react-intl"
 
 import Select from "@/components/TempDesignSystem/Select"
 
-import styles from "./hotelSorter.module.css"
-
 import {
+  type HotelSorterProps,
   type SortItem,
   SortOrder,
 } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
 
 export const DEFAULT_SORT = SortOrder.Distance
 
-export default function HotelSorter() {
+export default function HotelSorter({ discreet }: HotelSorterProps) {
   const searchParams = useSearchParams()
   const pathname = usePathname()
   const intl = useIntl()
@@ -52,16 +51,14 @@ export default function HotelSorter() {
   ]
 
   return (
-    <div className={styles.container}>
-      <Select
-        items={sortItems}
-        defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
-        label={intl.formatMessage({ id: "Sort by" })}
-        name="sort"
-        showRadioButton
-        discreet
-        onSelect={onSelect}
-      />
-    </div>
+    <Select
+      items={sortItems}
+      defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
+      label={intl.formatMessage({ id: "Sort by" })}
+      name="sort"
+      showRadioButton
+      discreet={discreet}
+      onSelect={onSelect}
+    />
   )
 }