jellyfin-web/src/apps/experimental/components/AppToolbar/SearchButton.tsx

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;