feat(i18n): add ui localization (#2279)

Co-authored-by: TheElixZammuto <6505622+TheElixZammuto@users.noreply.github.com>

docs/source/contributing/localization.rst

@@ -30,42 +30,74 @@ localization there.
 
 Extraction
 ----------
-There should be minimal cases where strings need to be extracted from source code; however it may be necessary in some
-situations. For example if a system tray icon is added it should be localized as it is user interfacing.
 
-- Wrap the string to be extracted in a function as shown.
-   .. code-block:: cpp
+.. tab:: UI
 
-      #include <boost/locale.hpp>
-      #include <string>
+   Sunshine uses `Vue I18n <https://vue-i18n.intlify.dev/>`__ for localizing the UI.
+   The following is a simple example of how to use it.
 
-      std::string msg = boost::locale::translate("Hello world!");
+   - Add the string to `src_assets/common/assets/web/public/assets/locale/en.json`, in English.
+      .. code-block:: json
 
-.. tip:: More examples can be found in the documentation for
-   `boost locale <https://www.boost.org/doc/libs/1_70_0/libs/locale/doc/html/messages_formatting.html>`__.
+         {
+           "index": {
+             "welcome": "Hello, Sunshine!"
+           }
+         }
 
-.. warning:: This is for information only. Contributors should never include manually updated template files, or
-   manually compiled language files in Pull Requests.
+      .. note:: The json keys should be sorted alphabetically. You can use `jsonabc <https://novicelab.org/jsonabc/>`__
+         to sort the keys.
 
-Strings are automatically extracted from the code to the `locale/sunshine.po` template file. The generated file is
-used by CrowdIn to generate language specific template files. The file is generated using the
-`.github/workflows/localize.yml` workflow and is run on any push event into the `nightly` branch. Jobs are only run if
-any of the following paths are modified.
+   - Use the string in a Vue component.
+      .. code-block:: html
 
-.. code-block:: yaml
+         <template>
+           <div>
+             <p>{{ $t('index.welcome') }}</p>
+           </div>
+         </template>
 
-   - 'src/**'
+   .. tip:: More formatting examples can be found in the
+      `Vue I18n guide <https://kazupon.github.io/vue-i18n/guide/formatting.html>`__.
 
-When testing locally it may be desirable to manually extract, initialize, update, and compile strings. Python is
-required for this, along with the python dependencies in the `./scripts/requirements.txt` file. Additionally,
-`xgettext <https://www.gnu.org/software/gettext/>`__ must be installed.
+.. tab:: C++
 
-**Extract, initialize, and update**
-   .. code-block:: bash
+   There should be minimal cases where strings need to be extracted from C++ source code; however it may be necessary in
+   some situations. For example the system tray icon could be localized as it is user interfacing.
 
-      python ./scripts/_locale.py --extract --init --update
+   - Wrap the string to be extracted in a function as shown.
+      .. code-block:: cpp
 
-**Compile**
-   .. code-block:: bash
+         #include <boost/locale.hpp>
+         #include <string>
 
-      python ./scripts/_locale.py --compile
+         std::string msg = boost::locale::translate("Hello world!");
+
+   .. tip:: More examples can be found in the documentation for
+      `boost locale <https://www.boost.org/doc/libs/1_70_0/libs/locale/doc/html/messages_formatting.html>`__.
+
+   .. warning:: This is for information only. Contributors should never include manually updated template files, or
+      manually compiled language files in Pull Requests.
+
+   Strings are automatically extracted from the code to the `locale/sunshine.po` template file. The generated file is
+   used by CrowdIn to generate language specific template files. The file is generated using the
+   `.github/workflows/localize.yml` workflow and is run on any push event into the `nightly` branch. Jobs are only run if
+   any of the following paths are modified.
+
+   .. code-block:: yaml
+
+      - 'src/**'
+
+   When testing locally it may be desirable to manually extract, initialize, update, and compile strings. Python is
+   required for this, along with the python dependencies in the `./scripts/requirements.txt` file. Additionally,
+   `xgettext <https://www.gnu.org/software/gettext/>`__ must be installed.
+
+   **Extract, initialize, and update**
+      .. code-block:: bash
+
+         python ./scripts/_locale.py --extract --init --update
+
+   **Compile**
+      .. code-block:: bash
+
+         python ./scripts/_locale.py --compile