diff --git a/src/locales/ar/translation.json b/src/locales/ar/translation.json index 13445e9d..aa9018b3 100644 --- a/src/locales/ar/translation.json +++ b/src/locales/ar/translation.json @@ -55,7 +55,8 @@ "download_sources": "مصادر التنزيل", "result_count": "{{resultCount}} نتيجة", "filter_count": "{{filterCount}} متاح", - "clear_filters": "مسح {{filterCount}} المحددة" + "clear_filters": "مسح {{filterCount}} المحددة", + "go_up_button": "العودة إلى الأعلى" }, "game_details": { "open_download_options": "فتح خيارات التنزيل", diff --git a/src/locales/be/translation.json b/src/locales/be/translation.json index d89876bd..affaef3f 100644 --- a/src/locales/be/translation.json +++ b/src/locales/be/translation.json @@ -33,7 +33,8 @@ }, "catalogue": { "next_page": "Наступная старонка", - "previous_page": "Папярэдняя старонка" + "previous_page": "Папярэдняя старонка", + "go_up_button": "Вярнуцца да пачатку" }, "game_details": { "open_download_options": "Адкрыць варыянты сцягвання", diff --git a/src/locales/bg/translation.json b/src/locales/bg/translation.json index e71a0245..60d48066 100644 --- a/src/locales/bg/translation.json +++ b/src/locales/bg/translation.json @@ -55,7 +55,8 @@ "download_sources": "Източници за изтегляне", "result_count": "{{resultCount}} резултати", "filter_count": "{{filterCount}} налични", - "clear_filters": "Изчисти {{filterCount}} избрани" + "clear_filters": "Изчисти {{filterCount}} избрани", + "go_up_button": "Обратно към върха" }, "game_details": { "launch_options": "Опции за стартиране", diff --git a/src/locales/ca/translation.json b/src/locales/ca/translation.json index f87caf56..9fa1eda5 100644 --- a/src/locales/ca/translation.json +++ b/src/locales/ca/translation.json @@ -43,7 +43,8 @@ }, "catalogue": { "next_page": "Pàgina següent", - "previous_page": "Pàgina anterior" + "previous_page": "Pàgina anterior", + "go_up_button": "Torneu a la part superior" }, "game_details": { "open_download_options": "Obre les opcions de baixada", diff --git a/src/locales/cs/translation.json b/src/locales/cs/translation.json index cc54e69d..5c2b2264 100644 --- a/src/locales/cs/translation.json +++ b/src/locales/cs/translation.json @@ -48,7 +48,8 @@ }, "catalogue": { "next_page": "Další strana", - "previous_page": "Předchozí strana" + "previous_page": "Předchozí strana", + "go_up_button": "Vraťte se na vrchol" }, "game_details": { "open_download_options": "Otevřít možnosti stahování", diff --git a/src/locales/da/translation.json b/src/locales/da/translation.json index c6f5a42c..af91e859 100644 --- a/src/locales/da/translation.json +++ b/src/locales/da/translation.json @@ -47,7 +47,8 @@ }, "catalogue": { "next_page": "Næste side", - "previous_page": "Forrige side" + "previous_page": "Forrige side", + "go_up_button": "Gå tilbage til toppen" }, "game_details": { "open_download_options": "Åben download muligheder", diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json index 8910f416..adfc55a2 100644 --- a/src/locales/de/translation.json +++ b/src/locales/de/translation.json @@ -43,7 +43,8 @@ }, "catalogue": { "next_page": "Nächste Seite", - "previous_page": "Vorherige Seite" + "previous_page": "Vorherige Seite", + "go_up_button": "Zurück nach oben gehen" }, "game_details": { "open_download_options": "Download-Optionen öffnen", diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index bf91cc40..115a5afd 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -55,7 +55,8 @@ "download_sources": "Download sources", "result_count": "{{resultCount}} results", "filter_count": "{{filterCount}} available", - "clear_filters": "Clear {{filterCount}} selected" + "clear_filters": "Clear {{filterCount}} selected", + "go_up_button": "Back to top" }, "game_details": { "open_download_options": "Open download options", diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json index 27e18f34..f095f7da 100644 --- a/src/locales/es/translation.json +++ b/src/locales/es/translation.json @@ -55,7 +55,8 @@ "download_sources": "Fuentes de descarga", "result_count": "{{resultCount}} resultados", "filter_count": "{{filterCount}} disponibles", - "clear_filters": "Limpiar {{filterCount}} seleccionados" + "clear_filters": "Limpiar {{filterCount}} seleccionados", + "go_up_button": "Vuelve a la cima" }, "game_details": { "open_download_options": "Ver opciones de descargas", diff --git a/src/locales/et/translation.json b/src/locales/et/translation.json index 91467e90..4bfcb189 100644 --- a/src/locales/et/translation.json +++ b/src/locales/et/translation.json @@ -47,7 +47,8 @@ }, "catalogue": { "next_page": "Järgmine leht", - "previous_page": "Eelmine leht" + "previous_page": "Eelmine leht", + "go_up_button": "Minge tippu" }, "game_details": { "open_download_options": "Ava allalaadimise valikud", diff --git a/src/locales/fa/translation.json b/src/locales/fa/translation.json index 9f0be309..69d6d583 100644 --- a/src/locales/fa/translation.json +++ b/src/locales/fa/translation.json @@ -33,7 +33,8 @@ }, "catalogue": { "next_page": "صفحه‌ی بعدی", - "previous_page": "صفحه‌ی قبلی" + "previous_page": "صفحه‌ی قبلی", + "go_up_button": "به بالا برگردید" }, "game_details": { "open_download_options": "بازکردن آپشن‌های دانلود", diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json index 9e912e32..adaa8ff1 100644 --- a/src/locales/fr/translation.json +++ b/src/locales/fr/translation.json @@ -122,6 +122,7 @@ }, "catalogue": { "next_page": "Page suivante", - "previous_page": "Page précédente" + "previous_page": "Page précédente", + "go_up_button": "Retourner au sommet" } } diff --git a/src/locales/hu/translation.json b/src/locales/hu/translation.json index d5603188..f54143d3 100644 --- a/src/locales/hu/translation.json +++ b/src/locales/hu/translation.json @@ -33,7 +33,8 @@ }, "catalogue": { "next_page": "Következő olda", - "previous_page": "Előző olda" + "previous_page": "Előző olda", + "go_up_button": "Menj vissza a tetejére" }, "game_details": { "open_download_options": "Letöltési lehetőségek", diff --git a/src/locales/id/translation.json b/src/locales/id/translation.json index bd8d8151..7cbca334 100644 --- a/src/locales/id/translation.json +++ b/src/locales/id/translation.json @@ -43,7 +43,8 @@ }, "catalogue": { "next_page": "Halaman Berikutnya", - "previous_page": "Halaman Sebelumnya" + "previous_page": "Halaman Sebelumnya", + "go_up_button": "Kembali ke atas" }, "game_details": { "open_download_options": "Buka opsi unduhan", diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 3aa05109..64b199d3 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -33,7 +33,8 @@ }, "catalogue": { "next_page": "Pagina successiva", - "previous_page": "Pagina precedente" + "previous_page": "Pagina precedente", + "go_up_button": "Torna in cima" }, "game_details": { "open_download_options": "Apri opzioni di download", diff --git a/src/locales/kk/translation.json b/src/locales/kk/translation.json index dd81d1db..53c315c7 100644 --- a/src/locales/kk/translation.json +++ b/src/locales/kk/translation.json @@ -42,7 +42,8 @@ }, "catalogue": { "next_page": "Келесі бет", - "previous_page": "Алдыңғы бет" + "previous_page": "Алдыңғы бет", + "go_up_button": "Жоғарыға оралу" }, "game_details": { "open_download_options": "Жүктеу нұсқаларын ашу", diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json index 92c6352e..876fb9fc 100644 --- a/src/locales/ko/translation.json +++ b/src/locales/ko/translation.json @@ -33,7 +33,8 @@ }, "catalogue": { "next_page": "다음 페이지", - "previous_page": "이전 페이지" + "previous_page": "이전 페이지", + "go_up_button": "상단으로 돌아갑니다" }, "game_details": { "open_download_options": "다운로드 선택지 열기", diff --git a/src/locales/nb/translation.json b/src/locales/nb/translation.json index d821f518..22fdbf1a 100644 --- a/src/locales/nb/translation.json +++ b/src/locales/nb/translation.json @@ -47,7 +47,8 @@ }, "catalogue": { "next_page": "Neste side", - "previous_page": "Forrige side" + "previous_page": "Forrige side", + "go_up_button": "Gå tilbake til toppen" }, "game_details": { "open_download_options": "Åpne nedlastingsmuligheter", diff --git a/src/locales/nl/translation.json b/src/locales/nl/translation.json index d619303e..c05ce3ba 100644 --- a/src/locales/nl/translation.json +++ b/src/locales/nl/translation.json @@ -33,7 +33,8 @@ }, "catalogue": { "next_page": "Volgende Pagina", - "previous_page": "Vorige Pagina" + "previous_page": "Vorige Pagina", + "go_up_button": "Ga terug naar de top" }, "game_details": { "open_download_options": "Open download Instellingen", diff --git a/src/locales/pl/translation.json b/src/locales/pl/translation.json index 1151318a..fa6b76f3 100644 --- a/src/locales/pl/translation.json +++ b/src/locales/pl/translation.json @@ -33,7 +33,8 @@ }, "catalogue": { "next_page": "Następna strona", - "previous_page": "Poprzednia strona" + "previous_page": "Poprzednia strona", + "go_up_button": "Wróć na szczyt" }, "game_details": { "open_download_options": "Otwórz opcje pobierania", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 3556dbd1..e556335f 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -352,7 +352,8 @@ "download_sources": "Fontes de download", "result_count": "{{resultCount}} resultados", "filter_count": "{{filterCount}} disponíveis", - "clear_filters": "Limpar {{filterCount}} selecionados" + "clear_filters": "Limpar {{filterCount}} selecionados", + "go_up_button": "Voltar ao topo" }, "modal": { "close": "Botão de fechar" diff --git a/src/locales/pt-PT/translation.json b/src/locales/pt-PT/translation.json index 212c01d8..894ccf7e 100644 --- a/src/locales/pt-PT/translation.json +++ b/src/locales/pt-PT/translation.json @@ -275,7 +275,8 @@ }, "catalogue": { "next_page": "Página seguinte", - "previous_page": "Página anterior" + "previous_page": "Página anterior", + "go_up_button": "Voltar ao topo" }, "modal": { "close": "Botão de fechar" diff --git a/src/locales/ro/translation.json b/src/locales/ro/translation.json index 8a5403b5..95af1bbc 100644 --- a/src/locales/ro/translation.json +++ b/src/locales/ro/translation.json @@ -34,7 +34,8 @@ }, "catalogue": { "next_page": "Pagina următoare", - "previous_page": "Pagina anterioară" + "previous_page": "Pagina anterioară", + "go_up_button": "Înapoi în vârf" }, "game_details": { "open_download_options": "Deschide opțiunile de descărcare", diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json index 494b8d06..330c320c 100644 --- a/src/locales/ru/translation.json +++ b/src/locales/ru/translation.json @@ -55,7 +55,8 @@ "download_sources": "Источники загрузки", "result_count": "{{resultCount}} результатов", "filter_count": "{{filterCount}} доступных", - "clear_filters": "Очистить {{filterCount}} выбранных" + "clear_filters": "Очистить {{filterCount}} выбранных", + "go_up_button": "Вернуться на вершину" }, "game_details": { "open_download_options": "Открыть источники", diff --git a/src/locales/tr/translation.json b/src/locales/tr/translation.json index f34a6eb4..5a42f731 100644 --- a/src/locales/tr/translation.json +++ b/src/locales/tr/translation.json @@ -55,7 +55,8 @@ "download_sources": "İndirme kaynakları", "result_count": "{{resultCount}} sonuç", "filter_count": "{{filterCount}} mevcut", - "clear_filters": "{{filterCount}} seçili filtreyi temizle" + "clear_filters": "{{filterCount}} seçili filtreyi temizle", + "go_up_button": "Tepeye dön" }, "game_details": { "open_download_options": "İndirme seçeneklerini aç", diff --git a/src/locales/uk/translation.json b/src/locales/uk/translation.json index 330b1c6d..745765d7 100644 --- a/src/locales/uk/translation.json +++ b/src/locales/uk/translation.json @@ -42,7 +42,8 @@ }, "catalogue": { "next_page": "Наступна сторінка", - "previous_page": "Попередня сторінка" + "previous_page": "Попередня сторінка", + "go_up_button": "Назад до вершини" }, "game_details": { "open_download_options": "Відкрити варіанти завантаження", diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json index 8b9c535c..84906aa1 100644 --- a/src/locales/zh/translation.json +++ b/src/locales/zh/translation.json @@ -47,7 +47,8 @@ }, "catalogue": { "next_page": "下一页", - "previous_page": "上一页" + "previous_page": "上一页", + "go_up_button": "回到顶部" }, "game_details": { "open_download_options": "打开下载菜单", diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx index d2718a17..f060dd6f 100644 --- a/src/renderer/src/pages/catalogue/catalogue.tsx +++ b/src/renderer/src/pages/catalogue/catalogue.tsx @@ -20,6 +20,8 @@ import { useCatalogue } from "@renderer/hooks/use-catalogue"; import { GameItem } from "./game-item"; import { FilterItem } from "./filter-item"; import { debounce } from "lodash-es"; +import { Button } from "@renderer/components"; +import { ArrowUpIcon } from "@primer/octicons-react"; const filterCategoryColors = { genres: "hsl(262deg 50% 47%)", @@ -30,6 +32,8 @@ const filterCategoryColors = { }; const PAGE_SIZE = 20; +const TOTAL_ITEMS_TO_SHOW_GO_UP_BUTTOM = 10; +const LIMIT_SCROLL_TO_DISAPEAR_GO_UP_BUTTON = 500; export default function Catalogue() { const abortControllerRef = useRef(null); @@ -46,6 +50,8 @@ export default function Catalogue() { const [results, setResults] = useState([]); + const [wantGoUpButtonIsVisible, setWantGoUpButtonIsVisible] = useState(false); + const [itemsCount, setItemsCount] = useState(0); const { formatNumber } = useFormat(); @@ -77,6 +83,37 @@ export default function Catalogue() { }, 500) ).current; + const isGoUpButtonVisible = (results: any[], scrollTop: number) => { + const withinLimit = + results.length > 0 && results.length <= TOTAL_ITEMS_TO_SHOW_GO_UP_BUTTOM; + return withinLimit && scrollTop >= LIMIT_SCROLL_TO_DISAPEAR_GO_UP_BUTTON; + }; + + useEffect(() => { + const withinLimit = + results.length > 0 && results.length <= TOTAL_ITEMS_TO_SHOW_GO_UP_BUTTOM; + setWantGoUpButtonIsVisible(withinLimit); + }, [results]); + + useEffect(() => { + const handleScroll = debounce(() => { + if (cataloguePageRef.current) { + const scrollTop = cataloguePageRef.current.scrollTop; + setWantGoUpButtonIsVisible(isGoUpButtonVisible(results, scrollTop)); + } + }, 100); + + const ref = cataloguePageRef.current; + if (ref) { + ref.addEventListener("scroll", handleScroll); + } + + return () => { + ref?.removeEventListener("scroll", handleScroll); + handleScroll.cancel(); + }; + }, [results]); + useEffect(() => { setResults([]); setIsLoading(true); @@ -227,6 +264,15 @@ export default function Catalogue() { t, ]); + const handleWantGoUpButtonClick = () => { + if (cataloguePageRef.current) { + cataloguePageRef.current.scrollTo({ + top: 0, + behavior: "smooth", + }); + } + }; + return (
@@ -283,6 +329,19 @@ export default function Catalogue() { }} />
+ + {wantGoUpButtonIsVisible && ( + + )}