Fix build errors

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

components/AccountModal/index.scss

@@ -5,17 +5,6 @@
   width: $unit * 64;
   overflow-y: hidden;
 
-  .Fields {
-    display: flex;
-    flex-direction: column;
-    gap: $unit-2x;
-    padding: 0 $unit-4x;
-
-    @include breakpoint(phone) {
-      gap: $unit-4x;
-    }
-  }
-
   .DialogDescription {
     font-size: $font-regular;
     line-height: 1.24;

components/DialogContent/index.scss

@@ -171,6 +171,11 @@
             width: 100%;
           }
         }
+
+        &.Spaced {
+          justify-content: space-between;
+          width: 100%;
+        }
       }
     }
 
@@ -180,6 +185,17 @@
       width: 100%;
     }
 
+    .Fields {
+      display: flex;
+      flex-direction: column;
+      gap: $unit-2x;
+      padding: 0 $unit-4x;
+
+      @include breakpoint(phone) {
+        gap: $unit-4x;
+      }
+    }
+
     &.Conflict {
       $weapon-diameter: 14rem;
 

components/FilterBar/index.scss

@@ -38,6 +38,24 @@
       flex-direction: column;
       width: 100%;
     }
+
+    .Button.Filter.Blended {
+      &.FiltersActive .Accessory svg {
+        fill: var(--accent-blue);
+        stroke: none;
+      }
+
+      &:hover {
+        background: var(--button-bg);
+      }
+
+      .Accessory svg {
+        fill: none;
+        stroke: var(--button-text);
+        width: 18px;
+        height: 18px;
+      }
+    }
   }
 
   &.shadow {

components/FilterBar/index.tsx

@@ -1,12 +1,20 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
+import equals from 'fast-deep-equal'
 
+import FilterModal from '~components/FilterModal'
 import RaidDropdown from '~components/RaidDropdown'
-
-import './index.scss'
 import Select from '~components/Select'
 import SelectItem from '~components/SelectItem'
+import Button from '~components/Button'
+
+import { defaultFilterset } from '~utils/defaultFilters'
+
+import FilterIcon from '~public/icons/Filter.svg'
+
+import './index.scss'
+import { getCookie } from 'cookies-next'
 
 interface Props {
   children: React.ReactNode
@@ -14,15 +22,7 @@ interface Props {
   element?: number
   raidSlug?: string
   recency?: number
-  onFilter: ({
-    element,
-    raidSlug,
-    recency,
-  }: {
-    element?: number
-    raidSlug?: string
-    recency?: number
-  }) => void
+  onFilter: (filters: FilterSet) => void
 }
 
 const FilterBar = (props: Props) => {
@@ -32,12 +32,32 @@ const FilterBar = (props: Props) => {
   const [recencyOpen, setRecencyOpen] = useState(false)
   const [elementOpen, setElementOpen] = useState(false)
 
+  const [filterModalOpen, setFilterModalOpen] = useState(false)
+  const [advancedFilters, setAdvancedFilters] = useState<FilterSet>({})
+
+  const [matchesDefaultFilters, setMatchesDefaultFilters] = useState(false)
   // Set up classes object for showing shadow on scroll
   const classes = classNames({
     FilterBar: true,
     shadow: props.scrolled,
   })
 
+  const filterButtonClasses = classNames({
+    Filter: true,
+    FiltersActive: !matchesDefaultFilters,
+  })
+
+  useEffect(() => {
+    // Fetch user's advanced filters
+    const filtersCookie = getCookie('filters')
+    if (filtersCookie) setAdvancedFilters(JSON.parse(filtersCookie as string))
+    else setAdvancedFilters(defaultFilterset)
+  }, [])
+
+  useEffect(() => {
+    setMatchesDefaultFilters(equals(advancedFilters, defaultFilterset))
+  }, [advancedFilters, defaultFilterset])
+
   function openElementSelect() {
     setElementOpen(!elementOpen)
   }
@@ -48,16 +68,21 @@ const FilterBar = (props: Props) => {
 
   function elementSelectChanged(value: string) {
     const elementValue = parseInt(value)
-    props.onFilter({ element: elementValue })
+    props.onFilter({ element: elementValue, ...advancedFilters })
   }
 
   function recencySelectChanged(value: string) {
     const recencyValue = parseInt(value)
-    props.onFilter({ recency: recencyValue })
+    props.onFilter({ recency: recencyValue, ...advancedFilters })
   }
 
   function raidSelectChanged(slug?: string) {
-    props.onFilter({ raidSlug: slug })
+    props.onFilter({ raidSlug: slug, ...advancedFilters })
+  }
+
+  function handleAdvancedFiltersChanged(filters: FilterSet) {
+    setAdvancedFilters(filters)
+    props.onFilter(filters)
   }
 
   function onSelectChange(name: 'element' | 'recency') {
@@ -66,81 +91,97 @@ const FilterBar = (props: Props) => {
   }
 
   return (
-    <div className={classes}>
-      {props.children}
-      <div className="Filters">
-        <Select
-          value={`${props.element}`}
-          open={elementOpen}
-          onOpenChange={() => onSelectChange('element')}
-          onValueChange={elementSelectChanged}
-          onClick={openElementSelect}
-        >
-          <SelectItem data-element="all" key={-1} value={-1}>
-            {t('elements.full.all')}
-          </SelectItem>
-          <SelectItem data-element="null" key={0} value={0}>
-            {t('elements.full.null')}
-          </SelectItem>
-          <SelectItem data-element="wind" key={1} value={1}>
-            {t('elements.full.wind')}
-          </SelectItem>
-          <SelectItem data-element="fire" key={2} value={2}>
-            {t('elements.full.fire')}
-          </SelectItem>
-          <SelectItem data-element="water" key={3} value={3}>
-            {t('elements.full.water')}
-          </SelectItem>
-          <SelectItem data-element="earth" key={4} value={4}>
-            {t('elements.full.earth')}
-          </SelectItem>
-          <SelectItem data-element="dark" key={5} value={5}>
-            {t('elements.full.dark')}
-          </SelectItem>
-          <SelectItem data-element="light" key={6} value={6}>
-            {t('elements.full.light')}
-          </SelectItem>
-        </Select>
+    <>
+      <div className={classes}>
+        {props.children}
+        <div className="Filters">
+          <Select
+            value={`${props.element}`}
+            open={elementOpen}
+            onOpenChange={() => onSelectChange('element')}
+            onValueChange={elementSelectChanged}
+            onClick={openElementSelect}
+          >
+            <SelectItem data-element="all" key={-1} value={-1}>
+              {t('elements.full.all')}
+            </SelectItem>
+            <SelectItem data-element="null" key={0} value={0}>
+              {t('elements.full.null')}
+            </SelectItem>
+            <SelectItem data-element="wind" key={1} value={1}>
+              {t('elements.full.wind')}
+            </SelectItem>
+            <SelectItem data-element="fire" key={2} value={2}>
+              {t('elements.full.fire')}
+            </SelectItem>
+            <SelectItem data-element="water" key={3} value={3}>
+              {t('elements.full.water')}
+            </SelectItem>
+            <SelectItem data-element="earth" key={4} value={4}>
+              {t('elements.full.earth')}
+            </SelectItem>
+            <SelectItem data-element="dark" key={5} value={5}>
+              {t('elements.full.dark')}
+            </SelectItem>
+            <SelectItem data-element="light" key={6} value={6}>
+              {t('elements.full.light')}
+            </SelectItem>
+          </Select>
 
-        <RaidDropdown
-          currentRaid={props.raidSlug}
-          defaultRaid="all"
-          showAllRaidsOption={true}
-          onChange={raidSelectChanged}
-        />
+          <RaidDropdown
+            currentRaid={props.raidSlug}
+            defaultRaid="all"
+            showAllRaidsOption={true}
+            onChange={raidSelectChanged}
+          />
 
-        <Select
-          value={`${props.recency}`}
-          trigger={'All time'}
-          open={recencyOpen}
-          onOpenChange={() => onSelectChange('recency')}
-          onValueChange={recencySelectChanged}
-          onClick={openRecencySelect}
-        >
-          <SelectItem key={-1} value={-1}>
-            {t('recency.all_time')}
-          </SelectItem>
-          <SelectItem key={86400} value={86400}>
-            {t('recency.last_day')}
-          </SelectItem>
-          <SelectItem key={604800} value={604800}>
-            {t('recency.last_week')}
-          </SelectItem>
-          <SelectItem key={2629746} value={2629746}>
-            {t('recency.last_month')}
-          </SelectItem>
-          <SelectItem key={7889238} value={7889238}>
-            {t('recency.last_3_months')}
-          </SelectItem>
-          <SelectItem key={15778476} value={15778476}>
-            {t('recency.last_6_months')}
-          </SelectItem>
-          <SelectItem key={31556952} value={31556952}>
-            {t('recency.last_year')}
-          </SelectItem>
-        </Select>
+          <Select
+            value={`${props.recency}`}
+            trigger={'All time'}
+            open={recencyOpen}
+            onOpenChange={() => onSelectChange('recency')}
+            onValueChange={recencySelectChanged}
+            onClick={openRecencySelect}
+          >
+            <SelectItem key={-1} value={-1}>
+              {t('recency.all_time')}
+            </SelectItem>
+            <SelectItem key={86400} value={86400}>
+              {t('recency.last_day')}
+            </SelectItem>
+            <SelectItem key={604800} value={604800}>
+              {t('recency.last_week')}
+            </SelectItem>
+            <SelectItem key={2629746} value={2629746}>
+              {t('recency.last_month')}
+            </SelectItem>
+            <SelectItem key={7889238} value={7889238}>
+              {t('recency.last_3_months')}
+            </SelectItem>
+            <SelectItem key={15778476} value={15778476}>
+              {t('recency.last_6_months')}
+            </SelectItem>
+            <SelectItem key={31556952} value={31556952}>
+              {t('recency.last_year')}
+            </SelectItem>
+          </Select>
+
+          <Button
+            className={filterButtonClasses}
+            blended={true}
+            leftAccessoryIcon={<FilterIcon />}
+            onClick={() => setFilterModalOpen(true)}
+          />
+        </div>
       </div>
-    </div>
+      <FilterModal
+        defaultFilterSet={defaultFilterset}
+        filterSet={advancedFilters}
+        open={filterModalOpen}
+        onOpenChange={setFilterModalOpen}
+        sendAdvancedFilters={handleAdvancedFiltersChanged}
+      />
+    </>
   )
 }
 

components/FilterModal/index.scss

@@ -0,0 +1,15 @@
+.Dialog {
+  .Filter.DialogContent {
+    overflow: hidden;
+
+    .TableField .Right .SelectTrigger.Table {
+      width: $unit-20x;
+      min-width: auto;
+    }
+  }
+
+  .DialogFooter .Buttons .Button.Blended {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

components/FilterModal/index.tsx

@@ -0,0 +1,435 @@
+import React, { useEffect, useState } from 'react'
+import { getCookie, setCookie } from 'cookies-next'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'react-i18next'
+
+import {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogTitle,
+} from '~components/Dialog'
+import DialogContent from '~components/DialogContent'
+
+import Button from '~components/Button'
+import InputTableField from '~components/InputTableField'
+import SelectTableField from '~components/SelectTableField'
+import SliderTableField from '~components/SliderTableField'
+import SwitchTableField from '~components/SwitchTableField'
+import SelectItem from '~components/SelectItem'
+
+import type { DialogProps } from '@radix-ui/react-dialog'
+
+import CrossIcon from '~public/icons/Cross.svg'
+import './index.scss'
+
+interface Props extends DialogProps {
+  defaultFilterSet: FilterSet
+  filterSet: FilterSet
+  sendAdvancedFilters: (filters: FilterSet) => void
+}
+
+const MAX_CHARACTERS = 5
+const MAX_WEAPONS = 13
+const MAX_SUMMONS = 8
+
+const FilterModal = (props: Props) => {
+  // Set up router
+  const router = useRouter()
+  const locale = router.locale
+
+  // Set up translation
+  const { t } = useTranslation('common')
+
+  // Refs
+  const headerRef = React.createRef<HTMLDivElement>()
+  const footerRef = React.createRef<HTMLDivElement>()
+
+  // States
+  const [open, setOpen] = useState(false)
+  const [chargeAttackOpen, setChargeAttackOpen] = useState(false)
+  const [fullAutoOpen, setFullAutoOpen] = useState(false)
+  const [autoGuardOpen, setAutoGuardOpen] = useState(false)
+  const [filterSet, setFilterSet] = useState<FilterSet>({})
+
+  // Filter states
+  const [fullAuto, setFullAuto] = useState(props.defaultFilterSet.full_auto)
+  const [autoGuard, setAutoGuard] = useState(props.defaultFilterSet.auto_guard)
+  const [chargeAttack, setChargeAttack] = useState(
+    props.defaultFilterSet.charge_attack
+  )
+  const [minCharacterCount, setMinCharacterCount] = useState(
+    props.defaultFilterSet.characters_count
+  )
+  const [minWeaponCount, setMinWeaponCount] = useState(
+    props.defaultFilterSet.weapons_count
+  )
+  const [minSummonCount, setMinSummonCount] = useState(
+    props.defaultFilterSet.summons_count
+  )
+  const [maxButtonsCount, setMaxButtonsCount] = useState(
+    props.defaultFilterSet.button_count
+  )
+  const [maxTurnsCount, setMaxTurnsCount] = useState(
+    props.defaultFilterSet.turn_count
+  )
+  const [userQuality, setUserQuality] = useState(
+    props.defaultFilterSet.user_quality
+  )
+  const [nameQuality, setNameQuality] = useState(
+    props.defaultFilterSet.name_quality
+  )
+  const [originalOnly, setOriginalOnly] = useState(
+    props.defaultFilterSet.original
+  )
+
+  // Hooks
+  useEffect(() => {
+    if (props.open !== undefined) setOpen(props.open)
+  })
+
+  useEffect(() => {
+    setFilterSet(props.filterSet)
+  }, [props.filterSet])
+
+  useEffect(() => {
+    setFullAuto(filterSet.full_auto)
+    setAutoGuard(filterSet.auto_guard)
+    setChargeAttack(filterSet.charge_attack)
+
+    setMinCharacterCount(filterSet.characters_count)
+    setMinSummonCount(filterSet.summons_count)
+    setMinWeaponCount(filterSet.weapons_count)
+
+    setMaxButtonsCount(filterSet.button_count)
+    setMaxTurnsCount(filterSet.turn_count)
+
+    setNameQuality(filterSet.name_quality)
+    setUserQuality(filterSet.user_quality)
+    setOriginalOnly(filterSet.original)
+  }, [filterSet])
+
+  function openSelect(name: 'charge_attack' | 'full_auto' | 'auto_guard') {
+    setChargeAttackOpen(name === 'charge_attack' ? !chargeAttackOpen : false)
+    setFullAutoOpen(name === 'full_auto' ? !fullAutoOpen : false)
+    setAutoGuardOpen(name === 'auto_guard' ? !autoGuardOpen : false)
+  }
+
+  function saveFilters() {
+    const filters: FilterSet = {}
+    filters.full_auto = fullAuto
+    filters.auto_guard = autoGuard
+    filters.charge_attack = chargeAttack
+    filters.characters_count = minCharacterCount
+    filters.weapons_count = minWeaponCount
+    filters.summons_count = minSummonCount
+    filters.name_quality = nameQuality
+    filters.user_quality = userQuality
+    filters.original = originalOnly
+
+    if (maxButtonsCount) filters.button_count = maxButtonsCount
+    if (maxTurnsCount) filters.turn_count = maxTurnsCount
+
+    setCookie('filters', filters, { path: '/' })
+    props.sendAdvancedFilters(filters)
+    openChange()
+  }
+
+  function resetFilters() {
+    setFullAuto(props.defaultFilterSet.full_auto)
+    setAutoGuard(props.defaultFilterSet.auto_guard)
+    setChargeAttack(props.defaultFilterSet.charge_attack)
+    setMinCharacterCount(props.defaultFilterSet.characters_count)
+    setMinWeaponCount(props.defaultFilterSet.weapons_count)
+    setMinSummonCount(props.defaultFilterSet.summons_count)
+    setMaxButtonsCount(props.defaultFilterSet.button_count)
+    setMaxTurnsCount(props.defaultFilterSet.turn_count)
+    setUserQuality(props.defaultFilterSet.user_quality)
+    setNameQuality(props.defaultFilterSet.name_quality)
+    setOriginalOnly(props.defaultFilterSet.original)
+  }
+
+  function openChange() {
+    if (open) {
+      setOpen(false)
+      if (props.onOpenChange) props.onOpenChange(false)
+    } else {
+      setOpen(true)
+      if (props.onOpenChange) props.onOpenChange(true)
+    }
+  }
+
+  function onEscapeKeyDown(event: KeyboardEvent) {
+    event.preventDefault()
+    openChange()
+  }
+
+  function onOpenAutoFocus(event: Event) {
+    event.preventDefault()
+  }
+
+  // Value listeners
+  function handleChargeAttackValueChange(value: string) {
+    setChargeAttack(parseInt(value))
+  }
+
+  function handleFullAutoValueChange(value: string) {
+    const newValue = parseInt(value)
+    setFullAuto(newValue)
+    if (newValue === 0 || (newValue === -1 && autoGuard === 1))
+      setAutoGuard(newValue)
+  }
+
+  function handleAutoGuardValueChange(value: string) {
+    const newValue = parseInt(value)
+    setAutoGuard(newValue)
+    if (newValue === 1 || (newValue === -1 && fullAuto === 0))
+      setFullAuto(newValue)
+  }
+
+  function handleMinCharactersValueChange(value: number) {
+    setMinCharacterCount(value)
+  }
+
+  function handleMinSummonsValueChange(value: number) {
+    setMinSummonCount(value)
+  }
+
+  function handleMinWeaponsValueChange(value: number) {
+    setMinWeaponCount(value)
+  }
+
+  function handleMaxButtonsCountValueChange(value: number) {
+    setMaxButtonsCount(value)
+  }
+
+  function handleMaxTurnsCountValueChange(value: number) {
+    setMaxTurnsCount(value)
+  }
+
+  function handleNameQualityValueChange(value: boolean) {
+    setNameQuality(value)
+  }
+
+  function handleUserQualityValueChange(value: boolean) {
+    setUserQuality(value)
+  }
+
+  function handleOriginalOnlyValueChange(value: boolean) {
+    setOriginalOnly(value)
+  }
+
+  // Sliders
+  const minCharactersField = () => (
+    <SliderTableField
+      name="min_characters"
+      description={t('modals.filters.descriptions.min_characters')}
+      label={t('modals.filters.labels.min_characters')}
+      value={minCharacterCount}
+      min={0}
+      max={MAX_CHARACTERS}
+      step={1}
+      onValueChange={handleMinCharactersValueChange}
+    />
+  )
+
+  const minWeaponsField = () => (
+    <SliderTableField
+      name="min_weapons"
+      description={t('modals.filters.descriptions.min_weapons')}
+      label={t('modals.filters.labels.min_weapons')}
+      value={minWeaponCount}
+      min={0}
+      max={MAX_WEAPONS}
+      step={1}
+      onValueChange={handleMinWeaponsValueChange}
+    />
+  )
+
+  const minSummonsField = () => (
+    <SliderTableField
+      name="min_summons"
+      description={t('modals.filters.descriptions.min_summons')}
+      label={t('modals.filters.labels.min_summons')}
+      value={minSummonCount}
+      min={0}
+      max={MAX_SUMMONS}
+      step={1}
+      onValueChange={handleMinSummonsValueChange}
+    />
+  )
+
+  // Selects
+  const fullAutoField = () => (
+    <SelectTableField
+      name="full_auto"
+      label={t('modals.filters.labels.full_auto')}
+      open={fullAutoOpen}
+      value={`${fullAuto}`}
+      onOpenChange={() => openSelect('full_auto')}
+      onClose={() => setFullAutoOpen(false)}
+      onChange={handleFullAutoValueChange}
+    >
+      <SelectItem key="on-off" value="-1">
+        {t('modals.filters.options.on_and_off')}
+      </SelectItem>
+      <SelectItem key="on" value="1">
+        {t('modals.filters.options.on')}
+      </SelectItem>
+      <SelectItem key="off" value="0">
+        {t('modals.filters.options.off')}
+      </SelectItem>
+    </SelectTableField>
+  )
+
+  const autoGuardField = () => (
+    <SelectTableField
+      name="auto_guard"
+      label={t('modals.filters.labels.auto_guard')}
+      open={autoGuardOpen}
+      value={`${autoGuard}`}
+      onOpenChange={() => openSelect('auto_guard')}
+      onClose={() => setAutoGuardOpen(false)}
+      onChange={handleAutoGuardValueChange}
+    >
+      <SelectItem key="on-off" value="-1">
+        {t('modals.filters.options.on_and_off')}
+      </SelectItem>
+      <SelectItem key="on" value="1">
+        {t('modals.filters.options.on')}
+      </SelectItem>
+      <SelectItem key="off" value="0">
+        {t('modals.filters.options.off')}
+      </SelectItem>
+    </SelectTableField>
+  )
+
+  const chargeAttackField = () => (
+    <SelectTableField
+      name="charge_attack"
+      label={t('modals.filters.labels.charge_attack')}
+      open={chargeAttackOpen}
+      value={`${chargeAttack}`}
+      onOpenChange={() => openSelect('charge_attack')}
+      onClose={() => setChargeAttackOpen(false)}
+      onChange={handleChargeAttackValueChange}
+    >
+      <SelectItem key="on-off" value="-1">
+        {t('modals.filters.options.on_and_off')}
+      </SelectItem>
+      <SelectItem key="on" value="1">
+        {t('modals.filters.options.on')}
+      </SelectItem>
+      <SelectItem key="off" value="0">
+        {t('modals.filters.options.off')}
+      </SelectItem>
+    </SelectTableField>
+  )
+
+  // Switches
+  const nameQualityField = () => (
+    <SwitchTableField
+      name="name_quality"
+      label={t('modals.filters.labels.name_quality')}
+      value={nameQuality}
+      onValueChange={handleNameQualityValueChange}
+    />
+  )
+
+  const userQualityField = () => (
+    <SwitchTableField
+      name="user_quality"
+      label={t('modals.filters.labels.user_quality')}
+      value={userQuality}
+      onValueChange={handleUserQualityValueChange}
+    />
+  )
+
+  const originalOnlyField = () => (
+    <SwitchTableField
+      name="original_only"
+      label={t('modals.filters.labels.original_only')}
+      value={originalOnly}
+      onValueChange={handleOriginalOnlyValueChange}
+    />
+  )
+
+  // Inputs
+  const maxButtonsField = () => (
+    <InputTableField
+      name="min_characters"
+      description={t('modals.filters.descriptions.max_buttons')}
+      placeholder="0"
+      label={t('modals.filters.labels.max_buttons')}
+      value={maxButtonsCount}
+      onValueChange={handleMaxButtonsCountValueChange}
+    />
+  )
+
+  const maxTurnsField = () => (
+    <InputTableField
+      name="min_turns"
+      description={t('modals.filters.descriptions.max_turns')}
+      placeholder="0"
+      label={t('modals.filters.labels.max_turns')}
+      value={maxTurnsCount}
+      onValueChange={handleMaxTurnsCountValueChange}
+    />
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={openChange}>
+      <DialogTrigger asChild>{props.children}</DialogTrigger>
+      <DialogContent
+        className="Filter"
+        headerref={headerRef}
+        footerref={footerRef}
+        onEscapeKeyDown={onEscapeKeyDown}
+        onOpenAutoFocus={onOpenAutoFocus}
+      >
+        <div className="DialogHeader" ref={headerRef}>
+          <div className="DialogTop">
+            <DialogTitle className="DialogTitle">
+              {t('modals.filters.title')}
+            </DialogTitle>
+          </div>
+          <DialogClose className="DialogClose" asChild>
+            <span>
+              <CrossIcon />
+            </span>
+          </DialogClose>
+        </div>
+
+        <div className="Fields">
+          {chargeAttackField()}
+          {fullAutoField()}
+          {autoGuardField()}
+          {/* {maxButtonsField()} */}
+          {/* {maxTurnsField()} */}
+          {minCharactersField()}
+          {minSummonsField()}
+          {minWeaponsField()}
+          {nameQualityField()}
+          {userQualityField()}
+          {originalOnlyField()}
+        </div>
+        <div className="DialogFooter" ref={footerRef}>
+          <div className="Buttons Spaced">
+            <Button
+              blended={true}
+              text={t('modals.filters.buttons.clear')}
+              onClick={resetFilters}
+            />
+            <Button
+              contained={true}
+              text={t('modals.filters.buttons.confirm')}
+              onClick={saveFilters}
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default FilterModal

components/GridRep/index.scss

@@ -35,9 +35,9 @@
   }
 
   & > .Grid {
-    aspect-ratio: 2/1;
+    aspect-ratio: 2/0.95;
     display: grid;
-    grid-template-columns: 1fr 3fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
+    grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
     grid-gap: $unit; /* add a gap of 8px between grid items */
 
     .Weapon {
@@ -49,6 +49,7 @@
       aspect-ratio: 73/153;
       display: grid;
       grid-column: 1 / 2; /* spans one column */
+      max-height: 140px;
     }
 
     .GridWeapons {
@@ -62,6 +63,8 @@
         1fr
       ); /* create 3 rows, each taking up 1 fraction */
       gap: $unit;
+      // column-gap: $unit;
+      // row-gap: $unit-2x;
     }
 
     .Grid.Weapon {
@@ -136,9 +139,25 @@
     }
 
     .Properties {
+      .auto {
+        display: inline-flex;
+        gap: $unit-half;
+        flex-direction: row;
+        margin-left: $unit-half;
+      }
+
       .full_auto {
         color: var(--full-auto-label-text);
       }
+
+      .auto_guard {
+        width: 12px;
+        height: 12px;
+
+        svg {
+          fill: var(--full-auto-label-text);
+        }
+      }
     }
 
     .raid {

components/GridRep/index.tsx

@@ -12,7 +12,7 @@ import { formatTimeAgo } from '~utils/timeAgo'
 import Button from '~components/Button'
 
 import SaveIcon from '~public/icons/Save.svg'
-
+import ShieldIcon from '~public/icons/Shield.svg'
 import './index.scss'
 
 interface Props {
@@ -23,6 +23,7 @@ interface Props {
   grid: GridWeapon[]
   user?: User
   fullAuto: boolean
+  autoGuard: boolean
   favorited: boolean
   createdAt: Date
   displayUser?: boolean | false
@@ -62,14 +63,21 @@ const GridRep = (props: Props) => {
     const newWeapons = Array(numWeapons)
     const gridWeapons = Array(numWeapons)
 
+    let foundMainhand = false
     for (const [key, value] of Object.entries(props.grid)) {
-      if (value.position == -1) setMainhand(value.object)
-      else if (!value.mainhand && value.position != null) {
+      if (value.position == -1) {
+        setMainhand(value.object)
+        foundMainhand = true
+      } else if (!value.mainhand && value.position != null) {
         newWeapons[value.position] = value.object
         gridWeapons[value.position] = value
       }
     }
 
+    if (!foundMainhand) {
+      setMainhand(undefined)
+    }
+
     setWeapons(newWeapons)
     setGrid(gridWeapons)
   }, [props.grid])
@@ -164,6 +172,26 @@ const GridRep = (props: Props) => {
     </div>
   )
 
+  function fullAutoString() {
+    const fullAutoElement = (
+      <span className="full_auto">
+        {` · ${t('party.details.labels.full_auto')}`}
+      </span>
+    )
+
+    const autoGuardElement = (
+      <span className="auto_guard">
+        <ShieldIcon />
+      </span>
+    )
+
+    return (
+      <div className="auto">
+        {fullAutoElement}
+        {props.autoGuard ? autoGuardElement : ''}
+      </div>
+    )
+  }
   const details = (
     <div className="Details">
       <h2 className={titleClass}>{props.name ? props.name : t('no_title')}</h2>
@@ -172,13 +200,7 @@ const GridRep = (props: Props) => {
           <span className={raidClass}>
             {props.raid ? props.raid.name[locale] : t('no_raid')}
           </span>
-          {props.fullAuto ? (
-            <span className="full_auto">
-              {` · ${t('party.details.labels.full_auto')}`}
-            </span>
-          ) : (
-            ''
-          )}
+          {props.fullAuto ? fullAutoString() : ''}
         </div>
         <time className="last-updated" dateTime={props.createdAt.toISOString()}>
           {formatTimeAgo(props.createdAt, locale)}

components/InputTableField/index.scss

@@ -0,0 +1,4 @@
+.InputField.TableField .Input {
+  text-align: right;
+  width: $unit-8x;
+}

components/InputTableField/index.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+import Input from '~components/Input'
+import TableField from '~components/TableField'
+
+import './index.scss'
+
+interface Props {
+  name: string
+  label: string
+  description?: string
+  placeholder?: string
+  value?: number
+  className?: string
+  imageAlt?: string
+  imageClass?: string
+  imageSrc?: string[]
+  onValueChange: (value: number) => void
+}
+
+const InputTableField = (props: Props) => {
+  const [value, setValue] = useState(0)
+
+  useEffect(() => {
+    if (props.value) setValue(props.value)
+  }, [props.value])
+
+  useEffect(() => {
+    props.onValueChange(value)
+  }, [value])
+
+  function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValue(parseInt(event.currentTarget?.value))
+  }
+
+  return (
+    <TableField
+      name={props.name}
+      className="InputField"
+      imageAlt={props.imageAlt}
+      imageClass={props.imageClass}
+      imageSrc={props.imageSrc}
+      label={props.label}
+    >
+      <Input
+        className="Bound"
+        placeholder={props.placeholder}
+        type="number"
+        value={value ? `${value}` : ''}
+        step={1}
+        onChange={onInputChange}
+      />
+    </TableField>
+  )
+}
+
+export default InputTableField

components/PartyDetails/index.tsx

@@ -480,6 +480,7 @@ const PartyDetails = (props: Props) => {
           user={party.user}
           favorited={party.favorited}
           fullAuto={party.full_auto}
+          autoGuard={party.auto_guard}
           key={`party-${i}`}
           displayUser={true}
           onClick={goTo}
@@ -731,7 +732,7 @@ const PartyDetails = (props: Props) => {
             })}
           >
             {`${t('party.details.labels.auto_guard')} ${
-              fullAuto ? 'On' : 'Off'
+              autoGuard ? 'On' : 'Off'
             }`}
           </Token>
 

components/SelectTableField/index.scss

@@ -1,116 +0,0 @@
-.TableField {
-  align-items: center;
-  display: grid;
-  gap: $unit-2x;
-  grid-template-columns: 1fr auto;
-
-  @include breakpoint(phone) {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .Left {
-    display: flex;
-    flex-direction: row;
-    gap: $unit;
-    width: 100%;
-
-    .Info {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      justify-content: center;
-      gap: $unit-half;
-    }
-
-    .Image {
-      display: none;
-
-      .preview {
-        $diameter: $unit-5x;
-        width: $diameter;
-        height: $diameter;
-
-        img {
-          width: $diameter;
-          height: $diameter;
-        }
-      }
-
-      @include breakpoint(phone) {
-        display: block;
-      }
-    }
-
-    label {
-      color: var(--text-tertiary);
-      font-size: $font-regular;
-    }
-
-    p {
-      color: var(--text-secondary);
-      font-size: $font-small;
-      line-height: 1.1;
-      max-width: 300px;
-
-      &.jp {
-        max-width: 270px;
-      }
-    }
-  }
-
-  .Right {
-    display: flex;
-    flex-direction: row;
-    gap: $unit-2x;
-    width: 100%;
-
-    @include breakpoint(phone) {
-      .Image {
-        display: none;
-      }
-    }
-
-    .SelectTrigger {
-      width: 100%;
-    }
-  }
-
-  .preview {
-    $diameter: $unit * 6;
-    background-color: $grey-90;
-    border-radius: 999px;
-    height: $diameter;
-    width: $diameter;
-
-    img {
-      height: $diameter;
-      width: $diameter;
-    }
-
-    &.fire {
-      background: $fire-bg-20;
-    }
-
-    &.water {
-      background: $water-bg-20;
-    }
-
-    &.wind {
-      background: $wind-bg-20;
-    }
-
-    &.earth {
-      background: $earth-bg-20;
-    }
-
-    &.dark {
-      background: $dark-bg-10;
-    }
-
-    &.light {
-      background: $light-bg-20;
-    }
-  }
-}

components/SelectTableField/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
 import Select from '~components/Select'
+import TableField from '~components/TableField'
 
 import './index.scss'
 
@@ -27,46 +28,27 @@ const SelectTableField = (props: Props) => {
     if (props.value) setValue(props.value)
   }, [props.value])
 
-  const image = () => {
-    return props.imageSrc && props.imageSrc.length > 0 ? (
-      <div className={`preview ${props.imageClass}`}>
-        <img
-          alt={props.imageAlt}
-          srcSet={props.imageSrc.join(', ')}
-          src={props.imageSrc[0]}
-        />
-      </div>
-    ) : (
-      ''
-    )
-  }
-
   return (
-    <div className={classNames({ TableField: true }, props.className)}>
-      <div className="Left">
-        <div className="Info">
-          <h3>{props.label}</h3>
-          <p>{props.description}</p>
-        </div>
-        <div className="Image">{image()}</div>
-      </div>
-
-      <div className="Right">
-        <div className="Image">{image()}</div>
-        <Select
-          name={props.name}
-          open={props.open}
-          onOpenChange={props.onOpenChange}
-          onValueChange={props.onChange}
-          onClose={props.onClose}
-          triggerClass={classNames({ Bound: true, Table: true })}
-          value={value}
-          overlayVisible={false}
-        >
-          {props.children}
-        </Select>
-      </div>
-    </div>
+    <TableField
+      name={props.name}
+      imageAlt={props.imageAlt}
+      imageClass={props.imageClass}
+      imageSrc={props.imageSrc}
+      label={props.label}
+    >
+      <Select
+        name={props.name}
+        open={props.open}
+        onOpenChange={props.onOpenChange}
+        onValueChange={props.onChange}
+        onClose={props.onClose}
+        triggerClass={classNames({ Bound: true, Table: true })}
+        value={value}
+        overlayVisible={false}
+      >
+        {props.children}
+      </Select>
+    </TableField>
   )
 }
 

components/Slider/index.scss

@@ -0,0 +1,48 @@
+.Slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: $unit-20x;
+  height: 20px;
+
+  .SliderTrack {
+    background-color: var(--button-bg);
+    position: relative;
+    flex-grow: 1;
+    border-radius: 9999px;
+    height: 3px;
+  }
+}
+
+.SliderRange {
+  position: absolute;
+  background-color: var(--accent-blue);
+  border-radius: 9999px;
+  height: 100%;
+}
+
+.SliderThumb {
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-color: var(--slider-thumb-bg);
+  box-shadow: 0 2px 10px var(--slider-thumb-shadow);
+  border-radius: 10px;
+
+  &:hover {
+    background-color: var(--slider-thumb-bg-hover);
+    box-shadow: 0 2px 10px var(--slider-thumb-shadow-hover);
+    cursor: grab;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 5px rgba($accent--blue--light, 0.6);
+  }
+}

components/Slider/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import type { SliderProps } from '@radix-ui/react-slider'
+import classNames from 'classnames'
+
+import './index.scss'
+
+interface Props {}
+
+const Slider = React.forwardRef<HTMLDivElement, Props & SliderProps>(
+  (props, forwardedRef) => {
+    const value = props.value || props.defaultValue
+
+    return (
+      <SliderPrimitive.Slider
+        {...props}
+        className={classNames({ Slider: true }, props.className)}
+        ref={forwardedRef}
+      >
+        <SliderPrimitive.Track className="SliderTrack">
+          <SliderPrimitive.Range className="SliderRange" />
+        </SliderPrimitive.Track>
+
+        <SliderPrimitive.Thumb className="SliderThumb" />
+      </SliderPrimitive.Slider>
+    )
+  }
+)
+
+Slider.displayName = 'Slider'
+
+export default Slider

components/SliderTableField/index.scss

@@ -0,0 +1,8 @@
+.SliderField.TableField {
+  min-height: $unit-4x;
+
+  .Input {
+    text-align: right;
+    width: $unit-8x;
+  }
+}

components/SliderTableField/index.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+import Input from '~components/Input'
+import Slider from '~components/Slider'
+import TableField from '~components/TableField'
+
+import './index.scss'
+
+interface Props {
+  name: string
+  label: string
+  description?: string
+  value?: number
+  className?: string
+  imageAlt?: string
+  imageClass?: string
+  imageSrc?: string[]
+  min: number
+  max: number
+  step: number
+  onValueChange: (value: number) => void
+}
+
+const SliderTableField = (props: Props) => {
+  const [value, setValue] = useState(props.value)
+
+  useEffect(() => {
+    if (props.value !== undefined && props.value !== value)
+      setValue(props.value)
+  }, [props.value])
+
+  useEffect(() => {
+    if (value !== undefined && value !== props.value) props.onValueChange(value)
+  }, [value])
+
+  function handleValueCommit(value: number[]) {
+    setValue(value[0])
+  }
+
+  function handleValueChange(value: number[]) {
+    setValue(value[0])
+  }
+
+  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValue(parseInt(event.currentTarget?.value))
+  }
+
+  return (
+    <TableField
+      name={props.name}
+      className="SliderField"
+      imageAlt={props.imageAlt}
+      imageClass={props.imageClass}
+      imageSrc={props.imageSrc}
+      label={props.label}
+    >
+      <Slider
+        name={props.name}
+        min={props.min}
+        max={props.max}
+        step={props.step}
+        value={[value ? value : 0]}
+        onValueChange={handleValueChange}
+        onValueCommit={handleValueCommit}
+      />
+      <Input
+        className="Bound"
+        type="number"
+        value={`${value}`}
+        min={props.min}
+        max={props.max}
+        step={props.step}
+        onChange={handleInputChange}
+      />
+    </TableField>
+  )
+}
+
+export default SliderTableField

components/Switch/index.scss

@@ -9,12 +9,14 @@
   width: 58px;
   height: $height;
 
-  &:focus {
-    box-shadow: 0 0 0 2px $grey-15;
+  &:focus,
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--accent-blue-focus);
+    outline: none;
   }
 
   &[data-state='checked'] {
-    background: $grey-15;
+    background: var(--accent-blue);
   }
 
   &:disabled {

components/SwitchTableField/index.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react'
+import Switch from '~components/Switch'
+import TableField from '~components/TableField'
+
+import './index.scss'
+
+interface Props {
+  name: string
+  label: string
+  description?: string
+  value?: boolean
+  className?: string
+  imageAlt?: string
+  imageClass?: string
+  imageSrc?: string[]
+  onValueChange: (value: boolean) => void
+}
+
+const SwitchTableField = (props: Props) => {
+  const [value, setValue] = useState(props.value)
+
+  useEffect(() => {
+    if (value !== props.value) setValue(props.value)
+  }, [props.value])
+
+  useEffect(() => {
+    if (value !== undefined) props.onValueChange(value)
+  }, [value])
+
+  function onValueChange(value: boolean) {
+    setValue(value)
+  }
+
+  return (
+    <TableField
+      name={props.name}
+      className="SwitchField"
+      imageAlt={props.imageAlt}
+      imageClass={props.imageClass}
+      imageSrc={props.imageSrc}
+      label={props.label}
+    >
+      <Switch
+        name={props.name}
+        checked={value}
+        onCheckedChange={onValueChange}
+      />
+    </TableField>
+  )
+}
+
+export default SwitchTableField

components/TableField/index.scss

@@ -0,0 +1,124 @@
+.TableField {
+  align-items: center;
+  display: grid;
+  gap: $unit-2x;
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+  padding: $unit-half 0;
+  width: 100%;
+
+  @include breakpoint(phone) {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &:hover .Left .Info h3 {
+    color: var(--accent-blue);
+  }
+
+  .Left {
+    display: flex;
+    flex-direction: row;
+    gap: $unit;
+    width: 100%;
+
+    .Info {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: center;
+      gap: $unit-half;
+    }
+
+    .Image {
+      display: none;
+
+      .preview {
+        $diameter: $unit-5x;
+        width: $diameter;
+        height: $diameter;
+
+        img {
+          width: $diameter;
+          height: $diameter;
+        }
+      }
+
+      @include breakpoint(phone) {
+        display: block;
+      }
+    }
+
+    label {
+      color: var(--text-tertiary);
+      font-size: $font-regular;
+    }
+
+    p {
+      color: var(--text-secondary);
+      font-size: $font-small;
+      line-height: 1.1;
+      max-width: 300px;
+
+      &.jp {
+        max-width: 270px;
+      }
+    }
+  }
+
+  .Right {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $unit-2x;
+    width: 100%;
+
+    @include breakpoint(phone) {
+      .Image {
+        display: none;
+      }
+    }
+
+    .SelectTrigger {
+      width: 100%;
+    }
+  }
+
+  .preview {
+    $diameter: $unit * 6;
+    background-color: $grey-90;
+    border-radius: 999px;
+    height: $diameter;
+    width: $diameter;
+
+    img {
+      height: $diameter;
+      width: $diameter;
+    }
+
+    &.fire {
+      background: $fire-bg-20;
+    }
+
+    &.water {
+      background: $water-bg-20;
+    }
+
+    &.wind {
+      background: $wind-bg-20;
+    }
+
+    &.earth {
+      background: $earth-bg-20;
+    }
+
+    &.dark {
+      background: $dark-bg-10;
+    }
+
+    &.light {
+      background: $light-bg-20;
+    }
+  }
+}

components/TableField/index.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import './index.scss'
+
+interface Props {
+  name: string
+  label: string
+  description?: string
+  className?: string
+  imageAlt?: string
+  imageClass?: string
+  imageSrc?: string[]
+  children: React.ReactNode
+}
+
+const TableField = (props: Props) => {
+  const image = () => {
+    return props.imageSrc && props.imageSrc.length > 0 ? (
+      <div className={`preview ${props.imageClass}`}>
+        <img
+          alt={props.imageAlt}
+          srcSet={props.imageSrc.join(', ')}
+          src={props.imageSrc[0]}
+        />
+      </div>
+    ) : (
+      ''
+    )
+  }
+
+  return (
+    <div className={classNames({ TableField: true }, props.className)}>
+      <div className="Left">
+        <div className="Info">
+          <h3>{props.label}</h3>
+          <p>{props.description}</p>
+        </div>
+        <div className="Image">{image()}</div>
+      </div>
+
+      <div className="Right">
+        <div className="Image">{image()}</div>
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default TableField

package-lock.json

@@ -13,6 +13,7 @@
         "@radix-ui/react-popover": "^1.0.3",
         "@radix-ui/react-radio-group": "^1.1.1",
         "@radix-ui/react-select": "^1.1.2",
+        "@radix-ui/react-slider": "^1.1.1",
         "@radix-ui/react-switch": "^1.0.1",
         "@radix-ui/react-toast": "^1.1.2",
         "@radix-ui/react-toggle-group": "^1.0.1",
@@ -22,6 +23,7 @@
         "classnames": "^2.3.1",
         "cookies-next": "^2.1.1",
         "date-fns": "^2.29.3",
+        "fast-deep-equal": "^3.1.3",
         "fix-date": "^1.1.6",
         "i18next": "^21.6.13",
         "i18next-browser-languagedetector": "^6.1.3",
@@ -2538,6 +2540,58 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.1.tgz",
+      "integrity": "sha512-0aswLpUKZIraPEOcXfwW25N1KPfLA6Mvm1TxogUChGsbLbys2ihd7uk9XAKsol9ZQPucxh2/mybwdRtAKrs/MQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.0",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-collection": "1.0.2",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-previous": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.2.tgz",
+      "integrity": "sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
@@ -4750,8 +4804,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.2.12",
@@ -9155,6 +9208,48 @@
         "react-remove-scroll": "2.5.5"
       }
     },
+    "@radix-ui/react-slider": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.1.tgz",
+      "integrity": "sha512-0aswLpUKZIraPEOcXfwW25N1KPfLA6Mvm1TxogUChGsbLbys2ihd7uk9XAKsol9ZQPucxh2/mybwdRtAKrs/MQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.0",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-collection": "1.0.2",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-previous": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-collection": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.2.tgz",
+          "integrity": "sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.2",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+          "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/react-slot": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
@@ -10745,8 +10840,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "3.2.12",

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-popover": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-select": "^1.1.2",
+    "@radix-ui/react-slider": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.0.1",
@@ -27,6 +28,7 @@
     "classnames": "^2.3.1",
     "cookies-next": "^2.1.1",
     "date-fns": "^2.29.3",
+    "fast-deep-equal": "^3.1.3",
     "fix-date": "^1.1.6",
     "i18next": "^21.6.13",
     "i18next-browser-languagedetector": "^6.1.3",

pages/[username].tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
+import { getCookie } from 'cookies-next'
 import { queryTypes, useQueryState } from 'next-usequerystate'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -12,6 +13,7 @@ import organizeRaids from '~utils/organizeRaids'
 import { setHeaders } from '~utils/userToken'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { appState } from '~utils/appState'
+import { defaultFilterset } from '~utils/defaultFilters'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
 
@@ -82,6 +84,8 @@ const ProfileRoute: React.FC<Props> = ({
     parse: (query: string) => parseInt(query),
     serialize: (value) => `${value}`,
   })
+  const [advancedFilters, setAdvancedFilters] =
+    useState<FilterSet>(defaultFilterset)
 
   // Define transformers for element
   function parseElement(query: string) {
@@ -120,6 +124,16 @@ const ProfileRoute: React.FC<Props> = ({
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
+  // Fetch the user's advanced filters
+  useEffect(() => {
+    const filtersCookie = getCookie('filters')
+    const filters = filtersCookie
+      ? JSON.parse(filtersCookie as string)
+      : defaultFilterset
+
+    setAdvancedFilters(filters)
+  }, [])
+
   // Handle errors
   const handleError = useCallback((error: any) => {
     if (error.response != null) {
@@ -138,6 +152,7 @@ const ProfileRoute: React.FC<Props> = ({
           raid: raid ? raid.id : undefined,
           recency: recency != -1 ? recency : undefined,
           page: currentPage,
+          ...advancedFilters,
         },
       }
 
@@ -160,7 +175,7 @@ const ProfileRoute: React.FC<Props> = ({
           .catch((error) => handleError(error))
       }
     },
-    [currentPage, username, parties, element, raid, recency]
+    [currentPage, username, parties, element, raid, recency, advancedFilters]
   )
 
   function replaceResults(count: number, list: Party[]) {
@@ -194,7 +209,7 @@ const ProfileRoute: React.FC<Props> = ({
   useDidMountEffect(() => {
     setCurrentPage(1)
     fetchProfile({ replace: true })
-  }, [username, element, raid, recency])
+  }, [username, element, raid, recency, advancedFilters])
 
   // When the page changes, fetch all teams again.
   useDidMountEffect(() => {
@@ -204,25 +219,23 @@ const ProfileRoute: React.FC<Props> = ({
   }, [currentPage])
 
   // Receive filters from the filter bar
-  function receiveFilters({
-    element,
-    raidSlug,
-    recency,
-  }: {
-    element?: number
-    raidSlug?: string
-    recency?: number
-  }) {
-    if (element == 0) setElement(0, { shallow: true })
-    else if (element) setElement(element, { shallow: true })
+  function receiveFilters(filters: FilterSet) {
+    if (filters.element == 0) setElement(0, { shallow: true })
+    else if (filters.element) setElement(filters.element, { shallow: true })
 
-    if (raids && raidSlug) {
-      const raid = raids.find((raid) => raid.slug === raidSlug)
+    if (raids && filters.raidSlug) {
+      const raid = raids.find((raid) => raid.slug === filters.raidSlug)
       setRaid(raid)
-      setRaidSlug(raidSlug, { shallow: true })
+      setRaidSlug(filters.raidSlug, { shallow: true })
     }
 
-    if (recency) setRecency(recency, { shallow: true })
+    if (filters.recency) setRecency(filters.recency, { shallow: true })
+
+    delete filters.element
+    delete filters.raidSlug
+    delete filters.recency
+
+    setAdvancedFilters(filters)
   }
 
   // Methods: Navigation
@@ -259,6 +272,7 @@ const ProfileRoute: React.FC<Props> = ({
           grid={party.weapons}
           favorited={party.favorited}
           fullAuto={party.full_auto}
+          autoGuard={party.auto_guard}
           key={`party-${i}`}
           onClick={goTo}
         />
@@ -334,6 +348,12 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Fetch latest version
   const version = await fetchLatestVersion()
 
+  // Fetch user's advanced filters
+  const filtersCookie = getCookie('filters', { req: req, res: res })
+  const advancedFilters = filtersCookie
+    ? JSON.parse(filtersCookie as string)
+    : undefined
+
   try {
     // Fetch and organize raids
     let { raids, sortedRaids } = await api.endpoints.raids
@@ -343,7 +363,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     // Create filter object
     const filters: FilterObject = extractFilters(query, raids)
     const params = {
-      params: { ...filters },
+      params: { ...filters, ...advancedFilters },
     }
 
     // Set up empty variables

pages/saved.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
+import { getCookie } from 'cookies-next'
 import { queryTypes, useQueryState } from 'next-usequerystate'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -13,6 +14,7 @@ import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { appState } from '~utils/appState'
+import { defaultFilterset } from '~utils/defaultFilters'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
 
@@ -82,6 +84,8 @@ const SavedRoute: React.FC<Props> = ({
     parse: (query: string) => parseInt(query),
     serialize: (value) => `${value}`,
   })
+  const [advancedFilters, setAdvancedFilters] =
+    useState<FilterSet>(defaultFilterset)
 
   // Define transformers for element
   function parseElement(query: string) {
@@ -120,6 +124,16 @@ const SavedRoute: React.FC<Props> = ({
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
+  // Fetch the user's advanced filters
+  useEffect(() => {
+    const filtersCookie = getCookie('filters')
+    const filters = filtersCookie
+      ? JSON.parse(filtersCookie as string)
+      : defaultFilterset
+
+    setAdvancedFilters(filters)
+  }, [])
+
   // Handle errors
   const handleError = useCallback((error: any) => {
     if (error.response != null) {
@@ -138,6 +152,7 @@ const SavedRoute: React.FC<Props> = ({
         raid: raid ? raid.id : undefined,
         recency: recency !== -1 ? recency : undefined,
         page: currentPage,
+        ...advancedFilters,
       }
 
       Object.keys(filters).forEach(
@@ -164,7 +179,7 @@ const SavedRoute: React.FC<Props> = ({
         })
         .catch((error) => handleError(error))
     },
-    [currentPage, parties, element, raid, recency]
+    [currentPage, parties, element, raid, recency, advancedFilters]
   )
 
   function replaceResults(count: number, list: Party[]) {
@@ -198,7 +213,7 @@ const SavedRoute: React.FC<Props> = ({
   useDidMountEffect(() => {
     setCurrentPage(1)
     fetchTeams({ replace: true })
-  }, [element, raid, recency])
+  }, [element, raid, recency, advancedFilters])
 
   // When the page changes, fetch all teams again.
   useDidMountEffect(() => {
@@ -208,25 +223,23 @@ const SavedRoute: React.FC<Props> = ({
   }, [currentPage])
 
   // Receive filters from the filter bar
-  function receiveFilters({
-    element,
-    raidSlug,
-    recency,
-  }: {
-    element?: number
-    raidSlug?: string
-    recency?: number
-  }) {
-    if (element == 0) setElement(0, { shallow: true })
-    else if (element) setElement(element, { shallow: true })
+  function receiveFilters(filters: FilterSet) {
+    if (filters.element == 0) setElement(0, { shallow: true })
+    else if (filters.element) setElement(filters.element, { shallow: true })
 
-    if (raids && raidSlug) {
-      const raid = raids.find((raid) => raid.slug === raidSlug)
+    if (raids && filters.raidSlug) {
+      const raid = raids.find((raid) => raid.slug === filters.raidSlug)
       setRaid(raid)
-      setRaidSlug(raidSlug, { shallow: true })
+      setRaidSlug(filters.raidSlug, { shallow: true })
     }
 
-    if (recency) setRecency(recency, { shallow: true })
+    if (filters.recency) setRecency(filters.recency, { shallow: true })
+
+    delete filters.element
+    delete filters.raidSlug
+    delete filters.recency
+
+    setAdvancedFilters(filters)
   }
 
   // Methods: Favorites
@@ -300,6 +313,7 @@ const SavedRoute: React.FC<Props> = ({
           user={party.user}
           favorited={party.favorited}
           fullAuto={party.full_auto}
+          autoGuard={party.auto_guard}
           key={`party-${i}`}
           displayUser={true}
           onClick={goTo}
@@ -368,6 +382,12 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Fetch latest version
   const version = await fetchLatestVersion()
 
+  // Fetch user's advanced filters
+  const filtersCookie = getCookie('filters', { req: req, res: res })
+  const advancedFilters = filtersCookie
+    ? JSON.parse(filtersCookie as string)
+    : undefined
+
   try {
     // Fetch and organize raids
     let { raids, sortedRaids } = await api.endpoints.raids
@@ -377,7 +397,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     // Create filter object
     const filters: FilterObject = extractFilters(query, raids)
     const params = {
-      params: { ...filters },
+      params: { ...filters, ...advancedFilters  },
     }
 
     // Set up empty variables

pages/teams.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
+import { getCookie } from 'cookies-next'
 import { queryTypes, useQueryState } from 'next-usequerystate'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -13,6 +14,7 @@ import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { appState } from '~utils/appState'
+import { defaultFilterset } from '~utils/defaultFilters'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
 
@@ -82,6 +84,8 @@ const TeamsRoute: React.FC<Props> = ({
     parse: (query: string) => parseInt(query),
     serialize: (value) => `${value}`,
   })
+  const [advancedFilters, setAdvancedFilters] =
+    useState<FilterSet>(defaultFilterset)
 
   // Define transformers for element
   function parseElement(query: string) {
@@ -120,6 +124,16 @@ const TeamsRoute: React.FC<Props> = ({
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
+  // Fetch the user's advanced filters
+  useEffect(() => {
+    const filtersCookie = getCookie('filters')
+    const filters = filtersCookie
+      ? JSON.parse(filtersCookie as string)
+      : defaultFilterset
+
+    setAdvancedFilters(filters)
+  }, [])
+
   // Handle errors
   const handleError = useCallback((error: any) => {
     if (error.response != null) {
@@ -138,6 +152,7 @@ const TeamsRoute: React.FC<Props> = ({
         raid: raid ? raid.id : undefined,
         recency: recency !== -1 ? recency : undefined,
         page: currentPage,
+        ...advancedFilters,
       }
 
       Object.keys(filters).forEach(
@@ -164,7 +179,7 @@ const TeamsRoute: React.FC<Props> = ({
         })
         .catch((error) => handleError(error))
     },
-    [currentPage, parties, element, raid, recency]
+    [currentPage, parties, element, raid, recency, advancedFilters]
   )
 
   function replaceResults(count: number, list: Party[]) {
@@ -198,7 +213,7 @@ const TeamsRoute: React.FC<Props> = ({
   useDidMountEffect(() => {
     setCurrentPage(1)
     fetchTeams({ replace: true })
-  }, [element, raid, recency])
+  }, [element, raid, recency, advancedFilters])
 
   // When the page changes, fetch all teams again.
   useDidMountEffect(() => {
@@ -208,25 +223,23 @@ const TeamsRoute: React.FC<Props> = ({
   }, [currentPage])
 
   // Receive filters from the filter bar
-  function receiveFilters({
-    element,
-    raidSlug,
-    recency,
-  }: {
-    element?: number
-    raidSlug?: string
-    recency?: number
-  }) {
-    if (element == 0) setElement(0, { shallow: true })
-    else if (element) setElement(element, { shallow: true })
+  function receiveFilters(filters: FilterSet) {
+    if (filters.element == 0) setElement(0, { shallow: true })
+    else if (filters.element) setElement(filters.element, { shallow: true })
 
-    if (raids && raidSlug) {
-      const raid = raids.find((raid) => raid.slug === raidSlug)
+    if (raids && filters.raidSlug) {
+      const raid = raids.find((raid) => raid.slug === filters.raidSlug)
       setRaid(raid)
-      setRaidSlug(raidSlug, { shallow: true })
+      setRaidSlug(filters.raidSlug, { shallow: true })
     }
 
-    if (recency) setRecency(recency, { shallow: true })
+    if (filters.recency) setRecency(filters.recency, { shallow: true })
+
+    delete filters.element
+    delete filters.raidSlug
+    delete filters.recency
+
+    setAdvancedFilters(filters)
   }
 
   // Methods: Favorites
@@ -300,6 +313,7 @@ const TeamsRoute: React.FC<Props> = ({
           user={party.user}
           favorited={party.favorited}
           fullAuto={party.full_auto}
+          autoGuard={party.auto_guard}
           key={`party-${i}`}
           displayUser={true}
           onClick={goTo}
@@ -367,6 +381,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
 
   // Fetch latest version
   const version = await fetchLatestVersion()
+
+  // Fetch user's advanced filters
+  const filtersCookie = getCookie('filters', { req: req, res: res })
+  const advancedFilters = filtersCookie ? JSON.parse(filtersCookie as string) : undefined
   
   try {
     // Fetch and organize raids
@@ -377,7 +395,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     // Create filter object
     const filters: FilterObject = extractFilters(query, raids)
     const params = {
-      params: { ...filters },
+      params: { ...filters, ...advancedFilters },
     }
 
     // Set up empty variables

public/icons/Filter.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 1.5H12C12.2761 1.5 12.5 1.72386 12.5 2V3.46482C12.5 3.63199 12.4164 3.78811 12.2774 3.88084L12.5547 4.29687L12.2773 3.88084L8.66795 6.28711C8.25065 6.56531 8 7.03365 8 7.53518V10.4648C8 10.632 7.91645 10.7881 7.77735 10.8808L6 12.0657V7.53518C6 7.03365 5.74935 6.56531 5.33205 6.28711L1.72265 3.88084C1.58355 3.78811 1.5 3.63199 1.5 3.46482V2C1.5 1.72386 1.72386 1.5 2 1.5Z" />
+</svg>

public/icons/Shield.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M23.2485 18.9009L23.2738 18.8461L23.2969 18.7903C25.0719 14.5024 25.7609 9.66488 25.9448 6.46207C26.0895 3.94417 24.3044 1.84216 21.9579 1.40085C15.9228 0.265829 11.8484 0.285157 6.02633 1.39844C3.68545 1.84606 1.90969 3.9468 2.05687 6.45935C2.23934 9.57444 2.91185 14.4595 4.70282 18.7895C5.52785 20.7841 6.67748 22.8599 8.06609 24.4951C9.34592 26.0023 11.3727 27.7692 14 27.7692C16.7045 27.7692 18.7211 25.8684 19.9427 24.385C21.2895 22.7497 22.4117 20.7123 23.2485 18.9009Z" />
 </svg>

public/locales/en/common.json

@@ -207,6 +207,31 @@
         "cancel": "Nevermind"
       }
     },
+    "filters": {
+      "title": "Advanced filters",
+      "labels": {
+        "charge_attack": "Charge Attack",
+        "full_auto": "Full Auto",
+        "auto_guard": "Auto Guard",
+        "max_buttons": "Maximum number of button presses",
+        "max_turns": "Maximum number of turns",
+        "min_characters": "Minimum number of characters",
+        "min_summons": "Minimum number of summons",
+        "min_weapons": "Minimum number of weapons",
+        "name_quality": "Hide untitled teams",
+        "user_quality": "Hide anonymous users",
+        "original_only": "Hide remixed teams"
+      },
+      "options": {
+        "on": "On",
+        "off": "Off",
+        "on_and_off": "On and Off"
+      },
+      "buttons": {
+        "confirm": "Save filters",
+        "clear": "Clear filters"
+      }
+    },
     "login": {
       "title": "Log in",
       "buttons": {

public/locales/ja/common.json

@@ -207,6 +207,31 @@
         "cancel": "キャンセル"
       }
     },
+    "filters": {
+      "title": "フィルター設定",
+      "labels": {
+        "charge_attack": "奥義",
+        "full_auto": "フルオート",
+        "auto_guard": "オートガード",
+        "max_buttons": "最大ポチ数",
+        "max_turns": "最大ターン数",
+        "min_characters": "最小キャラクター数",
+        "min_summons": "最小召喚石数",
+        "min_weapons": "最小武器数",
+        "name_quality": "無題の編成なし",
+        "user_quality": "無名のユーザーなし",
+        "original_only": "リミックスなし"
+      },
+      "options": {
+        "on": "ON",
+        "off": "OFF",
+        "on_and_off": "両方"
+      },
+      "buttons": {
+        "confirm": "フィルターを保存する",
+        "clear": "保存したフィルターをクリア"
+      }
+    },
     "login": {
       "title": "ログイン",
       "buttons": {

styles/themes.scss

@@ -21,6 +21,8 @@
   --separator-bg: #{$separator--bg--light};
 
   --accent-blue: #{$accent--blue--light};
+  --accent-blue-focus: #{$accent--blue--light--focus};
+
   --accent-yellow: #{$accent--yellow--light};
 
   --selected-item-bg: #{$selected--item--bg--light};
@@ -64,6 +66,12 @@
   --select-separator: #{$select--separator--light};
   --option-bg-hover: #{$option--bg--light--hover};
 
+  // Light - Sliders
+  --slider-thumb-bg: #{$slider--thumb--bg--light};
+  --slider-thumb-bg-hover: #{$slider--thumb--bg--light--hover};
+  --slider-thumb-shadow: #{$slider--thumb--shadow--light};
+  --slider-thumb-shadow-hover: #{$slider--thumb--shadow--light--hover};
+
   // Light - About
   --link-item-bg: #{$link--item--bg--light};
   --link-item-image-color: #{$link--item--bg--image--light};
@@ -163,6 +171,8 @@
   --separator-bg: #{$separator--bg--dark};
 
   --accent-blue: #{$accent--blue--dark};
+  --accent-blue-focus: #{$accent--blue--dark--focus};
+
   --accent-yellow: #{$accent--yellow--dark};
 
   --selected-item-bg: #{$selected--item--bg--dark};
@@ -207,6 +217,12 @@
   --select-separator: #{$select--separator--dark};
   --option-bg-hover: #{$option--bg--dark--hover};
 
+  // Dark - Sliders
+  --slider-thumb-bg: #{$slider--thumb--bg--dark};
+  --slider-thumb-bg-hover: #{$slider--thumb--bg--dark--hover};
+  --slider-thumb-shadow: #{$slider--thumb--shadow--dark};
+  --slider-thumb-shadow-hover: #{$slider--thumb--shadow--dark--hover};
+
   // Dark - About
   --link-item-bg: #{$link--item--bg--dark};
   --link-item-image-color: #{$link--item--bg--image--dark};

styles/variables.scss

@@ -80,7 +80,9 @@ $yellow: #c89d39;
 $error: #d13a3a;
 
 $accent--blue--light: #275dc5;
+$accent--blue--light--focus: #0c398d;
 $accent--blue--dark: #6195f4;
+$accent--blue--dark--focus: #275dc5;
 
 $accent--yellow--light: #c89d39;
 $accent--yellow--dark: #f9cc64;
@@ -224,6 +226,17 @@ $grid--rep--hover--dark: $grey-10;
 $grid--border--color--light: $grey-80;
 $grid--border--color--dark: $grey-40;
 
+// Color Definitions: Slider
+$slider--thumb--bg--light: $grey-100;
+$slider--thumb--bg--dark: $grey-100;
+$slider--thumb--bg--light--hover: $grey-95;
+$slider--thumb--bg--dark--hover: $grey-95;
+$slider--thumb--shadow--light: $grey-70;
+$slider--thumb--shadow--dark: $grey-05;
+$slider--thumb--shadow--light--hover: $grey-50;
+$slider--thumb--shadow--dark--hover: $grey-00;
+
+// Color Definitions: Switch
 $switch--nub--bg--light: $grey-80;
 $switch--nub--bg--dark: $grey-30;
 

types/FilterSet.d.ts

@@ -0,0 +1,16 @@
+interface FilterSet {
+  element?: number
+  raidSlug?: string
+  recency?: number
+  full_auto?: number
+  auto_guard?: number
+  charge_attack?: number
+  characters_count?: number
+  weapons_count?: number
+  summons_count?: number
+  button_count?: number
+  turn_count?: number
+  name_quality?: boolean
+  user_quality?: boolean
+  original?: boolean
+}

utils/defaultFilters.tsx

@@ -0,0 +1,21 @@
+const DEFAULT_FULL_AUTO = -1
+const DEFAULT_AUTO_GUARD = -1
+const DEFAULT_CHARGE_ATTACK = -1
+const DEFAULT_MIN_CHARACTERS = 3
+const DEFAULT_MIN_WEAPONS = 5
+const DEFAULT_MIN_SUMMONS = 2
+const DEFAULT_NAME_QUALITY = false
+const DEFAULT_USER_QUALITY = false
+const DEFAULT_ORIGINAL_ONLY = false
+
+export const defaultFilterset: FilterSet = {
+  full_auto: DEFAULT_FULL_AUTO,
+  auto_guard: DEFAULT_AUTO_GUARD,
+  charge_attack: DEFAULT_CHARGE_ATTACK,
+  characters_count: DEFAULT_MIN_CHARACTERS,
+  weapons_count: DEFAULT_MIN_WEAPONS,
+  summons_count: DEFAULT_MIN_SUMMONS,
+  name_quality: DEFAULT_NAME_QUALITY,
+  user_quality: DEFAULT_USER_QUALITY,
+  original: DEFAULT_ORIGINAL_ONLY,
+}