From a4d2f1cb2c427314c9535380004ce7135db69997 Mon Sep 17 00:00:00 2001
From: Eric Doughty-Papassideris <edoughtypapassideris@linagora.com>
Date: Fri, 25 Oct 2024 15:57:51 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20front:=20add=20clear=20button=20?=
 =?UTF-8?q?to=20header=20search=20<input>=20(#705)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/app/views/client/common/search.tsx   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/tdrive/frontend/src/app/views/client/common/search.tsx b/tdrive/frontend/src/app/views/client/common/search.tsx
index c1e5c303c..3acf915bd 100644
--- a/tdrive/frontend/src/app/views/client/common/search.tsx
+++ b/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}