refactor(Library): replace Multiselect with MultiselectMenu

src/components/MultiselectMenu/MultiselectMenu.less

@@ -34,7 +34,7 @@
         }
     }
 
-    &:hover, .open {
+    &:hover, &.active {
         background-color: var(--overlay-color);
     }
 }

src/components/MultiselectMenu/MultiselectMenu.tsx

@@ -27,7 +27,7 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
     };
 
     return (
-        <div className={classNames(styles['multiselect-menu'], className)} ref={multiselectMenuRef}>
+        <div className={classNames(styles['multiselect-menu'], { [styles['active']]: menuOpen }, className)} ref={multiselectMenuRef}>
             <Button
                 className={classNames(styles['multiselect-button'], { [styles['open']]: menuOpen })}
                 onClick={toggleMenu}

src/routes/Library/Library.js

@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const NotFound = require('stremio/routes/NotFound');
 const { useProfile, useNotifications, routesRegexp, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
-const { DelayedRenderer, Chips, Image, MainNavBars, Multiselect, LibItem } = require('stremio/components');
+const { DelayedRenderer, Chips, Image, MainNavBars, LibItem, MultiselectMenu } = require('stremio/components');
 const { default: Placeholder } = require('./Placeholder');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
@@ -69,7 +69,7 @@ const Library = ({ model, urlParams, queryParams }) => {
                 profile.auth !== null ?
                     <div className={styles['library-content']}>
                         <div className={styles['selectable-inputs-container']}>
-                            <Multiselect {...typeSelect} className={styles['select-input-container']} />
+                            <MultiselectMenu {...typeSelect} className={styles['select-input-container']} />
                             <Chips {...sortChips} className={styles['select-input-container']} />
                         </div>
                         {

src/routes/Library/styles.less

@@ -42,6 +42,7 @@
                 flex-shrink: 1;
                 flex-basis: 15rem;
                 height: 2.75rem;
+                background-color: var(--overlay-color);
 
                 &:not(:last-child) {
                     margin-right: 1.5rem;

src/routes/Library/useSelectableInputs.js

@@ -2,20 +2,20 @@
 
 const React = require('react');
 const { useTranslate } = require('stremio/common');
-
 const mapSelectableInputs = (library, t) => {
+    const selectedType = library.selectable.types.find(({ selected }) => selected) || library.selectable.types.find(({ type }) => type === null);
     const typeSelect = {
-        title: t.string('SELECT_TYPE'),
         options: library.selectable.types
             .map(({ type, deepLinks }) => ({
                 value: deepLinks.library,
                 label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
             })),
-        selected: library.selectable.types
-            .filter(({ selected }) => selected)
-            .map(({ deepLinks }) => deepLinks.library),
-        onSelect: (event) => {
-            window.location = event.value;
+        selectedOption: {
+            label: selectedType?.type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(selectedType?.type, 'TYPE_'),
+            value: selectedType?.deepLinks.library
+        },
+        onSelect: (value) => {
+            window.location = value;
         }
     };
     const sortChips = {

src/routes/MetaDetails/StreamsList/styles.less

@@ -109,7 +109,7 @@
         .select-input-container {
             min-width: 40%;
             flex-grow: 1;
-            background: none;
+            background-color: none;
 
             &:hover, &:focus, &:global(.active) {
                 background-color: var(--overlay-color);