From 686c4f71bf930625af082ac5e14dc5f79f5c42eb Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Tue, 19 Jan 2021 02:17:14 +0000
Subject: [PATCH] feat(lang): add support for Chinese (Traditional) language

---
 src/components/Layout/LanguagePicker/index.tsx | 14 +++++++++-----
 src/context/LanguageContext.tsx                |  3 ++-
 src/pages/_app.tsx                             | 10 ++++++++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx
index 071f0506b..84532f00a 100644
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -23,7 +23,7 @@ const availableLanguages: AvailableLanguageObject = {
   },
   ja: {
     code: 'ja',
-    display: '日本語',
+    display: 'Japanese',
   },
   fr: {
     code: 'fr',
@@ -65,6 +65,10 @@ const availableLanguages: AvailableLanguageObject = {
     code: 'sv',
     display: 'Swedish',
   },
+  'zh-Hant': {
+    code: 'zh-Hant',
+    display: 'Chinese (Traditional)',
+  },
 };
 
 const LanguagePicker: React.FC = () => {
@@ -105,20 +109,20 @@ const LanguagePicker: React.FC = () => {
         leaveTo="transform opacity-0 scale-95"
       >
         <div
-          className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"
+          className="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg"
           ref={dropdownRef}
         >
-          <div className="py-2 px-2 rounded-md bg-gray-700 ring-1 ring-black ring-opacity-5">
+          <div className="px-2 py-2 bg-gray-700 rounded-md ring-1 ring-black ring-opacity-5">
             <div>
               <label
                 htmlFor="language"
-                className="block text-sm leading-5 font-medium text-gray-300 pb-2"
+                className="block pb-2 text-sm font-medium leading-5 text-gray-300"
               >
                 <FormattedMessage {...messages.changelanguage} />
               </label>
               <select
                 id="language"
-                className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 text-white bg-gray-700 border-gray-600 focus:outline-none focus:ring-indigo focus:border-blue-800 sm:text-sm sm:leading-5"
+                className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white bg-gray-700 border-gray-600 form-select focus:outline-none focus:ring-indigo focus:border-blue-800 sm:text-sm sm:leading-5"
                 onChange={(e) =>
                   setLocale && setLocale(e.target.value as AvailableLocales)
                 }
diff --git a/src/context/LanguageContext.tsx b/src/context/LanguageContext.tsx
index 1a6778bb4..ef68931e1 100644
--- a/src/context/LanguageContext.tsx
+++ b/src/context/LanguageContext.tsx
@@ -12,7 +12,8 @@ export type AvailableLocales =
   | 'it'
   | 'pt-BR'
   | 'sr'
-  | 'sv';
+  | 'sv'
+  | 'zh-Hant';
 
 interface LanguageContextProps {
   locale: AvailableLocales;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 172f7cbe3..5af86ac63 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -18,7 +18,7 @@ import { PublicSettingsResponse } from '../../server/interfaces/api/settingsInte
 import { SettingsProvider } from '../context/SettingsContext';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const loadLocaleData = (locale: string): Promise<any> => {
+const loadLocaleData = (locale: AvailableLocales): Promise<any> => {
   switch (locale) {
     case 'ja':
       return import('../i18n/locale/ja.json');
@@ -42,6 +42,8 @@ const loadLocaleData = (locale: string): Promise<any> => {
       return import('../i18n/locale/sr.json');
     case 'sv':
       return import('../i18n/locale/sv.json');
+    case 'zh-Hant':
+      return import('../i18n/locale/zh_Hant.json');
     default:
       return import('../i18n/locale/en.json');
   }
@@ -112,6 +114,10 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
               <ToastProvider components={{ Toast }}>
                 <Head>
                   <title>Overseerr</title>
+                  <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1"
+                  />
                 </Head>
                 <StatusChecker />
                 <UserContext initialUser={user}>{component}</UserContext>
@@ -192,7 +198,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     initialProps
   );
 
-  const messages = await loadLocaleData(locale);
+  const messages = await loadLocaleData(locale as AvailableLocales);
 
   return { ...appInitialProps, user, messages, locale, currentSettings };
 };