Preliminary step for RTL

src/app.jsx

@@ -132,6 +132,8 @@ setTimeout(() => {
     setTimeout(() => {
       if (Array.isArray(ICONS[icon])) {
         ICONS[icon][0]?.();
+      } else if (typeof ICONS[icon] === 'object') {
+        ICONS[icon].module?.();
       } else {
         ICONS[icon]?.();
       }

src/components/ICONS.jsx

@@ -6,8 +6,14 @@ export const ICONS = {
   'x-circle': () => import('@iconify-icons/mingcute/close-circle-line'),
   transfer: () => import('@iconify-icons/mingcute/transfer-4-line'),
   rocket: () => import('@iconify-icons/mingcute/rocket-line'),
-  'arrow-left': () => import('@iconify-icons/mingcute/arrow-left-line'),
-  'arrow-right': () => import('@iconify-icons/mingcute/arrow-right-line'),
+  'arrow-left': {
+    module: () => import('@iconify-icons/mingcute/arrow-left-line'),
+    rtl: true,
+  },
+  'arrow-right': {
+    module: () => import('@iconify-icons/mingcute/arrow-right-line'),
+    rtl: true,
+  },
   'arrow-up': () => import('@iconify-icons/mingcute/arrow-up-line'),
   'arrow-down': () => import('@iconify-icons/mingcute/arrow-down-line'),
   earth: () => import('@iconify-icons/mingcute/earth-line'),
@@ -16,8 +22,14 @@ export const ICONS = {
   'eye-close': () => import('@iconify-icons/mingcute/eye-close-line'),
   'eye-open': () => import('@iconify-icons/mingcute/eye-2-line'),
   message: () => import('@iconify-icons/mingcute/mail-line'),
-  comment: () => import('@iconify-icons/mingcute/chat-3-line'),
-  comment2: () => import('@iconify-icons/mingcute/comment-2-line'),
+  comment: {
+    module: () => import('@iconify-icons/mingcute/chat-3-line'),
+    rtl: true,
+  },
+  comment2: {
+    module: () => import('@iconify-icons/mingcute/comment-2-line'),
+    rtl: true,
+  },
   home: () => import('@iconify-icons/mingcute/home-3-line'),
   notification: () => import('@iconify-icons/mingcute/notification-line'),
   follow: () => import('@iconify-icons/mingcute/user-follow-line'),
@@ -31,23 +43,46 @@ export const ICONS = {
   gear: () => import('@iconify-icons/mingcute/settings-3-line'),
   more: () => import('@iconify-icons/mingcute/more-3-line'),
   more2: () => import('@iconify-icons/mingcute/more-1-fill'),
-  external: () => import('@iconify-icons/mingcute/external-link-line'),
-  popout: () => import('@iconify-icons/mingcute/external-link-line'),
-  popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],
+  external: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rtl: true,
+  },
+  popout: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rtl: true,
+  },
+  popin: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rotate: '180deg',
+    rtl: true,
+  },
   plus: () => import('@iconify-icons/mingcute/add-circle-line'),
-  'chevron-left': () => import('@iconify-icons/mingcute/left-line'),
-  'chevron-right': () => import('@iconify-icons/mingcute/right-line'),
+  'chevron-left': {
+    module: () => import('@iconify-icons/mingcute/left-line'),
+    rtl: true,
+  },
+  'chevron-right': {
+    module: () => import('@iconify-icons/mingcute/right-line'),
+    rtl: true,
+  },
   'chevron-down': () => import('@iconify-icons/mingcute/down-line'),
-  reply: [
-    () => import('@iconify-icons/mingcute/share-forward-line'),
-    '180deg',
-    'horizontal',
-  ],
+  reply: {
+    module: () => import('@iconify-icons/mingcute/share-forward-line'),
+    rotate: '180deg',
+    flip: 'horizontal',
+    rtl: true,
+  },
   thread: () => import('@iconify-icons/mingcute/route-line'),
-  group: () => import('@iconify-icons/mingcute/group-line'),
+  group: {
+    module: () => import('@iconify-icons/mingcute/group-line'),
+    rtl: true,
+  },
   bot: () => import('@iconify-icons/mingcute/android-2-line'),
   menu: () => import('@iconify-icons/mingcute/rows-4-line'),
-  list: () => import('@iconify-icons/mingcute/list-check-line'),
+  list: {
+    module: () => import('@iconify-icons/mingcute/list-check-line'),
+    rtl: true,
+  },
   search: () => import('@iconify-icons/mingcute/search-2-line'),
   hashtag: () => import('@iconify-icons/mingcute/hashtag-line'),
   info: () => import('@iconify-icons/mingcute/information-line'),
@@ -62,12 +97,21 @@ export const ICONS = {
   share: () => import('@iconify-icons/mingcute/share-2-line'),
   sparkles: () => import('@iconify-icons/mingcute/sparkles-line'),
   sparkles2: () => import('@iconify-icons/mingcute/sparkles-2-line'),
-  exit: () => import('@iconify-icons/mingcute/exit-line'),
+  exit: {
+    module: () => import('@iconify-icons/mingcute/exit-line'),
+    rtl: true,
+  },
   translate: () => import('@iconify-icons/mingcute/translate-line'),
   play: () => import('@iconify-icons/mingcute/play-fill'),
   trash: () => import('@iconify-icons/mingcute/delete-2-line'),
-  mute: () => import('@iconify-icons/mingcute/volume-mute-line'),
-  unmute: () => import('@iconify-icons/mingcute/volume-line'),
+  mute: {
+    module: () => import('@iconify-icons/mingcute/volume-mute-line'),
+    rtl: true,
+  },
+  unmute: {
+    module: () => import('@iconify-icons/mingcute/volume-line'),
+    rtl: true,
+  },
   block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
   unblock: [
     () => import('@iconify-icons/mingcute/forbid-circle-line'),
@@ -81,30 +125,51 @@ export const ICONS = {
   filters: () => import('@iconify-icons/mingcute/filter-line'),
   chart: () => import('@iconify-icons/mingcute/chart-line-line'),
   react: () => import('@iconify-icons/mingcute/react-line'),
-  layout4: () => import('@iconify-icons/mingcute/layout-4-line'),
+  layout4: {
+    module: () => import('@iconify-icons/mingcute/layout-4-line'),
+    rtl: true,
+  },
   layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
-  announce: () => import('@iconify-icons/mingcute/announcement-line'),
+  announce: {
+    module: () => import('@iconify-icons/mingcute/announcement-line'),
+    rtl: true,
+  },
   alert: () => import('@iconify-icons/mingcute/alert-line'),
   round: () => import('@iconify-icons/mingcute/round-fill'),
   'arrow-up-circle': () =>
     import('@iconify-icons/mingcute/arrow-up-circle-line'),
   'arrow-down-circle': () =>
     import('@iconify-icons/mingcute/arrow-down-circle-line'),
-  clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
+  clipboard: {
+    module: () => import('@iconify-icons/mingcute/clipboard-line'),
+    rtl: true,
+  },
   'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
   'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
   keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
   cloud: () => import('@iconify-icons/mingcute/cloud-line'),
-  month: () => import('@iconify-icons/mingcute/calendar-month-line'),
+  month: {
+    module: () => import('@iconify-icons/mingcute/calendar-month-line'),
+    rtl: true,
+  },
   media: () => import('@iconify-icons/mingcute/photo-album-line'),
   speak: () => import('@iconify-icons/mingcute/radar-line'),
   building: () => import('@iconify-icons/mingcute/building-5-line'),
-  history2: () => import('@iconify-icons/mingcute/history-2-line'),
+  history2: {
+    module: () => import('@iconify-icons/mingcute/history-2-line'),
+    rtl: true,
+  },
   document: () => import('@iconify-icons/mingcute/document-line'),
-  'arrows-right': () => import('@iconify-icons/mingcute/arrows-right-line'),
+  'arrows-right': {
+    module: () => import('@iconify-icons/mingcute/arrows-right-line'),
+    rtl: true,
+  },
   code: () => import('@iconify-icons/mingcute/code-line'),
   copy: () => import('@iconify-icons/mingcute/copy-2-line'),
-  quote: () => import('@iconify-icons/mingcute/quote-left-line'),
+  quote: {
+    module: () => import('@iconify-icons/mingcute/quote-left-line'),
+    rtl: true,
+  },
   settings: () => import('@iconify-icons/mingcute/settings-6-line'),
   'heart-break': () => import('@iconify-icons/mingcute/heart-crack-line'),
   'user-x': () => import('@iconify-icons/mingcute/user-x-line'),

src/components/account-block.css

@@ -29,6 +29,8 @@
     line-clamp: 1;
     text-overflow: ellipsis;
     overflow: hidden;
+    unicode-bidi: isolate;
+    direction: initial;
   }
 
   a {

src/components/account-block.jsx

@@ -120,7 +120,7 @@ function AccountBlock({
             )}
           </>
         )}{' '}
-        <span class="account-block-acct">
+        <span class="account-block-acct bidi-isolate">
           {acct2 ? '' : '@'}
           {acct1}
           <wbr />

src/components/account-info.css

@@ -57,7 +57,7 @@
     background-repeat: no-repeat;
     animation: swoosh-bg-image 0.3s ease-in-out 0.3s both;
     background-image: linear-gradient(
-      to right,
+      var(--to-forward),
       var(--original-color) 0%,
       var(--original-color) calc(var(--originals-percentage) - var(--gap)),
       var(--gap-color) calc(var(--originals-percentage) - var(--gap)),
@@ -181,8 +181,8 @@
   opacity: 1;
 }
 .sheet .account-container .header-banner {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-start-start-radius: 16px;
+  border-start-end-radius: 16px;
 }
 .account-container .header-banner.header-is-avatar {
   mask-image: linear-gradient(
@@ -288,10 +288,17 @@
   align-self: center !important;
   /* clip a dog ear on top right */
   clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
+  &:dir(rtl) {
+    /* top left */
+    clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
+  }
   /* 4x4px square on top right */
   background-size: 4px 4px;
   background-repeat: no-repeat;
   background-position: top right;
+  &:dir(rtl) {
+    background-position: top left;
+  }
   background-image: linear-gradient(
     to bottom,
     var(--private-note-border-color),
@@ -311,7 +318,7 @@
     box-orient: vertical;
     -webkit-line-clamp: 2;
     line-clamp: 2;
-    text-align: left;
+    text-align: start;
   }
 
   &:hover:not(:active) {
@@ -370,7 +377,8 @@
     animation: appear 1s both ease-in-out;
 
     > *:not(:first-child) {
-      margin: 0 0 0 -4px;
+      margin: 0;
+      margin-inline-start: -4px;
     }
   }
 }
@@ -422,15 +430,15 @@
   }
 
   &:has(+ .account-metadata-box) {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-end-start-radius: 4px;
+    border-end-end-radius: 4px;
   }
 
   + .account-metadata-box {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom-left-radius: 16px;
-    border-bottom-right-radius: 16px;
+    border-start-start-radius: 4px;
+    border-start-end-radius: 4px;
+    border-end-start-radius: 16px;
+    border-end-end-radius: 16px;
   }
 }
 
@@ -805,7 +813,7 @@
     width: 100%;
 
     th {
-      text-align: left;
+      text-align: start;
       color: var(--text-insignificant-color);
       font-weight: normal;
       font-size: 0.8em;

src/components/account-info.jsx

@@ -568,7 +568,9 @@ function AccountInfo({
                   </div>
                   <MenuItem
                     onClick={() => {
-                      const handleWithInstance = acct.includes('@') ? `@${acct}` : `@${acct}@${instance}`;
+                      const handleWithInstance = acct.includes('@')
+                        ? `@${acct}`
+                        : `@${acct}@${instance}`;
                       try {
                         navigator.clipboard.writeText(handleWithInstance);
                         showToast('Handle copied');
@@ -1221,7 +1223,7 @@ function RelatedActions({
               <small>
                 Copy handle
                 <br />
-                <span class="more-insignificant">
+                <span class="more-insignificant bidi-isolate">
                   @{currentInfo?.acct || acctWithInstance}
                 </span>
               </small>
@@ -1895,6 +1897,7 @@ function PrivateNoteSheet({
             ref={textareaRef}
             name="note"
             disabled={uiState === 'loading'}
+            dir="auto"
           >
             {initialNote}
           </textarea>
@@ -2017,6 +2020,7 @@ function EditProfileSheet({ onClose = () => {} }) {
                   defaultValue={displayName}
                   maxLength={30}
                   disabled={uiState === 'loading'}
+                  dir="auto"
                 />
               </label>
             </p>
@@ -2029,6 +2033,7 @@ function EditProfileSheet({ onClose = () => {} }) {
                   maxLength={500}
                   rows="5"
                   disabled={uiState === 'loading'}
+                  dir="auto"
                 />
               </label>
             </p>
@@ -2092,6 +2097,7 @@ function FieldsAttributesRow({ name, value, disabled, index: i }) {
           disabled={disabled}
           maxLength={255}
           required={hasValue}
+          dir="auto"
         />
       </td>
       <td>
@@ -2102,6 +2108,7 @@ function FieldsAttributesRow({ name, value, disabled, index: i }) {
           disabled={disabled}
           maxLength={255}
           onChange={(e) => setHasValue(!!e.currentTarget.value)}
+          dir="auto"
         />
       </td>
     </tr>