Latest decky changed merged into i18n and updated translation.

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>
   );
 };