diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 53153a93..d2665928 100755 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -97,6 +97,7 @@ "recent_searches": "Recent Searches", "suggestions": "Suggestions", "clear_history": "Clear history", + "remove_from_history": "Remove from history", "loading": "Loading...", "no_results": "No results", "home": "Home", diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index 518e4b9f..5f2c1d1d 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -62,7 +62,8 @@ export function Header() { const { t } = useTranslation("header"); - const { addToHistory, clearHistory, getRecentHistory } = useSearchHistory(); + const { addToHistory, removeFromHistory, clearHistory, getRecentHistory } = + useSearchHistory(); const { suggestions, isLoading: isLoadingSuggestions } = useSearchSuggestions( searchValue, @@ -176,6 +177,10 @@ export function Header() { setActiveIndex(-1); }; + const handleRemoveHistoryItem = (query: string) => { + removeFromHistory(query); + }; + const handleClearHistory = () => { clearHistory(); }; @@ -326,6 +331,7 @@ export function Header() { isLoadingSuggestions={isLoadingSuggestions} onSelectHistory={handleSelectHistory} onSelectSuggestion={handleSelectSuggestion} + onRemoveHistoryItem={handleRemoveHistoryItem} onClearHistory={handleClearHistory} onClose={handleCloseDropdown} activeIndex={activeIndex} diff --git a/src/renderer/src/components/search-dropdown/search-dropdown.scss b/src/renderer/src/components/search-dropdown/search-dropdown.scss index 276619c2..78a6fac1 100644 --- a/src/renderer/src/components/search-dropdown/search-dropdown.scss +++ b/src/renderer/src/components/search-dropdown/search-dropdown.scss @@ -57,6 +57,37 @@ margin: 0; } + &__item-container { + position: relative; + display: flex; + align-items: center; + + &:hover .search-dropdown__item-remove { + opacity: 1; + } + } + + &__item-remove { + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + color: globals.$muted-color; + padding: 4px; + border-radius: 4px; + opacity: 0; + transition: all ease 0.15s; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + + &:hover { + color: #ff5555; + background-color: rgba(255, 85, 85, 0.1); + } + } + &__item { width: 100%; display: flex; diff --git a/src/renderer/src/components/search-dropdown/search-dropdown.tsx b/src/renderer/src/components/search-dropdown/search-dropdown.tsx index a8f08401..d90c3bf5 100644 --- a/src/renderer/src/components/search-dropdown/search-dropdown.tsx +++ b/src/renderer/src/components/search-dropdown/search-dropdown.tsx @@ -1,6 +1,11 @@ import { useEffect, useRef, useCallback, useState } from "react"; import { createPortal } from "react-dom"; -import { ClockIcon, SearchIcon, TrashIcon } from "@primer/octicons-react"; +import { + ClockIcon, + SearchIcon, + TrashIcon, + XIcon, +} from "@primer/octicons-react"; import cn from "classnames"; import { useTranslation } from "react-i18next"; import type { SearchHistoryEntry } from "@renderer/hooks/use-search-history"; @@ -16,6 +21,7 @@ export interface SearchDropdownProps { isLoadingSuggestions: boolean; onSelectHistory: (query: string) => void; onSelectSuggestion: (suggestion: SearchSuggestion) => void; + onRemoveHistoryItem: (query: string) => void; onClearHistory: () => void; onClose: () => void; activeIndex: number; @@ -31,6 +37,7 @@ export function SearchDropdown({ isLoadingSuggestions, onSelectHistory, onSelectSuggestion, + onRemoveHistoryItem, onClearHistory, onClose, activeIndex, @@ -146,7 +153,10 @@ export function SearchDropdown({