Merge pull request #4687 from h3poteto/iss-4653/locale

refs #4653 Add language settings

locales/en/translation.json

@@ -21,9 +21,11 @@
   "accounts": {
     "new": {
       "title": "Add account",
+      "domain": "Domain",
       "sign_in": "Sign in",
       "authorize": "Authorize"
-    }
+    },
+    "remove": "Remove"
   },
   "notification": {
     "favourite": {
@@ -105,5 +107,9 @@
     "timeline": "Timeline",
     "followers": "Followers",
     "followings": "Followings"
+  },
+  "settings": {
+    "title": "Settings",
+    "language": "Language"
   }
 }

renderer/components/Settings.tsx

@@ -0,0 +1,64 @@
+import { localeType } from '@/utils/i18n'
+import { Label, Modal, Select } from 'flowbite-react'
+import { ChangeEvent, useEffect, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+
+type Props = {
+  opened: boolean
+  close: () => void
+  reloadSettings: () => void
+}
+
+const languages = [
+  {
+    label: 'English',
+    value: 'en'
+  },
+  {
+    label: '日本語',
+    value: 'ja'
+  }
+]
+
+export default function Settings(props: Props) {
+  const [language, setLanguage] = useState<localeType>('en')
+
+  useEffect(() => {
+    if (typeof localStorage !== 'undefined') {
+      const lang = localStorage.getItem('language')
+      setLanguage(lang as localeType)
+    }
+  }, [])
+
+  const languageChanged = (e: ChangeEvent<HTMLSelectElement>) => {
+    setLanguage(e.target.value as localeType)
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('language', e.target.value)
+    }
+    props.reloadSettings()
+  }
+
+  return (
+    <Modal show={props.opened} onClose={props.close}>
+      <Modal.Header>
+        <FormattedMessage id="settings.title" />
+      </Modal.Header>
+      <Modal.Body>
+        <div className="mb-2">
+          <Label htmlFor="language">
+            <FormattedMessage id="settings.language" />
+          </Label>
+        </div>
+        <div>
+          <Select id="language" onChange={languageChanged} defaultValue={language}>
+            {languages.map(lang => (
+              <option key={lang.value} value={lang.value}>
+                {lang.label}
+              </option>
+            ))}
+          </Select>
+        </div>
+      </Modal.Body>
+    </Modal>
+  )
+}

renderer/components/accounts/New.tsx

@@ -72,7 +72,9 @@ export default function New(props: NewProps) {
             {sns === null && (
               <>
                 <div className="block">
-                  <Label htmlFor="domain" value="Domain" />
+                  <Label htmlFor="domain">
+                    <FormattedMessage id="accounts.new.domain" />
+                  </Label>
                 </div>
                 <TextInput id="domain" placeholder="mastodon.social" required type="text" />
                 <Button onClick={checkDomain}>

renderer/components/layouts/account.tsx

@@ -1,12 +1,14 @@
-import { useEffect, useRef, useState } from 'react'
-import { FaPlus } from 'react-icons/fa6'
+import { useContext, useEffect, useRef, useState } from 'react'
+import { FaGear, FaPlus } from 'react-icons/fa6'
 import { Account, db } from '@/db'
 import NewAccount from '@/components/accounts/New'
+import Settings from '@/components/Settings'
 import { Avatar, Dropdown } from 'flowbite-react'
 import { useRouter } from 'next/router'
-import { useIntl } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import generateNotification from '@/utils/notification'
 import generator, { Entity, WebSocketInterface } from 'megalodon'
+import { Context } from '@/utils/i18n'
 
 type LayoutProps = {
   children: React.ReactNode
@@ -15,11 +17,14 @@ type LayoutProps = {
 export default function Layout({ children }: LayoutProps) {
   const [accounts, setAccounts] = useState<Array<Account>>([])
   const [openNewModal, setOpenNewModal] = useState(false)
+  const [openSettings, setOpenSettings] = useState(false)
+  const { switchLang } = useContext(Context)
   const router = useRouter()
   const { formatMessage } = useIntl()
   const streamings = useRef<Array<WebSocketInterface>>([])
 
   useEffect(() => {
+    loadSettings()
     const fn = async () => {
       const acct = await db.accounts.toArray()
       setAccounts(acct)
@@ -95,32 +100,62 @@ export default function Layout({ children }: LayoutProps) {
     }
   }
 
+  const loadSettings = () => {
+    if (typeof localStorage !== 'undefined') {
+      const lang = localStorage.getItem('language')
+      switchLang(lang)
+    }
+  }
+
   return (
     <div className="app flex flex-col min-h-screen">
       <main className="flex w-full box-border my-0 mx-auto min-h-screen">
-        <aside className="w-16 bg-gray-900">
-          {accounts.map(account => (
-            <div key={account.id} className={selectedClassName(account.id)}>
-              <Avatar
-                alt={account.domain}
-                img={account.avatar}
-                rounded
-                key={account.id}
-                className="py-2"
-                onClick={() => openAccount(account.id)}
-                onContextMenu={() => openContextMenu(account.id)}
-              />
-              <Dropdown label="" dismissOnClick={true} renderTrigger={() => dropdownTrigger(account.id)}>
-                <Dropdown.Item onClick={() => removeAccount(account.id)}>Remove</Dropdown.Item>
+        <aside className="w-16 bg-gray-900 flex flex-col justify-between">
+          <div>
+            {accounts.map(account => (
+              <div key={account.id} className={selectedClassName(account.id)}>
+                <Avatar
+                  alt={account.domain}
+                  img={account.avatar}
+                  rounded
+                  key={account.id}
+                  className="py-2"
+                  onClick={() => openAccount(account.id)}
+                  onContextMenu={() => openContextMenu(account.id)}
+                />
+                <Dropdown label="" dismissOnClick={true} renderTrigger={() => dropdownTrigger(account.id)}>
+                  <Dropdown.Item onClick={() => removeAccount(account.id)}>
+                    <FormattedMessage id="accounts.remove" />
+                  </Dropdown.Item>
+                </Dropdown>
+              </div>
+            ))}
+            <button className="py-4 px-6 items-center" onClick={() => setOpenNewModal(true)}>
+              <FaPlus className="text-gray-400" />
+            </button>
+            <NewAccount opened={openNewModal} close={closeNewModal} />
+          </div>
+          <div className="settings text-gray-400 py-4 px-6 items-center">
+            <div className="relative cursor-pointer">
+              <Dropdown
+                label=""
+                dismissOnClick
+                renderTrigger={() => (
+                  <span>
+                    <FaGear />
+                  </span>
+                )}
+                placement="right-start"
+              >
+                <Dropdown.Item onClick={() => setOpenSettings(true)}>
+                  <FormattedMessage id="settings.title" />{' '}
+                </Dropdown.Item>
               </Dropdown>
             </div>
-          ))}
-          <button className="py-4 px-6 items-center" onClick={() => setOpenNewModal(true)}>
-            <FaPlus className="text-gray-400" />
-          </button>
-          <NewAccount opened={openNewModal} close={closeNewModal} />
+          </div>
         </aside>
         {children}
+        <Settings opened={openSettings} close={() => setOpenSettings(false)} reloadSettings={loadSettings} />
       </main>
     </div>
   )

renderer/utils/i18n.tsx

@@ -1,9 +1,10 @@
 import en from '../../locales/en/translation.json'
+import ja from '../../locales/ja/translation.json'
 import { flattenMessages } from './flattenMessage'
 import { createContext, useState } from 'react'
 import { IntlProvider } from 'react-intl'
 
-export type localeType = 'en' | 'ja' | 'it' | 'pt-BR' | 'fr'
+export type localeType = 'en' | 'ja'
 
 type Props = {
   children: React.ReactNode
@@ -16,11 +17,15 @@ interface Lang {
 export const Context = createContext<Lang>({} as Lang)
 
 export const IntlProviderWrapper: React.FC<Props> = props => {
-  const langs = [{ locale: 'en', messages: flattenMessages(en) }]
+  const langs = [
+    { locale: 'en', messages: flattenMessages(en) },
+    { locale: 'ja', messages: flattenMessages(ja) }
+  ]
   const [lang, setLang] = useState(langs[0])
 
   const switchLang = (locale: string) => {
     const changeLang = langs.find(lang => lang.locale === locale)
+    console.log(changeLang)
     if (changeLang == null) {
       return
     }