Change search to use controlled btn before input

src/components/layout/GenericPage.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { Divider } from 'rsuite';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useAppSelector } from '../../redux/hooks';
 import { PageContainer, PageHeader, PageContent } from './styled';
 import { isCached } from '../../shared/utils';
@@ -9,7 +8,6 @@ const GenericPage = ({ header, children, hideDivider, ...rest }: any) => {
   const playQueue = useAppSelector((state) => state.playQueue);
   const misc = useAppSelector((state) => state.misc);
   const [backgroundImage, setBackgroundImage] = useState('');
-  useHotkeys('ctrl+f', () => document.getElementById('local-search-input')?.focus());
 
   useEffect(() => {
     if (misc.dynamicBackground) {

src/components/layout/GenericPageHeader.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { useHistory } from 'react-router-dom';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { Icon, Input, InputGroup } from 'rsuite';
 import ViewTypeButtons from '../viewtypes/ViewTypeButtons';
-import { StyledInputGroup } from '../shared/styled';
+import { StyledIconButton, StyledInputGroup } from '../shared/styled';
 import { CoverArtWrapper, PageHeaderTitle } from './styled';
 import cacheImage from '../shared/cacheImage';
 import CustomTooltip from '../shared/CustomTooltip';
@@ -27,6 +28,12 @@ const GenericPageHeader = ({
   showTitleTooltip,
 }: any) => {
   const history = useHistory();
+  const [openSearch, setOpenSearch] = useState(false);
+
+  useHotkeys('ctrl+f', () => {
+    setOpenSearch(true);
+    document.getElementById('local-search-input')?.focus();
+  });
 
   return (
     <>
@@ -86,12 +93,14 @@ const GenericPageHeader = ({
             {sidetitle && <span style={{ display: 'inline-block' }}>{sidetitle}</span>}
             {showSearchBar && (
               <span style={{ display: 'inline-block' }}>
-                <StyledInputGroup inside>
+                {searchQuery !== '' || openSearch ? (
+                  <StyledInputGroup inside onClick={() => console.log('click')}>
+                    <InputGroup.Addon>
+                      <Icon icon="search" />
+                    </InputGroup.Addon>
                     <Input
                       id="local-search-input"
-                    size="md"
                       value={searchQuery}
-                    placeholder="Search..."
                       onChange={handleSearch}
                       onPressEnter={() => {
                         if (searchQuery.trim()) {
@@ -101,15 +110,33 @@ const GenericPageHeader = ({
                       onKeyDown={(e: KeyboardEvent) => {
                         if (e.key === 'Escape') {
                           clearSearchQuery();
+                          setOpenSearch(false);
                         }
                       }}
+                      style={{ width: '180px' }}
                     />
-                  {searchQuery !== '' && (
+                    <InputGroup.Button
-                    <InputGroup.Button appearance="subtle" onClick={clearSearchQuery}>
+                      appearance="subtle"
+                      onClick={() => {
+                        clearSearchQuery();
+                        setOpenSearch(false);
+                      }}
+                    >
                       <Icon icon="close" />
                     </InputGroup.Button>
-                  )}
                   </StyledInputGroup>
+                ) : (
+                  <StyledIconButton
+                    onClick={() => {
+                      setOpenSearch(true);
+                      setTimeout(() => {
+                        document.getElementById('local-search-input')?.focus();
+                      }, 50);
+                    }}
+                    appearance="subtle"
+                    icon={<Icon icon="search" />}
+                  />
+                )}
               </span>
             )}
           </span>