Incorporate i18n into UI elements (#1471)

* Update zh-tw string table (till 975343d2)
* Prepare localization table
* Implement i18n for Performers & Tags
* Add "add" action strings
* Use Lodash merge for deep merging language JSONs

The original implementation does not properly merge language files, causing unexpected localization string fallback behavior.

* Localize pagination strings
* Use Field name value as null id fallback

...otherwise FormattedMessage is gonna throw when the ID is null

* Use localized "Path" string for all instances
* Localize the "Interface" tab under settings
* Localize scene & performer cards
* Rename locale folder for better compatibility with i18n-ally
* Localize majority of the categories and features

ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "react-bootstrap";
+import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { mutateReloadPlugins, usePlugins } from "src/core/StashService";
 import { useToast } from "src/hooks";
@@ -8,6 +9,8 @@ import { CollapseButton, Icon, LoadingIndicator } from "src/components/Shared";
 
 export const SettingsPluginsPanel: React.FC = () => {
   const Toast = useToast();
+  const intl = useIntl();
+
   const { data, loading } = usePlugins();
 
   async function onReloadPlugins() {
@@ -58,11 +61,15 @@ export const SettingsPluginsPanel: React.FC = () => {
 
     return (
       <div className="mt-2">
-        <h5>Hooks</h5>
+        <h5>
+          <FormattedMessage id="config.plugins.hooks" />
+        </h5>
         {hooks.map((h) => (
           <div key={`${h.name}`} className="mb-3">
             <h6>{h.name}</h6>
-            <CollapseButton text="Triggers on">
+            <CollapseButton
+              text={intl.formatMessage({ id: "config.plugins.triggers_on" })}
+            >
               <ul>
                 {h.hooks?.map((hh) => (
                   <li>
@@ -82,14 +89,18 @@ export const SettingsPluginsPanel: React.FC = () => {
 
   return (
     <>
-      <h3>Plugins</h3>
+      <h3>
+        <FormattedMessage id="config.categories.plugins" />
+      </h3>
       <hr />
       {renderPlugins()}
       <Button onClick={() => onReloadPlugins()}>
         <span className="fa-icon">
           <Icon icon="sync-alt" />
         </span>
-        <span>Reload plugins</span>
+        <span>
+          <FormattedMessage id="actions.reload_plugins" />
+        </span>
       </Button>
     </>
   );