fix: layout fixes for RTL languages (#591)

* fix: rtl arrows on settings page

* fix: border on settings page for RTL languages

* fix: RTL fixes for logo, search box and logout icon

* fix: RTL layout bugs in conversations

* chore: remove rtl setting icon

* improve arabic locale

* add new entries to arabic locale

* chore: include number format

* fix: RTL layout on several pages

* fix: RTL layout of account header and sign in modal

* fix: always display account handle in LTR

* fix: move character counter in publish widget to left side for RTL

* fix: remove border-ss-none unocss rule

* fix: many RTL fixes

* fix: RTL fixes for many pages

* fix: use viewer's direction in all content

* chore: use new arabic plural rules

* chore: flip arrow on main content header

* chore: fix StatusPoll and show_new_items for zh-TW

* chore: StatusPoll tooltip on bottom

* chore: add `en` variants to i18n conf

* chore: update entry to use new plural rule

* fix: automatic content direction for status

* fix: direction for account handle

* fix: direction of polls

Co-authored-by: userquin <userquin@gmail.com>
Co-authored-by: Jean-Paul Khawam <jeanpaulkhawam@protonmail.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>

config/i18n.ts

@@ -1,9 +1,16 @@
 import type { NuxtI18nOptions } from '@nuxtjs/i18n'
-import type { DateTimeFormats } from '@intlify/core-base'
+import type { DateTimeFormats, NumberFormats, PluralizationRule, PluralizationRules } from '@intlify/core-base'
+
 import type { LocaleObject } from '#i18n'
 
+interface LocaleObjectData extends LocaleObject {
+  numberFormats?: NumberFormats
+  dateTimeFormats?: DateTimeFormats
+  pluralRule?: PluralizationRule
+}
+
 // @ts-expect-error dir is there, ts complaining
-const locales: LocaleObject[] = [
+const locales: LocaleObjectData[] = [
   {
     code: 'en-US',
     file: 'en-US.json',
@@ -50,27 +57,79 @@ const locales: LocaleObject[] = [
     name: 'Česky',
   },
   {
-    code: 'ar',
+    code: 'ar-EG',
     file: 'ar-EG.json',
     name: 'العربية',
     dir: 'rtl',
+    pluralRule: (choice: number) => {
+      const name = new Intl.PluralRules('ar-EG').select(choice)
+      return { zero: 0, one: 1, two: 2, few: 3, many: 4, other: 5 }[name]
+    },
   },
 ].sort((a, b) => a.code.localeCompare(b.code))
 
-const datetimeFormats = Object.keys(locales).reduce((acc, key) => {
-  acc[key] = {
-    short: {
-      dateStyle: 'short',
-      timeStyle: 'short',
-    },
-    long: {
-      dateStyle: 'long',
-      timeStyle: 'medium',
-    },
+const datetimeFormats = Object.values(locales).reduce((acc, data) => {
+  const dateTimeFormats = data.dateTimeFormats
+  if (dateTimeFormats) {
+    acc[data.code] = { ...dateTimeFormats }
+    delete data.dateTimeFormats
   }
+  else {
+    acc[data.code] = {
+      short: {
+        dateStyle: 'short',
+        timeStyle: 'short',
+      },
+      long: {
+        dateStyle: 'long',
+        timeStyle: 'medium',
+      },
+    }
+  }
+
   return acc
 }, <DateTimeFormats>{})
 
+const numberFormats = Object.values(locales).reduce((acc, data) => {
+  const numberFormats = data.numberFormats
+  if (numberFormats) {
+    acc[data.code] = { ...numberFormats }
+    delete data.numberFormats
+  }
+  else {
+    acc[data.code] = {
+      percentage: {
+        style: 'percent',
+        maximumFractionDigits: 1,
+      },
+      smallCounting: {
+        style: 'decimal',
+        maximumFractionDigits: 0,
+      },
+      kiloCounting: {
+        style: 'decimal',
+        maximumFractionDigits: 1,
+      },
+      millionCounting: {
+        style: 'decimal',
+        maximumFractionDigits: 2,
+      },
+    }
+  }
+
+  return acc
+}, <NumberFormats>{})
+
+const pluralRules = Object.values(locales).reduce((acc, data) => {
+  const pluralRule = data.pluralRule
+  if (pluralRule) {
+    acc[data.code] = pluralRule
+    delete data.pluralRule
+  }
+
+  return acc
+}, <PluralizationRules>{})
+
 export const i18n: NuxtI18nOptions = {
   locales,
   strategy: 'no_prefix',
@@ -82,6 +141,8 @@ export const i18n: NuxtI18nOptions = {
     fallbackWarn: false,
     missingWarn: false,
     datetimeFormats,
+    numberFormats,
+    pluralRules,
   },
   lazy: true,
 }