Update FilterModal

* Fixes spacing of interactive elements in FilterBar so they don't stretch according to content anymore
* Adds new `persistFilters` prop that determines whether the FilterBar should persist any filters to the user's cookies
* Uses defaultFilterset prop to populate the default filter set instead of importing the actual "default filter set" and using it directly

components/filters/FilterBar/index.module.scss

@@ -33,17 +33,21 @@
       minmax($unit-20x, 1fr)
       minmax($unit-20x, 1fr)
       minmax($unit-20x, 1fr)
-      0.5fr;
+      auto;
     box-sizing: border-box;
     flex-direction: row;
     gap: $unit;
-    width: auto;
+    width: 75%;
 
     @include breakpoint(tablet) {
       grid-template-columns: 1fr;
       grid-template-rows: auto;
       width: 100%;
     }
+
+    & > * {
+      min-width: 0;
+    }
   }
 
   &.shadow {

components/filters/FilterBar/index.tsx

@@ -11,12 +11,13 @@ import SelectItem from '~components/common/SelectItem'
 import Button from '~components/common/Button'
 
 import { appState } from '~utils/appState'
-import { defaultFilterset } from '~utils/defaultFilters'
 
 import FilterIcon from '~public/icons/Filter.svg'
 import styles from './index.module.scss'
 
 interface Props {
+  defaultFilterset: FilterSet
+  persistFilters?: boolean
   children: React.ReactNode
   scrolled: boolean
   element?: number
@@ -62,13 +63,14 @@ const FilterBar = (props: Props) => {
   useEffect(() => {
     // Fetch user's advanced filters
     const filtersCookie = getCookie('filters')
-    if (filtersCookie) setAdvancedFilters(JSON.parse(filtersCookie as string))
-    else setAdvancedFilters(defaultFilterset)
+    if (filtersCookie && props.persistFilters) {
+      setAdvancedFilters(JSON.parse(filtersCookie as string))
+    } else setAdvancedFilters(props.defaultFilterset)
   }, [])
 
   useEffect(() => {
-    setMatchesDefaultFilters(equals(advancedFilters, defaultFilterset))
-  }, [advancedFilters, defaultFilterset])
+    setMatchesDefaultFilters(equals(advancedFilters, props.defaultFilterset))
+  }, [advancedFilters, props.defaultFilterset])
 
   function openElementSelect() {
     setElementOpen(!elementOpen)
@@ -194,9 +196,11 @@ const FilterBar = (props: Props) => {
           />
         </div>
       </div>
+
       <FilterModal
-        defaultFilterSet={defaultFilterset}
+        defaultFilterSet={props.defaultFilterset}
         filterSet={advancedFilters}
+        persistFilters={props.persistFilters}
         open={filterModalOpen}
         onOpenChange={setFilterModalOpen}
         sendAdvancedFilters={handleAdvancedFiltersChanged}
@@ -205,4 +209,8 @@ const FilterBar = (props: Props) => {
   )
 }
 
+FilterBar.defaultProps = {
+  persistFilters: true,
+}
+
 export default FilterBar