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>

components/user/UserSignIn.vue

@@ -92,7 +92,7 @@ onMounted(async () => {
 <template>
   <form text-center justify-center items-center max-w-150 py6 flex="~ col gap-3" @submit.prevent="oauth">
     <div flex="~ center" mb2>
-      <img src="/logo.svg" w-12 h-12 mxa height="48" width="48" alt="logo">
+      <img src="/logo.svg" w-12 h-12 mxa height="48" width="48" :alt="$t('app_logo')" class="rtl-flip">
       <div text-3xl>
         {{ $t('action.sign_in') }}
       </div>
@@ -102,13 +102,14 @@ onMounted(async () => {
     </div>
     <div :class="error ? 'animate animate-shake-x animate-delay-100' : null">
       <div
+        dir="ltr"
         flex bg-gray:10 px4 py2 mxa rounded
         border="~ base" items-center font-mono
         focus:outline-none focus:ring="2 primary inset"
         relative
         :class="displayError ? 'border-red-600 dark:border-red-400' : null"
       >
-        <span text-secondary-light mr1>https://</span>
+        <span text-secondary-light me1>https://</span>
 
         <input
           ref="input"
@@ -134,7 +135,7 @@ onMounted(async () => {
           class="max-h-[8rem]"
         >
           <button
-            v-for="name, idx in filteredServers"
+            v-for="(name, idx) in filteredServers"
             :id="toSelector(name)"
             :key="name"
             :value="name"
@@ -155,7 +156,7 @@ onMounted(async () => {
       </div>
     </div>
     <div text-secondary text-sm flex>
-      <div i-ri:lightbulb-line mr-1 />
+      <div i-ri:lightbulb-line me-1 />
       <span>
         <i18n-t keypath="user.tip_no_account">
           <a href="https://joinmastodon.org/servers" target="_blank" hover="underline text-primary">{{ $t('user.tip_register_account') }}</a>
@@ -163,7 +164,7 @@ onMounted(async () => {
       </span>
     </div>
     <button flex="~ row" gap-x-2 items-center btn-solid mt2 :disabled="!server || busy">
-      <span aria-hidden="true" inline-block :class="busy ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:login-circle-line'" />
+      <span aria-hidden="true" inline-block :class="busy ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:login-circle-line'" class="rtl-flip" />
       {{ $t('action.sign_in') }}
     </button>
   </form>

components/user/UserSwitcher.vue

@@ -53,7 +53,7 @@ const switchUser = (user: UserLogin) => {
       <CommonDropdownItem
         v-if="isMastoInitialised && currentUser"
         :text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
-        icon="i-ri:logout-box-line"
+        icon="i-ri:logout-box-line rtl-flip"
         @click="signout"
       />
     </div>