From a21e5698c8e8fe3e5c28cd3b02b92f82457cea8e Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Tue, 11 Mar 2025 20:45:18 +0200
Subject: [PATCH] refactor(Library): replace Multiselect with MultiselectMenu

---
 .../MultiselectMenu/MultiselectMenu.less           |  2 +-
 src/components/MultiselectMenu/MultiselectMenu.tsx |  2 +-
 src/routes/Library/Library.js                      |  4 ++--
 src/routes/Library/styles.less                     |  1 +
 src/routes/Library/useSelectableInputs.js          | 14 +++++++-------
 src/routes/MetaDetails/StreamsList/styles.less     |  2 +-
 6 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/MultiselectMenu/MultiselectMenu.less b/src/components/MultiselectMenu/MultiselectMenu.less
index 88ae83d1b..c26c2480e 100644
--- a/src/components/MultiselectMenu/MultiselectMenu.less
+++ b/src/components/MultiselectMenu/MultiselectMenu.less
@@ -34,7 +34,7 @@
         }
     }
 
-    &:hover, .open {
+    &:hover, &.active {
         background-color: var(--overlay-color);
     }
 }
\ No newline at end of file
diff --git a/src/components/MultiselectMenu/MultiselectMenu.tsx b/src/components/MultiselectMenu/MultiselectMenu.tsx
index 55b818d80..8f41278e7 100644
--- a/src/components/MultiselectMenu/MultiselectMenu.tsx
+++ b/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}
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index f22a12236..432868c12 100644
--- a/src/routes/Library/Library.js
+++ b/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>
                         {
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 76a16940e..44c0c8851 100644
--- a/src/routes/Library/styles.less
+++ b/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;
diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js
index 6f24dc2c9..426359a10 100644
--- a/src/routes/Library/useSelectableInputs.js
+++ b/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 = {
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index 0f9ab2a0a..62523d073 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/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);