diff --git a/src/renderer/scenes/HubScene/Sidebar/SearchResultsBar/index.tsx b/src/renderer/scenes/HubScene/Sidebar/SearchResultsBar/index.tsx index 4d80c004a..6ca37273c 100644 --- a/src/renderer/scenes/HubScene/Sidebar/SearchResultsBar/index.tsx +++ b/src/renderer/scenes/HubScene/Sidebar/SearchResultsBar/index.tsx @@ -52,37 +52,64 @@ const NoResults = styled.p` padding: 8px 12px; `; +const SearchMore = styled.div` + font-size: ${(props) => props.theme.fontSizes.smaller}; + padding: 8px 12px; + cursor: pointer; + background: rgba(255, 255, 255, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + flex-shrink: 0; + + display: flex; + align-items: center; + + .icon { + margin-right: 8px; + opacity: 0.5; + } + + &:hover { + background: rgba(255, 255, 255, 0.1); + .icon { + opacity: 1; + } + } +`; + @watching class SearchResultsBar extends React.PureComponent { override render() { - const { open, games } = this.props; + const { open, games, query } = this.props; if (!open) { return null; } return ( + {query ? ( + + + {T(["search.query", { query }])} + + ) : null} {this.resultsGrid(games)} ); } - resultList: Element; - onResultList = (el: Element) => { - this.resultList = el; - }; - - onOpenAsTab = () => { - const { dispatch } = this.props; + onSearchMore = () => { + const { dispatch, query } = this.props; dispatch(actions.closeSearch({})); dispatch( actions.navigate({ wind: ambientWind(), - url: `${urls.itchio}?${encodeURIComponent(this.props.query)}`, + url: `${urls.itchio}/search?q=${encodeURIComponent(query)}`, }) ); }; + resultList: Element; + subscribe(watcher: Watcher) { watcher.on(actions.searchFetched, async (store, action) => { if (this.resultList) { diff --git a/src/static/locales/en.json b/src/static/locales/en.json index 373b20352..92da43753 100644 --- a/src/static/locales/en.json +++ b/src/static/locales/en.json @@ -520,6 +520,7 @@ "search.empty.tagline": "Need inspiration? Try searching for '{{example}}'", "search.open_as_tab": "Open as tab", "search.placeholder": "Search", + "search.query": "Search for '{{query}}' on itch.io", "sidebar.aw_snap": "Aw, snap!", "sidebar.loading": "Loading...", "sidebar.broken": "Out of order",