Merge pull request #2376 from hydralauncher/fix/add-big-picture-missing-locales

Fix/add big picture missing locales and nav overrides

Author: Hachi-R

src/big-picture/src/components/pages/game/game-settings-modal/cloud-tab.scss

@@ -58,6 +58,7 @@
 
 .game-cloud-settings-tab__saves-shell {
   display: flex;
+  flex-direction: column;
   flex: 1;
   min-height: 0;
   min-width: 0;
@@ -71,14 +72,16 @@
   gap: calc(var(--spacing-unit) * 4);
   width: 100%;
   min-width: 0;
+  max-height: 320px;
+  overflow-y: auto;
 }
 
 .game-cloud-settings-tab__saves-viewport {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   min-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-width: none;
+  overflow: hidden;
 
   &::-webkit-scrollbar {
     display: none;
@@ -170,7 +173,7 @@
   &__targets {
     list-style: none;
     margin: 0;
-    padding: 0;
+    padding: 4px;
     display: flex;
     flex-direction: column;
     gap: 8px;

src/big-picture/src/components/pages/game/game-settings-modal/cloud-tab.tsx

@@ -9,7 +9,6 @@ import type {
   GameArtifact,
   LibraryGame,
   LudusaviBackup,
-  MemcardRestoreTarget,
   MemoryCardSaveRecord,
 } from "@types";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -18,14 +17,13 @@ import { platformToSystem } from "@renderer/helpers";
 import {
   Button,
   Checkbox,
-  FocusItem,
   HorizontalFocusGroup,
-  Modal,
   VerticalFocusGroup,
 } from "../../../common";
-import { useBigPictureToast, useNavigation } from "../../../../hooks";
+import { useBigPictureToast } from "../../../../hooks";
 import { useUserDetails } from "../../../../hooks/use-user-details.hook";
 import { SettingsSection } from "../../../../pages/settings/settings-section";
+import { EmulationCloudRestoreModal } from "../../../../pages/settings/emulation/emulation-cloud-restore-modal";
 import { CloudSavesList } from "./cloud-saves-list";
 
 import "./cloud-tab.scss";
@@ -49,17 +47,6 @@ const RESTORE_MODAL_ACTIONS_REGION_ID = "emu-saves-restore-modal-actions";
 const RESTORE_MODAL_PICK_BUTTON_ID = "emu-saves-restore-pick-button";
 const RESTORE_MODAL_CONFIRM_BUTTON_ID = "emu-saves-restore-confirm";
 
-const PICK_FILTERS: Record<
-  EmulationSavePlatform,
-  { name: string; extensions: string[] }
-> = {
-  ps1: {
-    name: "PS1 Memory Card",
-    extensions: ["mcd", "mcr", "mc", "gme", "vgs", "vmp"],
-  },
-  ps2: { name: "PS2 Memory Card", extensions: ["ps2", "mcd", "mc2"] },
-};
-
 const recordKey = (record: MemoryCardSaveRecord): string =>
   `${record.cardFilePath}::${record.folderName}`;
 
@@ -88,143 +75,20 @@ function EmulationRestoreModal({
   onClose: () => void;
   onRestored: () => void;
 }>) {
-  const { t } = useTranslation("settings");
-  const { setFocus } = useNavigation();
   const { showErrorToast, showSuccessToast } = useBigPictureToast();
-  const [targets, setTargets] = useState<MemcardRestoreTarget[]>([]);
-  const [selectedTarget, setSelectedTarget] = useState<string | null>(null);
-  const [isBusy, setIsBusy] = useState(false);
-
-  useEffect(() => {
-    if (!save) return;
-    void globalThis.window.electron
-      .getMemcardRestoreTargets(platform)
-      .then((foundTargets) => {
-        setTargets(foundTargets);
-        setSelectedTarget(foundTargets[0]?.cardFilePath ?? null);
-      });
-  }, [platform, save]);
-
-  useEffect(() => {
-    if (!save) return;
-    const frameId = globalThis.window.requestAnimationFrame(() => {
-      setFocus(
-        selectedTarget
-          ? `emu-saves-target-${selectedTarget}`
-          : RESTORE_MODAL_PICK_BUTTON_ID
-      );
-    });
-    return () => globalThis.window.cancelAnimationFrame(frameId);
-  }, [save, selectedTarget, setFocus]);
-
-  const handlePickFile = useCallback(async () => {
-    const result = await globalThis.window.electron.showOpenDialog({
-      properties: ["openFile"],
-      filters: [PICK_FILTERS[platform]],
-    });
-    if (result.canceled || result.filePaths.length === 0) return;
-    const chosenPath = result.filePaths[0];
-    setTargets((current) =>
-      current.some((t) => t.cardFilePath === chosenPath)
-        ? current
-        : [
-            ...current,
-            {
-              cardFilePath: chosenPath,
-              cardLabel: chosenPath.split("/").pop() ?? chosenPath,
-            },
-          ]
-    );
-    setSelectedTarget(chosenPath);
-  }, [platform]);
-
-  const handleRestore = useCallback(async () => {
-    if (!save || !selectedTarget) return;
-    setIsBusy(true);
-    try {
-      const result = await globalThis.window.electron.restoreEmulationSave(
-        platform,
-        save.id,
-        selectedTarget
-      );
-      if (result.ok) {
-        showSuccessToast("Cloud save restored");
-        onRestored();
-        onClose();
-      } else {
-        showErrorToast("Failed to restore cloud save");
-      }
-    } finally {
-      setIsBusy(false);
-    }
-  }, [
-    onClose,
-    onRestored,
-    platform,
-    save,
-    selectedTarget,
-    showErrorToast,
-    showSuccessToast,
-  ]);
-
   return (
-    <Modal
-      visible={save !== null}
-      title={t("cloud_restore_title")}
-      description={t("cloud_restore_description")}
+    <EmulationCloudRestoreModal
+      save={save}
+      platform={platform}
       onClose={onClose}
-    >
-      <VerticalFocusGroup regionId={RESTORE_MODAL_REGION_ID}>
-        <div className="emu-save-modal__targets">
-          {targets.length === 0 ? (
-            <div className="emu-save-modal__empty">
-              {t("cloud_restore_no_cards")}
-            </div>
-          ) : (
-            targets.map((target) => {
-              const targetId = `emu-saves-target-${target.cardFilePath}`;
-              const isSelected = selectedTarget === target.cardFilePath;
-              return (
-                <FocusItem key={target.cardFilePath} id={targetId} asChild>
-                  <button
-                    type="button"
-                    className={`emu-save-modal__target${
-                      isSelected ? " emu-save-modal__target--selected" : ""
-                    }`}
-                    onClick={() => setSelectedTarget(target.cardFilePath)}
-                  >
-                    <span className="emu-save-modal__target-name">
-                      {target.cardLabel}
-                    </span>
-                    <span className="emu-save-modal__target-path">
-                      {target.cardFilePath}
-                    </span>
-                  </button>
-                </FocusItem>
-              );
-            })
-          )}
-        </div>
-        <HorizontalFocusGroup regionId={RESTORE_MODAL_ACTIONS_REGION_ID}>
-          <Button
-            focusId={RESTORE_MODAL_PICK_BUTTON_ID}
-            variant="secondary"
-            disabled={isBusy}
-            onClick={handlePickFile}
-          >
-            {t("cloud_restore_pick_file")}
-          </Button>
-          <Button
-            focusId={RESTORE_MODAL_CONFIRM_BUTTON_ID}
-            loading={isBusy}
-            disabled={!selectedTarget}
-            onClick={handleRestore}
-          >
-            {t("cloud_restore_confirm")}
-          </Button>
-        </HorizontalFocusGroup>
-      </VerticalFocusGroup>
-    </Modal>
+      onRestored={onRestored}
+      onRestoreSuccess={() => showSuccessToast("Cloud save restored")}
+      onRestoreError={() => showErrorToast("Failed to restore cloud save")}
+      regionId={RESTORE_MODAL_REGION_ID}
+      actionsRegionId={RESTORE_MODAL_ACTIONS_REGION_ID}
+      pickButtonId={RESTORE_MODAL_PICK_BUTTON_ID}
+      confirmButtonId={RESTORE_MODAL_CONFIRM_BUTTON_ID}
+    />
   );
 }
 
@@ -627,7 +491,7 @@ export function GameCloudSettingsTab({
                     <HorizontalFocusGroup asChild>
                       <div className="game-cloud-settings-tab__save-actions">
                         <Button
-                          focusId={GAME_CLOUD_SETTINGS_PRIMARY_CONTROL_ID}
+                          focusId={`${GAME_CLOUD_SETTINGS_PRIMARY_CONTROL_ID}-${key}`}
                           variant="secondary"
                           className="game-cloud-settings-tab__save-restore-button"
                           loading={uploading}

src/big-picture/src/components/pages/library/game-context-menu-items.tsx

@@ -27,7 +27,8 @@ export interface LibraryGameContextMenuHandlers {
 export function buildLibraryGameContextMenuItems(
   game: LibraryGame,
   handlers: LibraryGameContextMenuHandlers,
-  isFavoriteLoading: boolean
+  isFavoriteLoading: boolean,
+  t?: (key: string) => string
 ): ContextMenuItem[] {
   const {
     onLaunchOrDownload,
@@ -82,7 +83,7 @@ export function buildLibraryGameContextMenuItems(
   if (onOptions) {
     nextItems.push({
       id: "options",
-      label: "Game Options",
+      label: t ? t("game_options") : "Game Options",
       icon: <GearIcon size={18} />,
       onSelect: () => onOptions(game),
     });

src/big-picture/src/components/pages/library/game-context-menu.tsx

@@ -1,5 +1,6 @@
 import type { LibraryGame } from "@types";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 
 import { ContextMenu } from "../../common";
 import { buildLibraryGameContextMenuItems } from "./game-context-menu-items";
@@ -35,6 +36,7 @@ export function LibraryGameContextMenu({
   onUninstall,
   onRemoveFromLibrary,
 }: Readonly<LibraryGameContextMenuProps>) {
+  const { t } = useTranslation("big_picture");
   const items = useMemo(() => {
     if (!game) return [];
 
@@ -49,7 +51,8 @@ export function LibraryGameContextMenu({
         onUninstall,
         onRemoveFromLibrary,
       },
-      isFavoriteLoading
+      isFavoriteLoading,
+      t
     );
   }, [
     game,
@@ -61,6 +64,7 @@ export function LibraryGameContextMenu({
     onToggleFavorite,
     onUninstall,
     onViewAchievements,
+    t,
   ]);
 
   if (!game) {

src/big-picture/src/locales/en/translation.json

@@ -701,6 +701,7 @@
     "backup_info_unknown_device": "Unknown device",
     "freeze_backup": "Freeze backup",
     "unfreeze_backup": "Unfreeze backup",
+    "game_options": "Game Options",
     "delete_backup": "Delete backup",
     "cloud_backup_options": "Backup options",
     "uploading_backup": "Uploading backup…",

src/big-picture/src/locales/es/translation.json

@@ -701,6 +701,7 @@
     "backup_info_unknown_device": "Dispositivo desconocido",
     "freeze_backup": "Fijar copia",
     "unfreeze_backup": "Desfijar copia",
+    "game_options": "Opciones del juego",
     "delete_backup": "Eliminar copia",
     "cloud_backup_options": "Opciones de la copia",
     "cloud_delete_backup_description": "¿Eliminar de tus copias en la nube?"

src/big-picture/src/locales/fr/translation.json

@@ -693,6 +693,7 @@
     "backup_info_unknown_device": "Appareil inconnu",
     "freeze_backup": "Épingler la sauvegarde",
     "unfreeze_backup": "Désépingler la sauvegarde",
+    "game_options": "Options du jeu",
     "delete_backup": "Supprimer la sauvegarde",
     "cloud_backup_options": "Options de sauvegarde",
     "cloud_delete_backup_description": "Supprimer de vos sauvegardes cloud ?"

src/big-picture/src/locales/pt-BR/translation.json

@@ -701,6 +701,7 @@
     "backup_info_unknown_device": "Dispositivo desconhecido",
     "freeze_backup": "Fixar backup",
     "unfreeze_backup": "Desafixar backup",
+    "game_options": "Opções do jogo",
     "delete_backup": "Excluir backup",
     "cloud_backup_options": "Opções do backup",
     "cloud_delete_backup_description": "Excluir dos seus backups na nuvem?",

src/big-picture/src/locales/ru/translation.json

@@ -701,6 +701,7 @@
     "backup_info_unknown_device": "Неизвестное устройство",
     "freeze_backup": "Закрепить копию",
     "unfreeze_backup": "Открепить копию",
+    "game_options": "Настройки игры",
     "delete_backup": "Удалить копию",
     "cloud_backup_options": "Параметры копии",
     "cloud_delete_backup_description": "Удалить из ваших облачных резервных копий?"

src/big-picture/src/pages/home/home.tsx

@@ -2,6 +2,7 @@ import type { LibraryGame, ShopAssets } from "@types";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { MouseEventHandler } from "react";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { logger } from "@renderer/logger";
 
 import { HomePageHero } from "./hero";
@@ -83,6 +84,7 @@ export default function Home() {
   const navigate = useNavigate();
   const { setFocus } = useNavigation();
   const { showSuccessToast } = useBigPictureToast();
+  const { t } = useTranslation("big_picture");
   const { library, updateLibrary } = useLibrary();
   const { loadCollections } = useGameCollections();
 
@@ -302,7 +304,8 @@ export default function Home() {
           onUninstall: handleRequestRemoveFilesFromMenu,
           onRemoveFromLibrary: handleRequestRemoveFromLibraryFromMenu,
         },
-        favoriteLoadingGameId === game.id
+        favoriteLoadingGameId === game.id,
+        t
       );
     }
 
@@ -320,6 +323,7 @@ export default function Home() {
   }, [
     addingCatalogKey,
     favoriteLoadingGameId,
+    t,
     handleAddCatalogGameToLibrary,
     handleOpenCatalogDownloadOptions,
     handleCatalogShareFromMenu,