💄 front: add clear button to header search <input> (#705) (#712)

Provisional for #705

Actually unifying the input into one presents layout complexities

tdrive/frontend/src/app/views/client/common/search.tsx

@@ -1,13 +1,12 @@
-import { Button } from '@atoms/button/button';
 import { Input } from '@atoms/input/input-text';
-import { AdjustmentsIcon, SearchIcon } from '@heroicons/react/outline';
+import { SearchIcon } from '@heroicons/react/outline';
 import { InputDecorationIcon } from '@atoms/input/input-decoration-icon';
 import Languages from '@features/global/services/languages-service';
 import RouterServices from '@features/router/services/router-service';
 import { useSearchModal } from '@features/search/hooks/use-search';
 import { SearchInputState } from '@features/search/state/search-input';
 import { useRecoilState } from 'recoil';
-import { ToasterService } from 'app/features/global/services/toaster-service';
+import { XIcon } from 'app/atoms/icons-agnostic';
 
 export default (): JSX.Element => {
   const { workspaceId, channelId } = RouterServices.getStateFromRoute();
@@ -31,6 +30,12 @@ export default (): JSX.Element => {
           prefix={() => (
             <SearchIcon className={'h-5 w-5 absolute m-auto top-0 bottom-0 left-3 text-blue-500'} />
           )}
+          suffix={() =>
+            <XIcon
+              className={'h-4 w-4 absolute m-auto top-0 bottom-0 right-3 cursor-pointer text-zinc-500 ' + (searchState.query?.length ? '' : 'hidden')}
+              onClick={() => setSearchState({ ...searchState, query: '' }) }
+              />
+          }
           input={({ className }) => (
             <Input
               value={searchState.query}