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({
) : 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 (
@@ -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 ? (
-
+
+
+
{
+ e.stopPropagation()
+ e.preventDefault()
+ }}
+ onClick={(e) => {
+ e.stopPropagation()
+ e.preventDefault()
+ onRemove(item.text)
+ }}
+ >
+
+
+
) : (