Final text revision and added a vscode tasks to automatically extract text from code.

frontend/i18next-parser.config.mjs

@@ -0,0 +1,108 @@
+// i18next-parser.config.js
+
+export default {
+    contextSeparator: '_',
+    // Key separator used in your translation keys
+  
+    createOldCatalogs: true,
+    // Save the \_old files
+  
+    defaultNamespace: 'translation',
+    // Default namespace used in your i18next config
+  
+    defaultValue: '',
+    // Default value to give to keys with no value
+    // You may also specify a function accepting the locale, namespace, key, and value as arguments
+  
+    indentation: 2,
+    // Indentation of the catalog files
+  
+    keepRemoved: false,
+    // Keep keys from the catalog that are no longer in code
+  
+    keySeparator: '.',
+    // Key separator used in your translation keys
+    // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+  
+    // see below for more details
+    lexers: {
+      hbs: ['HandlebarsLexer'],
+      handlebars: ['HandlebarsLexer'],
+  
+      htm: ['HTMLLexer'],
+      html: ['HTMLLexer'],
+  
+      mjs: ['JavascriptLexer'],
+      js: ['JavascriptLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
+      ts: ['JavascriptLexer'],
+      jsx: ['JsxLexer'],
+      tsx: ['JsxLexer'],
+  
+      default: ['JavascriptLexer'],
+    },
+  
+    lineEnding: 'auto',
+    // Control the line ending. See options at https://github.com/ryanve/eol
+  
+    locales: ['en', 'fr', 'de', 'es', 'it'],
+    // An array of the locales in your applications
+  
+    namespaceSeparator: false,
+    // Namespace separator used in your translation keys
+    // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+  
+    output: '../backend/locales/$LOCALE.json',
+    // Supports $LOCALE and $NAMESPACE injection
+    // Supports JSON (.json) and YAML (.yml) file formats
+    // Where to write the locale files relative to process.cwd()
+  
+    pluralSeparator: '_',
+    // Plural separator used in your translation keys
+    // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+  
+    input: './src/**/*.{ts,tsx}',
+    // An array of globs that describe where to look for source files
+    // relative to the location of the configuration file
+  
+    sort: true,
+    // Whether or not to sort the catalog. Can also be a [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#parameters)
+  
+    verbose: false,
+    // Display info about the parsing including some stats
+  
+    failOnWarnings: false,
+    // Exit with an exit code of 1 on warnings
+  
+    failOnUpdate: false,
+    // Exit with an exit code of 1 when translations are updated (for CI purpose)
+  
+    customValueTemplate: null,
+    // If you wish to customize the value output the value as an object, you can set your own format.
+    // ${defaultValue} is the default value you set in your translation function.
+    // Any other custom property will be automatically extracted.
+    //
+    // Example:
+    // {
+    //   message: "${defaultValue}",
+    //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+    // }
+  
+    resetDefaultValueLocale: null,
+    // The locale to compare with default values to determine whether a default value has been changed.
+    // If this is set and a default value differs from a translation in the specified locale, all entries
+    // for that key across locales are reset to the default value, and existing translations are moved to
+    // the `_old` file.
+  
+    i18nextOptions: null,
+    // If you wish to customize options in internally used i18next instance, you can define an object with any
+    // configuration property supported by i18next (https://www.i18next.com/overview/configuration-options).
+    // { compatibilityJSON: 'v3' } can be used to generate v3 compatible plurals.
+  
+    yamlOptions: null,
+    // If you wish to customize options for yaml output, you can define an object here.
+    // Configuration options are here (https://github.com/nodeca/js-yaml#dump-object---options-).
+    // Example:
+    // {
+    //   lineWidth: -1,
+    // }
+  }

frontend/package.json

@@ -23,6 +23,7 @@
     "@types/webpack": "^5.28.0",
     "husky": "^8.0.1",
     "eslint": "^8.33.0",
+    "i18next-parser": "^7.6.0",
     "import-sort-style-module": "^6.0.0",
     "inquirer": "^8.2.4",
     "prettier": "^2.7.1",

frontend/src/plugin-loader.tsx

@@ -101,7 +101,7 @@ class PluginLoader extends Logger {
 
   public async notifyUpdates() {
     const versionInfo = await this.updateVersion();
-    const { t } = useTranslation('PluginLoader');
+    const { t } = useTranslation();
     if (versionInfo?.remote && versionInfo?.remote?.tag_name != versionInfo?.current) {
       this.toaster.toast({
         title: 'Decky',
@@ -127,7 +127,7 @@ class PluginLoader extends Logger {
       this.toaster.toast({
         title: 'Decky',
         //body: `Updates available for ${updates.size} plugin${updates.size > 1 ? 's' : ''}!`,
-        body: t('PluginLoader.plugin_update', updates.size.toString(10), { count: updates.size }),
+        body: t('PluginLoader.plugin_update', { count: updates.size }),
         onClick: () => Router.Navigate('/decky/settings/plugins'),
       });
     }
@@ -247,10 +247,10 @@ class PluginLoader extends Logger {
           version: version,
         });
       } catch (e) {
-        this.error(t('PluginLoader.plugin_load_error', name), e);
+        this.error(t('PluginLoader.plugin_load_error.message', { name: name }), e);
         const TheError: FC<{}> = () => (
           <>
-            {t('error')}:{' '}
+            {t('PluginLoader.error')}:{' '}
             <pre>
               <code>{e instanceof Error ? e.stack : JSON.stringify(e)}</code>
             </pre>
@@ -264,7 +264,7 @@ class PluginLoader extends Logger {
           icon: <FaExclamationCircle />,
         });
         this.toaster.toast({
-          title: t('PluginLoader.error_loading_plugin.toast', name),
+          title: t('PluginLoader.plugin_load_error.toast', { name: name }),
           body: '' + e,
           icon: <FaExclamationCircle />,
         });