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/Shared/ImageInput.tsx

@@ -7,6 +7,7 @@ import {
   Popover,
   Row,
 } from "react-bootstrap";
+import { useIntl } from "react-intl";
 import { Modal } from ".";
 import Icon from "./Icon";
 
@@ -27,6 +28,7 @@ export const ImageInput: React.FC<IImageInput> = ({
 }) => {
   const [isShowDialog, setIsShowDialog] = useState(false);
   const [url, setURL] = useState("");
+  const intl = useIntl();
 
   if (!isEditing) return <div />;
 
@@ -58,13 +60,13 @@ export const ImageInput: React.FC<IImageInput> = ({
       <Modal
         show={!!isShowDialog}
         onHide={() => setIsShowDialog(false)}
-        header="Image URL"
+        header={intl.formatMessage({ id: "dialogs.set_image_url_title" })}
         accept={{ onClick: onConfirmURL, text: "Confirm" }}
       >
         <div className="dialog-content">
           <Form.Group controlId="url" as={Row}>
             <Form.Label column xs={3}>
-              URL
+              {intl.formatMessage({ id: "url" })}
             </Form.Label>
             <Col xs={9}>
               <Form.Control
@@ -73,7 +75,7 @@ export const ImageInput: React.FC<IImageInput> = ({
                   setURL(event.currentTarget.value)
                 }
                 value={url}
-                placeholder="URL"
+                placeholder={intl.formatMessage({ id: "url" })}
               />
             </Col>
           </Form.Group>
@@ -90,7 +92,7 @@ export const ImageInput: React.FC<IImageInput> = ({
             <Form.Label className="image-input">
               <Button variant="secondary">
                 <Icon icon="file" className="fa-fw" />
-                <span>From file...</span>
+                <span>{intl.formatMessage({ id: "actions.from_file" })}</span>
               </Button>
               <Form.Control
                 type="file"
@@ -102,7 +104,7 @@ export const ImageInput: React.FC<IImageInput> = ({
           <div>
             <Button className="minimal" onClick={() => setIsShowDialog(true)}>
               <Icon icon="link" className="fa-fw" />
-              <span>From URL...</span>
+              <span>{intl.formatMessage({ id: "actions.from_url" })}</span>
             </Button>
           </div>
         </>
@@ -120,7 +122,7 @@ export const ImageInput: React.FC<IImageInput> = ({
         rootClose
       >
         <Button variant="secondary" className="mr-2">
-          {text ?? "Set image..."}
+          {text ?? intl.formatMessage({ id: "actions.set_image" })}
         </Button>
       </OverlayTrigger>
     </>