feat(search): add remove history item functionality

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}
 						/>
 					)}
 

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,
 	}
 }

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"