Add skeleton of FilterModal

components/FilterBar/index.scss

@@ -40,11 +40,6 @@
     }
 
     .Button.Filter.Blended {
-      &.FiltersActive .Accessory svg {
-        fill: var(--accent-blue);
-        stroke: none;
-      }
-
       &:hover {
         background: var(--button-bg);
       }

components/FilterBar/index.tsx

@@ -14,7 +14,6 @@ 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
@@ -167,7 +166,7 @@ const FilterBar = (props: Props) => {
           </Select>
 
           <Button
-            className={filterButtonClasses}
+            className="Filter"
             blended={true}
             leftAccessoryIcon={<FilterIcon />}
             onClick={() => setFilterModalOpen(true)}
@@ -178,7 +177,7 @@ const FilterBar = (props: Props) => {
         defaultFilterSet={defaultFilterset}
         filterSet={advancedFilters}
         open={filterModalOpen}
-        onOpenChange={setFilterModalOpen}
+      <FilterModal open={filterModalOpen} onOpenChange={setFilterModalOpen} />
         sendAdvancedFilters={handleAdvancedFiltersChanged}
       />
     </>

components/FilterModal/index.tsx

@@ -23,7 +23,7 @@ import type { DialogProps } from '@radix-ui/react-dialog'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
-interface Props extends DialogProps {
+interface Props extends DialogProps {}
   defaultFilterSet: FilterSet
   filterSet: FilterSet
   sendAdvancedFilters: (filters: FilterSet) => void
@@ -46,6 +46,7 @@ const FilterModal = (props: Props) => {
   const footerRef = React.createRef<HTMLDivElement>()
 
   // States
+  const [filters, setFilters] = useState<{ [key: string]: any }>()
   const [open, setOpen] = useState(false)
   const [chargeAttackOpen, setChargeAttackOpen] = useState(false)
   const [fullAutoOpen, setFullAutoOpen] = useState(false)
@@ -109,7 +110,7 @@ const FilterModal = (props: Props) => {
     setOriginalOnly(filterSet.original)
   }, [filterSet])
 
-  function openSelect(name: 'charge_attack' | 'full_auto' | 'auto_guard') {
+  function sendFilters() {
     setChargeAttackOpen(name === 'charge_attack' ? !chargeAttackOpen : false)
     setFullAutoOpen(name === 'full_auto' ? !fullAutoOpen : false)
     setAutoGuardOpen(name === 'auto_guard' ? !autoGuardOpen : false)
@@ -381,7 +382,7 @@ const FilterModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent
-        className="Filter"
+        className="Search"
         headerref={headerRef}
         footerref={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}
@@ -399,8 +400,8 @@ const FilterModal = (props: Props) => {
             </span>
           </DialogClose>
         </div>
-
-        <div className="Fields">
+        <form>
+          <div className="Fields"></div>
           {chargeAttackField()}
           {fullAutoField()}
           {autoGuardField()}
@@ -413,20 +414,20 @@ const FilterModal = (props: Props) => {
           {userQualityField()}
           {originalOnlyField()}
         </div>
-        <div className="DialogFooter" ref={footerRef}>
-          <div className="Buttons Spaced">
+          <div className="DialogFooter" ref={footerRef}>
+            <div className="Buttons Spaced">
             <Button
               blended={true}
-              text={t('modals.filters.buttons.clear')}
+              <Button blended={true} text={t('modals.filters.buttons.clear')} />
               onClick={resetFilters}
             />
-            <Button
-              contained={true}
-              text={t('modals.filters.buttons.confirm')}
-              onClick={saveFilters}
-            />
+              <Button
+                contained={true}
+                text={t('modals.filters.buttons.confirm')}
+              />
+            </div>
           </div>
-        </div>
+        </form>
       </DialogContent>
     </Dialog>
   )

public/locales/en/common.json

@@ -208,24 +208,6 @@
     },
     "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"

public/locales/ja/common.json

@@ -208,24 +208,6 @@
     },
     "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": "保存したフィルターをクリア"