Merge bdcde2199a into 8513f83169

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": "فتح خيارات التنزيل",

src/locales/be/translation.json

@@ -33,7 +33,8 @@
   },
   "catalogue": {
     "next_page": "Наступная старонка",
-    "previous_page": "Папярэдняя старонка"
+    "previous_page": "Папярэдняя старонка",
+    "go_up_button": "Вярнуцца да пачатку"
   },
   "game_details": {
     "open_download_options": "Адкрыць варыянты сцягвання",

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": "Опции за стартиране",

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",

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í",

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",

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",

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",

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",

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",

src/locales/fa/translation.json

@@ -33,7 +33,8 @@
   },
   "catalogue": {
     "next_page": "صفحه‌ی بعدی",
-    "previous_page": "صفحه‌ی قبلی"
+    "previous_page": "صفحه‌ی قبلی",
+    "go_up_button": "به بالا برگردید"
   },
   "game_details": {
     "open_download_options": "بازکردن آپشن‌های دانلود",

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"
   }
 }

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",

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",

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",

src/locales/kk/translation.json

@@ -42,7 +42,8 @@
   },
   "catalogue": {
     "next_page": "Келесі бет",
-    "previous_page": "Алдыңғы бет"
+    "previous_page": "Алдыңғы бет",
+    "go_up_button": "Жоғарыға оралу"
   },
   "game_details": {
     "open_download_options": "Жүктеу нұсқаларын ашу",

src/locales/ko/translation.json

@@ -33,7 +33,8 @@
   },
   "catalogue": {
     "next_page": "다음 페이지",
-    "previous_page": "이전 페이지"
+    "previous_page": "이전 페이지",
+    "go_up_button": "상단으로 돌아갑니다"
   },
   "game_details": {
     "open_download_options": "다운로드 선택지 열기",

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",

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",

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",

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"

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"

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",

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": "Открыть источники",

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ç",

src/locales/uk/translation.json

@@ -42,7 +42,8 @@
   },
   "catalogue": {
     "next_page": "Наступна сторінка",
-    "previous_page": "Попередня сторінка"
+    "previous_page": "Попередня сторінка",
+    "go_up_button": "Назад до вершини"
   },
   "game_details": {
     "open_download_options": "Відкрити варіанти завантаження",

src/locales/zh/translation.json

@@ -47,7 +47,8 @@
   },
   "catalogue": {
     "next_page": "下一页",
-    "previous_page": "上一页"
+    "previous_page": "上一页",
+    "go_up_button": "回到顶部"
   },
   "game_details": {
     "open_download_options": "打开下载菜单",

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<AbortController | null>(null);
@@ -46,6 +50,8 @@ export default function Catalogue() {
 
   const [results, setResults] = useState<any[]>([]);
 
+  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 (
     <div className="catalogue" ref={cataloguePageRef}>
       <div className="catalogue__header">
@@ -283,6 +329,19 @@ export default function Catalogue() {
               }}
             />
           </div>
+
+          {wantGoUpButtonIsVisible && (
+            <Button
+              onClick={handleWantGoUpButtonClick}
+              theme="outline"
+              style={{ position: "fixed", bottom: 16, left: 16 }}
+            >
+              {t("result_count", {
+                resultCount: formatNumber(itemsCount),
+              })}
+              , {t("go_up_button")} <ArrowUpIcon />
+            </Button>
+          )}
         </div>
 
         <div className="catalogue__filters-container">