chore: Translate birthday

Untested, Rebased exclusive feature.
null2264 · Oct 26, 2023 · ec246d6 · ec246d6
1 parent cd2f8b7
commit ec246d6
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 28 deletions.
diff --git a/src/locales/en-US/app.ftl b/src/locales/en-US/app.ftl
@@ -13,8 +13,12 @@
 # - MenuItem
 #   ID convention: "module-ComponentName--string-summary--MenuItem"
 #   Formatting: <icon></icon><wrapper>TEXT GOES HERE!</wrapper><emblem></emblem>
+# - Icon
+#   ID convention: "module-ComponentName--string-summary--Icon"
+#   Formatting: <icon></icon>TEXT GOES HERE!
 
 ### Terms
+# You don't need to add every new term here, just add if needed (e.g. the term is commonly used).
 -back =
   { $case ->
     *[title] Back
@@ -56,9 +60,18 @@ ui-CardHeader--back =
 account-Badge--admin = Admin
 account-Badge--bot = Bot
 account-Badge--moderator = Moderator
+-birthday-date =
+  { $suffix ->
+    *[icon] <icon></icon>{ DATETIME($date, year: "numeric", month: "short", day: "numeric") }
+    [text] Born { DATETIME($date, year: "numeric", month: "short", day: "numeric") }
+  }
+account-Birthday--date--Icon = { -birthday-date(suffix: "icon") } 
+  .title = { -birthday-date(suffix: "text") }
+account-Birthday--date = { -birthday-date(suffix: "text") }
+  .title = { -birthday-date(suffix: "text") }
+account-Birthday--celebration = Birthday is today!
 account-Header--manage-list--MenuItem = <icon></icon><wrapper>Add or Remove from lists</wrapper><emblem></emblem>
 
-account-birthday = Born { $date }
 account-birthday-today = Birthday is today!
 account-block = Block @{ $name }
 account-block-domain = Hide everything from { $domain }

diff --git a/src/locales/id-ID/app.ftl b/src/locales/id-ID/app.ftl
@@ -26,6 +26,16 @@ ui-CardHeader--back =
 
 # Components that related to Account such as profile, hover card.
 
+-birthday-date =
+  { $suffix ->
+    *[icon] <icon></icon>{ DATETIME($date, year: "numeric", month: "short", day: "numeric") }
+    [text] Lahir tanggal { DATETIME($date, year: "numeric", month: "short", day: "numeric") }
+  }
+account-Birthday--date--Icon = { -birthday-date(suffix: "icon") } 
+  .title = { -birthday-date(suffix: "text") }
+account-Birthday--date = { -birthday-date(suffix: "text") }
+  .title = { -birthday-date(suffix: "text") }
+account-Birthday--celebration = Lahir hari ini!
 account-Header--manage-list--MenuItem = <icon></icon><wrapper>Tambah atau Hapus dari daftar</wrapper><emblem></emblem>
 
 account-birthday = Born { $date }

diff --git a/src/locales/ja-JP/app.ftl b/src/locales/ja-JP/app.ftl
@@ -26,10 +26,18 @@ ui-CardHeader--back =
 
 # Components that related to Account such as profile, hover card.
 
+-birthday-date =
+  { $suffix ->
+    *[icon] <icon></icon>{ DATETIME($date, year: "numeric", month: "short", day: "numeric") }
+    [text] 生年月日 { DATETIME($date, year: "numeric", month: "short", day: "numeric") }
+  }
+account-Birthday--date--Icon = { -birthday-date(suffix: "icon") } 
+  .title = { -birthday-date(suffix: "text") }
+account-Birthday--date = { -birthday-date(suffix: "text") }
+  .title = { -birthday-date(suffix: "text") }
+account-Birthday--celebration = 本日は誕生日です!
 account-Header--manage-list--MenuItem = <icon></icon><wrapper>リストから追加または外す</wrapper><emblem></emblem>
 
-account-birthday = Born { $date }
-account-birthday-today = Birthday is today!
 account-block = Block @{ $name }
 account-block-domain = Hide everything from { $domain }
 account-blocked = Blocked

diff --git a/src/soapbox/features/birthdays/account.tsx b/src/soapbox/features/birthdays/account.tsx
@@ -1,44 +1,44 @@
+import { Localized } from '@fluent/react';
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 
 import { useAccount } from 'soapbox/api/hooks';
 import AccountComponent from 'soapbox/components/account';
 import Icon from 'soapbox/components/icon';
 import { HStack } from 'soapbox/components/ui';
 
-const messages = defineMessages({
-  birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
-});
-
 interface IAccount {
   accountId: string
 }
 
 const Account: React.FC<IAccount> = ({ accountId }) => {
-  const intl = useIntl();
   const { account } = useAccount(accountId);
 
   if (!account) return null;
 
   const birthday = account.pleroma?.birthday;
   if (!birthday) return null;
 
-  const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'short', year: 'numeric' });
-
   return (
     <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
       <div className='w-full'>
         <AccountComponent account={account} withRelationship={false} />
       </div>
-      <div
-        className='flex items-center gap-0.5'
-        title={intl.formatMessage(messages.birthday, {
-          date: formattedBirthday,
-        })}
+      {/* TODO: Test this, Akkoma don't have birthday feature */}
+      <Localized
+        id='account-Birthday--date--Icon'
+        vars={{ date: birthday }}
+        attrs={{ title: true }}
+        elems={{
+          icon: <Icon src={require('@tabler/icons/balloon.svg')} />,
+        }}
       >
-        <Icon src={require('@tabler/icons/balloon.svg')} />
-        {formattedBirthday}
-      </div>
+        <div
+          className='flex items-center gap-0.5'
+          title={'Born $date'}
+        >
+          {'<icon></icon>$date'}
+        </div>
+      </Localized>
     </HStack>
   );
 };

diff --git a/src/soapbox/features/ui/components/profile-info-panel.tsx b/src/soapbox/features/ui/components/profile-info-panel.tsx
@@ -93,8 +93,6 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
     const birthday = account?.pleroma?.birthday;
     if (!birthday) return null;
 
-    const formattedBirthday = intl.formatDate(birthday, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' });
-
     const date = new Date(birthday);
     const today = new Date();
 
@@ -107,13 +105,15 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           className='h-4 w-4 text-gray-800 dark:text-gray-200'
         />
 
-        <Text size='sm'>
-          {hasBirthday ? (
-            <FormattedMessage id='account.birthday_today' defaultMessage='Birthday is today!' />
-          ) : (
-            <FormattedMessage id='account.birthday' defaultMessage='Born {date}' values={{ date: formattedBirthday }} />
-          )}
-        </Text>
+        {/* TODO: Test this, Akkoma don't have birthday feature */}
+        <Localized
+          id={'account-Birthday--' + (hasBirthday ? 'celebration' : 'date')}
+          vars={{ date: birthday }}
+        >
+          <Text size='sm'>
+            {'Birthday'}
+          </Text>
+        </Localized>
       </HStack>
     );
   };