Merge branch 'threads-rtl' into 'develop'

Fix threads in RTL (and other small fixes)

See merge request soapbox-pub/soapbox!2032

app/soapbox/components/autosuggest-input.tsx

@@ -8,6 +8,7 @@ import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';
 import { Input } from 'soapbox/components/ui';
 import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
+import { isRtl } from 'soapbox/rtl';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
@@ -263,8 +264,15 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
   render() {
     const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
     const { suggestionsHidden } = this.state;
+    const style: React.CSSProperties = { direction: 'ltr' };
+
     const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
 
+    // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text.
+    if (isRtl(value) || (!value && placeholder && isRtl(placeholder))) {
+      style.direction = 'rtl';
+    }
+
     return [
       <div key='input' className='relative w-full'>
         <label className='sr-only'>{placeholder}</label>
@@ -283,6 +291,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
           onKeyUp={onKeyUp}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
+          style={style}
           aria-autocomplete='list'
           id={id}
           maxLength={maxLength}

app/soapbox/components/autosuggest-textarea.tsx

@@ -7,6 +7,7 @@ import Textarea from 'react-textarea-autosize';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import AutosuggestAccount from '../features/compose/components/autosuggest-account';
+import { isRtl } from '../rtl';
 
 import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
 
@@ -226,6 +227,12 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
   render() {
     const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children, condensed, id } = this.props;
     const { suggestionsHidden } = this.state;
+    const style = { direction: 'ltr', minRows: 10 };
+
+    // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text.
+    if (isRtl(value) || (!value && placeholder && isRtl(placeholder))) {
+      style.direction = 'rtl';
+    }
 
     return [
       <div key='textarea'>
@@ -250,6 +257,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
               onFocus={this.onFocus}
               onBlur={this.onBlur}
               onPaste={this.onPaste}
+              style={style as any}
               aria-autocomplete='list'
             />
           </label>

app/soapbox/components/status-action-button.tsx

@@ -79,7 +79,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
       ref={ref}
       type='button'
       className={classNames(
-        'flex items-center p-1 rounded-full',
+        'flex items-center p-1 rounded-full rtl:space-x-reverse',
         'text-gray-600 hover:text-gray-600 dark:hover:text-white',
         'bg-white dark:bg-transparent',
         'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',

app/soapbox/components/status.tsx

@@ -237,7 +237,7 @@ const Status: React.FC<IStatus> = (props) => {
       <NavLink
         to={`/@${status.getIn(['account', 'acct'])}`}
         onClick={(event) => event.stopPropagation()}
-        className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
+        className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 rtl:space-x-reverse hover:underline'
       >
         <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
@@ -246,7 +246,7 @@ const Status: React.FC<IStatus> = (props) => {
             id='status.reblogged_by'
             defaultMessage='{name} reposted'
             values={{
-              name: <bdi className='max-w-[100px] truncate pr-1'>
+              name: <bdi className='max-w-[100px] truncate pr-1 rtl:px-1'>
                 <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
               </bdi>,
             }}

app/soapbox/features/compose/components/search.tsx

@@ -127,6 +127,7 @@ const Search = (props: ISearch) => {
     onFocus: handleFocus,
     autoFocus: autoFocus,
     theme: 'search',
+    className: 'pr-10 rtl:pl-10 rtl:pr-3',
   };
 
   if (autosuggest) {

app/soapbox/features/ui/components/navbar.tsx

@@ -71,7 +71,7 @@ const Navbar = () => {
       <div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <div className='relative flex justify-between h-12 lg:h-16'>
           {account && (
-            <div className='absolute inset-y-0 left-0 flex items-center lg:hidden'>
+            <div className='absolute inset-y-0 left-0 flex items-center lg:hidden rtl:right-0 rtl:left-auto'>
               <button onClick={onOpenSidebar}>
                 <Avatar src={account.avatar} size={34} />
               </button>

app/styles/components/detailed-status.scss

@@ -10,36 +10,11 @@
   }
 
   .status__content-wrapper {
-    padding-left: calc(42px + 12px);
+    @apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
   }
 
-  // &__descendants &__status:first-child {
-  //   margin-top: 10px;
-
-  //   .status__wrapper--filtered {
-  //     margin-top: -10px;
-  //   }
-  // }
-
-  // &__status--focused:first-child,
-  // &__ancestors &__status:first-child {
-  //   margin-top: 10px;
-
-  //   .status__wrapper--filtered {
-  //     margin-top: -10px;
-  //   }
-  // }
-
-  // &__descendants &__status:last-child {
-  //   margin-bottom: 10px;
-
-  //   .status__wrapper--filtered {
-  //     margin-bottom: -10px;
-  //   }
-  // }
-
   &__connector {
-    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1];
+    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1] rtl:right-5 rtl:left-auto;
 
     &--bottom {
       @apply block;

app/styles/components/sidebar-menu.scss

@@ -2,8 +2,7 @@
   @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 rtl:translate-x-80 z-1000;
 
   @media (max-width: 400px) {
-    width: 90vw;
+    @apply w-[90vw] -translate-x-[90vw] rtl:translate-x-[90vw];
-    transform: translateX(-90vw);
   }
 
   hr {