From 4d799be37750cae2467203c15d33fcbd885e81af Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Sat, 4 Jul 2026 18:55:10 +0330
Subject: [PATCH] feat(search): add remove history item functionality

---
 src/layouts/search/history.portal.tsx         |  8 ++++-
 src/layouts/search/hooks/useSearchHistory.ts  | 15 +++++++++
 src/layouts/search/suggestion/suggestions.tsx | 31 ++++++++++++++-----
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/layouts/search/history.portal.tsx b/src/layouts/search/history.portal.tsx
index 8f09d3e7..2a95a0b5 100644
--- a/src/layouts/search/history.portal.tsx
+++ b/src/layouts/search/history.portal.tsx
@@ -25,7 +25,7 @@ export function SearchHistoryPortal({
 }: SearchHistoryPortalProps) {
 	const { isAuthenticated, user } = useAuth()
 	const [showConsentModal, setShowConsentModal] = useState(false)
-	const { recentSearches, addSearch } = useSearchHistory()
+	const { recentSearches, addSearch, removeHistoryItem } = useSearchHistory()
 
 	const { data: suggestions, isFetching } = useSearchSuggestions(
 		searchQuery,
@@ -67,6 +67,10 @@ export function SearchHistoryPortal({
 		onSearch(query)
 	}
 
+	const onRemoveHistoryItem = (query: string) => {
+		removeHistoryItem(query)
+	}
+
 	const showLocalSearches =
 		user?.searchAutocompleteEnabled && recentSearches.length > 0 && !hasQuery
 
@@ -86,6 +90,7 @@ export function SearchHistoryPortal({
 							<Suggestions
 								combinedSuggestions={combinedSuggestions}
 								handleSearch={handleSearch}
+								onRemove={onRemoveHistoryItem}
 							/>
 						) : null)}
 
@@ -96,6 +101,7 @@ export function SearchHistoryPortal({
 								text: f.query,
 							}))}
 							handleSearch={handleSearch}
+							onRemove={onRemoveHistoryItem}
 						/>
 					)}
 
diff --git a/src/layouts/search/hooks/useSearchHistory.ts b/src/layouts/search/hooks/useSearchHistory.ts
index 68bdf108..332c4da1 100644
--- a/src/layouts/search/hooks/useSearchHistory.ts
+++ b/src/layouts/search/hooks/useSearchHistory.ts
@@ -52,6 +52,20 @@ export function useSearchHistory() {
 		} catch {}
 	}, [])
 
+	const removeHistoryItem = useCallback((query: string) => {
+		try {
+			setRecentSearches((prev) => {
+				const filtered = prev.filter((item) => item.query !== query)
+
+				try {
+					setToStorage(STORAGE_KEY, filtered)
+				} catch {}
+
+				return filtered
+			})
+		} catch {}
+	}, [])
+
 	const clearHistory = useCallback(async () => {
 		try {
 			setRecentSearches([])
@@ -66,5 +80,6 @@ export function useSearchHistory() {
 		addSearch,
 		clearHistory,
 		isLoaded,
+		removeHistoryItem,
 	}
 }
diff --git a/src/layouts/search/suggestion/suggestions.tsx b/src/layouts/search/suggestion/suggestions.tsx
index b6553604..818de891 100644
--- a/src/layouts/search/suggestion/suggestions.tsx
+++ b/src/layouts/search/suggestion/suggestions.tsx
@@ -4,8 +4,9 @@ import { Icon } from '@/src/icons'
 interface Prop {
 	combinedSuggestions: { text: string; isRecent: boolean }[]
 	handleSearch: (query: string) => void
+	onRemove: (query: string) => void
 }
-export function Suggestions({ combinedSuggestions, handleSearch }: Prop) {
+export function Suggestions({ combinedSuggestions, handleSearch, onRemove }: Prop) {
 	const { blurMode } = useGeneralSetting()
 	return (
 		<div className="px-2 pt-1.5 pb-1 space-y-0.5 max-h-60 overflow-y-auto">
@@ -16,14 +17,30 @@ export function Suggestions({ combinedSuggestions, handleSearch }: Prop) {
 						e.preventDefault()
 						handleSearch(item.text)
 					}}
-					className={`flex items-center w-full gap-2 px-3 py-2 text-right transition-colors cursor-pointer rounded-xl hover:bg-base-content/5 ${item.isRecent && blurMode ? 'blur-mode' : 'disabled-blur-mode'}`}
+					className={`relative  flex items-center w-full gap-2 px-3 py-2 text-right transition-colors cursor-pointer rounded-xl hover:bg-base-content/5 ${item.isRecent && blurMode ? 'blur-mode' : 'disabled-blur-mode'}`}
 				>
 					{item.isRecent ? (
-						<Icon
-							name="history"
-							size={15}
-							className="text-base-content/30 shrink-0"
-						/>
+						<div>
+							<Icon
+								name="history"
+								size={15}
+								className="text-base-content/30 shrink-0"
+							/>
+							<div
+								className="absolute top-2.5 left-2 text-base-content/80 hover:text-base-content/70"
+								onMouseDown={(e) => {
+									e.stopPropagation()
+									e.preventDefault()
+								}}
+								onClick={(e) => {
+									e.stopPropagation()
+									e.preventDefault()
+									onRemove(item.text)
+								}}
+							>
+								<Icon name="close" size={14} />
+							</div>
+						</div>
 					) : (
 						<Icon
 							name="search"