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 <[email protected]>
Co-authored-by: Jean-Paul Khawam <[email protected]>
Co-authored-by: Daniel Roe <[email protected]>

components/account/AccountBigCard.vue

@@ -24,7 +24,7 @@ defineOptions({
       <!-- User info -->
       <div flex sm:flex-row flex-col flex-gap-2>
         <div flex items-center justify-between>
-          <div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ml--1>
+          <div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1>
             <AccountAvatar :account="account" />
           </div>
           <a block sm:hidden href="javascript:;" @click.stop>

components/account/AccountBigCardSkeleton.vue

@@ -7,7 +7,7 @@
         <!-- User info -->
         <div flex sm:flex-row flex-col flex-gap-2>
           <div flex items-center justify-between>
-            <div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ml--1 of-hidden bg-base>
+            <div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1 of-hidden bg-base>
               <div class="flex skeleton-loading-bg" w-full h-full />
             </div>
             <div block sm:hidden class="skeleton-loading-bg" h-8 w-30 rounded-full />

components/account/AccountHandle.vue

@@ -9,7 +9,7 @@ const serverName = $computed(() => getServerName(account))
 </script>
 
 <template>
-  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light>
+  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light dir="ltr">
     <!-- fix: #274 only line-clamp-1 can be used here, using text-ellipsis is not valid -->
     <span text-secondary>{{ getShortHandle(account) }}</span>
     <span v-if="serverName" text-secondary-light>@{{ serverName }}</span>

components/account/AccountHeader.vue

@@ -90,7 +90,7 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
             <AccountHandle :account="account" />
           </div>
         </div>
-        <div absolute top-18 right-0 flex gap-2 items-center>
+        <div absolute top-18 inset-ie-0 flex gap-2 items-center>
           <AccountMoreButton :account="account" :command="command" />
           <AccountFollowButton :account="account" :command="command" />
           <!-- Edit profile -->

components/account/AccountHoverCard.vue

@@ -11,7 +11,7 @@ const relationship = $(useRelationship(account))
 <template>
   <div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
     <div flex="~ gap2" items-center>
-      <NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pr5 mr-a>
+      <NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
         <AccountInfo :account="account" />
       </NuxtLink>
       <AccountFollowButton text-sm :account="account" :relationship="relationship" />

components/account/AccountInlineInfo.vue

@@ -12,7 +12,7 @@ const { link = true, avatar = true } = defineProps<{
   <AccountHoverWrapper :account="account">
     <NuxtLink
       :to="link ? getAccountRoute(account) : undefined"
-      :class="link ? 'text-link-rounded ml-0 pl-0' : ''"
+      :class="link ? 'text-link-rounded ms-0 ps-0' : ''"
       min-w-0 flex gap-2 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />

components/account/AccountPostsFollowers.vue

@@ -26,7 +26,7 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
         <i18n-t keypath="account.posts_count" :plural="account.statusesCount">
           <CommonTooltip v-if="statusesCountSR" :content="formatNumber(account.statusesCount)" placement="bottom">
             <span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
-            <span sr-only font-bold>{{ account.statusesCount }}</span>
+            <span sr-only font-bold>{{ formatNumber(account.statusesCount) }}</span>
           </CommonTooltip>
           <span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
         </i18n-t>
@@ -41,7 +41,7 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
         <i18n-t keypath="account.following_count" :plural="account.followingCount">
           <CommonTooltip v-if="followingCountSR" :content="formatNumber(account.followingCount)" placement="bottom">
             <span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
-            <span sr-only font-bold>{{ account.followingCount }}</span>
+            <span sr-only font-bold>{{ formatNumber(account.followingCount) }}</span>
           </CommonTooltip>
           <span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
         </i18n-t>
@@ -56,7 +56,7 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
         <i18n-t keypath="account.followers_count" :plural="account.followersCount">
           <CommonTooltip v-if="followersCountSR" :content="formatNumber(account.followersCount)" placement="bottom">
             <span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
-            <span sr-only font-bold>{{ account.followersCount }}</span>
+            <span sr-only font-bold>{{ formatNumber(account.followersCount) }}</span>
           </CommonTooltip>
           <span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
         </i18n-t>

components/command/CommandItem.vue

@@ -23,7 +23,7 @@ const {
     :data-index="index"
     @click="emits('activate')"
   >
-    <div v-if="cmd.icon" mr-2 :class="cmd.icon" />
+    <div v-if="cmd.icon" me-2 :class="cmd.icon" />
 
     <div class="flex-1 flex items-baseline gap-2">
       <div :class="{ 'font-medium': active }">

components/common/CommonCheckbox.vue

@@ -11,7 +11,7 @@ const { modelValue } = defineModel<{
 <template>
   <label
     class="common-checkbox flex items-center cursor-pointer py-1 text-md w-full gap-y-1"
-    :class="hover ? 'hover:bg-active ml--2 pl-4' : null"
+    :class="hover ? 'hover:bg-active ms--2 ps-4' : null"
     @click.prevent="modelValue = !modelValue"
   >
     <span
@@ -23,7 +23,7 @@ const { modelValue } = defineModel<{
       type="checkbox"
       sr-only
     >
-    <span ml-2 pointer-events-none>{{ label }}</span>
+    <span ms-2 pointer-events-none>{{ label }}</span>
   </label>
 </template>
 

components/common/CommonRadio.vue

@@ -12,7 +12,7 @@ const { modelValue } = defineModel<{
 <template>
   <label
     class="common-radio flex items-center cursor-pointer py-1 text-md w-full gap-y-1"
-    :class="hover ? 'hover:bg-active ml--2 pl-4' : null"
+    :class="hover ? 'hover:bg-active ms--2 ps-4' : null"
     @click.prevent="modelValue = value"
   >
     <span
@@ -25,7 +25,7 @@ const { modelValue } = defineModel<{
       :value="value"
       sr-only
     >
-    <span ml-2 pointer-events-none>{{ label }}</span>
+    <span ms-2 pointer-events-none>{{ label }}</span>
   </label>
 </template>
 

components/content/ContentRich.setup.ts

@@ -22,7 +22,7 @@ const useEmojis = computed(() => {
 
 export default () => h(
   'span',
-  { class: 'content-rich' },
+  { class: 'content-rich', dir: 'auto' },
   contentToVNode(content, {
     emojis: useEmojis.value,
     markdown,

components/conversation/ConversationCard.vue

@@ -15,7 +15,7 @@ const withAccounts = $computed(() =>
     <StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false">
       <template #meta>
         <div flex gap-2 text-sm text-secondary font-bold>
-          <p mr-1>
+          <p me-1>
             {{ $t('conversation.with') }}
           </p>
           <AccountAvatar v-for="account in withAccounts" :key="account.id" h-5 w-5 :account="account" />

components/help/HelpPreview.vue

@@ -44,7 +44,7 @@ const teams: Team[] = [
       <div i-ri:close-line />
     </button>
 
-    <img src="/logo.svg" w-20 h-20 height="80" width="80" mxa alt="logo">
+    <img :alt="$t('app_logo')" src="/logo.svg" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
     <h1 mxa text-4xl mb4>
       {{ $t('help.title') }}
     </h1>

components/main/MainContent.vue

@@ -21,7 +21,7 @@ defineProps<{
             :class="{ 'lg:hidden': backOnSmallScreen }"
             @click="$router.go(-1)"
           >
-            <div i-ri:arrow-left-line />
+            <div i-ri:arrow-left-line class="rtl-flip" />
           </NuxtLink>
           <div truncate>
             <slot name="title" />

components/modal/ModalMediaPreview.vue

@@ -55,12 +55,12 @@ function onClick(e: MouseEvent) {
       >
         <div i-ri:close-line text-white />
       </button>
-      <div bg="black/30" dark:bg="white/10" ml-4 my-auto text-white rounded-full flex="~ center" overflow-hidden>
+      <div bg="black/30" dark:bg="white/10" ms-4 my-auto text-white rounded-full flex="~ center" overflow-hidden>
         <div v-if="mediaPreviewList.length > 1" p="y-1 x-2" rounded-r-0 shrink-0>
           {{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
         </div>
         <p
-          v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-2" rounded-r-full line-clamp-1
+          v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-2" rounded-ie-full line-clamp-1
           ws-pre-wrap break-all :title="current.description" w-full
         >
           {{ current.description }}

components/nav/NavBottomMoreMenu.vue

@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
               hover="bg-gray-100 dark:(bg-gray-700 text-white)"
               @click="toggleDark()"
             >
-              <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl mr-4 rtl-mr-0 rtl-ml-4 !align-middle" />
+              <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl me-4 !align-middle" />
               {{ colorMode.value === 'light' ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
             </button>
             <NuxtLink
@@ -94,7 +94,7 @@ onBeforeUnmount(() => {
               hover="bg-gray-100 dark:(bg-gray-700 text-white)"
               to="/settings"
             >
-              <span class="i-ri:settings-2-line flex-shrink-0 text-xl mr-4 rtl-mr-0 rtl-ml-4 !align-middle" />
+              <span class="i-ri:settings-2-line flex-shrink-0 text-xl me-4 !align-middle" />
               {{ $t('nav.settings') }}
             </NuxtLink>
           </div>

components/nav/NavTitle.vue

@@ -15,7 +15,7 @@ const sub = env === 'local' ? 'dev' : env === 'staging' ? 'preview' : 'alpha'
     to="/"
     external
   >
-    <img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 lg:h-10>
+    <img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 lg:h-10 class="rtl-flip">
     <div hidden lg:block>
       {{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ sub }}</sup>
     </div>

components/notification/NotificationCard.vue

@@ -12,18 +12,14 @@ const { notification } = defineProps<{
       <NuxtLink :to="getAccountRoute(notification.account)">
         <div
           flex items-center absolute
-          pl-3 pr-4 left-0 rtl-left-none
-          rounded-br-3
-          rtl="pr-3 pl-4 right-0"
-          rtl-rounded-bl-3
-          rtl-rounded-br-0
+          ps-3 pe-4 inset-is-0
+          rounded-ie-be-3
           py-3 bg-base top-0
           :lang="notification.status?.language ?? undefined"
-          :dir="notification.status?.language ? 'auto' : 'ltr'"
         >
-          <div i-ri:user-follow-fill mr-1 color-primary />
+          <div i-ri:user-follow-fill me-1 color-primary />
           <ContentRich
-            text-primary mr-1 font-bold line-clamp-1 ws-pre-wrap break-all
+            text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
             :content="getDisplayName(notification.account, { rich: true })"
             :emojis="notification.account.emojis"
           />
@@ -34,25 +30,24 @@ const { notification } = defineProps<{
         <AccountBigCard
           :account="notification.account"
           :lang="notification.status?.language ?? undefined"
-          :dir="notification.status?.language ? 'auto' : 'ltr'"
         />
       </NuxtLink>
     </template>
     <template v-else-if="notification.type === 'admin.sign_up'">
       <div flex p3 items-center bg-shaded>
-        <div i-ri:admin-fill mr-1 color-purple />
+        <div i-ri:admin-fill me-1 color-purple />
         <ContentRich
-          text-purple mr-1 font-bold line-clamp-1 ws-pre-wrap break-all
+          text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
           :content="getDisplayName(notification.account, { rich: true })"
           :emojis="notification.account.emojis"
         />
         <span>{{ $t("notification.signed_up") }}</span>
       </div>
     </template>
     <template v-else-if="notification.type === 'follow_request'">
-      <div flex ml-4 items-center class="-top-2.5" absolute right-2 px-2>
-        <div i-ri:user-follow-fill text-xl mr-1 />
-        <AccountInlineInfo :account="notification.account" mr1 />
+      <div flex ms-4 items-center class="-top-2.5" absolute inset-ie-2 px-2>
+        <div i-ri:user-follow-fill text-xl me-1 />
+        <AccountInlineInfo :account="notification.account" me1 />
       </div>
       <!-- TODO: accept request -->
       <AccountCard :account="notification.account" />
@@ -61,8 +56,8 @@ const { notification } = defineProps<{
       <StatusCard :status="notification.status!" :faded="true">
         <template #meta>
           <div flex="~" gap-1 items-center mt1>
-            <div i-ri:heart-fill text-xl mr-1 color-red />
-            <AccountInlineInfo text-primary font-bold :account="notification.account" mr1 />
+            <div i-ri:heart-fill text-xl me-1 color-red />
+            <AccountInlineInfo text-primary font-bold :account="notification.account" me1 />
           </div>
         </template>
       </StatusCard>
@@ -71,8 +66,8 @@ const { notification } = defineProps<{
       <StatusCard :status="notification.status!" :faded="true">
         <template #meta>
           <div flex="~" gap-1 items-center mt1>
-            <div i-ri:repeat-fill text-xl mr-1 color-green />
-            <AccountInlineInfo text-primary font-bold :account="notification.account" mr1 />
+            <div i-ri:repeat-fill text-xl me-1 color-green />
+            <AccountInlineInfo text-primary font-bold :account="notification.account" me1 />
           </div>
         </template>
       </StatusCard>
@@ -81,8 +76,8 @@ const { notification } = defineProps<{
       <StatusCard :status="notification.status!" :faded="true">
         <template #meta>
           <div flex="~" gap-1 items-center mt1>
-            <div i-ri:edit-2-fill text-xl mr-1 text-secondary />
-            <AccountInlineInfo :account="notification.account" mr1 />
+            <div i-ri:edit-2-fill text-xl me-1 text-secondary />
+            <AccountInlineInfo :account="notification.account" me1 />
             <span ws-nowrap>
               {{ $t('notification.update_status') }}
             </span>

components/notification/NotificationGroupedFollow.vue

@@ -13,15 +13,12 @@ const isExpanded = ref(false)
 const lang = $computed(() => {
   return count > 1 || count === 0 ? undefined : items.items[0].status?.language
 })
-const dir = $computed(() => {
-  return lang ? 'auto' : 'ltr'
-})
 </script>
 
 <template>
-  <article flex flex-col relative :lang="lang ?? undefined" :dir="dir">
+  <article flex flex-col relative :lang="lang ?? undefined">
     <div flex items-center top-0 left-2 pt-2 px-3>
-      <div i-ri:user-follow-fill mr-3 color-primary aria-hidden="true" />
+      <div i-ri:user-follow-fill me-3 color-primary aria-hidden="true" />
       <template v-if="count > 1">
         <template v-if="addSR">
           <span
@@ -39,11 +36,11 @@ const dir = $computed(() => {
       </template>
       <template v-else>
         <ContentRich
-          text-primary mr-1 font-bold line-clamp-1 ws-pre-wrap break-all
+          text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
           :content="getDisplayName(items.items[0]?.account, { rich: true })"
           :emojis="items.items[0]?.account.emojis"
         />
-        <span mr-1 ws-nowrap>
+        <span me-1 ws-nowrap>
           {{ $t('notification.followed_you') }}
         </span>
       </template>

components/notification/NotificationGroupedLikes.vue

@@ -12,10 +12,10 @@ const { group } = defineProps<{
       <template #meta>
         <div flex flex-col gap-1 mt-1>
           <div v-for="like of group.likes" :key="like.account.id" flex>
-            <div v-if="like.reblog" i-ri:repeat-fill text-xl mr-2 color-green />
-            <div v-if="like.favourite && !like.reblog" i-ri:heart-fill text-xl mr-2 color-red />
-            <AccountInlineInfo text-primary font-bold :account="like.account" mr2 />
-            <div v-if="like.favourite && like.reblog" i-ri:heart-fill text-xl mr-2 color-red />
+            <div v-if="like.reblog" i-ri:repeat-fill text-xl me-2 color-green />
+            <div v-if="like.favourite && !like.reblog" i-ri:heart-fill text-xl me-2 color-red />
+            <AccountInlineInfo text-primary font-bold :account="like.account" me2 />
+            <div v-if="like.favourite && like.reblog" i-ri:heart-fill text-xl me-2 color-red />
           </div>
         </div>
       </template>

components/notification/NotificationPaginator.vue

@@ -99,13 +99,14 @@ function groupItems(items: Notification[]): NotificationSlot[] {
 }
 
 const { clearNotifications } = useNotifications()
+const { formatNumber } = useHumanReadableNumber()
 </script>
 
 <template>
   <CommonPaginator :paginator="paginator" :stream="stream" :eager="3" event-type="notification">
     <template #updater="{ number, update }">
       <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
-        {{ $t('timeline.show_new_items', [number]) }}
+        {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
       </button>
     </template>
     <template #items="{ items }">