refactor(Library): use modal instead of Filters

src/routes/Library/Library.js

@@ -3,12 +3,12 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const Icon = require('@stremio/stremio-icons/dom');
 const NotFound = require('stremio/routes/NotFound');
-const { Button, Multiselect, MainNavBars, LibItem, Image, PaginationInput, useProfile, routesRegexp } = require('stremio/common');
+const { Button, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState } = require('stremio/common');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
-const { Filters } = require('stremio/common');
 
 function withModel(Library) {
     const withModel = ({ urlParams, queryParams }) => {
@@ -47,6 +47,7 @@ const Library = ({ model, urlParams, queryParams }) => {
     const profile = useProfile();
     const library = useLibrary(model, urlParams, queryParams);
     const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library);
+    const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
     const multiselectInputs = <>
         <Multiselect {...typeSelect} className={styles['select-input-container']} />
         <Multiselect {...sortSelect} className={styles['select-input-container']} />
@@ -67,9 +68,9 @@ const Library = ({ model, urlParams, queryParams }) => {
                                     :
                                     <PaginationInput label={'1'} className={classnames(styles['pagination-input'], styles['pagination-input-placeholder'])} />
                             }
-                            <Filters className={styles['filters']}>
+                            <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
-                                { multiselectInputs }
+                                <Icon className={styles['filter-icon']} icon={'ic_filter'} />
-                            </Filters>
+                            </Button>
                         </div>
                         :
                         null
@@ -115,6 +116,16 @@ const Library = ({ model, urlParams, queryParams }) => {
                                 </div>
                 }
             </div>
+            {
+                inputsModalOpen ?
+                    <ModalDialog title={'Library filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
+                        <div className={styles['selectable-input-container']}>
+                            { multiselectInputs }
+                        </div>
+                    </ModalDialog>
+                    :
+                    null
+            }
         </MainNavBars>
     );
 };

src/routes/Library/styles.less

@@ -14,6 +14,12 @@
     pagination-label: label;
 }
 
+:import('~stremio/common/ModalDialog/styles.less') {
+    selectable-inputs-modal-container: modal-dialog-container;
+    selectable-inputs-modal-content: modal-dialog-content;
+}
+
+
 .library-container {
     width: 100%;
     height: 100%;
@@ -56,6 +62,23 @@
                 }
             }
 
+            .filter-container {
+                flex: none;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                width: 3.5rem;
+                height: 3.5rem;
+                background-color: @color-background;
+
+                .filter-icon {
+                    flex: none;
+                    width: 1.4rem;
+                    height: 1.4rem;
+                    fill: @color-secondaryvariant1-90;
+                }
+            }
+
             .spacing {
                 flex: 1;
             }
@@ -173,6 +196,28 @@
     }
 }
 
+.selectable-inputs-modal {
+    .selectable-inputs-modal-container {
+        overflow: visible;
+
+        .selectable-inputs-modal-content {
+            overflow-y: visible !important;
+            overflow: visible;
+
+            .selectable-input-container {
+                display: flex;
+                gap: 1em;
+                flex-direction: column;
+                overflow: visible;
+
+                .select-input-container {
+                    height: 3.5em;
+                }
+            }
+        }
+    }
+}
+
 @media only screen and (min-width: @large) {
     .library-container {
         .library-content {
@@ -262,6 +307,10 @@
                     display: none;
                 }
 
+                .filter-container {
+                    display: flex;
+                }
+
                 .spacing {
                     display: none;
                 }
@@ -269,10 +318,6 @@
                 .pagination-input {
                     margin-left: 0;
                 }
-
-                .filters {
-                    display: block;
-                }
             }
 
             .meta-items-container {