diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f4ff32d..2570c53 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -34,6 +34,19 @@ function App() { const [filters, setFilters] = useState(defaultFilters); const debouncedFilters = useDebounce(filters, 300); + // Øker hver gang man trykker på logoen. Brukes som key på søkefeltet, så det tømmes + const [searchResetKey, setSearchResetKey] = useState(0); + + // Logoen: tilbake til forsiden med standardlista (mest populære, uten filtre). + // Selve sidebyttet gjør lenken i Logo, her nullstilles bare innholdet. + const goHome = () => { + setQuery(''); + setFilters(defaultFilters); + setShowFavorites(false); + setSearchResetKey((k) => k + 1); + window.scrollTo({ top: 0 }); + }; + // Valgene i dropdownene (sjangre og plattformer) fra databasen. // Filtrene vises bare på forsiden, så de hentes ikke på detaljsiden. const { data: options } = useQuery(FILTER_OPTIONS, { skip: !onHome }); @@ -93,6 +106,8 @@ function App() { return ( <>
(null); // Spør først 300 ms etter siste tastetrykk, og ikke ved for kort tekst const term = useDebounce(input.trim(), 300); @@ -39,7 +41,10 @@ export function GameSearch({ onSearch, onSelectGame }: GameSearchProps) { // Viser forrige svar mens det nye lastes, så lista ikke blinker const suggestions = (data ?? previousData)?.games.edges.map((e) => e.node) ?? []; - const showPopup = open && term.length >= MIN_CHARS; + + // Sjekker også det som står i feltet nå, ikke bare den forsinkede teksten. + // Ellers dukker gamle forslag opp et øyeblikk etter at feltet er tømt. + const showPopup = open && input.trim().length >= MIN_CHARS && term.length >= MIN_CHARS; function select(game: Suggestion) { setOpen(false); @@ -47,6 +52,15 @@ export function GameSearch({ onSearch, onSelectGame }: GameSearchProps) { onSelectGame(game); } + // X-knappen: tømmer feltet og viser standardlista (forsiden) + function clear() { + setInput(''); + setOpen(false); + setActive(-1); + onSearch(''); // App tømmer søket, og fra en detaljside går den til forsiden + inputRef.current?.focus(); // fokus blir i feltet, ellers forsvinner det med knappen + } + function handleKeyDown(e: KeyboardEvent) { if (e.key === 'ArrowDown') { e.preventDefault(); @@ -100,6 +114,13 @@ export function GameSearch({ onSearch, onSelectGame }: GameSearchProps) { onBlur={() => setOpen(false)} /> + {/* Vises bare når det står noe i feltet. aria-label fordi "×" alene ikke sier noe */} + {input && ( + + )} + {showPopup && (
{suggestions.length > 0 ? ( diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index ad0f70b..c9dd7f3 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -10,6 +10,8 @@ interface HeaderProps { favoritesCount: number; showFavorites: boolean; onToggleFavorites: () => void; + onHome: () => void; + searchResetKey: number; } /** @@ -19,15 +21,17 @@ interface HeaderProps { export function Header({ onSearch, onSelectGame, + onHome, + searchResetKey, favoritesCount, showFavorites, onToggleFavorites, }: HeaderProps) { return (
- +
- +