Latest decky changed merged into i18n and updated translation.

frontend/package.json

@@ -44,7 +44,7 @@
   "dependencies": {
     "decky-frontend-lib": "^3.18.10",
     "i18next": "^22.0.6",
-    "i18next-fs-backend": "^2.0.0",
+    "i18next-http-backend": "^2.1.1",
     "react-file-icon": "^1.2.0",
     "react-i18next": "^12.0.0",
     "react-icons": "^4.4.0",

frontend/public/locales/en/PluginCard.json

@@ -0,0 +1,6 @@
+{
+  "plugin_version_label": "Plugin Version",
+  "plugin_full_access": "This plugin has full access to your Steam Deck.",
+  "plugin_install": "Install",
+  "plugin_no_desc": "No description provided."
+}

frontend/public/locales/en/PluginInstallModal.json

@@ -0,0 +1,7 @@
+{
+    "install_title": "Install {{artifact}}",
+    "install_desc": "Are you sure you want to install {{artifact}} {{version}}?",
+    "install_button_idle": "Install",
+    "install_button_processing": "Installing"
+
+}

frontend/public/locales/en/Store.json

@@ -0,0 +1,19 @@
+{
+    "store_tabs_title": "Browse",
+    "store_tabs_about": "About",
+
+    "store_tabs_alph_desc": "Alphabetical (A to Z)",
+    "store_tabs_alph_asce": "Alphabetical (Z to A)",
+
+    "store_sort_label": "Sort",
+    "store_sort_label_def": "Last Updated (Newest)",
+    "store_filter_label": "Filter",
+    "store_fiter_label_def": "All",
+    "store_search_label": "Search",
+
+    "store_testing_cta": "Please consider testing new plugins to help the Decky Loader team!",
+    "store_contrib_label": "Contributing",
+    "store_contrib_desc": "If you would like to contribute to the Decky Plugin Store, check the SteamDeckHomebrew/decky-plugin-template repository on GitHub. Information on development and distribution is available in the README.",
+    "store_source_label": "Source Code",
+    "store_source_desc": "All plugin source code is available on SteamDeckHomebrew/decky-plugin-database repository on GitHub."
+}

frontend/public/locales/en/plugin-loader.json

@@ -4,7 +4,7 @@
   "decky_update_available": "Update to {{tag_name}} available!",
   "plugin_update_one": "Updates available for 1 plugin!",
   "plugin_update_other": "Updates available for {{number}} plugins!",
-  "plugin_uninstall": "Uninstall {{name}}?",
+  "plugin_uninstall": "Are you sure you want to uninstall {{name}}?",
   "plugin_load_error": "Error loading plugin {{name}}",
   "plugin_load_error_toast": "Error loading {{name}}",
   "error": "Error",

frontend/public/locales/it/PluginCard.json

@@ -0,0 +1,6 @@
+{
+  "plugin_version_label": "Versione Plugin",
+  "plugin_full_access": "Questo pluugin ha accesso completo al tuo Steam Deck.",
+  "plugin_install": "Installa",
+  "plugin_no_desc": "Nessuna descrizione fornita."
+}

frontend/public/locales/it/PluginInstallModal.json

@@ -0,0 +1,7 @@
+{
+    "install_title": "Installa {{artifact}}",
+    "install_desc": "Sei sicuro di voler installare {{artifact}} {{version}}?",
+    "install_button_idle": "Installa",
+    "install_button_processing": "Installando"
+
+}

frontend/public/locales/it/Store.json

@@ -0,0 +1,19 @@
+{
+    "store_tabs_title": "Naviga",
+    "store_tabs_about": "About",
+
+    "store_tabs_alph_desc": "Alfabetico (A a Z)",
+    "store_tabs_alph_asce": "Alfabetico (Z a A)",
+
+    "store_sort_label": "Ordina",
+    "store_sort_label_def": "Ultimo aggiornato (Più recente)",
+    "store_filter_label": "Filtra",
+    "store_fiter_label_def": "Tutto",
+    "store_search_label": "Cerca",
+
+    "store_testing_cta": "Valuta la possibilità di testare nuovi plugin per aiutare il team di Decky Loader!",
+    "store_contrib_label": "Contribuisci",
+    "store_contrib_desc": "Se desideri contribuire allo store di Decky, puoi trovare un template caricato su GitHub all'indirizzo SteamDeckHomebrew/decky-plugin-template. Informazioni riguardo sviluppo e distribuzione sono disponibili nel README.",
+    "store_source_label": "Codice Sorgente",
+    "store_source_desc": "Tutto il codice sorgente dei plugin è disponibile su GitHub all'indirizzo SteamDeckHomebrew/decky-plugin-database"
+}

frontend/src/components/modals/PluginInstallModal.tsx

@@ -1,6 +1,9 @@
 import { ConfirmModal, Navigation, QuickAccessTab } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
 
+import { useTranslation } from 'react-i18next';
+const { t } = useTranslation('PluginInstallModal');
+
 interface PluginInstallModalProps {
   artifact: string;
   version: string;
@@ -26,13 +29,13 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, ha
       onCancel={async () => {
         await onCancel();
       }}
-      strTitle={`Install ${artifact}`}
-      strOKButtonText={loading ? 'Installing' : 'Install'}
+      strTitle={t("install_title", artifact)}
+      strOKButtonText={loading ? t("install_button_processing") : t("install_button_idle")}
     >
       {hash == 'False' ? (
         <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3>
       ) : (
-        `Are you sure you want to install ${artifact} ${version}?`
+        t("install_desc", artifact, version)
       )}
     </ConfirmModal>
   );

frontend/src/components/store/PluginCard.tsx

@@ -100,7 +100,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             plugin.description
           ) : (
             <span>
-              <i style={{ color: '#666' }}>No description provided.</i>
+              <i style={{ color: '#666' }}>{t("plugin_no_desc")}</i>
             </span>
           )}
         </span>
@@ -112,7 +112,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
               color: '#fee75c',
             }}
           >
-            <i>This plugin has full access to your Steam Deck.</i>{' '}
+            <i>{t("plugin_full_access")}</i>{' '}
             <a
               className="deckyStoreCardDescriptionRootLink"
               href="https://deckbrew.xyz/root"
@@ -149,7 +149,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                   layout="below"
                   onClick={() => requestPluginInstall(plugin.name, plugin.versions[selectedOption])}
                 >
-                  <span className="deckyStoreCardInstallText">Install</span>
+                  <span className="deckyStoreCardInstallText">{t("plugin_install")}</span>
                 </ButtonItem>
               </div>
               <div
@@ -166,7 +166,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                       label: version.name,
                     })) as SingleDropdownOption[]
                   }
-                  menuLabel="Plugin Version"
+                  menuLabel={t("plugin_version_label") as string}
                   selectedOption={selectedOption}
                   onChange={({ data }) => setSelectedOption(data)}
                 />

frontend/src/components/store/Store.tsx

@@ -10,6 +10,9 @@ import {
 } from 'decky-frontend-lib';
 import { FC, useEffect, useMemo, useState } from 'react';
 
+import { useTranslation } from 'react-i18next';
+const { t } = useTranslation('Store');
+
 import logo from '../../../assets/plugin_store.png';
 import Logger from '../../logger';
 import { StorePlugin, getPluginList } from '../../store';
@@ -54,13 +57,13 @@ const StorePage: FC<{}> = () => {
             }}
             tabs={[
               {
-                title: 'Browse',
+                title: t("store_tabs_title"),
                 content: <BrowseTab children={{ data: data }} />,
                 id: 'browse',
                 renderTabAddon: () => <span className={TabCount}>{data.length}</span>,
               },
               {
-                title: 'About',
+                title: t("store_tabs_about"),
                 content: <AboutTab />,
                 id: 'about',
               },
@@ -75,8 +78,8 @@ const StorePage: FC<{}> = () => {
 const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
   const sortOptions = useMemo(
     (): DropdownOption[] => [
-      { data: 1, label: 'Alphabetical (A to Z)' },
-      { data: 2, label: 'Alphabetical (Z to A)' },
+      { data: 1, label: t("store_tabs_alph_desc") },
+      { data: 2, label: t("store_tabs_alph_asce") },
     ],
     [],
   );
@@ -105,11 +108,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               width: '47.5%',
             }}
           >
-            <span className="DialogLabel">Sort</span>
+            <span className="DialogLabel">{t("store_sort_label")}</span>
             <Dropdown
-              menuLabel="Sort"
+              menuLabel={t("store_sort_label") as string}
               rgOptions={sortOptions}
-              strDefaultLabel="Last Updated (Newest)"
+              strDefaultLabel={t("store_sort_label_def") as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
             />
@@ -122,11 +125,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               marginLeft: 'auto',
             }}
           >
-            <span className="DialogLabel">Filter</span>
+            <span className="DialogLabel">{t("store_filter_label")}</span>
             <Dropdown
-              menuLabel="Filter"
+              menuLabel={t("store_filter_label")}
               rgOptions={filterOptions}
-              strDefaultLabel="All"
+              strDefaultLabel={t("store_fiter_label_def")}
               selectedOption={selectedFilter}
               onChange={(e) => setFilter(e.data)}
             />
@@ -136,7 +139,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
       <div style={{ justifyContent: 'center', display: 'flex' }}>
         <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}>
           <div style={{ width: '100%' }}>
-            <TextField label="Search" value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
+            <TextField label={t("store_search_label")} value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
           </div>
         </Focusable>
       </div>
@@ -151,11 +154,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               maxWidth: '100%',
             }}
           >
-            <span className="DialogLabel">Sort</span>
+            <span className="DialogLabel">{t("store_sort_label")}</span>
             <Dropdown
-              menuLabel="Sort"
+              menuLabel={t("store_sort_label") as string}
               rgOptions={sortOptions}
-              strDefaultLabel="Last Updated (Newest)"
+              strDefaultLabel={t("store_sort_label_def") as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
             />
@@ -165,7 +168,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
       <div style={{ justifyContent: 'center', display: 'flex' }}>
         <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}>
           <div style={{ width: '100%' }}>
-            <TextField label="Search" value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
+            <TextField label={t("store_search_label")} value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
           </div>
         </Focusable>
       </div>
@@ -216,7 +219,7 @@ const AboutTab: FC<{}> = () => {
       />
       <span className="deckyStoreAboutHeader">Testing</span>
       <span>
-        Please consider testing new plugins to help the Decky Loader team!{' '}
+        {t("store_testing_cta")}{' '}
         <a
           href="https://deckbrew.xyz/testing"
           target="_blank"
@@ -227,13 +230,12 @@ const AboutTab: FC<{}> = () => {
           deckbrew.xyz/testing
         </a>
       </span>
-      <span className="deckyStoreAboutHeader">Contributing</span>
+      <span className="deckyStoreAboutHeader">{t("store_contrib_label")}</span>
       <span>
-        If you would like to contribute to the Decky Plugin Store, check the SteamDeckHomebrew/decky-plugin-template
-        repository on GitHub. Information on development and distribution is available in the README.
+        {t("store_contrib_desc")}
       </span>
-      <span className="deckyStoreAboutHeader">Source Code</span>
-      <span>All plugin source code is available on SteamDeckHomebrew/decky-plugin-database repository on GitHub.</span>
+      <span className="deckyStoreAboutHeader">{t("store_source_label")}</span>
+      <span>{t("store_source_desc")}</span>
     </div>
   );
 };

frontend/src/i18n.ts

@@ -1,26 +1,12 @@
 import i18next from 'i18next';
-import Backend from 'i18next-fs-backend';
+import Backend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 
 i18next
-  .use(initReactI18next)
   .use(Backend)
+  .use(initReactI18next)
   .init({
     debug: true,
-    backend: {
-      // path where resources get loaded from, or a function
-      // returning a path:
-      // function(lngs, namespaces) { return customPath; }
-      // the returned path will interpolate lng, ns if provided like giving a static path
-      loadPath: '/home/deck/homebrew/locales/{{lng}}/{{ns}}.json',
-
-      // path to post missing resources
-      // addPath: '/locales/{{lng}}/{{ns}}.missing.json',
-
-      // if you use i18next-fs-backend as caching layer in combination with i18next-chained-backend, you can optionally set an expiration time
-      // an example on how to use it as cache layer can be found here: https://github.com/i18next/i18next-fs-backend/blob/master/example/caching/app.js
-      // expirationTime: 60 * 60 * 1000
-    },
     fallbackLng: 'en',
     fallbackNS: 'Common',
     lng: 'en',

frontend/src/locales/en/PluginCard.json

@@ -1,3 +0,0 @@
-{
-  "select_version": "Select a version"
-}

frontend/src/locales/it/PluginCard.json

@@ -1,3 +0,0 @@
-{
-  "select_version": "Seleziona una versione"
-}

frontend/src/plugin-loader.tsx

@@ -344,7 +344,7 @@ class PluginLoader extends Logger {
       fetchNoCors(url: string, request: any = {}) {
         let args = { method: 'POST', headers: {} };
         const req = { ...args, ...request, url, data: request.body };
-        req?.body && delete req.body
+        req?.body && delete req.body;
         return this.callServerMethod('http_request', req);
       },
       executeInTab(tab: string, runAsync: boolean, code: string) {