Fix: Search for tab library

src/apps/experimental/components/AppToolbar/SearchButton.tsx

@@ -0,0 +1,62 @@
+import React, { type FC } from 'react';
+import {
+    Link,
+    URLSearchParamsInit,
+    createSearchParams,
+    useSearchParams
+} from 'react-router-dom';
+import SearchIcon from '@mui/icons-material/Search';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import globalize from 'scripts/globalize';
+
+const getUrlParams = (searchParams: URLSearchParams) => {
+    const parentId = searchParams.get('parentId') || searchParams.get('topParentId');
+    const collectionType = searchParams.get('collectionType');
+    const params: URLSearchParamsInit = {};
+
+    if (parentId) {
+        params.parentId = parentId;
+    }
+
+    if (collectionType) {
+        params.collectionType = collectionType;
+    }
+    return params;
+};
+
+interface SearchButtonProps {
+    isTabsAvailable: boolean;
+    isSearchPath: boolean;
+}
+
+const SearchButton: FC<SearchButtonProps> = ({
+    isTabsAvailable,
+    isSearchPath
+}) => {
+    const [searchParams] = useSearchParams();
+
+    const createSearchLink = isTabsAvailable ?
+        {
+            pathname: '/search.html',
+            search: `?${createSearchParams(getUrlParams(searchParams))}`
+        } :
+        '/search.html';
+
+    return (
+        <Tooltip title={globalize.translate('Search')}>
+            <IconButton
+                size='large'
+                aria-label={globalize.translate('Search')}
+                color='inherit'
+                component={Link}
+                disabled={isSearchPath}
+                to={createSearchLink}
+            >
+                <SearchIcon />
+            </IconButton>
+        </Tooltip>
+    );
+};
+
+export default SearchButton;

src/apps/experimental/components/AppToolbar/index.tsx

@@ -1,15 +1,10 @@
-import SearchIcon from '@mui/icons-material/Search';
+import React, { type FC } from 'react';
-import IconButton from '@mui/material/IconButton';
+import { useLocation } from 'react-router-dom';
-import Tooltip from '@mui/material/Tooltip';
-import React, { FC } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-
 import AppToolbar from 'components/toolbar/AppToolbar';
-import globalize from 'scripts/globalize';
-
 import AppTabs from '../tabs/AppTabs';
 import RemotePlayButton from './RemotePlayButton';
 import SyncPlayButton from './SyncPlayButton';
+import SearchButton from './SearchButton';
 import { isTabPath } from '../tabs/tabRoutes';
 
 interface AppToolbarProps {
@@ -38,6 +33,7 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
 
     const isTabsAvailable = isTabPath(location.pathname);
     const isPublicPath = PUBLIC_PATHS.includes(location.pathname);
+    const isSearchPath = location.pathname === '/search.html';
 
     return (
         <AppToolbar
@@ -45,18 +41,7 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
                 <>
                     <SyncPlayButton />
                     <RemotePlayButton />
-
+                    <SearchButton isTabsAvailable={isTabsAvailable} isSearchPath={isSearchPath} />
-                    <Tooltip title={globalize.translate('Search')}>
-                        <IconButton
-                            size='large'
-                            aria-label={globalize.translate('Search')}
-                            color='inherit'
-                            component={Link}
-                            to='/search.html'
-                        >
-                            <SearchIcon />
-                        </IconButton>
-                    </Tooltip>
                 </>
             )}
             isDrawerAvailable={isDrawerAvailable}

src/components/router/appRouter.js

@@ -637,7 +637,7 @@ class AppRouter {
         }
 
         if (item.CollectionType == CollectionType.Livetv) {
-            return '#/livetv.html';
+            return `#/livetv.html?collectionType=${item.CollectionType}`;
         }
 
         if (item.Type === 'Genre') {
@@ -676,7 +676,7 @@ class AppRouter {
 
         if (context !== 'folders' && !itemHelper.isLocalItem(item)) {
             if (item.CollectionType == CollectionType.Movies) {
-                url = '#/movies.html?topParentId=' + item.Id;
+                url = `#/movies.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
 
                 if (options && options.section === 'latest') {
                     url += '&tab=1';
@@ -686,7 +686,7 @@ class AppRouter {
             }
 
             if (item.CollectionType == CollectionType.Tvshows) {
-                url = '#/tv.html?topParentId=' + item.Id;
+                url = `#/tv.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
 
                 if (options && options.section === 'latest') {
                     url += '&tab=1';
@@ -696,7 +696,7 @@ class AppRouter {
             }
 
             if (item.CollectionType == CollectionType.Music) {
-                url = '#/music.html?topParentId=' + item.Id;
+                url = `#/music.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
 
                 if (options?.section === 'latest') {
                     url += '&tab=1';