From 8a8d90e03a38581ccbdbdc93834c301c46541e9a Mon Sep 17 00:00:00 2001
From: dhaverd <jedi55@mail.ru>
Date: Mon, 13 Jul 2026 16:41:37 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83=20=D0=BE=D1=82?=
 =?UTF-8?q?=D1=87=D0=B8=D1=81=D1=82=D0=BA=D0=B8=20=D0=BF=D0=BE=D0=BB=D1=8F?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D0=B8=D1=81=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/routes/home.tsx | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index b897144..fd8c52e 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -2,7 +2,7 @@ import {useEffect, useState} from "react";
 import '../assets/styles/home.css';
 import {
     Box, Button,
-    Divider, Fab,
+    Divider, Fab, IconButton, InputAdornment,
     TextField,
     ThemeProvider, Typography,
     useTheme
@@ -16,6 +16,7 @@ import ItemDialog from "~/components/itemDialog";
 import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
 import ReportDialog from "~/components/reportDialog";
 import LoopIcon from '@mui/icons-material/Loop';
+import ClearIcon from '@mui/icons-material/Clear';
 
 export default function Home() {
     const outerTheme = useTheme();
@@ -29,6 +30,7 @@ export default function Home() {
     const [fabIsHovered, setFabIsHovered] = useState(false);
     const [showReportDialog, setReportShowDialog] = useState(false);
     const [triggerUpdate, setTriggerUpdate] = useState(0);
+    const [showEraseButton, setShowEraseButton] = useState(false);
 
     useEffect(() => {
         let isIgnore = false;
@@ -52,12 +54,14 @@ export default function Home() {
 
     useEffect(() => {
         if (searchText !== ""){
+            setShowEraseButton(true);
             setIsFetchingList(true);
             let result = search(searchText);
             console.log(result);
             setBlacklistItems(result);
             setIsFetchingList(false);
         } else {
+            setShowEraseButton(false);
             setBlacklistItems(totalBlacklistItems);
         }
     }, [searchText]);
@@ -88,6 +92,10 @@ export default function Home() {
         setTriggerUpdate(triggerUpdate + 1)
     };
 
+    const handleClickEraseSearch = () => {
+        setSearchText("");
+    };
+
     const search = (searchString: string) => {
         searchString = searchString.toLowerCase();
         return totalBlacklistItems.filter((item) => {
@@ -109,6 +117,33 @@ export default function Home() {
                         value={searchText}
                         onChange={(e) => handleSearch(e.target.value)}
                         fullWidth
+                        slotProps={{
+                            input: {
+                                endAdornment: <InputAdornment position="end">
+                                    { showEraseButton ? <IconButton
+                                        onClick={handleClickEraseSearch}
+                                        edge="end"
+                                        sx={{
+                                            marginRight: '1px',
+                                            padding: '5px!important',
+                                            '&:hover': {
+                                                // backgroundColor: '#282c34',
+                                                backgroundColor: '#E0E3E7',
+                                                border: '1px solid #E0E3E7',
+                                                '& > .MuiSvgIcon-root': {
+                                                    color: '#282c34',
+                                                },
+                                            }
+                                        }}
+                                    >
+                                       <ClearIcon sx={{
+                                           color: '#E0E3E7',
+                                           fontSize: '1.2rem'
+                                       }}/>
+                                    </IconButton> : "" }
+                                </InputAdornment>,
+                            },
+                        }}
                     />
                     <Button
                         variant="outlined"