From ba8cab05138e02ac09a95f70edcdef5f5ddec314 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 18 Nov 2022 18:34:27 -0600
Subject: [PATCH 01/50] Sensitive video refactor Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1190

---
 app/soapbox/components/status-media.tsx       |  16 +--
 .../ui/components/modals/media-modal.tsx      |   1 -
 .../ui/components/modals/video-modal.tsx      |   1 -
 app/soapbox/features/video/index.tsx          | 111 ++++--------------
 4 files changed, 30 insertions(+), 99 deletions(-)

diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index 71177cb122..c4f809425a 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -10,6 +10,7 @@ import { useAppDispatch, useSettings } from 'soapbox/hooks';
 import { addAutoPlay } from 'soapbox/utils/media';
 
 import type { List as ImmutableList } from 'immutable';
+import type VideoType from 'soapbox/features/video';
 import type { Status, Attachment } from 'soapbox/types/entities';
 
 interface IStatusMedia {
@@ -66,10 +67,6 @@ const StatusMedia: React.FC<IStatusMedia> = ({
     dispatch(openModal('MEDIA', { media, status, index }));
   };
 
-  const openVideo = (media: Attachment, time: number): void => {
-    dispatch(openModal('VIDEO', { media, time }));
-  };
-
   if (size > 0 && firstAttachment) {
     if (muted) {
       media = (
@@ -105,20 +102,17 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         );
       } else {
         media = (
-          <Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer} >
-            {(Component: any) => (
+          <Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer}>
+            {(Component: typeof VideoType) => (
               <Component
                 preview={video.preview_url}
                 blurhash={video.blurhash}
                 src={video.url}
                 alt={video.description}
-                aspectRatio={video.meta.getIn(['original', 'aspect'])}
+                aspectRatio={Number(video.meta.getIn(['original', 'aspect']))}
                 height={285}
-                inline
-                sensitive={status.sensitive}
-                onOpenVideo={openVideo}
                 visible={showMedia}
-                onToggleVisibility={onToggleVisibility}
+                inline
               />
             )}
           </Bundle>
diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index 6ed8ef4356..0551c61c4c 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -197,7 +197,6 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           width={width}
           height={height}
           startTime={time}
-          onCloseVideo={onClose}
           detailed
           link={link}
           alt={attachment.description}
diff --git a/app/soapbox/features/ui/components/modals/video-modal.tsx b/app/soapbox/features/ui/components/modals/video-modal.tsx
index 58ddea245d..f323a397ed 100644
--- a/app/soapbox/features/ui/components/modals/video-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/video-modal.tsx
@@ -37,7 +37,6 @@ const VideoModal: React.FC<IVideoModal> = ({ status, account, media, time, onClo
         blurhash={media.blurhash}
         src={media.url}
         startTime={time}
-        onCloseVideo={onClose}
         link={link}
         detailed
         alt={media.description}
diff --git a/app/soapbox/features/video/index.tsx b/app/soapbox/features/video/index.tsx
index f418714bd6..71aaae65da 100644
--- a/app/soapbox/features/video/index.tsx
+++ b/app/soapbox/features/video/index.tsx
@@ -2,17 +2,14 @@ import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
-import { useSettings } from 'soapbox/hooks';
 import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media-aspect-ratio';
 
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 
-import type { Attachment } from 'soapbox/types/entities';
-
 const DEFAULT_HEIGHT = 300;
 
 type Position = { x: number, y: number };
@@ -107,15 +104,11 @@ interface IVideo {
   alt?: string,
   width?: number,
   height?: number,
-  sensitive?: boolean,
   startTime?: number,
-  onOpenVideo?: (attachment: Attachment, time: number) => void,
-  onCloseVideo?: () => void,
   detailed?: boolean,
   inline?: boolean,
   cacheWidth?: (width: number) => void,
   visible?: boolean,
-  onToggleVisibility?: () => void,
   blurhash?: string,
   link?: React.ReactNode,
   aspectRatio?: number,
@@ -125,23 +118,18 @@ interface IVideo {
 const Video: React.FC<IVideo> = ({
   width,
   visible = false,
-  sensitive = false,
   detailed = false,
   cacheWidth,
-  onToggleVisibility,
   startTime,
   src,
   height,
   alt,
-  onCloseVideo,
   inline,
   aspectRatio = 16 / 9,
   link,
   blurhash,
 }) => {
   const intl = useIntl();
-  const settings = useSettings();
-  const displayMedia = settings.get('displayMedia') as string | undefined;
 
   const player = useRef<HTMLDivElement>(null);
   const video = useRef<HTMLVideoElement>(null);
@@ -157,7 +145,6 @@ const Video: React.FC<IVideo> = ({
   const [fullscreen, setFullscreen] = useState(false);
   const [hovered, setHovered] = useState(false);
   const [muted, setMuted] = useState(false);
-  const [revealed, setRevealed] = useState<boolean>(visible !== undefined ? visible : (displayMedia !== 'hide_all' && !sensitive || displayMedia === 'show_all'));
   const [buffer, setBuffer] = useState(0);
 
   const setDimensions = () => {
@@ -342,7 +329,6 @@ const Video: React.FC<IVideo> = ({
 
     // If we are in fullscreen mode, we don't want any hotkeys
     // interacting with the UI that's not visible
-
     if (fullscreen) {
       e.preventDefault();
       e.stopPropagation();
@@ -411,16 +397,6 @@ const Video: React.FC<IVideo> = ({
     }
   };
 
-  const toggleReveal: React.MouseEventHandler = (e) => {
-    e.stopPropagation();
-
-    if (onToggleVisibility) {
-      onToggleVisibility();
-    } else {
-      setRevealed(!revealed);
-    }
-  };
-
   const handleLoadedData = () => {
     if (video.current && startTime) {
       video.current.currentTime = startTime;
@@ -459,14 +435,6 @@ const Video: React.FC<IVideo> = ({
     playerStyle.height = height || DEFAULT_HEIGHT;
   }
 
-  let warning;
-
-  if (sensitive) {
-    warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
-  } else {
-    warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
-  }
-
   useEffect(() => {
     document.addEventListener('fullscreenchange', handleFullscreenChange, true);
     document.addEventListener('webkitfullscreenchange', handleFullscreenChange, true);
@@ -488,21 +456,15 @@ const Video: React.FC<IVideo> = ({
   }, []);
 
   useEffect(() => {
-    if (visible) {
-      setRevealed(true);
-    }
-  }, [visible]);
-
-  useEffect(() => {
-    if (!revealed) {
+    if (!visible) {
       video.current?.pause();
     }
-  }, [revealed]);
+  }, [visible]);
 
   return (
     <div
       role='menuitem'
-      className={classNames('video-player', { 'video-player--inactive': !revealed, detailed, 'video-player--inline': inline && !fullscreen, fullscreen })}
+      className={classNames('video-player', { detailed, 'video-player--inline': inline && !fullscreen, fullscreen })}
       style={playerStyle}
       ref={player}
       onMouseEnter={handleMouseEnter}
@@ -511,40 +473,29 @@ const Video: React.FC<IVideo> = ({
       onKeyDown={handleKeyDown}
       tabIndex={0}
     >
-      <Blurhash
-        hash={blurhash}
-        className={classNames('media-gallery__preview', {
-          'media-gallery__preview--hidden': revealed,
-        })}
-      />
-
-      {revealed && (
-        <video
-          ref={video}
-          src={src}
-          loop
-          role='button'
-          tabIndex={0}
-          aria-label={alt}
-          title={alt}
-          width={width}
-          height={height || DEFAULT_HEIGHT}
-          onClick={togglePlay}
-          onKeyDown={handleVideoKeyDown}
-          onPlay={handlePlay}
-          onPause={handlePause}
-          onTimeUpdate={handleTimeUpdate}
-          onLoadedData={handleLoadedData}
-          onProgress={handleProgress}
-          onVolumeChange={handleVolumeChange}
-        />
+      {!fullscreen && (
+        <Blurhash hash={blurhash} className='media-gallery__preview' />
       )}
 
-      <div className={classNames('spoiler-button', { 'spoiler-button--hidden': !sensitive || revealed })}>
-        <button type='button' className='spoiler-button__overlay' onClick={toggleReveal}>
-          <span className='spoiler-button__overlay__label'>{warning}</span>
-        </button>
-      </div>
+      <video
+        ref={video}
+        src={src}
+        loop
+        role='button'
+        tabIndex={0}
+        aria-label={alt}
+        title={alt}
+        width={width}
+        height={height || DEFAULT_HEIGHT}
+        onClick={togglePlay}
+        onKeyDown={handleVideoKeyDown}
+        onPlay={handlePlay}
+        onPause={handlePause}
+        onTimeUpdate={handleTimeUpdate}
+        onLoadedData={handleLoadedData}
+        onProgress={handleProgress}
+        onVolumeChange={handleVolumeChange}
+      />
 
       <div className={classNames('video-player__controls', { active: paused || hovered })}>
         <div className='video-player__seek' onMouseDown={handleMouseDown} ref={seek}>
@@ -605,18 +556,6 @@ const Video: React.FC<IVideo> = ({
           </div>
 
           <div className='video-player__buttons right'>
-            {(sensitive && !onCloseVideo) && (
-              <button
-                type='button'
-                title={intl.formatMessage(messages.hide)}
-                aria-label={intl.formatMessage(messages.hide)}
-                className='player-button'
-                onClick={toggleReveal}
-              >
-                <Icon src={require('@tabler/icons/eye-off.svg')} />
-              </button>
-            )}
-
             <button
               type='button'
               title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}

From f3fdc7b38739135b61f8c8277a773fc0c4138d76 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 19 Nov 2022 16:14:37 -0600
Subject: [PATCH 02/50] Translations: strip compatibility features from HTML

---
 app/soapbox/reducers/statuses.ts | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/reducers/statuses.ts b/app/soapbox/reducers/statuses.ts
index 2c19b2511b..513a34b940 100644
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@@ -1,5 +1,5 @@
 import escapeTextContentForBrowser from 'escape-html';
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
 import emojify from 'soapbox/features/emoji/emoji';
 import { normalizeStatus } from 'soapbox/normalizers';
@@ -195,6 +195,24 @@ const simulateFavourite = (
   return state.set(statusId, updatedStatus);
 };
 
+interface Translation {
+  content: string,
+  detected_source_language: string,
+  provider: string,
+}
+
+/** Import translation from translation service into the store. */
+const importTranslation = (state: State, statusId: string, translation: Translation) => {
+  const map = ImmutableMap(translation);
+  const result = map.set('content', stripCompatibilityFeatures(map.get('content', '')));
+  return state.setIn([statusId, 'translation'], result);
+};
+
+/** Delete translation from the store. */
+const deleteTranslation = (state: State, statusId: string) => {
+  return state.deleteIn([statusId, 'translation']);
+};
+
 const initialState: State = ImmutableMap();
 
 export default function statuses(state = initialState, action: AnyAction): State {
@@ -258,9 +276,9 @@ export default function statuses(state = initialState, action: AnyAction): State
     case STATUS_DELETE_FAIL:
       return incrementReplyCount(state, action.params);
     case STATUS_TRANSLATE_SUCCESS:
-      return state.setIn([action.id, 'translation'], fromJS(action.translation));
+      return importTranslation(state, action.id, action.translation);
     case STATUS_TRANSLATE_UNDO:
-      return state.deleteIn([action.id, 'translation']);
+      return deleteTranslation(state, action.id);
     case TIMELINE_DELETE:
       return deleteStatus(state, action.id, action.references);
     default:

From 30a34b0b8264911d2297b2552f755209165be22c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 19 Nov 2022 17:17:56 -0600
Subject: [PATCH 03/50] Remove .spoiler-button styles

---
 app/styles/application.scss               |  1 -
 app/styles/chats.scss                     |  4 ---
 app/styles/components/media-gallery.scss  |  4 ---
 app/styles/components/spoiler-button.scss | 43 -----------------------
 4 files changed, 52 deletions(-)
 delete mode 100644 app/styles/components/spoiler-button.scss

diff --git a/app/styles/application.scss b/app/styles/application.scss
index da62ca3142..96ef432fd3 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -45,7 +45,6 @@
 @import 'components/search';
 @import 'components/react-toggle';
 @import 'components/still-image';
-@import 'components/spoiler-button';
 @import 'components/video-player';
 @import 'components/audio-player';
 @import 'components/profile-hover-card';
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 7c98b11ffd..499e0640ff 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -343,10 +343,6 @@
   height: 100% !important;
   margin: 4px 0 8px;
 
-  .spoiler-button {
-    display: none;
-  }
-
   .media-gallery__item:not(.media-gallery__item--image) {
     max-width: 100%;
     width: 120px !important;
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 664600893c..b04a776fe8 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -194,10 +194,6 @@ $media-compact-size: 50px;
   height: $media-compact-size !important;
   background: transparent;
 
-  .spoiler-button {
-    display: none;
-  }
-
   .media-gallery__item {
     width: $media-compact-size !important;
     height: $media-compact-size !important;
diff --git a/app/styles/components/spoiler-button.scss b/app/styles/components/spoiler-button.scss
deleted file mode 100644
index 35498bef9e..0000000000
--- a/app/styles/components/spoiler-button.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.spoiler-button {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 40;
-
-  &--hidden {
-    display: none;
-  }
-
-  .svg-icon {
-    width: 20px;
-    height: 20px;
-  }
-
-  &__overlay {
-    display: block;
-    background: transparent;
-    width: 100%;
-    height: 100%;
-    border: 0;
-
-    &__label {
-      display: inline-block;
-      background: var(--accent-color--faint);
-      border-radius: 8px;
-      padding: 8px 12px;
-      color: var(--primary-text-color);
-      font-weight: 500;
-      font-size: 14px;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      .spoiler-button__overlay__label {
-        background: var(--accent-color--med);
-      }
-    }
-  }
-}

From 15ec4c883081c2e85927bffdb02f7e5e4f22280c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 19 Nov 2022 17:20:27 -0600
Subject: [PATCH 04/50] Video: remove spoiler styles

---
 app/styles/components/video-player.scss | 46 -------------------------
 1 file changed, 46 deletions(-)

diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index 1a81d167ed..f1e3b4c1cb 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -73,52 +73,6 @@
     }
   }
 
-  &--inactive {
-    min-height: 300px;
-
-    video,
-    .video-player__controls {
-      visibility: hidden;
-    }
-  }
-
-  &__spoiler {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 4;
-    border: 0;
-    background: var(--background-color);
-    color: var(--primary-text-color--faint);
-    transition: none;
-    pointer-events: none;
-
-    &.active {
-      display: block;
-      pointer-events: auto;
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: var(--primary-text-color);
-      }
-    }
-
-    &__title {
-      display: block;
-      font-size: 14px;
-    }
-
-    &__subtitle {
-      display: block;
-      font-size: 11px;
-      font-weight: 500;
-    }
-  }
-
   &__buttons-bar {
     display: flex;
     justify-content: space-between;

From f7d75f57ea8624bcdfc295cd87293538ad834426 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 20 Nov 2022 14:23:18 -0600
Subject: [PATCH 05/50] StillImage: make it play nice with Tailwind, remove
 still-image.scss

---
 app/soapbox/components/media-gallery.tsx      | 11 ++++--
 app/soapbox/components/still-image.tsx        | 38 +++++++++++++++++--
 .../account-gallery/components/media-item.tsx |  1 +
 .../features/account/components/header.tsx    |  2 +-
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 42b961dc1c..1a67542106 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -160,16 +160,21 @@ const Item: React.FC<IItem> = ({
       </div>
     );
   } else if (attachment.type === 'image') {
-    const letterboxed = shouldLetterbox(attachment);
+    const letterboxed = total === 1 && shouldLetterbox(attachment);
 
     thumbnail = (
       <a
-        className={classNames('media-gallery__item-thumbnail', { letterboxed })}
+        className={classNames('media-gallery__item-thumbnail')}
         href={attachment.url}
         onClick={handleClick}
         target='_blank'
       >
-        <StillImage src={attachment.url} alt={attachment.description} />
+        <StillImage
+          className='w-full h-full'
+          src={attachment.url}
+          alt={attachment.description}
+          letterboxed={letterboxed}
+        />
       </a>
     );
   } else if (attachment.type === 'gifv') {
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 24e212ce55..38e72a6b61 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -12,10 +12,12 @@ interface IStillImage {
   src: string,
   /** Extra CSS styles on the outer <div> element. */
   style?: React.CSSProperties,
+  /** Whether to display the image contained vs filled in its container. */
+  letterboxed?: boolean,
 }
 
 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
-const StillImage: React.FC<IStillImage> = ({ alt, className, src, style }) => {
+const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false }) => {
   const settings = useSettings();
   const autoPlayGif = settings.get('autoPlayGif');
 
@@ -34,10 +36,38 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style }) => {
     }
   };
 
+  /** ClassNames shared between the `<img>` and `<canvas>` elements. */
+  const baseClassName = classNames('w-full h-full block', {
+    'object-contain': letterboxed,
+    'object-cover': !letterboxed,
+  });
+
   return (
-    <div data-testid='still-image-container' className={classNames(className, 'still-image', { 'still-image--play-on-hover': hoverToPlay })} style={style}>
-      <img src={src} alt={alt} ref={img} onLoad={handleImageLoad} />
-      {hoverToPlay && <canvas ref={canvas} />}
+    <div
+      data-testid='still-image-container'
+      className={classNames(className, 'group overflow-hidden')}
+      style={style}
+    >
+      <div className='relative w-full h-full'>
+        <img
+          src={src}
+          alt={alt}
+          ref={img}
+          onLoad={handleImageLoad}
+          className={classNames(baseClassName, {
+            'absolute invisible group-hover:visible': hoverToPlay,
+          })}
+        />
+
+        {hoverToPlay && (
+          <canvas
+            ref={canvas}
+            className={classNames(baseClassName, {
+              'group-hover:invisible': hoverToPlay,
+            })}
+          />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx
index a2a171bfcc..4242094b55 100644
--- a/app/soapbox/features/account-gallery/components/media-item.tsx
+++ b/app/soapbox/features/account-gallery/components/media-item.tsx
@@ -74,6 +74,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
         src={attachment.preview_url}
         alt={attachment.description}
         style={{ objectPosition: `${x}% ${y}%` }}
+        className='w-full h-full rounded-lg overflow-hidden'
       />
     );
   } else if (['gifv', 'video'].indexOf(attachment.type) !== -1) {
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 4aa4d3b051..ef41e9ccf2 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -577,7 +577,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               <Avatar
                 src={account.avatar}
                 size={96}
-                className='h-24 w-24 rounded-full ring-4 ring-white dark:ring-primary-900'
+                className='relative h-24 w-24 rounded-full ring-4 ring-white dark:ring-primary-900'
               />
             </a>
           </div>

From b4b9aa039d16deb5d13fee515e5f07c3d05c5201 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 20 Nov 2022 14:53:24 -0600
Subject: [PATCH 06/50] Remove .still-image css, display "GIF" badge in media
 when autoPlayGif is off

---
 app/soapbox/components/media-gallery.tsx |  3 +-
 app/soapbox/components/still-image.tsx   | 24 +++++++++-
 app/styles/accounts.scss                 |  4 --
 app/styles/application.scss              |  1 -
 app/styles/chats.scss                    |  5 ---
 app/styles/components/media-gallery.scss | 57 ++----------------------
 app/styles/components/still-image.scss   | 28 ------------
 7 files changed, 29 insertions(+), 93 deletions(-)
 delete mode 100644 app/styles/components/still-image.scss

diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 1a67542106..9244f05d52 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -164,7 +164,7 @@ const Item: React.FC<IItem> = ({
 
     thumbnail = (
       <a
-        className={classNames('media-gallery__item-thumbnail')}
+        className='media-gallery__item-thumbnail'
         href={attachment.url}
         onClick={handleClick}
         target='_blank'
@@ -174,6 +174,7 @@ const Item: React.FC<IItem> = ({
           src={attachment.url}
           alt={attachment.description}
           letterboxed={letterboxed}
+          showExt
         />
       </a>
     );
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 38e72a6b61..899b836836 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -14,10 +14,12 @@ interface IStillImage {
   style?: React.CSSProperties,
   /** Whether to display the image contained vs filled in its container. */
   letterboxed?: boolean,
+  /** Whether to show the file extension in the corner. */
+  showExt?: boolean,
 }
 
 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
-const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false }) => {
+const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false, showExt = false }) => {
   const settings = useSettings();
   const autoPlayGif = settings.get('autoPlayGif');
 
@@ -67,9 +69,29 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
             })}
           />
         )}
+
+        {(hoverToPlay && showExt) && (
+          <div className='group-hover:hidden absolute opacity-90 left-2 bottom-2 pointer-events-none'>
+            <ExtensionBadge ext='GIF' />
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
+interface IExtensionBadge {
+  /** File extension. */
+  ext: string,
+}
+
+/** Badge displaying a file extension. */
+const ExtensionBadge: React.FC<IExtensionBadge> = ({ ext }) => {
+  return (
+    <div className='inline-flex items-center px-2 py-0.5 rounded text-sm font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100'>
+      {ext}
+    </div>
+  );
+};
+
 export default StillImage;
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index e4a0833c7d..e24a19ddf8 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -72,10 +72,6 @@ a .account__avatar {
     bottom: 0;
     right: 0;
     z-index: 1;
-
-    &.still-image {
-      position: absolute;
-    }
   }
 }
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index da62ca3142..2d7428ad60 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -44,7 +44,6 @@
 @import 'components/columns';
 @import 'components/search';
 @import 'components/react-toggle';
-@import 'components/still-image';
 @import 'components/spoiler-button';
 @import 'components/video-player';
 @import 'components/audio-player';
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 7c98b11ffd..d2f00aeff4 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -356,11 +356,6 @@
   &__preview {
     background-color: transparent;
   }
-
-  &__item-thumbnail img,
-  &__item-thumbnail .still-image img {
-    object-fit: contain;
-  }
 }
 
 .chat-messages__divider {
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 664600893c..70a954a883 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -57,32 +57,11 @@
   line-height: 0;
   position: relative;
   z-index: 1;
+  height: 100%;
+  width: 100%;
 
-  &,
-  .still-image {
-    height: 100%;
-    width: 100%;
-
-    img {
-      @apply object-cover rounded-lg;
-    }
-  }
-
-  .still-image--play-on-hover::before {
-    content: 'GIF';
-    position: absolute;
-    color: var(--primary-text-color);
-    background: var(--foreground-color);
-    bottom: 6px;
-    left: 6px;
-    padding: 2px 6px;
-    border-radius: 2px;
-    font-size: 11px;
-    font-weight: 600;
-    pointer-events: none;
-    opacity: 0.9;
-    transition: opacity 0.1s ease;
-    line-height: 18px;
+  img {
+    @apply object-cover rounded-lg;
   }
 
   video {
@@ -92,17 +71,6 @@
   }
 }
 
-.status__wrapper {
-  .media-gallery__item-thumbnail.letterboxed {
-    &,
-    .still-image {
-      img {
-        object-fit: contain;
-      }
-    }
-  }
-}
-
 .media-gallery__preview {
   @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
   width: 100%;
@@ -113,23 +81,6 @@
   left: 0;
   z-index: 0;
 
-  .still-image--play-on-hover::before {
-    content: 'GIF';
-    position: absolute;
-    color: var(--primary-text-color);
-    background: var(--foreground-color);
-    bottom: 6px;
-    left: 6px;
-    padding: 2px 6px;
-    border-radius: 2px;
-    font-size: 11px;
-    font-weight: 600;
-    pointer-events: none;
-    opacity: 0.9;
-    transition: opacity 0.1s ease;
-    line-height: 18px;
-  }
-
   &--hidden {
     display: none;
   }
diff --git a/app/styles/components/still-image.scss b/app/styles/components/still-image.scss
deleted file mode 100644
index 0b86d6adae..0000000000
--- a/app/styles/components/still-image.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.still-image {
-  position: relative;
-  overflow: hidden;
-
-  img,
-  canvas {
-    width: 100%;
-    height: 100%;
-    display: block;
-    object-fit: cover;
-    font-family: inherit;
-  }
-
-  &--play-on-hover {
-    img {
-      position: absolute;
-      visibility: hidden;
-    }
-
-    &:hover img {
-      visibility: visible;
-    }
-
-    &:hover canvas {
-      visibility: hidden;
-    }
-  }
-}

From 8d2db4c2a33279993cf9c4012924e49fa60ba5df Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 20 Nov 2022 15:26:01 -0600
Subject: [PATCH 07/50] Fix letterboxing remote statuses

---
 app/styles/components/media-gallery.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 70a954a883..25d953dfaf 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -60,10 +60,6 @@
   height: 100%;
   width: 100%;
 
-  img {
-    @apply object-cover rounded-lg;
-  }
-
   video {
     width: 100%;
     height: 100%;

From 181d03d0c594e87f42789e567085acd468239b00 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 20 Nov 2022 18:11:11 -0600
Subject: [PATCH 08/50] Support custom emoji categories Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1197 Related
 https://github.com/mastodon/mastodon/pull/11196

---
 .../emoji-picker/emoji-picker-menu.tsx        | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
index a7a4dff28a..834b556f25 100644
--- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
@@ -4,7 +4,7 @@ import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { buildCustomEmojis } from '../../../emoji/emoji';
+import { buildCustomEmojis, categoriesFromEmojis } from '../../../emoji/emoji';
 
 import { EmojiPicker } from './emoji-picker-dropdown';
 import ModifierPicker from './modifier-picker';
@@ -14,19 +14,6 @@ import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-const categoriesSort = [
-  'recent',
-  'custom',
-  'people',
-  'nature',
-  'foods',
-  'activity',
-  'places',
-  'objects',
-  'symbols',
-  'flags',
-];
-
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
@@ -71,6 +58,20 @@ const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
 
   const [modifierOpen, setModifierOpen] = useState(false);
 
+  const categoriesSort = [
+    'recent',
+    'people',
+    'nature',
+    'foods',
+    'activity',
+    'places',
+    'objects',
+    'symbols',
+    'flags',
+  ];
+
+  categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(customEmojis) as Set<string>).sort());
+
   const handleDocumentClick = useCallback(e => {
     if (node.current && !node.current.contains(e.target)) {
       onClose();

From 001c041f51faeb4f19aac0b068c4af9e47e4a10d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 20 Nov 2022 18:20:07 -0600
Subject: [PATCH 09/50] Remove use of DOMParser in front-end emoji rewriting
 code https://github.com/mastodon/mastodon/pull/20758

---
 .../features/emoji/__tests__/emoji.test.ts    |   5 +++++
 app/soapbox/features/emoji/emoji.js           | Bin 4099 -> 4411 bytes
 2 files changed, 5 insertions(+)

diff --git a/app/soapbox/features/emoji/__tests__/emoji.test.ts b/app/soapbox/features/emoji/__tests__/emoji.test.ts
index 83b6ef14d5..df6798ef76 100644
--- a/app/soapbox/features/emoji/__tests__/emoji.test.ts
+++ b/app/soapbox/features/emoji/__tests__/emoji.test.ts
@@ -88,5 +88,10 @@ describe('emoji', () => {
       expect(emojify('💂‍♀️💂‍♂️'))
         .toEqual('<img draggable="false" class="emojione" alt="💂\u200D♀️" title=":female-guard:" src="/packs/emoji/1f482-200d-2640-fe0f.svg"><img draggable="false" class="emojione" alt="💂\u200D♂️" title=":male-guard:" src="/packs/emoji/1f482-200d-2642-fe0f.svg">');
     });
+
+    it('keeps ordering as expected (issue fixed by PR 20677)', () => {
+      expect(emojify('<p>💕 <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>'))
+        .toEqual('<p><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/packs/emoji/1f495.svg"> <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>');
+    });
   });
 });
diff --git a/app/soapbox/features/emoji/emoji.js b/app/soapbox/features/emoji/emoji.js
index 9eadddbc62e6e2df7f7eb4f7e38cbe166ed79306..e9b4caa358c7bd725c49341537641303bdee385e 100644
GIT binary patch
delta 762
zcmb7?!Ait15QgdMc2V&pg5bfjm$aZg3nJn{eF-nK>DY}-Q%R=h9`peg`Xth$ui+c`
z3LZS#MqDdch`EH2eEBo;<uQ7huU?-&_9mOUB5HRxvPqqlvMNw>Dh&eT6=A=Mg(`B9
zoNY(zVeo-Ky4}<wUosoDs2F3B8OU>35Q^jI4#=V>CkgD-c93XR)BV~v4v0I(E=$82
z3g0kR>>fDE-HudejqK}Eg#Sp(fZ?PxDpwk)!<(b<;IuO2*%^mh23CD`2hW3~xe4Fv
zfrRKh@^UvoyuFPvbu4;m&KVZvy(%^SXd9zq@ujQ)mdkYq#!r8%a`UhAhkt)Sr>MD}
Tr9slZ%`SqS!QJiCRvmr<f6@4|

delta 489
zcma)3%}N6?5XJ>7tw(Qy5JF*Fu)ChT=z37=%^%QPDRi1mw~_pmWQs~D1$_abPa-|)
z6L|J5y!rrUx3$)rxg_&3`F>_z=@WVW*iMbQ0_(UX3DNwHoL-*K>)OlvP7s9Q>@!G%
zN#{_gjHDK_47!phv<K30N|*%a63Ugi6-INyh7OHt6g4FvF`?Cw>l=$26dzN90`u>G
zL1$SG^@QY$wiFN=#)?d6kO_^eqd9Xk7jms7V>=pJ>1m68hk&ABnr^Mrl857?&UAm{
zYm*u6ka!uAOi#+u<e)-|WBEV=<BDta`TrSmnM(n({%WQooCg+p{5ALRE2mShBW91~
zc&)n}eKg27aAu9VMk{nyTd}oELge=t_fg5P9;Jp2bGJ=dn2s|3^K{1#H;`TUDc3^3
OtFYeMYtP;)lhQY(Q>n55


From 1514fafa9819d8e7d3caf892da602adcc02f0f86 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 20 Nov 2022 18:37:31 -0600
Subject: [PATCH 10/50] Fix alignment of emojis in picker

---
 app/styles/emoji-picker.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/emoji-picker.scss b/app/styles/emoji-picker.scss
index 90830d576b..7408e85abf 100644
--- a/app/styles/emoji-picker.scss
+++ b/app/styles/emoji-picker.scss
@@ -9,7 +9,7 @@
 }
 
 .emoji-mart .emoji-mart-emoji {
-  @apply p-1.5;
+  @apply p-1.5 align-middle;
 }
 
 .emoji-mart-bar {

From aad68fcdc1ee944564452695c022c9511d547d97 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 21 Nov 2022 10:56:38 -0600
Subject: [PATCH 11/50] FeedSuggestions: use HTML display name

---
 app/soapbox/features/feed-suggestions/feed-suggestions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index 61f7a09afa..68985453c0 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -35,7 +35,7 @@ const SuggestionItem = ({ accountId }: { accountId: string }) => {
             <HStack alignItems='center' justifyContent='center' space={1}>
               <Text
                 weight='semibold'
-                dangerouslySetInnerHTML={{ __html: account.display_name }}
+                dangerouslySetInnerHTML={{ __html: account.display_name_html }}
                 truncate
                 align='center'
                 size='sm'

From 0111d4f179c88b7efeb710b5e2e336779545a4b7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 22 Nov 2022 10:31:23 -0600
Subject: [PATCH 12/50] Fix StillImage in Safari

---
 app/soapbox/components/still-image.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 899b836836..470ea51db4 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -47,7 +47,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
   return (
     <div
       data-testid='still-image-container'
-      className={classNames(className, 'group overflow-hidden')}
+      className={classNames(className, 'group overflow-hidden isolate')}
       style={style}
     >
       <div className='relative w-full h-full'>

From dce26a6600457c3b8866facbb650ac99617a4d7d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 22 Nov 2022 11:33:00 -0600
Subject: [PATCH 13/50] ProfileHoverCard: fix account bio on Mastodon

---
 app/soapbox/components/profile-hover-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index 367c788e02..8ade427ca4 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -136,7 +136,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
               </HStack>
             ) : null}
 
-            {account.source.get('note', '').length > 0 && (
+            {account.note.length > 0 && (
               <Text size='sm' dangerouslySetInnerHTML={accountBio} />
             )}
           </Stack>

From 47613dde566ad39317d0df26bb96bfe404cad087 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 22 Nov 2022 11:33:47 -0600
Subject: [PATCH 14/50] Simplify StillImage component, fix header images

---
 app/soapbox/components/still-image.tsx        | 44 +++++++++----------
 app/soapbox/components/ui/card/card.tsx       |  2 +-
 .../features/account/components/header.tsx    |  3 +-
 .../features/ui/components/user-panel.tsx     |  8 +---
 4 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 470ea51db4..1f4f1a2611 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -47,35 +47,33 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
   return (
     <div
       data-testid='still-image-container'
-      className={classNames(className, 'group overflow-hidden isolate')}
+      className={classNames(className, 'relative group overflow-hidden isolate')}
       style={style}
     >
-      <div className='relative w-full h-full'>
-        <img
-          src={src}
-          alt={alt}
-          ref={img}
-          onLoad={handleImageLoad}
+      <img
+        src={src}
+        alt={alt}
+        ref={img}
+        onLoad={handleImageLoad}
+        className={classNames(baseClassName, {
+          'invisible group-hover:visible': hoverToPlay,
+        })}
+      />
+
+      {hoverToPlay && (
+        <canvas
+          ref={canvas}
           className={classNames(baseClassName, {
-            'absolute invisible group-hover:visible': hoverToPlay,
+            'group-hover:invisible': hoverToPlay,
           })}
         />
+      )}
 
-        {hoverToPlay && (
-          <canvas
-            ref={canvas}
-            className={classNames(baseClassName, {
-              'group-hover:invisible': hoverToPlay,
-            })}
-          />
-        )}
-
-        {(hoverToPlay && showExt) && (
-          <div className='group-hover:hidden absolute opacity-90 left-2 bottom-2 pointer-events-none'>
-            <ExtensionBadge ext='GIF' />
-          </div>
-        )}
-      </div>
+      {(hoverToPlay && showExt) && (
+        <div className='group-hover:hidden absolute opacity-90 left-2 bottom-2 pointer-events-none'>
+          <ExtensionBadge ext='GIF' />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 59f6ee1bc5..a2d181e3a8 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -33,7 +33,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     ref={ref}
     {...filteredProps}
     className={classNames({
-      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
+      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden isolate': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
     }, className)}
   >
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index ef41e9ccf2..d3d7865b69 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -551,13 +551,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
       )}
 
       <div>
-        <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50'>
+        <div className='relative flex flex-col justify-center h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50 overflow-hidden isolate'>
           {account.header && (
             <a href={account.header} onClick={handleHeaderClick} target='_blank'>
               <StillImage
                 src={account.header}
                 alt='Profile Header'
-                className='absolute inset-0 object-cover md:rounded-t-xl'
               />
             </a>
           )}
diff --git a/app/soapbox/features/ui/components/user-panel.tsx b/app/soapbox/features/ui/components/user-panel.tsx
index 8f0fbf5171..918d94efdb 100644
--- a/app/soapbox/features/ui/components/user-panel.tsx
+++ b/app/soapbox/features/ui/components/user-panel.tsx
@@ -36,13 +36,9 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
     <div className='relative'>
       <Stack space={2}>
         <Stack>
-          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative'>
+          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative overflow-hidden'>
             {header && (
-              <StillImage
-                src={account.get('header')}
-                className='absolute inset-0 object-cover'
-                alt=''
-              />
+              <StillImage src={account.header} />
             )}
           </div>
 

From 85b8d09d6806706543a8d7b22b225413b4386573 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Nov 2022 11:45:52 -0600
Subject: [PATCH 15/50] ProfilePreview: fix display of header image, code
 cleanup

---
 app/soapbox/components/ui/avatar/avatar.tsx   |  2 +-
 .../components/profile-preview.tsx            | 27 ++++++++++---------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx
index ec19809787..b6e0bcbf08 100644
--- a/app/soapbox/components/ui/avatar/avatar.tsx
+++ b/app/soapbox/components/ui/avatar/avatar.tsx
@@ -25,7 +25,7 @@ const Avatar = (props: IAvatar) => {
 
   return (
     <StillImage
-      className={classNames('rounded-full overflow-hidden', className)}
+      className={classNames('rounded-full', className)}
       style={style}
       src={src}
       alt='Avatar'
diff --git a/app/soapbox/features/edit-profile/components/profile-preview.tsx b/app/soapbox/features/edit-profile/components/profile-preview.tsx
index c85ff3d2fe..c8df16dd1a 100644
--- a/app/soapbox/features/edit-profile/components/profile-preview.tsx
+++ b/app/soapbox/features/edit-profile/components/profile-preview.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import StillImage from 'soapbox/components/still-image';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
@@ -17,25 +17,28 @@ const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
 
   return (
     <div className='bg-white dark:bg-gray-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
-      <div>
-        <div className='relative w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
-          <StillImage alt='' src={account.header} className='absolute inset-0 object-cover md:rounded-t-lg' />
-        </div>
+      <div className='relative overflow-hidden isolate w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
+        <StillImage src={account.header} />
       </div>
 
       <HStack space={3} alignItems='center' className='p-3'>
         <div className='relative'>
-          <div className='h-12 w-12 bg-gray-400 rounded-full'>
-            <StillImage alt='' className='h-12 w-12 rounded-full' src={account.avatar} />
-          </div>
+          <Avatar className='bg-gray-400' src={account.avatar} />
 
-          {account.verified && <div className='absolute -top-1.5 -right-1.5'><VerificationBadge /></div>}
+          {account.verified && (
+            <div className='absolute -top-1.5 -right-1.5'>
+              <VerificationBadge />
+            </div>
+          )}
         </div>
 
         <Stack className='truncate'>
-          <Text weight='medium' size='sm' truncate>
-            {account.display_name}
-          </Text>
+          <Text
+            weight='medium'
+            size='sm'
+            truncate
+            dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+          />
           <Text theme='muted' size='sm'>@{displayFqn ? account.fqn : account.acct}</Text>
         </Stack>
       </HStack>

From 16f52538ce09c6b747281168b71bf8eec3d9125e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Nov 2022 13:46:00 -0600
Subject: [PATCH 16/50] MediaModal: fix hotkey navigation Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1209

---
 app/soapbox/features/ui/components/modals/media-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index 0551c61c4c..bfd4ed29af 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -83,7 +83,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, []);
+  }, [index]);
 
   const getIndex = () => {
     return index !== null ? index : props.index;

From 37b698b2e032f264eff54c289f8c0191006b42dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 24 Nov 2022 23:15:30 +0100
Subject: [PATCH 17/50] Minor chats styles improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/dropdown-menu.tsx      |  5 ++-
 .../components/ui/textarea/textarea.tsx       |  2 +-
 .../features/chats/components/chat-box.tsx    |  5 ++-
 .../chats/components/chat-message-list.tsx    |  1 +
 app/styles/chats.scss                         | 37 ++++++++-----------
 5 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/app/soapbox/components/dropdown-menu.tsx b/app/soapbox/components/dropdown-menu.tsx
index 77be0f18db..807e94997d 100644
--- a/app/soapbox/components/dropdown-menu.tsx
+++ b/app/soapbox/components/dropdown-menu.tsx
@@ -259,6 +259,7 @@ export interface IDropdown extends RouteComponentProps {
   text?: string,
   onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
   children?: JSX.Element,
+  dropdownMenuStyle?: React.CSSProperties,
 }
 
 interface IDropdownState {
@@ -369,7 +370,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
   }
 
   render() {
-    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
+    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children, dropdownMenuStyle } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
@@ -403,7 +404,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
         )}
 
         <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
-          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
+          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} style={dropdownMenuStyle} />
         </Overlay>
       </>
     );
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index c1bbe0ee49..e9788a069e 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import React from 'react';
 
-interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly' | 'onKeyDown' | 'onPaste'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */
diff --git a/app/soapbox/features/chats/components/chat-box.tsx b/app/soapbox/features/chats/components/chat-box.tsx
index de97cd45aa..38ef43c746 100644
--- a/app/soapbox/features/chats/components/chat-box.tsx
+++ b/app/soapbox/features/chats/components/chat-box.tsx
@@ -8,6 +8,7 @@ import {
 } from 'soapbox/actions/chats';
 import { uploadMedia } from 'soapbox/actions/media';
 import IconButton from 'soapbox/components/icon-button';
+import { Textarea } from 'soapbox/components/ui';
 import UploadProgress from 'soapbox/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload-button';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
@@ -179,11 +180,11 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
       {isUploading && (
         <UploadProgress progress={uploadProgress * 100} />
       )}
-      <div className='chat-box__actions simple_form'>
+      <div className='chat-box__actions'>
         <div className='chat-box__send'>
           {renderActionButton()}
         </div>
-        <textarea
+        <Textarea
           rows={1}
           placeholder={intl.formatMessage(messages.placeholder)}
           onKeyDown={handleKeyDown}
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 90c27e4a62..614963e61d 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -254,6 +254,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
               items={menu}
               src={require('@tabler/icons/dots.svg')}
               title={intl.formatMessage(messages.more)}
+              dropdownMenuStyle={{ zIndex: 1000 }}
             />
           </div>
         </div>
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 7c98b11ffd..c5be237aa1 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -68,7 +68,7 @@
   }
 
   &__content {
-    @apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-gray-800;
+    @apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-gray-900;
 
     > div {
       @apply max-h-full;
@@ -92,7 +92,7 @@
   }
 
   .audio-toggle .react-toggle-track {
-    @apply h-4 w-8 bg-accent-500;
+    @apply h-4 w-8 bg-accent-500 dark:bg-accent-500;
   }
 
   .audio-toggle .react-toggle-track-check {
@@ -112,6 +112,10 @@
   .fa {
     font-size: 14px;
   }
+
+  .chat-message--me .chat-message__bubble {
+    @apply dark:bg-primary-900;
+  }
 }
 
 .chat-messages {
@@ -155,7 +159,7 @@
   }
 
   &--me .chat-message__bubble {
-    @apply bg-primary-200 dark:bg-primary-900;
+    @apply bg-primary-200 dark:bg-primary-800;
     margin-left: auto;
   }
 
@@ -169,15 +173,16 @@
     right: -8px;
     height: 20px;
     padding: 1px;
-    background: var(--background-color);
-    border-radius: 999px;
     opacity: 0;
     pointer-events: none;
     transition: 0.2s;
 
-    .svg-icon {
-      height: 20px;
-      width: 20px;
+    button {
+      @apply p-1 bg-gray-100 dark:bg-gray-800;
+
+      svg {
+        @apply h-4 w-4;
+      }
     }
   }
 }
@@ -250,29 +255,17 @@
     position: relative;
 
     textarea {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      box-sizing: border-box;
-      padding: 6px;
-      padding-right: 25px;
-      background: var(--background-color);
-      border: 0;
-      border-radius: 6px;
-      color: var(--primary-text-color);
-      font-size: 15px;
-      overflow: hidden;
+      @apply pr-6;
     }
   }
 
   &__send {
     .icon-button,
     button {
-      @apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 text-black dark:text-white;
+      @apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 bg-transparent text-black dark:text-white;
       top: 50%;
       transform: translateY(-50%);
 
-      .svg-icon,
       svg {
         @apply w-[18px] h-[18px];
       }

From 1bc1ae27b69ae72f1b6417942ca368543c1a74db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 25 Nov 2022 00:03:22 +0100
Subject: [PATCH 18/50] Focus styles, keyboard navigation improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/list.tsx                    | 8 +++++++-
 app/soapbox/components/sidebar-menu.tsx            | 8 +++++---
 app/soapbox/components/status-reply-mentions.tsx   | 2 +-
 app/soapbox/features/aliases/components/search.tsx | 2 +-
 app/styles/components/react-toggle.scss            | 4 ++++
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index b16a367842..e1df669acc 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -21,9 +21,15 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
   const id = uuidv4();
   const domId = `list-group-${id}`;
 
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onClick!();
+    }
+  };
+
   const Comp = onClick ? 'a' : 'div';
   const LabelComp = onClick ? 'span' : 'label';
-  const linkProps = onClick ? { onClick } : {};
+  const linkProps = onClick ? { onClick, onKeyDown, tabIndex: 0, role: 'link' } : {};
 
   const renderChildren = React.useCallback(() => {
     return React.Children.map(children, (child) => {
diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index 0e0ae7f6fd..f4186f22bd 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -134,9 +134,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   if (!account) return null;
 
   return (
-    <div className={classNames('sidebar-menu__root', {
-      'sidebar-menu__root--visible': sidebarOpen,
-    })}
+    <div
+      className={classNames('sidebar-menu__root', {
+        'sidebar-menu__root--visible': sidebarOpen,
+      })}
+      aria-expanded={sidebarOpen}
     >
       <div
         className={classNames({
diff --git a/app/soapbox/components/status-reply-mentions.tsx b/app/soapbox/components/status-reply-mentions.tsx
index 0964c84ae1..8b1ce6dd67 100644
--- a/app/soapbox/components/status-reply-mentions.tsx
+++ b/app/soapbox/components/status-reply-mentions.tsx
@@ -66,7 +66,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
 
   if (to.size > 2) {
     accounts.push(
-      <span key='more' className='hover:underline cursor-pointer' role='presentation' onClick={handleOpenMentionsModal}>
+      <span key='more' className='hover:underline cursor-pointer' role='button' onClick={handleOpenMentionsModal} tabIndex={0}>
         <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />
       </span>,
     );
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index b84d90aa47..f64c4a3323 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -53,7 +53,7 @@ const Search: React.FC = () => {
           placeholder={intl.formatMessage(messages.search)}
         />
 
-        <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
+        <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
           <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>
diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss
index 726e527312..1f5cb0fc56 100644
--- a/app/styles/components/react-toggle.scss
+++ b/app/styles/components/react-toggle.scss
@@ -8,6 +8,10 @@
   user-select: none;
   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
   -webkit-tap-highlight-color: transparent;
+
+  &:focus-within .react-toggle-track {
+    @apply ring-2 ring-offset-2 ring-primary-500;
+  }
 }
 
 .react-toggle-screenreader-only {

From 1fa85d0dd6b7ce891a843c7e434f223642c880dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 25 Nov 2022 15:22:05 +0100
Subject: [PATCH 19/50] Fix: Can't remove all profile fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/edit-profile/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/edit-profile/index.tsx b/app/soapbox/features/edit-profile/index.tsx
index 1967e9138a..6a96079a59 100644
--- a/app/soapbox/features/edit-profile/index.tsx
+++ b/app/soapbox/features/edit-profile/index.tsx
@@ -198,7 +198,10 @@ const EditProfile: React.FC = () => {
   const handleSubmit: React.FormEventHandler = (event) => {
     const promises = [];
 
-    promises.push(dispatch(patchMe(data, true)));
+    const params = { ...data };
+    if (params.fields_attributes?.length === 0) params.fields_attributes = [{ name: '', value: '' }];
+
+    promises.push(dispatch(patchMe(params, true)));
 
     if (features.muteStrangers) {
       promises.push(

From bb2a0002a650dedc9932302bfb9192747be397ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 25 Nov 2022 15:50:07 +0100
Subject: [PATCH 20/50] Switch account when adding another account
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../auth-login/components/login-page.tsx      | 45 ++++++++++---------
 .../public-layout/components/header.tsx       | 14 +++---
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/app/soapbox/features/auth-login/components/login-page.tsx b/app/soapbox/features/auth-login/components/login-page.tsx
index c137d0165d..609af73a46 100644
--- a/app/soapbox/features/auth-login/components/login-page.tsx
+++ b/app/soapbox/features/auth-login/components/login-page.tsx
@@ -26,32 +26,35 @@ const LoginPage = () => {
   const [mfaToken, setMfaToken] = useState(token || '');
   const [shouldRedirect, setShouldRedirect] = useState(false);
 
-  const getFormData = (form: HTMLFormElement) => {
-    return Object.fromEntries(
+  const getFormData = (form: HTMLFormElement) =>
+    Object.fromEntries(
       Array.from(form).map((i: any) => [i.name, i.value]),
     );
-  };
 
   const handleSubmit: React.FormEventHandler = (event) => {
     const { username, password } = getFormData(event.target as HTMLFormElement);
-    dispatch(logIn(username, password)).then(({ access_token }) => {
-      return dispatch(verifyCredentials(access_token as string))
-        // Refetch the instance for authenticated fetch
-        .then(() => dispatch(fetchInstance() as any));
-    }).then((account: { id: string }) => {
-      dispatch(closeModal());
-      setShouldRedirect(true);
-      if (typeof me === 'string') {
-        dispatch(switchAccount(account.id));
-      }
-    }).catch((error: AxiosError) => {
-      const data: any = error.response?.data;
-      if (data?.error === 'mfa_required') {
-        setMfaAuthNeeded(true);
-        setMfaToken(data.mfa_token);
-      }
-      setIsLoading(false);
-    });
+    dispatch(logIn(username, password))
+      .then(({ access_token }) => dispatch(verifyCredentials(access_token as string)))
+      // Refetch the instance for authenticated fetch
+      .then(async (account) => {
+        await dispatch(fetchInstance());
+        return account;
+      })
+      .then((account: { id: string }) => {
+        dispatch(closeModal());
+        if (typeof me === 'string') {
+          dispatch(switchAccount(account.id));
+        } else {
+          setShouldRedirect(true);
+        }
+      }).catch((error: AxiosError) => {
+        const data: any = error.response?.data;
+        if (data?.error === 'mfa_required') {
+          setMfaAuthNeeded(true);
+          setMfaToken(data.mfa_token);
+        }
+        setIsLoading(false);
+      });
     setIsLoading(true);
     event.preventDefault();
   };
diff --git a/app/soapbox/features/public-layout/components/header.tsx b/app/soapbox/features/public-layout/components/header.tsx
index 641b8a6ac3..640f65d6f2 100644
--- a/app/soapbox/features/public-layout/components/header.tsx
+++ b/app/soapbox/features/public-layout/components/header.tsx
@@ -50,14 +50,12 @@ const Header = () => {
     setLoading(true);
 
     dispatch(logIn(username, password) as any)
-      .then(({ access_token }: { access_token: string }) => {
-        return (
-          dispatch(verifyCredentials(access_token) as any)
-            // Refetch the instance for authenticated fetch
-            .then(() => dispatch(fetchInstance()))
-            .then(() => setShouldRedirect(true))
-        );
-      })
+      .then(({ access_token }: { access_token: string }) => (
+        dispatch(verifyCredentials(access_token) as any)
+        // Refetch the instance for authenticated fetch
+          .then(() => dispatch(fetchInstance()))
+          .then(() => setShouldRedirect(true))
+      ))
       .catch((error: AxiosError) => {
         setLoading(false);
 

From 785c6b57e32acaed3fe6a2e35169ac71644c3471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 25 Nov 2022 18:04:11 +0100
Subject: [PATCH 21/50] RTL support, use Stack and HStack in more places
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/__mocks__/react-inlinesvg.tsx  |  2 +-
 app/soapbox/components/account.tsx            |  8 ++---
 app/soapbox/components/copyable-input.tsx     |  4 +--
 app/soapbox/components/display-name.tsx       | 20 ++++++++----
 app/soapbox/components/dropdown-menu.tsx      |  2 +-
 app/soapbox/components/error-boundary.tsx     |  6 ++--
 app/soapbox/components/gdpr-banner.tsx        |  2 +-
 app/soapbox/components/helmet.tsx             |  2 +-
 app/soapbox/components/list.tsx               | 10 +++---
 .../components/sidebar-navigation-link.tsx    |  2 +-
 app/soapbox/components/translate-button.tsx   |  2 +-
 app/soapbox/components/ui/avatar/avatar.tsx   |  2 +-
 app/soapbox/components/ui/button/button.tsx   |  2 +-
 app/soapbox/components/ui/card/card.tsx       |  8 ++---
 .../ui/emoji/__tests__/emoji.test.tsx         |  2 +-
 .../ui/form-actions/form-actions.tsx          |  6 ++--
 app/soapbox/components/ui/form/form.tsx       |  2 +-
 app/soapbox/components/ui/hstack/hstack.tsx   |  4 ++-
 .../ui/icon/__tests__/svg-icon.test.tsx       |  2 +-
 app/soapbox/components/ui/input/input.tsx     |  7 ++---
 app/soapbox/components/ui/modal/modal.tsx     |  9 +++---
 .../ui/radio-button/radio-button.tsx          |  7 +++--
 app/soapbox/components/ui/select/select.tsx   |  2 +-
 app/soapbox/components/ui/tabs/tabs.tsx       |  2 +-
 app/soapbox/containers/soapbox.tsx            |  4 ++-
 .../features/account/components/header.tsx    | 18 +++++------
 .../features/aliases/components/account.tsx   | 22 +++++--------
 .../components/password-reset-confirm.tsx     |  2 +-
 .../features/chats/components/chat.tsx        | 21 ++++++-------
 .../compose/components/compose-form.tsx       | 16 +++++-----
 .../compose/components/polls/poll-form.tsx    |  2 +-
 .../features/compose/components/search.tsx    |  2 +-
 .../components/crypto-address.tsx             |  6 ++--
 app/soapbox/features/delete-account/index.tsx |  2 +-
 app/soapbox/features/edit-email/index.tsx     |  2 +-
 app/soapbox/features/edit-password/index.tsx  |  2 +-
 .../features/email-confirmation/index.tsx     |  2 +-
 .../__tests__/landing-page.test.tsx           |  2 +-
 app/soapbox/features/landing-page/index.tsx   |  4 +--
 .../list-adder/components/account.tsx         | 31 -------------------
 app/soapbox/features/list-adder/index.tsx     |  4 +--
 .../list-editor/components/account.tsx        | 31 ++++++-------------
 .../__tests__/notification.test.tsx           |  2 +-
 .../features/onboarding/onboarding-wizard.tsx |  2 +-
 .../steps/avatar-selection-step.tsx           |  2 +-
 .../features/onboarding/steps/bio-step.tsx    |  2 +-
 .../onboarding/steps/completed-step.tsx       |  2 +-
 .../steps/cover-photo-selection-step.tsx      |  2 +-
 .../onboarding/steps/display-name-step.tsx    |  2 +-
 .../onboarding/steps/fediverse-step.tsx       |  2 +-
 .../steps/suggested-accounts-step.tsx         |  2 +-
 .../components/placeholder-avatar.tsx         |  2 +-
 .../components/placeholder-card.tsx           |  2 +-
 .../components/placeholder-notification.tsx   |  7 +++--
 .../components/placeholder-status.tsx         |  8 +++--
 .../public-layout/components/header.tsx       |  6 ++--
 .../features/reply-mentions/account.tsx       | 24 ++++++--------
 app/soapbox/features/settings/index.tsx       |  8 +++--
 .../ui/components/modals/actions-modal.tsx    | 11 ++++---
 .../modals/report-modal/steps/reason-step.tsx |  2 +-
 app/soapbox/features/ui/components/navbar.tsx |  8 ++---
 .../features/ui/components/promo-panel.tsx    |  2 +-
 .../features/ui/components/trends-panel.tsx   |  2 +-
 .../features/ui/components/upload-area.tsx    |  2 +-
 .../ui/components/who-to-follow-panel.tsx     |  2 +-
 .../features/verification/email-passthru.tsx  |  2 +-
 app/soapbox/features/verification/index.tsx   |  2 +-
 .../features/verification/registration.tsx    |  2 +-
 .../features/verification/waitlist-page.tsx   |  2 +-
 app/soapbox/hooks/useOnScreen.ts              |  2 +-
 app/soapbox/pages/home-page.tsx               |  6 ++--
 app/styles/accounts.scss                      | 17 ----------
 app/styles/components/columns.scss            |  9 ++----
 app/styles/components/compose-form.scss       |  2 +-
 app/styles/components/modal.scss              |  2 +-
 app/styles/components/search.scss             |  2 +-
 app/styles/components/sidebar-menu.scss       |  2 +-
 app/styles/components/snackbar.scss           |  8 ++---
 78 files changed, 199 insertions(+), 251 deletions(-)
 delete mode 100644 app/soapbox/features/list-adder/components/account.tsx

diff --git a/app/soapbox/components/__mocks__/react-inlinesvg.tsx b/app/soapbox/components/__mocks__/react-inlinesvg.tsx
index 367ec0e333..1d4fde154e 100644
--- a/app/soapbox/components/__mocks__/react-inlinesvg.tsx
+++ b/app/soapbox/components/__mocks__/react-inlinesvg.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 interface IInlineSVG {
   loader?: JSX.Element,
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 006584e8d1..70ab2cfc55 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
@@ -199,7 +199,7 @@ const Account = ({
                 title={account.acct}
                 onClick={(event: React.MouseEvent) => event.stopPropagation()}
               >
-                <div className='flex items-center space-x-1 flex-grow' style={style}>
+                <HStack space={1} alignItems='center' grow style={style}>
                   <Text
                     size='sm'
                     weight='semibold'
@@ -208,7 +208,7 @@ const Account = ({
                   />
 
                   {account.verified && <VerificationBadge />}
-                </div>
+                </HStack>
               </LinkEl>
             </ProfilePopper>
 
@@ -255,7 +255,7 @@ const Account = ({
                 <Text
                   size='sm'
                   dangerouslySetInnerHTML={{ __html: account.note_emojified }}
-                  className='mr-2'
+                  className='mr-2 rtl:ml-2 rtl:mr-0'
                 />
               )}
             </Stack>
diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx
index c38cc8c5b3..24253d7df3 100644
--- a/app/soapbox/components/copyable-input.tsx
+++ b/app/soapbox/components/copyable-input.tsx
@@ -28,7 +28,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
         ref={input}
         type='text'
         value={value}
-        className='rounded-r-none'
+        className='rounded-r-none rtl:rounded-l-none rtl:rounded-r-lg'
         outerClassName='flex-grow'
         onClick={selectInput}
         readOnly
@@ -36,7 +36,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
 
       <Button
         theme='primary'
-        className='mt-1 h-full rounded-l-none rounded-r-lg'
+        className='mt-1 h-full rounded-l-none rounded-r-lg rtl:rounded-l-lg rtl:rounded-r-none'
         onClick={selectInput}
       >
         <FormattedMessage id='input.copy' defaultMessage='Copy' />
diff --git a/app/soapbox/components/display-name.tsx b/app/soapbox/components/display-name.tsx
index 8fd2bfa539..12a28b3828 100644
--- a/app/soapbox/components/display-name.tsx
+++ b/app/soapbox/components/display-name.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import { useSoapboxConfig } from 'soapbox/hooks';
@@ -7,16 +7,18 @@ import { getAcct } from '../utils/accounts';
 
 import Icon from './icon';
 import RelativeTimestamp from './relative-timestamp';
+import { HStack, Text } from './ui';
 import VerificationBadge from './verification-badge';
 
 import type { Account } from 'soapbox/types/entities';
 
 interface IDisplayName {
   account: Account
+  withSuffix?: boolean
   withDate?: boolean
 }
 
-const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = false }) => {
+const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = true, withDate = false }) => {
   const { displayFqn = false } = useSoapboxConfig();
   const { created_at: createdAt, verified } = account;
 
@@ -28,11 +30,17 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
   ) : null;
 
   const displayName = (
-    <span className='display-name__name'>
-      <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
+    <HStack space={1} alignItems='center' grow>
+      <Text
+        size='sm'
+        weight='semibold'
+        truncate
+        dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+      />
+
       {verified && <VerificationBadge />}
       {withDate && joinedAt}
-    </span>
+    </HStack>
   );
 
   const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);
@@ -42,7 +50,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
       <HoverRefWrapper accountId={account.get('id')} inline>
         {displayName}
       </HoverRefWrapper>
-      {suffix}
+      {withSuffix && suffix}
       {children}
     </span>
   );
diff --git a/app/soapbox/components/dropdown-menu.tsx b/app/soapbox/components/dropdown-menu.tsx
index 807e94997d..435386b618 100644
--- a/app/soapbox/components/dropdown-menu.tsx
+++ b/app/soapbox/components/dropdown-menu.tsx
@@ -196,7 +196,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           data-method={isLogout ? 'delete' : undefined}
           title={text}
         >
-          {icon && <SvgIcon src={icon} className='mr-3 h-5 w-5 flex-none' />}
+          {icon && <SvgIcon src={icon} className='mr-3 rtl:ml-3 rtl:mr-0 h-5 w-5 flex-none' />}
 
           <span className='truncate'>{text}</span>
 
diff --git a/app/soapbox/components/error-boundary.tsx b/app/soapbox/components/error-boundary.tsx
index 830f3e679e..370472cb45 100644
--- a/app/soapbox/components/error-boundary.tsx
+++ b/app/soapbox/components/error-boundary.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import * as BuildConfig from 'soapbox/build-config';
-import { Text, Stack } from 'soapbox/components/ui';
+import { HStack, Text, Stack } from 'soapbox/components/ui';
 import { captureException } from 'soapbox/monitoring';
 import KVStore from 'soapbox/storage/kv-store';
 import sourceCode from 'soapbox/utils/code';
@@ -179,7 +179,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
         </main>
 
         <footer className='flex-shrink-0 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8'>
-          <nav className='flex justify-center space-x-4'>
+          <HStack justifyContent='center' space={4} element='nav'>
             {links.get('status') && (
               <>
                 <a href={links.get('status')} className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'>
@@ -205,7 +205,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
                 </a>
               </>
             )}
-          </nav>
+          </HStack>
         </footer>
       </div>
     );
diff --git a/app/soapbox/components/gdpr-banner.tsx b/app/soapbox/components/gdpr-banner.tsx
index 425376f955..94ea0cf593 100644
--- a/app/soapbox/components/gdpr-banner.tsx
+++ b/app/soapbox/components/gdpr-banner.tsx
@@ -31,7 +31,7 @@ const GdprBanner: React.FC = () => {
 
   return (
     <Banner theme='opaque' className={classNames('transition-transform', { 'translate-y-full': slideout })}>
-      <div className='flex flex-col space-y-4 lg:space-y-0 lg:space-x-4 lg:flex-row lg:items-center lg:justify-between'>
+      <div className='flex flex-col space-y-4 lg:space-y-0 lg:space-x-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between'>
         <Stack space={2}>
           <Text size='xl' weight='bold'>
             <FormattedMessage id='gdpr.title' defaultMessage='{siteTitle} uses cookies' values={{ siteTitle }} />
diff --git a/app/soapbox/components/helmet.tsx b/app/soapbox/components/helmet.tsx
index ba4a82fd32..d3a5bc021e 100644
--- a/app/soapbox/components/helmet.tsx
+++ b/app/soapbox/components/helmet.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Helmet as ReactHelmet } from 'react-helmet';
 
 import { useAppSelector, useSettings } from 'soapbox/hooks';
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index e1df669acc..0ac33653e3 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -1,11 +1,11 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { SelectDropdown } from '../features/forms';
 
 import Icon from './icon';
-import { Select } from './ui';
+import { HStack, Select } from './ui';
 
 const List: React.FC = ({ children }) => (
   <div className='space-y-0.5'>{children}</div>
@@ -56,7 +56,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
       })}
       {...linkProps}
     >
-      <div className='flex flex-col py-1.5 pr-4'>
+      <div className='flex flex-col py-1.5 pr-4 rtl:pl-4 rtl:pr-0'>
         <LabelComp className='text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
 
         {hint ? (
@@ -65,11 +65,11 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
       </div>
 
       {onClick ? (
-        <div className='flex flex-row items-center text-gray-700 dark:text-gray-600'>
+        <HStack space={1} alignItems='center' className='text-gray-700 dark:text-gray-600'>
           {children}
 
           <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1' />
-        </div>
+        </HStack>
       ) : renderChildren()}
     </Comp>
   );
diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 5c9100f851..ce046e04cc 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -37,7 +37,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       ref={ref}
       onClick={handleClick}
       className={classNames({
-        'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rounded-full group text-gray-600 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900': true,
+        'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rtl:space-x-reverse rounded-full group text-gray-600 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900': true,
         'dark:text-gray-100 text-gray-900': isActive,
       })}
     >
diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index 07c778fd22..03a43722ae 100644
--- a/app/soapbox/components/translate-button.tsx
+++ b/app/soapbox/components/translate-button.tsx
@@ -50,7 +50,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
   }
 
   return (
-    <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-left text-sm hover:underline' onClick={handleTranslate}>
+    <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-start text-sm hover:underline' onClick={handleTranslate}>
       <FormattedMessage id='status.translate' defaultMessage='Translate' />
     </button>
   );
diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx
index b6e0bcbf08..384fa354df 100644
--- a/app/soapbox/components/ui/avatar/avatar.tsx
+++ b/app/soapbox/components/ui/avatar/avatar.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 
 import StillImage from 'soapbox/components/still-image';
 
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index 97de8862b8..4be97ee83d 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import Icon from '../icon/icon';
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index a2d181e3a8..2fb89315bd 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui';
+import { HStack, Text } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 
 const sizes = {
@@ -62,7 +62,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
@@ -70,11 +70,11 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
   };
 
   return (
-    <div className='mb-4 flex flex-row items-center'>
+    <HStack alignItems='center' space={2} className='mb-4'>
       {renderBackButton()}
 
       {children}
-    </div>
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
index 85126806f9..c87ef9040d 100644
--- a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
+++ b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
 import Emoji from '../emoji';
diff --git a/app/soapbox/components/ui/form-actions/form-actions.tsx b/app/soapbox/components/ui/form-actions/form-actions.tsx
index a09fb02dcf..f1480e07c6 100644
--- a/app/soapbox/components/ui/form-actions/form-actions.tsx
+++ b/app/soapbox/components/ui/form-actions/form-actions.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
+import HStack from '../hstack/hstack';
+
 /** Container element to house form actions. */
 const FormActions: React.FC = ({ children }) => (
-  <div className='flex justify-end space-x-2'>
+  <HStack space={2} justifyContent='end'>
     {children}
-  </div>
+  </HStack>
 );
 
 export default FormActions;
diff --git a/app/soapbox/components/ui/form/form.tsx b/app/soapbox/components/ui/form/form.tsx
index 59ca180b1f..466825434c 100644
--- a/app/soapbox/components/ui/form/form.tsx
+++ b/app/soapbox/components/ui/form/form.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 interface IForm {
   /** Form submission event handler. */
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index 996ccd64d8..4f31a3403c 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -21,8 +21,10 @@ const spaces = {
   1: 'space-x-1',
   1.5: 'space-x-1.5',
   2: 'space-x-2',
+  2.5: 'space-x-2.5',
   3: 'space-x-3',
   4: 'space-x-4',
+  5: 'space-x-5',
   6: 'space-x-6',
   8: 'space-x-8',
 };
@@ -58,7 +60,7 @@ const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
     <Elem
       {...filteredProps}
       ref={ref}
-      className={classNames('flex', {
+      className={classNames('flex rtl:space-x-reverse', {
         // @ts-ignore
         [alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
         // @ts-ignore
diff --git a/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx b/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
index c56a6d190b..79cee2c657 100644
--- a/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
+++ b/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
 import SvgIcon from '../svg-icon';
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 6be89c2d40..03bcd990f2 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -89,16 +89,15 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
             'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search',
             'bg-transparent border-none': theme === 'transparent',
-            'pr-7': isPassword || append,
+            'pr-7 rtl:pl-7 rtl:pr-3': isPassword || append,
             'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',
             'pl-16': typeof prepend !== 'undefined',
           }, className)}
         />
 
-        {/* eslint-disable-next-line no-nested-ternary */}
         {append ? (
-          <div className='absolute inset-y-0 right-0 flex items-center pr-3'>
+          <div className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto flex items-center pr-3'>
             {append}
           </div>
         ) : null}
@@ -111,7 +110,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 intl.formatMessage(messages.showPassword)
             }
           >
-            <div className='absolute inset-y-0 right-0 flex items-center'>
+            <div className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto flex items-center'>
               <button
                 type='button'
                 onClick={togglePassword}
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 969f7ae65c..7413091955 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -1,9 +1,10 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Button from '../button/button';
 import IconButton from '../icon-button/icon-button';
+import Stack from '../stack/stack';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -81,7 +82,7 @@ const Modal: React.FC<IModal> = ({
   }, [skipFocus, buttonRef]);
 
   return (
-    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-left align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
+    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-start align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           {title && (
@@ -126,7 +127,7 @@ const Modal: React.FC<IModal> = ({
             )}
           </div>
 
-          <div className='flex flex-row space-x-2'>
+          <Stack space={2}>
             {secondaryAction && (
               <Button
                 theme='secondary'
@@ -145,7 +146,7 @@ const Modal: React.FC<IModal> = ({
             >
               {confirmationText}
             </Button>
-          </div>
+          </Stack>
         </div>
       )}
     </div>
diff --git a/app/soapbox/components/ui/radio-button/radio-button.tsx b/app/soapbox/components/ui/radio-button/radio-button.tsx
index 322cbd7e75..792b4d0cc6 100644
--- a/app/soapbox/components/ui/radio-button/radio-button.tsx
+++ b/app/soapbox/components/ui/radio-button/radio-button.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import HStack from '../hstack/hstack';
 
 interface IRadioButton {
   value: string
@@ -16,7 +17,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
   const formFieldId: string = useMemo(() => `radio-${uuidv4()}`, []);
 
   return (
-    <div className='flex items-center'>
+    <HStack alignItems='center' space={3}>
       <input
         type='radio'
         name={name}
@@ -27,10 +28,10 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
         className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
       />
 
-      <label htmlFor={formFieldId} className='ml-3 block text-sm font-medium text-gray-700'>
+      <label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>
         {label}
       </label>
-    </div>
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index b8d05b79da..8c2369ce56 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
   children: Iterable<React.ReactNode>,
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 49316529af..2839085799 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -6,7 +6,7 @@ import {
   useTabsContext,
 } from '@reach/tabs';
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Counter from '../counter/counter';
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index f1623f5859..ce02d068df 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -49,6 +49,8 @@ import ErrorBoundary from '../components/error-boundary';
 import UI from '../features/ui';
 import { store } from '../store';
 
+const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he'];
+
 // Configure global functions for developers
 createGlobals(store);
 
@@ -276,7 +278,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
     <>
       <Helmet>
         <html lang={locale} className={classNames('h-full', { dark: darkMode })} />
-        <body className={bodyClass} />
+        <body className={bodyClass} dir={RTL_LOCALES.includes(locale) ? 'rtl' : undefined} />
         {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
         {darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
         <meta name='theme-color' content={soapboxConfig.brandColor} />
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index d3d7865b69..fdc39c6b0d 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -89,13 +89,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         </div>
 
         <div className='px-4 sm:px-6'>
-          <div className='-mt-12 flex items-end space-x-5'>
+          <HStack alignItems='bottom' space={5} className='-mt-12'>
             <div className='flex relative'>
               <div
                 className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white dark:ring-gray-800'
               />
             </div>
-          </div>
+          </HStack>
         </div>
       </div>
     );
@@ -570,7 +570,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       </div>
 
       <div className='px-4 sm:px-6'>
-        <div className='-mt-12 flex items-end space-x-5'>
+        <HStack className='-mt-12' alignItems='bottom' space={5}>
           <div className='flex'>
             <a href={account.avatar} onClick={handleAvatarClick} target='_blank'>
               <Avatar
@@ -582,7 +582,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           </div>
 
           <div className='mt-6 flex justify-end w-full sm:pb-1'>
-            <div className='mt-10 flex flex-row space-y-0 space-x-2'>
+            <HStack space={2} className='mt-10'>
               <SubscriptionButton account={account} />
 
               {ownAccount && (
@@ -606,13 +606,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
                         return (
                           <Comp key={idx} {...itemProps} className='group'>
-                            <div className='flex items-center'>
+                            <HStack space={3} alignItems='center'>
                               {menuItem.icon && (
-                                <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
+                                <SvgIcon src={menuItem.icon} className='h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
                               )}
 
                               <div className='truncate'>{menuItem.text}</div>
-                            </div>
+                            </HStack>
                           </Comp>
                         );
                       }
@@ -625,9 +625,9 @@ const Header: React.FC<IHeader> = ({ account }) => {
               {/* {renderMessageButton()} */}
 
               <ActionButton account={account} />
-            </div>
+            </HStack>
           </div>
-        </div>
+        </HStack>
       </div>
     </div>
   );
diff --git a/app/soapbox/features/aliases/components/account.tsx b/app/soapbox/features/aliases/components/account.tsx
index f76431ba8c..1687b85e6d 100644
--- a/app/soapbox/features/aliases/components/account.tsx
+++ b/app/soapbox/features/aliases/components/account.tsx
@@ -2,9 +2,9 @@ import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addToAliases } from 'soapbox/actions/aliases';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
+import AccountComponent from 'soapbox/components/account';
 import IconButton from 'soapbox/components/icon-button';
+import { HStack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 import { getFeatures } from 'soapbox/utils/features';
@@ -47,23 +47,17 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
 
   if (!added && accountId !== me) {
     button = (
-      <div className='account__relationship'>
-        <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
-      </div>
+      <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
     );
   }
 
   return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <div className='account__display-name'>
-          <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-          <DisplayName account={account} />
-        </div>
-
-        {button}
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountComponent account={account} withRelationship={false} />
       </div>
-    </div>
+      {button}
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
index 2a55c54836..fb20ab06d2 100644
--- a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
+++ b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index 2083ce19d0..c180160e3d 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display-name';
 import Icon from 'soapbox/components/icon';
-import { Counter } from 'soapbox/components/ui';
+import { Avatar, Counter, HStack, Stack, Text } from 'soapbox/components/ui';
 import emojify from 'soapbox/features/emoji/emoji';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetChat } from 'soapbox/selectors';
@@ -34,12 +33,10 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
   return (
     <div className='account'>
       <button className='floating-link' onClick={() => onClick(chat)} />
-      <div className='account__wrapper'>
-        <div key={account.id} className='account__display-name'>
-          <div className='account__avatar-wrapper'>
-            <Avatar account={account} size={36} />
-          </div>
-          <DisplayName account={account} />
+      <HStack key={account.id} space={3} className='relative'>
+        <Avatar src={account.avatar} size={36} />
+        <Stack>
+          <DisplayName account={account} withSuffix={false} />
           {attachment && (
             <Icon
               className='chat__attachment-icon'
@@ -47,7 +44,9 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
             />
           )}
           {content ? (
-            <span
+            <Text
+              theme='muted'
+              size='sm'
               className='chat__last-message'
               dangerouslySetInnerHTML={{ __html: parsedContent }}
             />
@@ -63,8 +62,8 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
               <Counter count={unreadCount} />
             </div>
           )}
-        </div>
-      </div>
+        </Stack>
+      </HStack>
     </div>
   );
 };
diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index 78a9cd11ac..1267c87539 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -16,7 +16,7 @@ import {
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea';
 import Icon from 'soapbox/components/icon';
-import { Button, Stack } from 'soapbox/components/ui';
+import { Button, HStack, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is-mobile';
 
@@ -221,7 +221,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   }, [focusDate]);
 
   const renderButtons = useCallback(() => (
-    <div className='flex items-center space-x-2'>
+    <HStack alignItems='center' space={2}>
       {features.media && <UploadButtonContainer composeId={id} />}
       <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />
       {features.polls && <PollButton composeId={id} />}
@@ -229,7 +229,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       {features.scheduledStatuses && <ScheduleButton composeId={id} />}
       {features.spoilers && <SpoilerButton composeId={id} />}
       {features.richText && <MarkdownButton composeId={id} />}
-    </div>
+    </HStack>
   ), [features, id]);
 
   const condensed = shouldCondense && !composeFocused && isEmpty() && !isUploading;
@@ -335,16 +335,18 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       >
         {renderButtons()}
 
-        <div className='flex items-center space-x-4 ml-auto'>
+        <HStack space={4} alignItems='center' className='ml-auto rtl:ml-0 rtl:mr-auto'>
           {maxTootChars && (
-            <div className='flex items-center space-x-1'>
+            <HStack space={1} alignItems='center'>
               <TextCharacterCounter max={maxTootChars} text={text} />
               <VisualCharacterCounter max={maxTootChars} text={text} />
-            </div>
+            </HStack>
           )}
 
           <Button type='submit' theme='primary' text={publishText} disabled={disabledButton} />
-        </div>
+        </HStack>
+        {/* <HStack alignItems='center' space={4}>
+        </HStack> */}
       </div>
     </Stack>
   );
diff --git a/app/soapbox/features/compose/components/polls/poll-form.tsx b/app/soapbox/features/compose/components/polls/poll-form.tsx
index f080ae1fa7..77f47bdfce 100644
--- a/app/soapbox/features/compose/components/polls/poll-form.tsx
+++ b/app/soapbox/features/compose/components/polls/poll-form.tsx
@@ -169,7 +169,7 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
 
       <Divider />
 
-      <button type='button' onClick={handleToggleMultiple} className='text-left'>
+      <button type='button' onClick={handleToggleMultiple} className='text-start'>
         <HStack alignItems='center' justifyContent='between'>
           <Stack>
             <Text weight='medium'>
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index a5f310655b..f4b8c1876e 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -149,7 +149,7 @@ const Search = (props: ISearch) => {
         <div
           role='button'
           tabIndex={0}
-          className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
+          className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto px-3 flex items-center cursor-pointer'
           onClick={handleClear}
         >
           <SvgIcon
diff --git a/app/soapbox/features/crypto-donate/components/crypto-address.tsx b/app/soapbox/features/crypto-donate/components/crypto-address.tsx
index cab59caa37..31add76723 100644
--- a/app/soapbox/features/crypto-donate/components/crypto-address.tsx
+++ b/app/soapbox/features/crypto-donate/components/crypto-address.tsx
@@ -33,7 +33,7 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
     <Stack>
       <HStack alignItems='center' className='mb-1'>
         <CryptoIcon
-          className='flex items-start justify-center w-6 mr-2.5'
+          className='flex items-start justify-center w-6 mr-2.5 rtl:ml-2.5 rtl:mr-0'
           ticker={ticker}
           title={title}
         />
@@ -41,12 +41,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
         <HStack alignItems='center' className='ml-auto'>
-          <a className='text-gray-500 ml-1' href='#' onClick={handleModalClick}>
+          <a className='text-gray-500 ml-1 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
             <Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
           </a>
 
           {explorerUrl && (
-            <a className='text-gray-500 ml-1' href={explorerUrl} target='_blank'>
+            <a className='text-gray-500 ml-1 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
               <Icon src={require('@tabler/icons/external-link.svg')} size={20} />
             </a>
           )}
diff --git a/app/soapbox/features/delete-account/index.tsx b/app/soapbox/features/delete-account/index.tsx
index 10b71bb67c..9bafff5928 100644
--- a/app/soapbox/features/delete-account/index.tsx
+++ b/app/soapbox/features/delete-account/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { deleteAccount } from 'soapbox/actions/security';
diff --git a/app/soapbox/features/edit-email/index.tsx b/app/soapbox/features/edit-email/index.tsx
index 7c1d5bfd35..6d77fd68f8 100644
--- a/app/soapbox/features/edit-email/index.tsx
+++ b/app/soapbox/features/edit-email/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeEmail } from 'soapbox/actions/security';
diff --git a/app/soapbox/features/edit-password/index.tsx b/app/soapbox/features/edit-password/index.tsx
index 0fd61d0c7d..ecb2d6bb1e 100644
--- a/app/soapbox/features/edit-password/index.tsx
+++ b/app/soapbox/features/edit-password/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changePassword } from 'soapbox/actions/security';
diff --git a/app/soapbox/features/email-confirmation/index.tsx b/app/soapbox/features/email-confirmation/index.tsx
index 0c4939eede..45d18444e2 100644
--- a/app/soapbox/features/email-confirmation/index.tsx
+++ b/app/soapbox/features/email-confirmation/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/app/soapbox/features/landing-page/__tests__/landing-page.test.tsx b/app/soapbox/features/landing-page/__tests__/landing-page.test.tsx
index a52dbd9750..6e96672ba2 100644
--- a/app/soapbox/features/landing-page/__tests__/landing-page.test.tsx
+++ b/app/soapbox/features/landing-page/__tests__/landing-page.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import LandingPage from '..';
 import { rememberInstance } from '../../../actions/instance';
diff --git a/app/soapbox/features/landing-page/index.tsx b/app/soapbox/features/landing-page/index.tsx
index 08b9c2242b..b508ff2d97 100644
--- a/app/soapbox/features/landing-page/index.tsx
+++ b/app/soapbox/features/landing-page/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { prepareRequest } from 'soapbox/actions/consumer-auth';
@@ -106,7 +106,7 @@ const LandingPage = () => {
     <main className='mt-16 sm:mt-24' data-testid='homepage'>
       <div className='mx-auto max-w-7xl'>
         <div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
-          <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex'>
+          <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-start lg:flex'>
             <div className='w-full'>
               <Stack space={3}>
                 <h1 className='text-5xl font-extrabold text-transparent text-ellipsis overflow-hidden bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
diff --git a/app/soapbox/features/list-adder/components/account.tsx b/app/soapbox/features/list-adder/components/account.tsx
deleted file mode 100644
index e35a0ce968..0000000000
--- a/app/soapbox/features/list-adder/components/account.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useCallback } from 'react';
-
-import DisplayName from 'soapbox/components/display-name';
-import { Avatar } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
-
-interface IAccount {
-  accountId: string,
-}
-
-const Account: React.FC<IAccount> = ({ accountId }) => {
-  const getAccount = useCallback(makeGetAccount(), []);
-
-  const account = useAppSelector((state) => getAccount(state, accountId));
-
-  if (!account) return null;
-
-  return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <div className='account__display-name'>
-          <div className='account__avatar-wrapper'><Avatar src={account.avatar} size={36} /></div>
-          <DisplayName account={account} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Account;
diff --git a/app/soapbox/features/list-adder/index.tsx b/app/soapbox/features/list-adder/index.tsx
index 1e9d7c7454..f47e338d76 100644
--- a/app/soapbox/features/list-adder/index.tsx
+++ b/app/soapbox/features/list-adder/index.tsx
@@ -4,11 +4,11 @@ import { createSelector } from 'reselect';
 
 import { setupListAdder, resetListAdder } from 'soapbox/actions/lists';
 import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 import NewListForm from '../lists/components/new-list-form';
 
-import Account from './components/account';
 import List from './components/list';
 
 import type { List as ImmutableList } from 'immutable';
@@ -58,7 +58,7 @@ const ListAdder: React.FC<IListAdder> = ({ accountId, onClose }) => {
       title={<FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />}
       onClose={onClickClose}
     >
-      <Account accountId={accountId} />
+      <AccountContainer id={accountId} withRelationship={false} />
 
       <br />
 
diff --git a/app/soapbox/features/list-editor/components/account.tsx b/app/soapbox/features/list-editor/components/account.tsx
index b6c04a9e6d..5023a5b8bb 100644
--- a/app/soapbox/features/list-editor/components/account.tsx
+++ b/app/soapbox/features/list-editor/components/account.tsx
@@ -1,12 +1,11 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists';
-import DisplayName from 'soapbox/components/display-name';
 import IconButton from 'soapbox/components/icon-button';
-import { Avatar } from 'soapbox/components/ui';
+import { HStack } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account-container';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
@@ -20,37 +19,27 @@ interface IAccount {
 const Account: React.FC<IAccount> = ({ accountId }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const getAccount = useCallback(makeGetAccount(), []);
 
-  const account = useAppSelector((state) => getAccount(state, accountId));
   const isAdded = useAppSelector((state) => state.listEditor.accounts.items.includes(accountId));
 
   const onRemove = () => dispatch(removeFromListEditor(accountId));
   const onAdd = () => dispatch(addToListEditor(accountId));
 
-  if (!account) return null;
-
   let button;
 
   if (isAdded) {
-    button = <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@tabler/icons/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <div className='account__display-name'>
-          <div className='account__avatar-wrapper'><Avatar src={account.avatar} size={36} /></div>
-          <DisplayName account={account} />
-        </div>
-
-        <div className='account__relationship'>
-          {button}
-        </div>
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountContainer id={accountId} withRelationship={false} />
       </div>
-    </div>
+      {button}
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/features/notifications/components/__tests__/notification.test.tsx b/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
index b9c5df6414..e755624856 100644
--- a/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
+++ b/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { updateNotifications } from 'soapbox/actions/notifications';
 import { render, screen, rootState, createTestStore } from 'soapbox/jest/test-helpers';
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index ae3c3c74c4..f892048852 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 import ReactSwipeableViews from 'react-swipeable-views';
 
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 753ef4d7f5..936b59a510 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index 31c7bc6c95..bed69ecbc6 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index b6637589c9..a1059cb91f 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index 520fbc1b9c..ee0ffa0ebc 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index 00f38916e5..d833fdc528 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
diff --git a/app/soapbox/features/onboarding/steps/fediverse-step.tsx b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
index 6dbb26620e..4d83c5b98f 100644
--- a/app/soapbox/features/onboarding/steps/fediverse-step.tsx
+++ b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Account from 'soapbox/components/account';
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index e012062512..d913668997 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
diff --git a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
index d84fe1a4ec..7d9fa62f0f 100644
--- a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { Stack } from 'soapbox/components/ui';
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-card.tsx b/app/soapbox/features/placeholder/components/placeholder-card.tsx
index f587589d6d..f0ef9bc728 100644
--- a/app/soapbox/features/placeholder/components/placeholder-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-card.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-notification.tsx b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
index 1a035066dd..d3dab90055 100644
--- a/app/soapbox/features/placeholder/components/placeholder-notification.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import { HStack } from 'soapbox/components/ui';
 
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
@@ -13,7 +14,7 @@ const PlaceholderNotification = () => (
       </div>
 
       <div>
-        <div className='flex space-x-3 items-center'>
+        <HStack space={3} alignItems='center'>
           <div className='flex-shrink-0'>
             <PlaceholderAvatar size={48} />
           </div>
@@ -21,7 +22,7 @@ const PlaceholderNotification = () => (
           <div className='min-w-0 flex-1'>
             <PlaceholderDisplayName minLength={3} maxLength={25} />
           </div>
-        </div>
+        </HStack>
       </div>
 
       <div className='mt-4'>
diff --git a/app/soapbox/features/placeholder/components/placeholder-status.tsx b/app/soapbox/features/placeholder/components/placeholder-status.tsx
index b015c9df90..51cb4a5cea 100644
--- a/app/soapbox/features/placeholder/components/placeholder-status.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-status.tsx
@@ -1,5 +1,7 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
+
+import { HStack } from 'soapbox/components/ui';
 
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
@@ -19,7 +21,7 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) =>
   >
     <div className='w-full animate-pulse overflow-hidden'>
       <div>
-        <div className='flex space-x-3 items-center'>
+        <HStack space={3} alignItems='center'>
           <div className='flex-shrink-0'>
             <PlaceholderAvatar size={42} />
           </div>
@@ -27,7 +29,7 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) =>
           <div className='min-w-0 flex-1'>
             <PlaceholderDisplayName minLength={3} maxLength={25} />
           </div>
-        </div>
+        </HStack>
       </div>
 
       <div className='mt-4 status__content-wrapper'>
diff --git a/app/soapbox/features/public-layout/components/header.tsx b/app/soapbox/features/public-layout/components/header.tsx
index 640f65d6f2..053711afd4 100644
--- a/app/soapbox/features/public-layout/components/header.tsx
+++ b/app/soapbox/features/public-layout/components/header.tsx
@@ -92,7 +92,7 @@ const Header = () => {
 
           </div>
 
-          <div className='ml-10 flex space-x-6 items-center relative z-10'>
+          <HStack space={6} alignItems='center' className='ml-10 relative z-10'>
             <HStack alignItems='center'>
               <HStack space={6} alignItems='center' className='hidden md:flex md:mr-6'>
                 {links.get('help') && (
@@ -122,7 +122,7 @@ const Header = () => {
               </HStack>
             </HStack>
 
-            <Form className='hidden xl:flex space-x-2 items-center' onSubmit={handleSubmit}>
+            <Form className='hidden xl:flex space-x-2 rtl:space-x-reverse items-center' onSubmit={handleSubmit}>
               <Input
                 required
                 value={username}
@@ -165,7 +165,7 @@ const Header = () => {
                 {intl.formatMessage(messages.login)}
               </Button>
             </Form>
-          </div>
+          </HStack>
         </div>
       </nav>
     </header>
diff --git a/app/soapbox/features/reply-mentions/account.tsx b/app/soapbox/features/reply-mentions/account.tsx
index 53dc4e02ca..5facac7a86 100644
--- a/app/soapbox/features/reply-mentions/account.tsx
+++ b/app/soapbox/features/reply-mentions/account.tsx
@@ -3,9 +3,9 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
 import { addToMentions, removeFromMentions } from 'soapbox/actions/compose';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
+import AccountComponent from 'soapbox/components/account';
 import IconButton from 'soapbox/components/icon-button';
+import { HStack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useCompose } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
@@ -44,24 +44,18 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@tabler/icons/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <div className='account__display-name'>
-          <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-          <DisplayName account={account} />
-        </div>
-
-        <div className='account__relationship'>
-          {!author && button}
-        </div>
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountComponent account={account} withRelationship={false} />
       </div>
-    </div>
+      {!author && button}
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/features/settings/index.tsx b/app/soapbox/features/settings/index.tsx
index b8a7a33ec7..946450f61e 100644
--- a/app/soapbox/features/settings/index.tsx
+++ b/app/soapbox/features/settings/index.tsx
@@ -86,9 +86,11 @@ const Settings = () => {
                     <ListItem label={intl.formatMessage(messages.changeEmail)} onClick={navigateToChangeEmail} />
                     <ListItem label={intl.formatMessage(messages.changePassword)} onClick={navigateToChangePassword} />
                     <ListItem label={intl.formatMessage(messages.configureMfa)} onClick={navigateToMfa}>
-                      {isMfaEnabled ?
-                        intl.formatMessage(messages.mfaEnabled) :
-                        intl.formatMessage(messages.mfaDisabled)}
+                      <span>
+                        {isMfaEnabled ?
+                          intl.formatMessage(messages.mfaEnabled) :
+                          intl.formatMessage(messages.mfaDisabled)}
+                      </span>
                     </ListItem>
                   </>
                 )}
diff --git a/app/soapbox/features/ui/components/modals/actions-modal.tsx b/app/soapbox/features/ui/components/modals/actions-modal.tsx
index 7648069faf..63a731d2cd 100644
--- a/app/soapbox/features/ui/components/modals/actions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx
@@ -5,7 +5,7 @@ import { spring } from 'react-motion';
 
 import Icon from 'soapbox/components/icon';
 import StatusContent from 'soapbox/components/status-content';
-import { Stack } from 'soapbox/components/ui';
+import { HStack, Stack } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 
 import Motion from '../../util/optional-motion';
@@ -29,23 +29,24 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
     const { icon = null, text, meta = null, active = false, href = '#', isLogout, destructive } = action;
 
     const Comp = href === '#' ? 'button' : 'a';
-    const compProps = href === '#' ? { onClick: onClick } : { href: href };
+    const compProps = href === '#' ? { onClick: onClick } : { href: href, rel: 'noopener' };
 
     return (
       <li key={`${text}-${i}`}>
-        <Comp
+        <HStack
+          space={2.5}
           {...compProps}
-          rel='noopener'
           data-index={i}
           className={classNames('w-full', { active, destructive })}
           data-method={isLogout ? 'delete' : null}
+          element={Comp}
         >
           {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
           <div>
             <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
             <div>{meta}</div>
           </div>
-        </Comp>
+        </HStack>
       </li>
     );
   };
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index aa9c4a1bdd..871ade6c47 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -108,7 +108,7 @@ const ReasonStep = (_props: IReasonStep) => {
                     data-testid={`rule-${rule.id}`}
                     onClick={() => dispatch(changeReportRule(rule.id))}
                     className={classNames({
-                      'relative border border-solid border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-primary-800/30 text-left w-full p-4 flex justify-between items-center cursor-pointer': true,
+                      'relative border border-solid border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-primary-800/30 text-start w-full p-4 flex justify-between items-center cursor-pointer': true,
                       'rounded-tl-lg rounded-tr-lg': idx === 0,
                       'rounded-bl-lg rounded-br-lg': idx === rules.length - 1,
                       'bg-gray-200 hover:bg-gray-200 dark:bg-primary-800/50': isSelected,
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 1df4df05ab..82c2e4bc6f 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -8,7 +8,7 @@ import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
 import { openSidebar } from 'soapbox/actions/sidebar';
 import SiteLogo from 'soapbox/components/site-logo';
-import { Avatar, Button, Form, IconButton, Input, Tooltip } from 'soapbox/components/ui';
+import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
 import { useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 
@@ -99,7 +99,7 @@ const Navbar = () => {
             )}
           </div>
 
-          <div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'>
+          <HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
             {account ? (
               <div className='hidden relative lg:flex items-center'>
                 <ProfileDropdown account={account}>
@@ -108,7 +108,7 @@ const Navbar = () => {
               </div>
             ) : (
               <>
-                <Form className='hidden lg:flex space-x-2 items-center' onSubmit={handleSubmit}>
+                <Form className='hidden lg:flex space-x-2 rtl:space-x-reverse items-center' onSubmit={handleSubmit}>
                   <Input
                     required
                     value={username}
@@ -159,7 +159,7 @@ const Navbar = () => {
                 </div>
               </>
             )}
-          </div>
+          </HStack>
         </div>
       </div>
     </nav>
diff --git a/app/soapbox/features/ui/components/promo-panel.tsx b/app/soapbox/features/ui/components/promo-panel.tsx
index 6766a6ad43..9add33b272 100644
--- a/app/soapbox/features/ui/components/promo-panel.tsx
+++ b/app/soapbox/features/ui/components/promo-panel.tsx
@@ -20,7 +20,7 @@ const PromoPanel: React.FC = () => {
         {promoItems.map((item, i) => (
           <Text key={i}>
             <a className='flex items-center' href={item.url} target='_blank'>
-              <Icon id={item.icon} className='flex-none text-lg mr-2' fixedWidth />
+              <Icon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
               {item.textLocales.get(locale) || item.text}
             </a>
           </Text>
diff --git a/app/soapbox/features/ui/components/trends-panel.tsx b/app/soapbox/features/ui/components/trends-panel.tsx
index 75ef4f1514..e7f11683a0 100644
--- a/app/soapbox/features/ui/components/trends-panel.tsx
+++ b/app/soapbox/features/ui/components/trends-panel.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/app/soapbox/features/ui/components/upload-area.tsx b/app/soapbox/features/ui/components/upload-area.tsx
index 5cc0c9e647..6d6fb395bf 100644
--- a/app/soapbox/features/ui/components/upload-area.tsx
+++ b/app/soapbox/features/ui/components/upload-area.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
diff --git a/app/soapbox/features/ui/components/who-to-follow-panel.tsx b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
index f479aceadb..dd2fc91fa5 100644
--- a/app/soapbox/features/ui/components/who-to-follow-panel.tsx
+++ b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/app/soapbox/features/verification/email-passthru.tsx b/app/soapbox/features/verification/email-passthru.tsx
index e51f3220f5..bfdc017de5 100644
--- a/app/soapbox/features/verification/email-passthru.tsx
+++ b/app/soapbox/features/verification/email-passthru.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory, useParams } from 'react-router-dom';
 
diff --git a/app/soapbox/features/verification/index.tsx b/app/soapbox/features/verification/index.tsx
index 4470bd4c27..88c9dc435b 100644
--- a/app/soapbox/features/verification/index.tsx
+++ b/app/soapbox/features/verification/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index e4bf2c1e29..e409f3beb9 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/app/soapbox/features/verification/waitlist-page.tsx b/app/soapbox/features/verification/waitlist-page.tsx
index 71677d3d3e..1ae44817c5 100644
--- a/app/soapbox/features/verification/waitlist-page.tsx
+++ b/app/soapbox/features/verification/waitlist-page.tsx
@@ -40,7 +40,7 @@ const WaitlistPage = (/* { account } */) => {
               <SiteLogo alt='Logo' className='h-7' />
             </Link>
 
-            <div className='absolute inset-y-0 right-0 flex items-center pr-2 space-x-3'>
+            <div className='absolute inset-y-0 right-0 flex items-center pr-2'>
               <Button onClick={onClickLogOut} theme='primary' to='/logout'>
                 Sign out
               </Button>
diff --git a/app/soapbox/hooks/useOnScreen.ts b/app/soapbox/hooks/useOnScreen.ts
index 7cfd4f2848..883fde698d 100644
--- a/app/soapbox/hooks/useOnScreen.ts
+++ b/app/soapbox/hooks/useOnScreen.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) =>  {
   const [isIntersecting, setIntersecting] = React.useState(false);
diff --git a/app/soapbox/pages/home-page.tsx b/app/soapbox/pages/home-page.tsx
index d3908fd1e5..1982d46051 100644
--- a/app/soapbox/pages/home-page.tsx
+++ b/app/soapbox/pages/home-page.tsx
@@ -17,7 +17,7 @@ import {
 import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
 import Avatar from '../components/avatar';
-import { Card, CardBody, Layout } from '../components/ui';
+import { Card, CardBody, HStack, Layout } from '../components/ui';
 import ComposeForm from '../features/compose/components/compose-form';
 import BundleContainer from '../features/ui/containers/bundle-container';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
@@ -42,7 +42,7 @@ const HomePage: React.FC = ({ children }) => {
         {me && (
           <Card variant='rounded' ref={composeBlock}>
             <CardBody>
-              <div className='flex items-start space-x-4'>
+              <HStack alignItems='start' space={4}>
                 <Link to={`/@${acct}`}>
                   <Avatar account={account} size={46} />
                 </Link>
@@ -53,7 +53,7 @@ const HomePage: React.FC = ({ children }) => {
                   autoFocus={false}
                   clickableAreaRef={composeBlock}
                 />
-              </div>
+              </HStack>
             </CardBody>
           </Card>
         )}
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index e24a19ddf8..86fd7cb719 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -75,23 +75,6 @@ a .account__avatar {
   }
 }
 
-.account__relationship {
-  height: auto;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  button {
-    margin-left: 5px;
-  }
-
-  .svg-icon {
-    width: 20px;
-    height: 20px;
-  }
-}
-
 .account-authorize__avatar {
   float: left;
   margin-right: 10px;
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index a9e32d19e5..a31b25cf26 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -392,17 +392,14 @@
 }
 
 .column__switch .audio-toggle {
-  position: absolute;
-  z-index: 4;
-  top: 12px;
-  right: 14px;
+  @apply absolute top-3 right-[14px] rtl:left-[14px] rtl:right-auto z-10;
 
   .react-toggle-track-check {
-    left: 6px;
+    @apply left-1.5;
   }
 
   .react-toggle-track-x {
-    right: 8px;
+    @apply right-2;
   }
 }
 
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index d2297db4e4..0c7f73659e 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -59,7 +59,7 @@
         }
 
         .icon-button {
-          @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 flex items-center;
+          @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
         }
       }
 
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 7c27ad35c4..a26668bb33 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -294,7 +294,7 @@
         }
 
         .svg-icon:first-child {
-          @apply min-w-[1.25rem] w-5 h-5 mr-2.5;
+          @apply min-w-[1.25rem] w-5 h-5;
 
           svg {
             stroke-width: 1.5;
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index e8a33a44ef..e2f9be2479 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -13,12 +13,12 @@
   }
 
   .svg-icon {
+    @apply right-4 rtl:left-4 rtl:right-auto;
     @include font-size(16);
     cursor: default;
     display: inline-block;
     position: absolute;
     top: 50%;
-    right: 16px;
     transform: translateY(-50%);
     z-index: 2;
     width: 18px;
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index 9d36258630..f3fd860329 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -1,5 +1,5 @@
 .sidebar-menu {
-  @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 z-1000;
+  @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;
diff --git a/app/styles/components/snackbar.scss b/app/styles/components/snackbar.scss
index 28e79d6725..c2adaf0a58 100644
--- a/app/styles/components/snackbar.scss
+++ b/app/styles/components/snackbar.scss
@@ -16,7 +16,7 @@
   @apply text-success-500;
 
   &::before {
-    @apply ml-4;
+    @apply ml-4 rtl:ml-0 rtl:mr-4;
     content: '\f058';
   }
 }
@@ -25,13 +25,13 @@
   @apply text-danger-500 ml-4;
 
   &::before {
-    @apply ml-4;
+    @apply ml-4 rtl:ml-0 rtl:mr-4;
     content: '\f057';
   }
 }
 
 .notification-bar-info {
-  @apply text-primary-500 ml-4;
+  @apply text-primary-500 ml-4 rtl:ml-0 rtl:mr-4;
 
   &::before {
     @apply ml-4;
@@ -40,7 +40,7 @@
 }
 
 .notification-bar-wrapper {
-  @apply p-4 flex items-center justify-between w-full space-x-2;
+  @apply p-4 flex items-center justify-between w-full space-x-2 rtl:space-x-reverse;
 }
 
 .notification-bar-title {

From c1179f047503e48c494675cd6f914c671070616f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 25 Nov 2022 19:28:43 +0100
Subject: [PATCH 22/50] =?UTF-8?q?Lint,=20cleanup,=20styles=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/dropdown-menu.tsx         |  2 +-
 app/soapbox/components/emoji-button-wrapper.tsx  |  2 +-
 app/soapbox/components/ui/index.ts               |  1 +
 .../components/ui/radio-button/radio-button.tsx  |  1 +
 app/soapbox/components/ui/widget/widget.tsx      |  4 +---
 app/soapbox/components/verification-badge.tsx    |  2 +-
 .../features/account/components/header.tsx       |  2 +-
 app/soapbox/features/ads/components/ad.tsx       |  3 +--
 app/soapbox/features/edit-profile/index.tsx      |  3 ++-
 .../feed-suggestions/feed-suggestions.tsx        |  2 +-
 .../components/placeholder-notification.tsx      |  1 +
 .../components/crypto-address-input.tsx          |  2 +-
 .../components/footer-link-input.tsx             |  2 +-
 .../components/promo-panel-input.tsx             |  2 +-
 app/soapbox/features/soapbox-config/index.tsx    |  6 +++---
 .../ui/components/modals/actions-modal.tsx       |  2 +-
 app/soapbox/features/ui/components/navbar.tsx    |  9 +++++----
 .../features/ui/components/theme-selector.tsx    |  4 +---
 app/styles/components/detailed-status.scss       | 16 +---------------
 19 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/app/soapbox/components/dropdown-menu.tsx b/app/soapbox/components/dropdown-menu.tsx
index 435386b618..349be8eee1 100644
--- a/app/soapbox/components/dropdown-menu.tsx
+++ b/app/soapbox/components/dropdown-menu.tsx
@@ -6,7 +6,7 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { IconButton, Counter } from 'soapbox/components/ui';
+import { Counter, IconButton } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import Motion from 'soapbox/features/ui/util/optional-motion';
 
diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index 23a165fcbc..cc528b1940 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
 import { openModal } from 'soapbox/actions/modals';
-import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
+import { EmojiSelector } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 import { isUserTouching } from 'soapbox/is-mobile';
 import { getReactForStatus } from 'soapbox/utils/emoji-reacts';
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 90f5933edf..4953ed9ebb 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -35,6 +35,7 @@ export { default as RadioButton } from './radio-button/radio-button';
 export { default as Select } from './select/select';
 export { default as Spinner } from './spinner/spinner';
 export { default as Stack } from './stack/stack';
+export { default as Streamfield } from './streamfield/streamfield';
 export { default as Tabs } from './tabs/tabs';
 export { default as TagInput } from './tag-input/tag-input';
 export { default as Text } from './text/text';
diff --git a/app/soapbox/components/ui/radio-button/radio-button.tsx b/app/soapbox/components/ui/radio-button/radio-button.tsx
index 792b4d0cc6..96f2c2ec44 100644
--- a/app/soapbox/components/ui/radio-button/radio-button.tsx
+++ b/app/soapbox/components/ui/radio-button/radio-button.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+
 import HStack from '../hstack/hstack';
 
 interface IRadioButton {
diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index 3bced193fa..16cc33234f 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { Text, IconButton } from 'soapbox/components/ui';
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import Stack from 'soapbox/components/ui/stack/stack';
+import { HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
diff --git a/app/soapbox/components/verification-badge.tsx b/app/soapbox/components/verification-badge.tsx
index 766decb883..aea2f5f810 100644
--- a/app/soapbox/components/verification-badge.tsx
+++ b/app/soapbox/components/verification-badge.tsx
@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import Icon from 'soapbox/components/ui/icon/icon';
+import { Icon } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index fdc39c6b0d..48c1eff8f5 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -17,7 +17,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import Badge from 'soapbox/components/badge';
 import StillImage from 'soapbox/components/still-image';
-import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider, Avatar } from 'soapbox/components/ui';
+import { Avatar, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
 import ActionButton from 'soapbox/features/ui/components/action-button';
diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index a0db9f78d3..73446989dd 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -2,8 +2,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useState, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import { Avatar, Card, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui';
 import StatusCard from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
 
diff --git a/app/soapbox/features/edit-profile/index.tsx b/app/soapbox/features/edit-profile/index.tsx
index 1967e9138a..21fbd66fca 100644
--- a/app/soapbox/features/edit-profile/index.tsx
+++ b/app/soapbox/features/edit-profile/index.tsx
@@ -15,16 +15,17 @@ import {
   FormGroup,
   HStack,
   Input,
+  Streamfield,
   Textarea,
   Toggle,
 } from 'soapbox/components/ui';
-import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize-image';
 
 import ProfilePreview from './components/profile-preview';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { Account } from 'soapbox/types/entities';
 
 /**
diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index 68985453c0..dc2b334c18 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -78,7 +78,7 @@ const FeedSuggestions = () => {
       </HStack>
 
       <CardBody>
-        <HStack alignItems='center' className='overflow-x-auto lg:overflow-x-hidden space-x-4 md:space-x-0'>
+        <HStack space={4} alignItems='center' className='overflow-x-auto lg:overflow-x-hidden md:space-x-0'>
           {suggestedProfiles.slice(0, 4).map((suggestedProfile) => (
             <SuggestionItem key={suggestedProfile.account} accountId={suggestedProfile.account} />
           ))}
diff --git a/app/soapbox/features/placeholder/components/placeholder-notification.tsx b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
index d3dab90055..fbeec6a423 100644
--- a/app/soapbox/features/placeholder/components/placeholder-notification.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { HStack } from 'soapbox/components/ui';
 
 import PlaceholderAvatar from './placeholder-avatar';
diff --git a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
index 75ffec27ca..5e0a6de2cf 100644
--- a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { CryptoAddress } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
index bf24512403..19b6af9f70 100644
--- a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { FooterItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
index 616fddb827..b894b59846 100644
--- a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
 import IconPicker from './icon-picker';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { PromoPanelItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx
index 72cd1de7d8..8cf88688ed 100644
--- a/app/soapbox/features/soapbox-config/index.tsx
+++ b/app/soapbox/features/soapbox-config/index.tsx
@@ -8,19 +8,19 @@ import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
 import {
   Accordion,
+  Button,
   Column,
   CardHeader,
   CardTitle,
+  FileInput,
   Form,
   FormActions,
   FormGroup,
   Input,
-  FileInput,
+  Streamfield,
   Textarea,
-  Button,
   Toggle,
 } from 'soapbox/components/ui';
-import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
diff --git a/app/soapbox/features/ui/components/modals/actions-modal.tsx b/app/soapbox/features/ui/components/modals/actions-modal.tsx
index 63a731d2cd..ab2ca6402c 100644
--- a/app/soapbox/features/ui/components/modals/actions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx
@@ -34,8 +34,8 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
     return (
       <li key={`${text}-${i}`}>
         <HStack
-          space={2.5}
           {...compProps}
+          space={2.5}
           data-index={i}
           className={classNames('w-full', { active, destructive })}
           data-method={isLogout ? 'delete' : null}
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 82c2e4bc6f..2fd1868300 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -78,9 +78,10 @@ const Navbar = () => {
             </div>
           )}
 
-          <div
-            className={classNames({
-              'flex-1 flex items-center lg:items-stretch space-x-4': true,
+          <HStack
+            space={4}
+            alignItems='center'
+            className={classNames('flex-1 enter lg:items-stretch', {
               'justify-center lg:justify-start': account,
               'justify-start': !account,
             })}
@@ -97,7 +98,7 @@ const Navbar = () => {
                 </div>
               </div>
             )}
-          </div>
+          </HStack>
 
           <HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
             {account ? (
diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index e285788e03..8ce8199e76 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -1,9 +1,7 @@
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'soapbox/components/ui';
-
-import Select from '../../../components/ui/select/select';
+import { Icon, Select } from 'soapbox/components/ui';
 
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 257ad8af61..e91dfb6f80 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -39,7 +39,7 @@
   // }
 
   &__connector {
-    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden;
+    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1];
 
     &--bottom {
       @apply block;
@@ -48,17 +48,3 @@
     }
   }
 }
-
-.thread {
-  .ptr,
-  .ptr__children {
-    background: var(--foreground-color) !important;
-    border-radius: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-
-    @media screen and (max-width: 580px) {
-      border-radius: 0;
-    }
-  }
-}

From 25e707070541b5e181fda4109211ec51e08a856f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Nov 2022 14:08:34 -0600
Subject: [PATCH 23/50] SidebarNavigation: move Dashboard to top-level

---
 app/soapbox/components/sidebar-navigation.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index 18c104b16b..b4e8941e7c 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -16,7 +16,6 @@ const messages = defineMessages({
   bookmarks: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
-  dashboard: { id: 'tabs_bar.dashboard', defaultMessage: 'Dashboard' },
   all: { id: 'tabs_bar.all', defaultMessage: 'All' },
   fediverse: { id: 'tabs_bar.fediverse', defaultMessage: 'Fediverse' },
 });
@@ -72,15 +71,6 @@ const SidebarNavigation = () => {
         });
       }
 
-      if (account.staff) {
-        menu.push({
-          to: '/soapbox/admin',
-          icon: require('@tabler/icons/dashboard.svg'),
-          text: intl.formatMessage(messages.dashboard),
-          count: dashboardCount,
-        });
-      }
-
       if (features.publicTimeline) {
         menu.push(null);
       }
@@ -170,6 +160,15 @@ const SidebarNavigation = () => {
               icon={require('@tabler/icons/settings.svg')}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
             />
+
+            {account.staff && (
+              <SidebarNavigationLink
+                to='/soapbox/admin'
+                icon={require('@tabler/icons/dashboard.svg')}
+                count={dashboardCount}
+                text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
+              />
+            )}
           </>
         )}
 

From c7e04a682635ed26f9b8736cc37d2c7bf07e2835 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Nov 2022 14:38:09 -0600
Subject: [PATCH 24/50] SidebarNavigation: move local and fediverse tabs to
 top-level Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1091

---
 .../components/sidebar-navigation-link.tsx    |  2 +-
 app/soapbox/components/sidebar-navigation.tsx | 40 +++++++++----------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 5c9100f851..25d3a75eee 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -10,7 +10,7 @@ interface ISidebarNavigationLink {
   /** URL to an SVG icon. */
   icon: string,
   /** Link label. */
-  text: React.ReactElement,
+  text: React.ReactNode,
   /** Route to an internal page. */
   to?: string,
   /** Callback when the link is clicked. */
diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index b4e8941e7c..a21475c3b5 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -16,8 +16,6 @@ const messages = defineMessages({
   bookmarks: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
-  all: { id: 'tabs_bar.all', defaultMessage: 'All' },
-  fediverse: { id: 'tabs_bar.fediverse', defaultMessage: 'Fediverse' },
 });
 
 /** Desktop sidebar with links to different views in the app. */
@@ -70,26 +68,6 @@ const SidebarNavigation = () => {
           text: intl.formatMessage(messages.developers),
         });
       }
-
-      if (features.publicTimeline) {
-        menu.push(null);
-      }
-    }
-
-    if (features.publicTimeline) {
-      menu.push({
-        to: '/timeline/local',
-        icon: features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg'),
-        text: features.federating ? instance.title : intl.formatMessage(messages.all),
-      });
-    }
-
-    if (features.publicTimeline && features.federating) {
-      menu.push({
-        to: '/timeline/fediverse',
-        icon: require('assets/icons/fediverse.svg'),
-        text: intl.formatMessage(messages.fediverse),
-      });
     }
 
     return menu;
@@ -172,6 +150,24 @@ const SidebarNavigation = () => {
           </>
         )}
 
+        {features.publicTimeline && (
+          <>
+            <SidebarNavigationLink
+              to='/timeline/local'
+              icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
+              text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+            />
+
+            {features.federating && (
+              <SidebarNavigationLink
+                to='/timeline/fediverse'
+                icon={require('assets/icons/fediverse.svg')}
+                text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+              />
+            )}
+          </>
+        )}
+
         {menu.length > 0 && (
           <DropdownMenu items={menu}>
             <SidebarNavigationLink

From 3b9535c418e6ea747fcd77af023c8b5a8f48ef8e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Nov 2022 14:40:57 -0600
Subject: [PATCH 25/50] SidebarNavigation: remove dashboardCount from "more"
 button, whoops

---
 app/soapbox/components/sidebar-navigation.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index a21475c3b5..ab1b042411 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -172,7 +172,6 @@ const SidebarNavigation = () => {
           <DropdownMenu items={menu}>
             <SidebarNavigationLink
               icon={require('@tabler/icons/dots-circle-horizontal.svg')}
-              count={dashboardCount}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
           </DropdownMenu>

From 631f3c37e382112e2261c7d77888b3612c2b9537 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Nov 2022 14:42:11 -0600
Subject: [PATCH 26/50] Settings: put account move above account deletion

---
 app/soapbox/features/settings/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/settings/index.tsx b/app/soapbox/features/settings/index.tsx
index b8a7a33ec7..17c488a8b1 100644
--- a/app/soapbox/features/settings/index.tsx
+++ b/app/soapbox/features/settings/index.tsx
@@ -116,14 +116,15 @@ const Settings = () => {
 
             <CardBody>
               <List>
-                {features.security && (
-                  <ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
-                )}
                 {features.federating && (features.accountMoving ? (
                   <ListItem label={intl.formatMessage(messages.accountMigration)} onClick={navigateToMoveAccount} />
                 ) : features.accountAliases && (
                   <ListItem label={intl.formatMessage(messages.accountAliases)} onClick={navigateToAliases} />
                 ))}
+
+                {features.security && (
+                  <ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
+                )}
               </List>
             </CardBody>
           </>

From 0b191a3b9fb1df27e2c1fe8f552bc8ad67590396 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Nov 2022 15:01:49 -0600
Subject: [PATCH 27/50] SoapboxConfig: fix selecting an SVG logo (but the
 backend errors)

---
 app/soapbox/features/soapbox-config/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx
index 72cd1de7d8..c651af4b36 100644
--- a/app/soapbox/features/soapbox-config/index.tsx
+++ b/app/soapbox/features/soapbox-config/index.tsx
@@ -202,7 +202,7 @@ const SoapboxConfig: React.FC = () => {
           >
             <FileInput
               onChange={handleFileChange(['logo'])}
-              accept='image/svg,image/png'
+              accept='image/svg+xml,image/png'
             />
           </FormGroup>
 

From a0493cde3fb8e5e0b8462c098b2cd082652fcabb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 25 Nov 2022 22:30:04 +0100
Subject: [PATCH 28/50] Fix video visibility in media modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/styles/components/video-player.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index f1e3b4c1cb..47bda32ed0 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -32,6 +32,7 @@
   video {
     display: block;
     z-index: 1;
+    position: relative;
   }
 
   &.fullscreen {
@@ -51,7 +52,6 @@
   &--inline {
     video {
       object-fit: contain;
-      position: relative;
       max-height: 100%;
     }
   }

From 020bcb4d45df460fc5463298c524813d1b04dd3c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Nov 2022 16:19:32 -0600
Subject: [PATCH 29/50] Make emojis a lil' bigger, fix emojis being very big
 when content is only emojis

---
 app/soapbox/components/markup.css | Bin 1436 -> 1498 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/app/soapbox/components/markup.css b/app/soapbox/components/markup.css
index d89848f2cb082755acb71c8140b91c3232999bdc..099dc66978b294e41ad1b0c9174002c828161174 100644
GIT binary patch
delta 72
zcmbQkeT#d;5oUAO-2AM}Vg)UIuIQA+l0@Cy#G>rdf>?#j+;qKEkX(LVszNoFf`UV0
aK|xNXLb<M~LWZvC<~__pjFZo^oCN@#l^FW~

delta 18
acmcb`J%@Y45$4UzEL@C?3X^$R&jJ8Ccm-Sl


From 17cb4a51059135fa28a507d141e27cb155a33742 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Nov 2022 16:44:42 -0600
Subject: [PATCH 30/50] StatusActionBar: include a link to the remote status in
 the 3-dots menu

---
 app/soapbox/components/status-action-bar.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 6735c1b29a..1b195d31fc 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -18,7 +18,7 @@ import StatusActionButton from 'soapbox/components/status-action-button';
 import { HStack } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { isLocal } from 'soapbox/utils/accounts';
+import { isLocal, isRemote } from 'soapbox/utils/accounts';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji-reacts';
 
 import type { Menu } from 'soapbox/components/dropdown-menu';
@@ -56,6 +56,7 @@ const messages = defineMessages({
   copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
   group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
   group_remove_post: { id: 'status.remove_post_from_group', defaultMessage: 'Remove post from group' },
+  external: { id: 'status.external', defaultMessage: 'View post on {domain}' },
   deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
   deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
   deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
@@ -150,6 +151,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     dispatch(toggleBookmark(status));
   };
 
+  const handleExternalClick = () => {
+    window.open(status.uri, '_blank');
+  };
+
   const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
     if (me) {
       const modalReblog = () => dispatch(toggleReblog(status));
@@ -294,6 +299,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     const mutingConversation = status.muted;
     const ownAccount = status.getIn(['account', 'id']) === me;
     const username = String(status.getIn(['account', 'username']));
+    const account = status.account as Account;
+    const domain = account.fqn.split('@')[1];
 
     const menu: Menu = [];
 
@@ -312,7 +319,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         icon: require('@tabler/icons/link.svg'),
       });
 
-      if (features.embeds && isLocal(status.account as Account)) {
+      if (features.embeds && isLocal(account)) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: handleEmbed,
@@ -333,6 +340,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       });
     }
 
+    if (features.federating && isRemote(account)) {
+      menu.push({
+        text: intl.formatMessage(messages.external, { domain }),
+        action: handleExternalClick,
+        icon: require('@tabler/icons/external-link.svg'),
+      });
+    }
+
     menu.push(null);
 
     if (ownAccount || withDismiss) {

From d93f6331c7ee76a55e4d1527ff7ed7dfc1693df2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Nov 2022 20:04:38 -0600
Subject: [PATCH 31/50] Use new icons for Local and Fediverse timelines

---
 app/assets/icons/COPYING.md                   | 1 -
 app/assets/icons/fediverse.svg                | 3 ---
 app/soapbox/components/sidebar-menu.tsx       | 7 +++----
 app/soapbox/components/sidebar-navigation.tsx | 6 +++---
 package.json                                  | 2 +-
 yarn.lock                                     | 8 ++++----
 6 files changed, 11 insertions(+), 16 deletions(-)
 delete mode 100644 app/assets/icons/fediverse.svg

diff --git a/app/assets/icons/COPYING.md b/app/assets/icons/COPYING.md
index 5e84c0b5cc..1dcc928d92 100644
--- a/app/assets/icons/COPYING.md
+++ b/app/assets/icons/COPYING.md
@@ -1,6 +1,5 @@
 # Custom icons
 
-- fediverse.svg - Modified from Wikipedia, CC0  
 - verified.svg - Created by Alex Gleason. CC0
 
 Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg  
diff --git a/app/assets/icons/fediverse.svg b/app/assets/icons/fediverse.svg
deleted file mode 100644
index 4cd3cb9380..0000000000
--- a/app/assets/icons/fediverse.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792" fill="currentColor">
-    <path d="M 343.16176,591.34767 A 171.09965,171.09965 0 0 1 163.0094,752.88799 171.09965,171.09965 0 0 1 1.4690156,572.73567 171.09965,171.09965 0 0 1 181.62138,411.19523 171.09965,171.09965 0 0 1 343.16176,591.34767 Z M 482.96755,1485.6494 A 171.09965,171.09965 0 0 1 302.81519,1647.1895 171.09965,171.09965 0 0 1 141.2748,1467.0372 171.09965,171.09965 0 0 1 321.42717,1305.4967 171.09965,171.09965 0 0 1 482.96755,1485.6494 Z m 893.94285,143.4473 a 171.09965,171.09965 0 0 1 -180.1523,161.5405 171.09965,171.09965 0 0 1 -161.5404,-180.1524 171.09965,171.09965 0 0 1 180.1524,-161.5405 171.09965,171.09965 0 0 1 161.5403,180.1524 z M 1789.5918,823.45087 A 171.09965,171.09965 0 0 1 1609.4395,984.99118 171.09965,171.09965 0 0 1 1447.899,804.83886 171.09965,171.09965 0 0 1 1628.0513,643.29854 171.09965,171.09965 0 0 1 1789.5918,823.45087 Z M 1150.7,182.08661 A 171.09965,171.09965 0 0 1 970.54747,343.627 171.09965,171.09965 0 0 1 809.00715,163.47462 171.09965,171.09965 0 0 1 989.15948,1.9342312 171.09965,171.09965 0 0 1 1150.7,182.08661 Z m -792.52346,371.6819 a 188.20963,188.20963 0 0 1 2.07029,38.5086 188.20963,188.20963 0 0 1 -19.56107,73.71432 l 276.93395,44.47923 54.4306,-106.2947 z m 474.63645,76.2221 -54.43595,106.30538 654.33596,105.0888 a 188.20963,188.20963 0 0 1 -1.8996,-37.47876 188.20963,188.20963 0 0 1 20.0788,-74.64799 z M 1065.1875,340.27205 a 188.20963,188.20963 0 0 1 -95.56964,20.44149 188.20963,188.20963 0 0 1 -16.47175,-1.72883 l 43.21482,276.72059 117.91607,18.92069 z m -43.7109,456.30786 102.1755,654.25059 a 188.20963,188.20963 0 0 1 92.651,-18.9688 188.20963,188.20963 0 0 1 19.6891,2.1609 L 1139.398,815.49535 Z M 794.34712,203.1417 306.48853,450.37661 a 188.20963,188.20963 0 0 1 51.34118,101.31626 L 845.683,304.44741 A 188.20963,188.20963 0 0 1 794.34712,203.1417 Z m 352.24368,56.54894 a 188.20963,188.20963 0 0 1 -80.5121,80.13321 l 385.9286,387.41724 a 188.20963,188.20963 0 0 1 80.5069,-80.13321 z m 339.8804,688.09027 -249.2037,486.50849 a 188.20963,188.20963 0 0 1 101.0656,51.8588 L 1587.5315,999.64494 A 188.20963,188.20963 0 0 1 1486.4712,947.78091 Z M 498.08153,1448.6696 a 188.20963,188.20963 0 0 1 1.9689,37.9111 188.20963,188.20963 0 0 1 -19.85455,74.2528 l 539.90952,86.6376 a 188.20963,188.20963 0 0 1 -1.9742,-37.9162 188.20963,188.20963 0 0 1 19.8598,-74.2477 z M 256.10246,750.31321 a 188.20963,188.20963 0 0 1 -94.02233,19.65712 188.20963,188.20963 0 0 1 -18.16843,-1.89976 l 84.42322,540.00023 a 188.20963,188.20963 0 0 1 94.02233,-19.6571 188.20963,188.20963 0 0 1 18.15773,1.9001 z M 847.58784,306.427 562.15394,863.6618 646.42776,948.26106 948.64274,358.28043 A 188.20963,188.20963 0 0 1 847.58784,306.427 Z m -359.67106,702.1662 -144.57913,282.2484 a 188.20963,188.20963 0 0 1 101.04426,51.8481 l 127.80337,-249.5025 z m 945.31912,-164.10293 -250.1803,126.78949 18.446,117.99084 283.07,-143.4639 A 188.20963,188.20963 0 0 1 1433.2359,844.49027 Z M 1037.8202,1044.882 446.28679,1344.6691 a 188.20963,188.20963 0 0 1 51.34651,101.3273 l 558.6328,-283.1181 z M 339.05298,668.95274 a 188.20963,188.20963 0 0 1 -80.49604,80.12252 l 441.91192,443.63544 106.54017,-53.9931 z m 582.89469,585.14656 -106.54012,53.993 223.91735,224.7922 a 188.20963,188.20963 0 0 1 80.5121,-80.1332 z" fill-opacity=".996"/>
-</svg>
diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index f4186f22bd..466e5ca162 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -82,7 +82,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
   const features = useFeatures();
   const getAccount = makeGetAccount();
-  const instance = useAppSelector((state) => state.instance);
   const me = useAppSelector((state) => state.me);
   const account = useAppSelector((state) => me ? getAccount(state, me) : null);
   const otherAccounts: ImmutableList<AccountEntity> = useAppSelector((state) => getOtherAccounts(state));
@@ -222,15 +221,15 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/timeline/local'
-                    icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
-                    text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+                    icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')}
+                    text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                     onClick={onClose}
                   />
 
                   {features.federating && (
                     <SidebarLink
                       to='/timeline/fediverse'
-                      icon={require('assets/icons/fediverse.svg')}
+                      icon={require('@tabler/icons/topology-star-ring-3.svg')}
                       text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
                       onClick={onClose}
                     />
diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index ab1b042411..28d64ed8f9 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -154,14 +154,14 @@ const SidebarNavigation = () => {
           <>
             <SidebarNavigationLink
               to='/timeline/local'
-              icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
-              text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+              icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')}
+              text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
             />
 
             {features.federating && (
               <SidebarNavigationLink
                 to='/timeline/fediverse'
-                icon={require('assets/icons/fediverse.svg')}
+                icon={require('@tabler/icons/topology-star-ring-3.svg')}
                 text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
               />
             )}
diff --git a/package.json b/package.json
index 6faed0629d..d43fc9a6a6 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "@sentry/browser": "^7.11.1",
     "@sentry/react": "^7.11.1",
     "@sentry/tracing": "^7.11.1",
-    "@tabler/icons": "^1.111.0",
+    "@tabler/icons": "^1.113.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
diff --git a/yarn.lock b/yarn.lock
index a0ef339e98..433de75438 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2260,10 +2260,10 @@
     remark "^13.0.0"
     unist-util-find-all-after "^3.0.2"
 
-"@tabler/icons@^1.111.0":
-  version "1.111.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.111.0.tgz#0538fdd8b5de7072ae60fc5d2f13a9a636d2d0e3"
-  integrity sha512-TZWYiMT5ccqfHxRE0Qtgvl+sGsMbNkrv7cJMt/tm8TN9l/CDXx/o7d8uAwUN+3PAlSFfF5e/rD1bi1WJs2xNIA==
+"@tabler/icons@^1.113.0":
+  version "1.113.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.113.0.tgz#aeee5f38284d9996abec1bda46c237ef53cde8d4"
+  integrity sha512-DjxsvR/0HFHD/utQlM+q3wpl1W2n+jgEZkyfkCkc295rCoAfeXHIBfz/9ROrSHkr205Kq/M8KpQR0Nd4kjwODQ==
 
 "@tailwindcss/forms@^0.5.3":
   version "0.5.3"

From f6258357f786827ff556c4c0b2a8b9f86da414fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 12:19:57 +0100
Subject: [PATCH 32/50] Fix site preview theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/site-logo.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 90552d0bdc..7a3ef8e5dd 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/app/soapbox/components/site-logo.tsx
@@ -14,7 +14,9 @@ interface ISiteLogo extends React.ComponentProps<'img'> {
 const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   const { logo, logoDarkMode } = useSoapboxConfig();
   const settings = useSettings();
-  const darkMode = useTheme() === 'dark';
+
+  let darkMode = useTheme() === 'dark';
+  if (theme === 'dark') darkMode = true;
 
   /** Soapbox logo. */
   const soapboxLogo = darkMode

From 8b4390681bc57c7ee9811fc11b60af64331d53fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 14:09:28 +0100
Subject: [PATCH 33/50] Make some strings localizable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/sidebar-menu.tsx       |  3 +-
 .../components/password-reset-confirm.tsx     |  5 ++--
 .../features/chats/components/chat-window.tsx |  8 +++++-
 .../features/developers/settings-store.tsx    |  3 +-
 .../features/onboarding/steps/bio-step.tsx    | 13 ++++++---
 .../steps/cover-photo-selection-step.tsx      |  6 +++-
 .../onboarding/steps/display-name-step.tsx    | 17 ++++++++---
 .../public-layout/components/header.tsx       |  3 +-
 .../ui/components/modals/boost-modal.tsx      |  2 +-
 .../ui/components/modals/verify-sms-modal.tsx |  2 +-
 .../features/verification/registration.tsx    | 28 ++++++-------------
 .../verification/steps/age-verification.tsx   | 16 ++++++++---
 .../verification/steps/email-verification.tsx |  7 +++--
 .../verification/steps/sms-verification.tsx   | 11 +++++---
 .../features/verification/waitlist-page.tsx   | 15 ++++++----
 15 files changed, 88 insertions(+), 51 deletions(-)

diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index 466e5ca162..21703caa04 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -38,6 +38,7 @@ const messages = defineMessages({
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
 });
 
 interface ISidebarLink {
@@ -148,7 +149,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
         onClick={handleClose}
       >
         <IconButton
-          title='close'
+          title={intl.formatMessage(messages.close)}
           onClick={handleClose}
           src={require('@tabler/icons/x.svg')}
           ref={closeButtonRef}
diff --git a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
index fb20ab06d2..f0a4d1c318 100644
--- a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
+++ b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
@@ -11,6 +11,7 @@ const token = new URLSearchParams(window.location.search).get('reset_password_to
 
 const messages = defineMessages({
   resetPasswordFail: { id: 'reset_password.fail', defaultMessage: 'Expired token, please try again.' },
+  passwordPlaceholder: { id: 'reset_password.password.placeholder', defaultMessage: 'Placeholder' },
 });
 
 const Statuses = {
@@ -66,11 +67,11 @@ const PasswordResetConfirm = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Password' errors={renderErrors()}>
+          <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
             <Input
               type='password'
               name='password'
-              placeholder='Password'
+              placeholder={intl.formatMessage(messages.passwordPlaceholder)}
               onChange={onChange}
               required
             />
diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-window.tsx
index 3bcb831651..9808dce3fd 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-window.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import {
@@ -18,6 +19,10 @@ import ChatBox from './chat-box';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
+const messages = defineMessages({
+  close: { id: 'chat_window.close', defaultMessage: 'Close chat' },
+});
+
 type WindowState = 'open' | 'minimized';
 
 const getChat = makeGetChat();
@@ -33,6 +38,7 @@ interface IChatWindow {
 
 /** Floating desktop chat window. */
 const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
+  const intl = useIntl();
   const dispatch = useAppDispatch();
 
   const displayFqn = useAppSelector(getDisplayFqn);
@@ -98,7 +104,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
           @{getAcct(account, displayFqn)}
         </button>
         <div className='pane__close'>
-          <IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
+          <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.close)} onClick={handleChatClose(chat.id)} />
         </div>
       </HStack>
       <div className='pane__content'>
diff --git a/app/soapbox/features/developers/settings-store.tsx b/app/soapbox/features/developers/settings-store.tsx
index cfddc637e6..521ed0dabd 100644
--- a/app/soapbox/features/developers/settings-store.tsx
+++ b/app/soapbox/features/developers/settings-store.tsx
@@ -29,6 +29,7 @@ const isJSONValid = (text: any): boolean => {
 
 const messages = defineMessages({
   heading: { id: 'column.settings_store', defaultMessage: 'Settings store' },
+  advanced: { id: 'developers.settings_store.advanced', defaultMessage: 'Advanced settings' },
   hint: { id: 'developers.settings_store.hint', defaultMessage: 'It is possible to directly edit your user settings here. BE CAREFUL! Editing this section can break your account, and you will only be able to recover through the API.' },
 });
 
@@ -98,7 +99,7 @@ const SettingsStore: React.FC = () => {
       </Form>
 
       <CardHeader>
-        <CardTitle title='Advanced settings' />
+        <CardTitle title={intl.formatMessage(messages.advanced)} />
       </CardHeader>
 
       <List>
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index bed69ecbc6..77205b001d 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -9,7 +9,12 @@ import { useOwnAccount } from 'soapbox/hooks';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  bioPlaceholder: { id: 'onboarding.bio.placeholder', defaultMessage: 'Tell the world a little about yourself…' },
+});
+
 const BioStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   const account = useOwnAccount();
@@ -56,13 +61,13 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
           <Stack space={5}>
             <div className='sm:pt-10 sm:w-2/3 mx-auto'>
               <FormGroup
-                hintText='Max 500 characters'
-                labelText='Bio'
+                hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
+                labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
                 errors={errors}
               >
                 <Textarea
                   onChange={(event) => setValue(event.target.value)}
-                  placeholder='Tell the world a little about yourself…'
+                  placeholder={intl.formatMessage(messages.bioPlaceholder)}
                   value={value}
                   maxLength={500}
                 />
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index ee0ffa0ebc..e753a935b4 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -138,7 +138,11 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
               <Stack justifyContent='center' space={2}>
                 <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? 'Saving…' : 'Next'}
+                  {isSubmitting ? (
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+                  ) : (
+                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+                  )}
                 </Button>
 
                 {isDisabled && (
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index d833fdc528..25dd49ba61 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -9,7 +9,12 @@ import { useOwnAccount } from 'soapbox/hooks';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
+});
+
 const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   const account = useOwnAccount();
@@ -68,12 +73,12 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
             <Stack space={5}>
               <FormGroup
                 hintText={hintText}
-                labelText='Display name'
+                labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
                 errors={errors}
               >
                 <Input
                   onChange={(event) => setValue(event.target.value)}
-                  placeholder='Eg. John Smith'
+                  placeholder={intl.formatMessage(messages.usernamePlaceholder)}
                   type='text'
                   value={value}
                   maxLength={30}
@@ -88,7 +93,11 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
                   disabled={isDisabled || isSubmitting}
                   onClick={handleSubmit}
                 >
-                  {isSubmitting ? 'Saving…' : 'Next'}
+                  {isSubmitting ? (
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+                  ) : (
+                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+                  )}
                 </Button>
 
                 <Button block theme='tertiary' type='button' onClick={onNext}>
diff --git a/app/soapbox/features/public-layout/components/header.tsx b/app/soapbox/features/public-layout/components/header.tsx
index 053711afd4..ea276797e3 100644
--- a/app/soapbox/features/public-layout/components/header.tsx
+++ b/app/soapbox/features/public-layout/components/header.tsx
@@ -15,6 +15,7 @@ import Sonar from './sonar';
 import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
+  menu: { id: 'header.menu.title', defaultMessage: 'Open menu' },
   home: { id: 'header.home.label', defaultMessage: 'Home' },
   login: { id: 'header.login.label', defaultMessage: 'Log in' },
   register: { id: 'header.register.label', defaultMessage: 'Register' },
@@ -79,7 +80,7 @@ const Header = () => {
             </div>
 
             <IconButton
-              title='Open Menu'
+              title={intl.formatMessage(messages.menu)}
               src={require('@tabler/icons/menu-2.svg')}
               onClick={open}
               className='md:hidden mr-4 bg-transparent text-gray-700 dark:text-gray-600 hover:text-gray-600'
diff --git a/app/soapbox/features/ui/components/modals/boost-modal.tsx b/app/soapbox/features/ui/components/modals/boost-modal.tsx
index 3a09be5c32..22fe18e8ab 100644
--- a/app/soapbox/features/ui/components/modals/boost-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/boost-modal.tsx
@@ -30,7 +30,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
 
   return (
     <Modal
-      title='Repost?'
+      title={<FormattedMessage id='boost_modal.title' defaultMessage='Repost?' />}
       confirmationAction={handleReblog}
       confirmationText={intl.formatMessage(buttonText)}
     >
diff --git a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
index 6441e87631..8df59b7777 100644
--- a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
@@ -150,7 +150,7 @@ const VerifySmsModal: React.FC<IVerifySmsModal> = ({ onClose }) => {
         );
       case Statuses.READY:
         return (
-          <FormGroup labelText='Phone Number'>
+          <FormGroup labelText={<FormattedMessage id='sms_verification.phone.label' defaultMessage='Phone Number' />}>
             <PhoneInput
               value={phone}
               onChange={onChange}
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index e409f3beb9..4d6edbc6dd 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -16,22 +16,12 @@ import PasswordIndicator from './components/password-indicator';
 import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
-  success: {
-    id: 'registrations.success',
-    defaultMessage: 'Welcome to {siteTitle}!',
-  },
-  usernameHint: {
-    id: 'registrations.username.hint',
-    defaultMessage: 'May only contain A-Z, 0-9, and underscores',
-  },
-  usernameTaken: {
-    id: 'registrations.unprocessable_entity',
-    defaultMessage: 'This username has already been taken.',
-  },
-  error: {
-    id: 'registrations.error',
-    defaultMessage: 'Failed to register your account.',
-  },
+  success: { id: 'registrations.success', defaultMessage: 'Welcome to {siteTitle}!' },
+  usernameLabel: { id: 'registrations.username.label', defaultMessage: 'Your username' },
+  usernameHint: { id: 'registrations.username.hint', defaultMessage: 'May only contain A-Z, 0-9, and underscores', },
+  usernameTaken: { id: 'registrations.unprocessable_entity', defaultMessage: 'This username has already been taken.' },
+  passwordLabel: { id: 'registrations.password.label', defaultMessage: 'Password' },
+  error: { id: 'registrations.error', defaultMessage: 'Failed to register your account.' },
 });
 
 const initialState = {
@@ -108,7 +98,7 @@ const Registration = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto space-y-4'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Your username' hintText={intl.formatMessage(messages.usernameHint)}>
+          <FormGroup labelText={intl.formatMessage(messages.usernameLabel)} hintText={intl.formatMessage(messages.usernameHint)}>
             <Input
               name='username'
               type='text'
@@ -120,7 +110,7 @@ const Registration = () => {
             />
           </FormGroup>
 
-          <FormGroup labelText='Password'>
+          <FormGroup labelText={intl.formatMessage(messages.passwordLabel)}>
             <Input
               name='password'
               type='password'
@@ -140,7 +130,7 @@ const Registration = () => {
               type='submit'
               disabled={isLoading || !hasValidPassword}
             >
-              Register
+              <FormattedMessage id='header.register.label' defaultMessage='Register' />
             </Button>
 
             {(links.get('termsOfService') && links.get('privacyPolicy')) ? (
diff --git a/app/soapbox/features/verification/steps/age-verification.tsx b/app/soapbox/features/verification/steps/age-verification.tsx
index 84283f4b48..bb35ffe400 100644
--- a/app/soapbox/features/verification/steps/age-verification.tsx
+++ b/app/soapbox/features/verification/steps/age-verification.tsx
@@ -61,13 +61,21 @@ const AgeVerification = () => {
           <Datepicker onChange={onChange} />
 
           <Text theme='muted' size='sm'>
-            {siteTitle} requires users to be at least {ageMinimum} years old to
-            access its platform. Anyone under the age of {ageMinimum} years old
-            cannot access this platform.
+            <FormattedMessage
+              id='age_verification.body'
+              defaultMessage='{siteTitle} requires users to be at least {ageMinimum} years old to access its platform. Anyone under the age of {ageMinimum} years old cannot access this platform.'
+              values={{
+                siteTitle,
+                ageMinimum,
+              }}
+            />
+
           </Text>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index 98c11b8290..a834836160 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -13,6 +13,7 @@ const messages = defineMessages({
   verificationFail: { id: 'email_verification.fail', defaultMessage: 'Failed to request email verification.' },
   verificationFailTakenAlert: { id: 'email_verifilcation.exists', defaultMessage: 'This email has already been taken.' },
   verificationFailTaken: { id: 'email_verification.taken', defaultMessage: 'is taken' },
+  emailLabel: { id: 'email_verification.email.label', defaultMessage: 'E-mail address' },
 });
 
 const Statuses = {
@@ -122,7 +123,7 @@ const EmailVerification = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Email Address' errors={errors}>
+          <FormGroup labelText={intl.formatMessage(messages.emailLabel)} errors={errors}>
             <Input
               type='email'
               value={email}
@@ -134,7 +135,9 @@ const EmailVerification = () => {
           </FormGroup>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/steps/sms-verification.tsx b/app/soapbox/features/verification/steps/sms-verification.tsx
index 7337c706d8..efe0a5ffc4 100644
--- a/app/soapbox/features/verification/steps/sms-verification.tsx
+++ b/app/soapbox/features/verification/steps/sms-verification.tsx
@@ -13,6 +13,7 @@ const messages = defineMessages({
   verificationSuccess: { id: 'sms_verification.success', defaultMessage: 'A verification code has been sent to your phone number.' },
   verificationFail: { id: 'sms_verification.fail', defaultMessage: 'Failed to send SMS message to your phone number.' },
   verificationExpired: { id: 'sms_verification.expired', defaultMessage: 'Your SMS token has expired.' },
+  phoneLabel: { id: 'sms_verification.phone.label', defaultMessage: 'Phone number' },
 });
 
 const Statuses = {
@@ -98,7 +99,7 @@ const SmsVerification = () => {
 
         <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto space-y-4'>
           <Text theme='muted' size='sm' align='center'>
-            We sent you a 6-digit code via SMS. Enter it below.
+            <FormattedMessage id='sms_verification.sent.body' defaultMessage='We sent you a 6-digit code via SMS. Enter it below.' />
           </Text>
 
           <OtpInput
@@ -120,7 +121,7 @@ const SmsVerification = () => {
               onClick={resendVerificationCode}
               disabled={requestedAnother}
             >
-              Resend verification code?
+              <FormattedMessage id='sms_verification.sent.actions.resend' defaultMessage='Resend verification code?' />
             </Button>
           </div>
         </div>
@@ -138,7 +139,7 @@ const SmsVerification = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Phone Number'>
+          <FormGroup labelText={intl.formatMessage(messages.phoneLabel)}>
             <PhoneInput
               value={phone}
               onChange={onChange}
@@ -147,7 +148,9 @@ const SmsVerification = () => {
           </FormGroup>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/waitlist-page.tsx b/app/soapbox/features/verification/waitlist-page.tsx
index 1ae44817c5..ebfe6a00d1 100644
--- a/app/soapbox/features/verification/waitlist-page.tsx
+++ b/app/soapbox/features/verification/waitlist-page.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -42,7 +43,7 @@ const WaitlistPage = (/* { account } */) => {
 
             <div className='absolute inset-y-0 right-0 flex items-center pr-2'>
               <Button onClick={onClickLogOut} theme='primary' to='/logout'>
-                Sign out
+                <FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' />
               </Button>
             </div>
           </div>
@@ -55,13 +56,17 @@ const WaitlistPage = (/* { account } */) => {
 
               <Stack space={2}>
                 <Text size='lg' theme='muted' align='center' weight='medium'>
-                  Welcome back to {title}! You were previously placed on our
-                  waitlist. Please verify your phone number to receive
-                  immediate access to your account!
+                  <FormattedMessage
+                    id='waitlist.body'
+                    defaultMessage='Welcome back to {title}! You were previously placed on our waitlist. Please verify your phone number to receive immediate access to your account!'
+                    values={{ title }}
+                  />
                 </Text>
 
                 <div className='text-center'>
-                  <Button onClick={openVerifySmsModal} theme='primary'>Verify phone number</Button>
+                  <Button onClick={openVerifySmsModal} theme='primary'>
+                    <FormattedMessage id='waitlist.actions.verify_number' defaultMessage='Verify phone number' />
+                  </Button>
                 </div>
               </Stack>
             </Stack>

From 34aee08a0932e4b8ea04479136afdfce601b2269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 16:00:54 +0100
Subject: [PATCH 34/50] Make more strings localizable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/account/components/header.tsx  |  3 ++-
 .../onboarding/steps/avatar-selection-step.tsx      |  8 ++++++--
 app/soapbox/features/onboarding/steps/bio-step.tsx  |  3 ++-
 .../onboarding/steps/cover-photo-selection-step.tsx | 13 +++++++++----
 .../features/onboarding/steps/display-name-step.tsx |  3 ++-
 app/soapbox/features/verification/registration.tsx  |  2 +-
 .../steps/__tests__/email-verification.test.tsx     |  4 ++--
 app/soapbox/locales/en.json                         |  4 ++--
 8 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 48c1eff8f5..af6e3d0797 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -67,6 +67,7 @@ const messages = defineMessages({
   userEndorsed: { id: 'account.endorse.success', defaultMessage: 'You are now featuring @{acct} on your profile' },
   userUnendorsed: { id: 'account.unendorse.success', defaultMessage: 'You are no longer featuring @{acct}' },
   profileExternal: { id: 'account.profile_external', defaultMessage: 'View profile on {domain}' },
+  header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
 });
 
 interface IHeader {
@@ -556,7 +557,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
             <a href={account.header} onClick={handleHeaderClick} target='_blank'>
               <StillImage
                 src={account.header}
-                alt='Profile Header'
+                alt={intl.formatMessage(messages.header)}
               />
             </a>
           )}
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 936b59a510..f5f9f7274f 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -1,6 +1,6 @@
 import classNames from 'clsx';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -11,6 +11,10 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
+});
+
 /** Default avatar filenames from various backends */
 const DEFAULT_AVATARS = [
   '/avatars/original/missing.png', // Mastodon
@@ -64,7 +68,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           dispatch(snackbar.error((error.response.data as any).error.replace('Validation failed: ', '')));
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
     }).catch(console.error);
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index 77205b001d..38ec425ad2 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -11,6 +11,7 @@ import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
   bioPlaceholder: { id: 'onboarding.bio.placeholder', defaultMessage: 'Tell the world a little about yourself…' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
 const BioStep = ({ onNext }: { onNext: () => void }) => {
@@ -37,7 +38,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           setErrors([(error.response.data as any).error.replace('Validation failed: ', '')]);
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
   };
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index e753a935b4..e1a9c5f304 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -1,6 +1,6 @@
 import classNames from 'clsx';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -12,6 +12,11 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
+});
+
 /** Default header filenames from various backends */
 const DEFAULT_HEADERS = [
   '/headers/original/missing.png', // Mastodon
@@ -24,6 +29,7 @@ const isDefaultHeader = (url: string) => {
 };
 
 const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const account = useOwnAccount();
 
@@ -65,7 +71,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           dispatch(snackbar.error((error.response.data as any).error.replace('Validation failed: ', '')));
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
     }).catch(console.error);
@@ -90,7 +96,6 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
           <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
             <Stack space={10}>
               <div className='border border-solid border-gray-200 dark:border-gray-800 rounded-lg'>
-                {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
                 <div
                   role='button'
                   className='relative h-24 bg-gray-200 dark:bg-gray-800 rounded-t-md flex items-center justify-center'
@@ -98,7 +103,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   {selectedFile || account?.header && (
                     <StillImage
                       src={selectedFile || account.header}
-                      alt='Profile Header'
+                      alt={intl.formatMessage(messages.header)}
                       className='absolute inset-0 object-cover rounded-t-md'
                     />
                   )}
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index 25dd49ba61..5d2e101b29 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -11,6 +11,7 @@ import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
   usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
 const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
@@ -48,7 +49,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           setErrors([(error.response.data as any).error.replace('Validation failed: ', '')]);
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
   };
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index 4d6edbc6dd..6539ca8c88 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -18,7 +18,7 @@ import type { AxiosError } from 'axios';
 const messages = defineMessages({
   success: { id: 'registrations.success', defaultMessage: 'Welcome to {siteTitle}!' },
   usernameLabel: { id: 'registrations.username.label', defaultMessage: 'Your username' },
-  usernameHint: { id: 'registrations.username.hint', defaultMessage: 'May only contain A-Z, 0-9, and underscores', },
+  usernameHint: { id: 'registrations.username.hint', defaultMessage: 'May only contain A-Z, 0-9, and underscores' },
   usernameTaken: { id: 'registrations.unprocessable_entity', defaultMessage: 'This username has already been taken.' },
   passwordLabel: { id: 'registrations.password.label', defaultMessage: 'Password' },
   error: { id: 'registrations.error', defaultMessage: 'Failed to register your account.' },
diff --git a/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx b/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
index 9e05686b7d..fc9131b97f 100644
--- a/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
+++ b/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
@@ -23,7 +23,7 @@ describe('<EmailVerification />', () => {
     it('successfully submits', async() => {
       render(<EmailVerification />);
 
-      await userEvent.type(screen.getByLabelText('Email Address'), 'foo@bar.com{enter}');
+      await userEvent.type(screen.getByLabelText('E-mail address'), 'foo@bar.com{enter}');
 
       await waitFor(() => {
         fireEvent.submit(
@@ -50,7 +50,7 @@ describe('<EmailVerification />', () => {
     it('renders errors', async() => {
       render(<EmailVerification />);
 
-      await userEvent.type(screen.getByLabelText('Email Address'), 'foo@bar.com{enter}');
+      await userEvent.type(screen.getByLabelText('E-mail address'), 'foo@bar.com{enter}');
 
       await waitFor(() => {
         fireEvent.submit(
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index b7c280137f..bac5c3ea66 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -432,7 +432,7 @@
   "emoji_button.objects": "Objects",
   "emoji_button.people": "People",
   "emoji_button.recent": "Frequently used",
-  "emoji_button.search": "Search...",
+  "emoji_button.search": "Search…",
   "emoji_button.search_results": "Search results",
   "emoji_button.symbols": "Symbols",
   "emoji_button.travel": "Travel & Places",
@@ -1071,7 +1071,7 @@
   "upload_form.description": "Describe for the visually impaired",
   "upload_form.preview": "Preview",
   "upload_form.undo": "Delete",
-  "upload_progress.label": "Uploading...",
+  "upload_progress.label": "Uploading…",
   "video.close": "Close video",
   "video.download": "Download file",
   "video.exit_fullscreen": "Exit full screen",

From 954524892919b26350d6b387d0c2b74e168c8980 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 09:34:13 -0600
Subject: [PATCH 35/50] Fix chat list styles Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1221

---
 app/soapbox/features/chats/components/chat.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index c180160e3d..7c595c33f6 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -33,9 +33,9 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
   return (
     <div className='account'>
       <button className='floating-link' onClick={() => onClick(chat)} />
-      <HStack key={account.id} space={3} className='relative'>
-        <Avatar src={account.avatar} size={36} />
-        <Stack>
+      <HStack key={account.id} space={3} className='relative overflow-hidden'>
+        <Avatar className='flex-none' src={account.avatar} size={36} />
+        <Stack className='overflow-hidden'>
           <DisplayName account={account} withSuffix={false} />
           {attachment && (
             <Icon
@@ -49,6 +49,7 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
               size='sm'
               className='chat__last-message'
               dangerouslySetInnerHTML={{ __html: parsedContent }}
+              truncate
             />
           ) : attachment && (
             <span

From ed22df7a514192af477606b40f0e6ffd482c40b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 16:50:53 +0100
Subject: [PATCH 36/50] Update tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/ui/components/modals/verify-sms-modal.tsx      | 2 +-
 .../verification/steps/__tests__/sms-verification.test.tsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
index 8df59b7777..ee45e49476 100644
--- a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
@@ -150,7 +150,7 @@ const VerifySmsModal: React.FC<IVerifySmsModal> = ({ onClose }) => {
         );
       case Statuses.READY:
         return (
-          <FormGroup labelText={<FormattedMessage id='sms_verification.phone.label' defaultMessage='Phone Number' />}>
+          <FormGroup labelText={<FormattedMessage id='sms_verification.phone.label' defaultMessage='Phone number' />}>
             <PhoneInput
               value={phone}
               onChange={onChange}
diff --git a/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx b/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
index 26add4f4f2..6cdba4104e 100644
--- a/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
+++ b/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
@@ -26,7 +26,7 @@ describe('<SmsVerification />', () => {
 
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {
@@ -53,7 +53,7 @@ describe('<SmsVerification />', () => {
 
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {
@@ -87,7 +87,7 @@ describe('<SmsVerification />', () => {
     it('renders errors', async() => {
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {

From 596653ee1e50f03dbdfa8f197827d783a56a1680 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 11:02:50 -0600
Subject: [PATCH 37/50] Wrap the emoji selector on smaller screens

---
 app/soapbox/components/ui/emoji-selector/emoji-selector.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 20810efbe4..caaea79ee6 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -47,8 +47,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
 
   return (
     <HStack
-      space={2}
-      className={classNames('bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max')}
+      className={classNames('gap-2 bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max max-w-[100vw] flex-wrap')}
     >
       {Array.from(emojis).map((emoji, i) => (
         <EmojiButton

From c9e9c9e071894f9dfad021ac729707704b77b617 Mon Sep 17 00:00:00 2001
From: forenta <ueblesurmeli-github@yahoo.de>
Date: Sat, 26 Nov 2022 17:09:56 +0000
Subject: [PATCH 38/50] Update german translation

---
 app/soapbox/locales/de.json | 214 ++++++++++++++++++------------------
 1 file changed, 107 insertions(+), 107 deletions(-)

diff --git a/app/soapbox/locales/de.json b/app/soapbox/locales/de.json
index debb5b07d9..d368e1aab2 100644
--- a/app/soapbox/locales/de.json
+++ b/app/soapbox/locales/de.json
@@ -5,7 +5,7 @@
   "account.add_or_remove_from_list": "Hinzufügen oder Entfernen von Listen",
   "account.badges.bot": "Bot",
   "account.birthday": "Geburtsdatum {date}",
-  "account.birthday_today": "Birthday is today!",
+  "account.birthday_today": "Hat heute Geburtstag!",
   "account.block": "@{name} blockieren",
   "account.block_domain": "Alles von {domain} verstecken",
   "account.blocked": "Blockiert",
@@ -104,14 +104,14 @@
   "admin.users.actions.promote_to_admin_message": "@{acct} ist nun Adminstrator.",
   "admin.users.actions.promote_to_moderator": "@{name} zum Moderator ernennen",
   "admin.users.actions.promote_to_moderator_message": "@{acct} ist nun Moderator",
-  "admin.users.actions.remove_donor": "Remove @{name} as a donor",
-  "admin.users.actions.set_donor": "Set @{name} as a donor",
+  "admin.users.actions.remove_donor": "@{name} aus der Liste der Unterstützer:innen entfernen",
+  "admin.users.actions.set_donor": "@{name} als Unterstützer:in festlegen",
   "admin.users.actions.suggest_user": "@{name} vorschlagen",
   "admin.users.actions.unsuggest_user": "Vorschlag von @{name} zurücknehmen",
   "admin.users.actions.unverify_user": "Verifizierung von @{name} aufheben",
   "admin.users.actions.verify_user": "Verifizierung von @{name} bestätigen",
-  "admin.users.remove_donor_message": "@{acct} was removed as a donor",
-  "admin.users.set_donor_message": "@{acct} was set as a donor",
+  "admin.users.remove_donor_message": "@{acct} wurde als Unterstützer:in entfernt",
+  "admin.users.set_donor_message": "@{acct} wurde als Unterstützer:in festgelegt",
   "admin.users.user_deactivated_message": "@{acct} wurde deaktiviert",
   "admin.users.user_deleted_message": "@{acct} wurde gelöscht",
   "admin.users.user_suggested_message": "@{acct} vorgeschlagen",
@@ -121,10 +121,10 @@
   "admin_nav.awaiting_approval": "Wartet auf Bestätigung",
   "admin_nav.dashboard": "Steuerung",
   "admin_nav.reports": "Beschwerden",
-  "alert.unexpected.body": "We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out).",
+  "alert.unexpected.body": "Verzeihe die Unannnehmlichkeiten. Wende dich an den Support, wenn das Problem über längere Zeit besteht. Möglicherweise hilft es, {clearCookies}. Hierdurch wirst du abgemeldet.",
   "alert.unexpected.browser": "Browser",
   "alert.unexpected.clear_cookies": "Cookies und Browserdaten löschen",
-  "alert.unexpected.links.help": "Help Center",
+  "alert.unexpected.links.help": "Hilfe",
   "alert.unexpected.links.status": "Status",
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Ein unerwarteter Fehler ist aufgetreten.",
@@ -155,7 +155,7 @@
   "backups.empty_message.action": "Backup jetzt erstellen?",
   "backups.pending": "Anstehende Backups",
   "beta.also_available": "Available in:",
-  "birthday_panel.title": "Birthdays",
+  "birthday_panel.title": "Geburtstage",
   "boost_modal.combo": "Drücke {combo}, um dieses Fenster zu überspringen",
   "bundle_column_error.body": "Beim Laden ist ein Fehler aufgetreten.",
   "bundle_column_error.retry": "Erneut versuchen",
@@ -216,17 +216,17 @@
   "column.filters.drop_hint": "Gefilterte Beiträge bleiben dauerhaft unsichtbar, auch wenn der Filter später entfernt wird.",
   "column.filters.expires": "Gültig bis",
   "column.filters.expires_hint": "Ablaufdaten werden zurzeit nicht unterstüzt.",
-  "column.filters.home_timeline": "Home timeline",
+  "column.filters.home_timeline": "Persönliche Timeline",
   "column.filters.keyword": "Stichwort oder Wortfolge",
   "column.filters.notifications": "Benachrichtgungen",
   "column.filters.public_timeline": "Öffentliche Zeitleiste",
   "column.filters.subheading_add_new": "Filter hinzufügen",
   "column.filters.subheading_filters": "Bestehnde Filter",
   "column.filters.whole_word_header": "Ganzes Wort",
-  "column.filters.whole_word_hint": "When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word",
-  "column.follow_requests": "Folgeanfragen",
-  "column.followers": "Followers",
-  "column.following": "Following",
+  "column.filters.whole_word_hint": "Wenn das Schlüsselwort oder die Phrase ausschließlich alphanumerisch ist, wird der Filter ausschließlich auf das gesamte Wort angewandt.",
+  "column.follow_requests": "Follower-Anfragen",
+  "column.followers": "Follower",
+  "column.following": "Gefolgte",
   "column.groups": "Gruppen",
   "column.home": "Startseite",
   "column.import_data": "Daten importieren",
@@ -246,7 +246,7 @@
   "column.public": "Föderierte Zeitleiste",
   "column.reactions": "Reaktionen",
   "column.reblogs": "Geteilte Beiträge",
-  "column.remote": "Federated timeline",
+  "column.remote": "Föderierte Timeline",
   "column.scheduled_statuses": "Vorbereitete Beiträge",
   "column.search": "Suche",
   "column.security": "Sicherheitseinstellungen",
@@ -288,7 +288,7 @@
   "compose_form.spoiler.marked": "Text ist hinter einer Warnung versteckt",
   "compose_form.spoiler.unmarked": "Text ist nicht versteckt",
   "compose_form.spoiler_placeholder": "Inhaltswarnung",
-  "confirmation_modal.cancel": "Abbrechen",
+  "confirmation_modal.cancel": "Bearbeiten",
   "confirmations.admin.deactivate_user.confirm": "@{name} deaktivieren",
   "confirmations.admin.deactivate_user.heading": "Deactivate @{acct}",
   "confirmations.admin.deactivate_user.message": "Hiermit wird das Konto von @{acct} deaktiviert. Diese Entscheidung kann später zurückgenommen werden.",
@@ -303,23 +303,23 @@
   "confirmations.admin.mark_status_not_sensitive.heading": "Mark post not sensitive.",
   "confirmations.admin.mark_status_not_sensitive.message": "Hiermit wird der Beitrag von @{acct} als nicht heikel markiert.",
   "confirmations.admin.mark_status_sensitive.confirm": "Beitrag als heikel markieren",
-  "confirmations.admin.mark_status_sensitive.heading": "Mark post sensitive",
+  "confirmations.admin.mark_status_sensitive.heading": "Beitrag als heikel festlegen",
   "confirmations.admin.mark_status_sensitive.message": "Hiermit wird der Beitrag von @{acct} als heikel markiert.",
   "confirmations.admin.reject_user.confirm": "@{name} ablehnen",
   "confirmations.admin.reject_user.heading": "@{acct} ablehnen",
   "confirmations.admin.reject_user.message": "Hiermit wird der Aufnahmeantrag von @{acct} abgelehnt. Diese Entscheidung kann nicht rückgängig gemacht werden.",
   "confirmations.block.block_and_report": "Blockieren und melden",
   "confirmations.block.confirm": "Blockieren",
-  "confirmations.block.heading": "Block @{name}",
+  "confirmations.block.heading": "Blockiere @{name}",
   "confirmations.block.message": "Bist du dir sicher, dass du {name} blockieren möchtest?",
-  "confirmations.delete.confirm": "Löschen",
+  "confirmations.delete.confirm": "Entwurf löschen",
   "confirmations.delete.heading": "Beitrag löschen",
   "confirmations.delete.message": "Bist du dir sicher, dass du diesen Beitrag löschen möchtest?",
   "confirmations.delete_list.confirm": "Löschen",
   "confirmations.delete_list.heading": "Liste löschen",
   "confirmations.delete_list.message": "Bist du dir sicher, dass du diese Liste permanent löschen möchtest?",
   "confirmations.domain_block.confirm": "Die ganze Domain verbergen",
-  "confirmations.domain_block.heading": "Block {domain}",
+  "confirmations.domain_block.heading": "Blockiere {domain}",
   "confirmations.domain_block.message": "Bist du dir wirklich sicher, dass du die ganze Domain {domain} blockieren willst? In den meisten Fällen reichen ein paar gezielte Blockierungen oder Stummschaltungen aus. Du wirst den Inhalt von dieser Domain dann nicht mehr in irgendwelchen öffentlichen Timelines oder den Benachrichtigungen finden. Von dieser Domain kann dir auch niemand mehr folgen.",
   "confirmations.mute.confirm": "Stummschalten",
   "confirmations.mute.heading": "@{name} stummschalten",
@@ -333,7 +333,7 @@
   "confirmations.register.needs_confirmation.header": "Bestätigung erforderlich",
   "confirmations.reply.confirm": "Antworten",
   "confirmations.reply.message": "Wenn du jetzt antwortest, wird die gesamte Nachricht verworfen, die du gerade schreibst. Möchtest du wirklich fortfahren?",
-  "confirmations.scheduled_status_delete.confirm": "Abbrechen",
+  "confirmations.scheduled_status_delete.confirm": "Bearbeiten",
   "confirmations.scheduled_status_delete.heading": "Vorbereiteten Beitrag verwerfen",
   "confirmations.scheduled_status_delete.message": "Den vorbereiteten Beitrag wirklich verwerfen?",
   "confirmations.unfollow.confirm": "Entfolgen",
@@ -345,13 +345,13 @@
   "crypto_donate_panel.heading": "Kryptowährungen spenden",
   "crypto_donate_panel.intro.message": "{siteTitle} akzeptiert Kryptowährungen, um dieses Angebot zu finanzieren. Danke für deine Unterstützung!",
   "datepicker.hint": "Beitrag veröffentlichen am…",
-  "datepicker.next_month": "Next month",
-  "datepicker.next_year": "Next year",
-  "datepicker.previous_month": "Previous month",
-  "datepicker.previous_year": "Previous year",
-  "developers.challenge.answer_label": "Answer",
-  "developers.challenge.answer_placeholder": "Your answer",
-  "developers.challenge.fail": "Wrong answer",
+  "datepicker.next_month": "Nächster Monat",
+  "datepicker.next_year": "Nächstes Jahr",
+  "datepicker.previous_month": "Vorheriger Monat",
+  "datepicker.previous_year": "Vorheriges Jahr",
+  "developers.challenge.answer_label": "Antworten",
+  "developers.challenge.answer_placeholder": "Deine Antwort",
+  "developers.challenge.fail": "Falsche Antwort",
   "developers.challenge.message": "What is the result of calling {function}?",
   "developers.challenge.submit": "Become a developer",
   "developers.challenge.success": "You are now a developer",
@@ -359,14 +359,14 @@
   "developers.navigation.app_create_label": "App erstellen",
   "developers.navigation.intentional_error_label": "Trigger an error",
   "developers.navigation.leave_developers_label": "Leave developers",
-  "developers.navigation.network_error_label": "Network error",
+  "developers.navigation.network_error_label": "Netzwerkfehler",
   "developers.navigation.settings_store_label": "Settings store",
   "developers.navigation.test_timeline_label": "Test timeline",
   "developers.settings_store.hint": "Hier können die Benutzereinstellungen direkt bearbeitet werden. VORSICHT! Die Bearbeitung dieses Abschnitts kann das Konto zerstören - eine Wiederherstellung ist ausschließlich per API möglich",
   "direct.search_placeholder": "Nachricht senden an…",
-  "directory.federated": "From known fediverse",
+  "directory.federated": "Aus dem Fediverse",
   "directory.local": "Ausschließlich von {domain}",
-  "directory.new_arrivals": "New arrivals",
+  "directory.new_arrivals": "Neuankömmlinge",
   "directory.recently_active": "Zuletzt aktiv",
   "edit_federation.followers_only": "Beitrag nur für Follower anzeigen",
   "edit_federation.force_nsfw": "Markierung aller Anhänge als heikel erzwingen",
@@ -498,8 +498,8 @@
   "filters.filters_list_phrase_label": "Stichwort oder Wortfolge:",
   "filters.filters_list_whole-word": "Whole word",
   "filters.removed": "Filter gelöscht.",
-  "follow_recommendation.subhead": "Let's get started!",
-  "follow_recommendations.done": "Done",
+  "follow_recommendation.subhead": "Lass uns anfangen!",
+  "follow_recommendations.done": "Fertig",
   "follow_recommendations.heading": "Folge Nutzern, deren Beiträge du sehen möchtest. Hier sind einige Vorschläge:",
   "follow_recommendations.lead": "Posts von Usern, denen du folgst, werden in deinem Home-Feed in chronologischer Reihenfolge angezeigt. Los geht's - du kannst anderen später jederzeit wieder entfolgen.",
   "follow_request.authorize": "Bestätigen",
@@ -580,8 +580,8 @@
   "introduction.interactions.reply.headline": "Antworten",
   "introduction.interactions.reply.text": "You can reply to other people's and your own posts, which will chain them together in a conversation.",
   "introduction.welcome.action": "Let's go!",
-  "introduction.welcome.headline": "First steps",
-  "introduction.welcome.text": "Welcome to the fediverse! In a few moments, you'll be able to broadcast messages and talk to your friends across a wide variety of servers. But this server, {domain}, is special—it hosts your profile, so remember its name.",
+  "introduction.welcome.headline": "Erste Schritte",
+  "introduction.welcome.text": "Willkommen im Fediverse! Gleich kannst du Nachrichten in die Welt verschicken oder mit deinen Freunden teilen. Wichtig: Dein Konto existiert ausschließlich auf der Instanz  {domain}. Notiere dir daher neben deinem Nutzernamen (Handle) auch den Namen deiner Instanz.",
   "keyboard_shortcuts.back": "zurück navigieren",
   "keyboard_shortcuts.blocked": "Liste blockierter Profile öffnen",
   "keyboard_shortcuts.boost": "teilen",
@@ -611,7 +611,7 @@
   "keyboard_shortcuts.unfocus": "Textfeld/die Suche nicht mehr fokussieren",
   "keyboard_shortcuts.up": "sich in der Liste hinauf bewegen",
   "landing_page_modal.download": "Download",
-  "landing_page_modal.helpCenter": "Help Center",
+  "landing_page_modal.helpCenter": "Hilfe",
   "lightbox.close": "Schließen",
   "lightbox.next": "Weiter",
   "lightbox.previous": "Zurück",
@@ -620,7 +620,7 @@
   "list_adder.header_title": "Nutzer hinzufügen oder entfernen",
   "lists.account.add": "Zur Liste hinzufügen",
   "lists.account.remove": "Von der Liste entfernen",
-  "lists.delete": "Delete list",
+  "lists.delete": "Liste löschen",
   "lists.edit": "Liste bearbeiten",
   "lists.edit.submit": "Titel ändern",
   "lists.new.create": "Liste hinzufügen",
@@ -630,16 +630,16 @@
   "lists.search": "Suche nach Leuten, denen du folgst",
   "lists.subheading": "Deine Listen",
   "loading_indicator.label": "Wird geladen …",
-  "login.fields.instance_label": "Instance",
-  "login.fields.instance_placeholder": "example.com",
-  "login.fields.otp_code_hint": "Enter the two-factor code generated by your phone app or use one of your recovery codes",
+  "login.fields.instance_label": "Instanz für den Login eingeben",
+  "login.fields.instance_placeholder": "instanz.de",
+  "login.fields.otp_code_hint": "Gib den Zwei-Faktoren-Code aus deiner App oder deinen Wiederherstellungsschlüssel ein",
   "login.fields.otp_code_label": "Zwei-Faktoren-Code:",
   "login.fields.password_placeholder": "Passwort",
   "login.fields.username_label": "E-Mail oder Nutzername",
   "login.log_in": "Anmelden",
   "login.otp_log_in": "OTP Login",
   "login.reset_password_hint": "Probleme beim Anmelden?",
-  "login.sign_in": "Sign in",
+  "login.sign_in": "Anmelden",
   "media_gallery.toggle_visible": "Sichtbarkeit umschalten",
   "media_panel.empty_message": "Keine Medien gefunden.",
   "media_panel.title": "Media",
@@ -664,19 +664,19 @@
   "migration.hint.link": "Neues Alias erstellen",
   "migration.move_account.fail": "Account-Übertragung fehlgeschlagen.",
   "migration.move_account.success": "Account-Übertragung fehlgeschlagen.",
-  "migration.submit": "Move followers",
+  "migration.submit": "Follower übertragen",
   "missing_description_modal.cancel": "Abbrechen",
   "missing_description_modal.continue": "Senden",
   "missing_description_modal.description": "Dennoch fortfahren?",
   "missing_description_modal.text": "Du hast nicht für alle Anhänge Beschreibungen angegeben. Dennoch fortfahren?",
   "missing_indicator.label": "Nicht gefunden",
   "missing_indicator.sublabel": "Der Eintrag konnte nicht gefunden werden",
-  "mobile.also_available": "Available in:",
+  "mobile.also_available": "Verfügbar auf:",
   "morefollows.followers_label": "…and {count} more {count, plural, one {follower} other {followers}} on remote sites.",
   "morefollows.following_label": "…and {count} more {count, plural, one {follow} other {follows}} on remote sites.",
   "mute_modal.hide_notifications": "Benachrichtigungen von diesem Account verbergen?",
   "navigation.chats": "Chats",
-  "navigation.compose": "Compose",
+  "navigation.compose": "Verfassen",
   "navigation.dashboard": "Steuerung",
   "navigation.developers": "Entwickler",
   "navigation.direct_messages": "Nachrichten",
@@ -684,7 +684,7 @@
   "navigation.invites": "Einladungen",
   "navigation.notifications": "Benachrichtigungen",
   "navigation.search": "Suche",
-  "navigation_bar.account_migration": "Move account",
+  "navigation_bar.account_migration": "Account umziehen",
   "navigation_bar.blocks": "Blockierte Profile",
   "navigation_bar.compose": "Neuen Beitrag verfassen",
   "navigation_bar.compose_direct": "Direktnachrichten",
@@ -702,7 +702,7 @@
   "navigation_bar.preferences": "Einstellungen",
   "navigation_bar.profile_directory": "Profilverzeichnis",
   "navigation_bar.security": "Sicherheit",
-  "navigation_bar.soapbox_config": "Soapbox Konfiguration",
+  "navigation_bar.soapbox_config": "Soapbox-Konfiguration",
   "notification.birthday": "{name} hat Geburtstag!",
   "notification.birthday.more": "{count} more {count, plural, one {friend} other {friends}}",
   "notification.birthday_plural": "{name} and {more} have birthday today",
@@ -730,7 +730,7 @@
   "notifications.column_settings.follow": "Neue Follower:",
   "notifications.column_settings.follow_request": "Neue Follower-Anfragen:",
   "notifications.column_settings.mention": "Erwähnungen:",
-  "notifications.column_settings.move": "Moves:",
+  "notifications.column_settings.move": "Umzüge:",
   "notifications.column_settings.poll": "Ergebnisse von Umfragen:",
   "notifications.column_settings.push": "Push-Benachrichtigungen",
   "notifications.column_settings.reblog": "Geteilte Beiträge:",
@@ -752,26 +752,26 @@
   "notifications.queue_label": "{count, plural, one {Eine neue Benachrichtigung} other {# neue Benachrichtigungen}}. Hier klicken, um sie anzuzeigen.",
   "onboarding.avatar.subtitle": "Just have fun with it.",
   "onboarding.avatar.title": "Profilbild auswählen",
-  "onboarding.display_name.subtitle": "You can always edit this later.",
-  "onboarding.display_name.title": "Choose a display name",
-  "onboarding.done": "Done",
-  "onboarding.finished.message": "We are very excited to welcome you to our community! Tap the button below to get started.",
+  "onboarding.display_name.subtitle": "Du kannst diesen Eintrag später jederzeit bearbeiten.",
+  "onboarding.display_name.title": "Wähle deinen angezeigten Namen",
+  "onboarding.done": "Fertig",
+  "onboarding.finished.message": "Schön, dich bei uns begrüßen zu dürfen! Wenn du jetzt bestätigst, kann unserer Reise beginnen.",
   "onboarding.finished.title": "Onboarding complete",
-  "onboarding.header.subtitle": "This will be shown at the top of your profile.",
-  "onboarding.header.title": "Pick a cover image",
-  "onboarding.next": "Next",
-  "onboarding.note.subtitle": "You can always edit this later.",
-  "onboarding.note.title": "Write a short bio",
-  "onboarding.saving": "Saving…",
-  "onboarding.skip": "Skip for now",
-  "onboarding.suggestions.subtitle": "Here are a few of the most popular accounts you might like.",
-  "onboarding.suggestions.title": "Suggested accounts",
-  "onboarding.view_feed": "View Feed",
-  "password_reset.confirmation": "Check your email for confirmation.",
+  "onboarding.header.subtitle": "Dies wird in deinen Profilinfos deiner persönlichen Seite zu sehen sein.",
+  "onboarding.header.title": "Wähle ein Cover für dein Profil",
+  "onboarding.next": "Weiter",
+  "onboarding.note.subtitle": "Du kannst diesen Eintrag später jederzeit ändern.",
+  "onboarding.note.title": "Stell dich deinen Followern kurz vor",
+  "onboarding.saving": "Speichern…",
+  "onboarding.skip": "Überspringen",
+  "onboarding.suggestions.subtitle": "Hier sind ein paar bekannte Gesichter, die dir vielleicht den Einstieg erleichtern.",
+  "onboarding.suggestions.title": "Vorgeschlagene User",
+  "onboarding.view_feed": "Timeline anzeigen",
+  "password_reset.confirmation": "Überprüfe jetzt deine E-Mails.",
   "password_reset.fields.username_placeholder": "Email oder Nutzername",
   "password_reset.reset": "Passwort zurücksetzen",
-  "patron.donate": "Donate",
-  "patron.title": "Funding Goal",
+  "patron.donate": "Spenden",
+  "patron.title": "Spendenziel",
   "pinned_accounts.title": "{name}’s choices",
   "pinned_statuses.none": "Keine angehefteten Beiträge.",
   "poll.closed": "Geschlossen",
@@ -782,10 +782,10 @@
   "poll.votes": "{votes, plural, one {# vote} other {# votes}}",
   "poll_button.add_poll": "Eine Umfrage erstellen",
   "poll_button.remove_poll": "Umfrage entfernen",
-  "pre_header.close": "Close",
+  "pre_header.close": "Schließen",
   "preferences.fields.auto_play_gif_label": "Animierte GIFs automatisch abspielen",
-  "preferences.fields.autoload_more_label": "Automatically load more items when scrolled to the bottom of the page",
-  "preferences.fields.autoload_timelines_label": "Automatically load new posts when scrolled to the top of the page",
+  "preferences.fields.autoload_more_label": "Weitere Posts automatisch laden, wenn das Ende der Timeline erreicht wurde",
+  "preferences.fields.autoload_timelines_label": "Neue Posts automatisch laden, wenn das obere Ende der Timeline erreicht wurde",
   "preferences.fields.boost_modal_label": "Bestätigungsdialog öffnen, bevor ein Beitrag geboostet wird",
   "preferences.fields.delete_modal_label": "Bestätigungsdialog öffnen, bevor ein Beitrag gelöscht wird",
   "preferences.fields.display_media.default": "Als verstörend gekennzeichnete Medien grundsätzlich anzeigen",
@@ -793,8 +793,8 @@
   "preferences.fields.display_media.show_all": "Medien grundsätzlich anzeigen",
   "preferences.fields.expand_spoilers_label": "Als verstörend gekennzeichnete Posts grundsätzlich ausklappen",
   "preferences.fields.language_label": "Sprache",
-  "preferences.fields.media_display_label": "Media display",
-  "preferences.hints.feed": "In your home feed",
+  "preferences.fields.media_display_label": "Bilder & Videos",
+  "preferences.hints.feed": "Auf deiner persönlichen Timeline",
   "privacy.change": "Sichtbarkeit des Beitrags anpassen",
   "privacy.direct.long": "Wird nur an erwähnte Profile gesendet",
   "privacy.direct.short": "Direktnachricht",
@@ -806,7 +806,7 @@
   "privacy.unlisted.short": "Nicht gelistet",
   "profile_dropdown.add_account": "Bestehendes Konto hinzufügen",
   "profile_dropdown.logout": "Aus @{acct} abmelden",
-  "profile_fields_panel.title": "Profile fields",
+  "profile_fields_panel.title": "Profilfelder",
   "public.column_settings.title": "Einstellungen der globalen Timeline",
   "reactions.all": "Alle",
   "regeneration_indicator.label": "Laden…",
@@ -835,30 +835,30 @@
   "relative_time.just_now": "jetzt",
   "relative_time.minutes": "{number}m",
   "relative_time.seconds": "{number}s",
-  "remote_instance.edit_federation": "Edit federation",
-  "remote_instance.federation_panel.heading": "Federation Restrictions",
+  "remote_instance.edit_federation": "Föderation bearbeiten",
+  "remote_instance.federation_panel.heading": "Föderationsbeschränkungen",
   "remote_instance.federation_panel.no_restrictions_message": "{siteTitle} has placed no restrictions on {host}.",
   "remote_instance.federation_panel.restricted_message": "{siteTitle} blocks all activities from {host}.",
   "remote_instance.federation_panel.some_restrictions_message": "{siteTitle} has placed some restrictions on {host}.",
-  "remote_instance.pin_host": "Pin {host}",
-  "remote_instance.unpin_host": "Unpin {host}",
+  "remote_instance.pin_host": "{host} anhenften",
+  "remote_instance.unpin_host": "{host} abheften",
   "remote_interaction.account_placeholder": "Enter your username@domain you want to act from",
-  "remote_interaction.divider": "or",
-  "remote_interaction.favourite": "Proceed to like",
-  "remote_interaction.favourite_title": "Like a post remotely",
+  "remote_interaction.divider": "oder",
+  "remote_interaction.favourite": "Like bestätigen",
+  "remote_interaction.favourite_title": "Beitrag vom Remotekonto liken",
   "remote_interaction.follow": "Fortsetzen, um zu folgen",
-  "remote_interaction.follow_title": "Follow {user} remotely",
-  "remote_interaction.poll_vote": "Proceed to vote",
-  "remote_interaction.poll_vote_title": "Vote in a poll remotely",
+  "remote_interaction.follow_title": "User {user} per Remote folgen",
+  "remote_interaction.poll_vote": "Bestätige deine Wahl",
+  "remote_interaction.poll_vote_title": "Stimme per Remotekonto ab",
   "remote_interaction.reblog": "Boost bestätigen",
   "remote_interaction.reblog_title": "Reblog a post remotely",
   "remote_interaction.reply": "Antwort bestätigen",
   "remote_interaction.reply_title": "Reply to a post remotely",
   "remote_interaction.user_not_found_error": "Konto nicht gefunden",
-  "remote_timeline.filter_message": "You are viewing the timeline of {instance}.",
-  "reply_indicator.cancel": "Abbrechen",
-  "reply_mentions.account.add": "Add to mentions",
-  "reply_mentions.account.remove": "Remove from mentions",
+  "remote_timeline.filter_message": "Du betrachtest die Timeline der Instanz {instance}.",
+  "reply_indicator.cancel": "Bearbeiten",
+  "reply_mentions.account.add": "Erwähnen",
+  "reply_mentions.account.remove": "Aus Erwähnungen entfernen",
   "reply_mentions.more": "{count, plural, one {einen weiteren Nutzer} other {# weitere Nutzer}}",
   "reply_mentions.reply": "<hover>Antwort an</hover> {accounts}",
   "reply_mentions.reply_empty": "Antwort auf einen Beitrag",
@@ -870,13 +870,13 @@
   "report.placeholder": "Zusätzliche Kommentare",
   "report.submit": "Absenden",
   "report.target": "{target} melden",
-  "reset_password.header": "Set New Password",
-  "schedule.post_time": "Post Date/Time",
-  "schedule.remove": "Remove schedule",
+  "reset_password.header": "Neues Passwort festlegen",
+  "schedule.post_time": "Datum/Uhrzeit zum Absenden",
+  "schedule.remove": "Ohne Verzögerung absenden",
   "schedule_button.add_schedule": "Für späteres Absenden planen",
   "schedule_button.remove_schedule": "Sofort posten",
-  "scheduled_status.cancel": "Cancel",
-  "search.action": "Search for “{query}”",
+  "scheduled_status.cancel": "Abbrechen",
+  "search.action": "Suche nach “{query}”",
   "search.placeholder": "Suche",
   "search_results.accounts": "Personen",
   "search_results.hashtags": "Hashtags",
@@ -898,10 +898,10 @@
   "security.headers.update_email": "Email ändern",
   "security.headers.update_password": "Passwort ändern",
   "security.mfa": "Zwei-Faktoren-Authentifizierung einstellen",
-  "security.mfa_enabled": "You have multi-factor authentication set up with OTP.",
+  "security.mfa_enabled": "Du hast die Zwei-Faktoren-Authentifizierung per OTP aktiviert.",
   "security.mfa_header": "Authentifizierungsmethoden",
   "security.mfa_setup_hint": "OTP-Zwei-Faktoren-Authentifizierung konfigurieren",
-  "security.qr.fail": "Failed to fetch setup key",
+  "security.qr.fail": "Schlüssel konnte nicht abgerufen werden",
   "security.submit": "Änderungen speichern",
   "security.submit.delete": "Konto löschen",
   "security.text.delete": "Gib dein Passwort ein, um dein Konto zu löschen. Diese Löschung ist dauerhaft und kann nicht rückgängig gemacht werden. Dein Konto wird von diesem Server aus gelöscht und eine Löschungsanfrage wird an andere Server gesendet. Es ist nicht garantiert, dass alle Instanzen dein Konto löschen..",
@@ -914,7 +914,7 @@
   "settings.change_password": "Passwort ändern",
   "settings.configure_mfa": "MFA konfigurieren",
   "settings.delete_account": "Konto löschen",
-  "settings.edit_profile": "Edit Profile",
+  "settings.edit_profile": "Profil bearbeiten",
   "settings.preferences": "Einstellungen",
   "settings.profile": "Profil",
   "settings.save.success": "Einstellungen wurden gespeichert!",
@@ -924,15 +924,15 @@
   "signup_panel.title": "Neu auf {site_title}?",
   "snackbar.view": "Anzeigen",
   "soapbox_config.authenticated_profile_hint": "Nur angemeldete Nutzer können Antworten und Medien auf Nutzerprofilen sehen.",
-  "soapbox_config.authenticated_profile_label": "Profiles require authentication",
-  "soapbox_config.copyright_footer.meta_fields.label_placeholder": "Copyright footer",
+  "soapbox_config.authenticated_profile_label": "Profil erfordert Authentifizierung",
+  "soapbox_config.copyright_footer.meta_fields.label_placeholder": "Copyright Fußnote",
   "soapbox_config.crypto_address.meta_fields.address_placeholder": "Address",
-  "soapbox_config.crypto_address.meta_fields.note_placeholder": "Note (optional)",
+  "soapbox_config.crypto_address.meta_fields.note_placeholder": "Notiz (optional)",
   "soapbox_config.crypto_address.meta_fields.ticker_placeholder": "Ticker",
   "soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder": "Number of items to display in the crypto homepage widget",
   "soapbox_config.custom_css.meta_fields.url_placeholder": "URL",
-  "soapbox_config.display_fqn_label": "Display domain (eg @user@domain) for local accounts.",
-  "soapbox_config.fields.accent_color_label": "Accent color",
+  "soapbox_config.display_fqn_label": "Zeige Instanz (z. B. @user@instanz) für User auf der lokalen Instanz an.",
+  "soapbox_config.fields.accent_color_label": "Akzentfarbe",
   "soapbox_config.fields.brand_color_label": "Brand color",
   "soapbox_config.fields.crypto_address.add": "Cryptocoin-Adresse hinzufügen",
   "soapbox_config.fields.crypto_addresses_label": "Cryptocoin-Adresse",
@@ -946,7 +946,7 @@
   "soapbox_config.hints.crypto_addresses": "Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.",
   "soapbox_config.hints.home_footer_fields": "You can have custom defined links displayed on the footer of your static pages",
   "soapbox_config.hints.logo": "SVG. Maximal 2 MB. Die Darstellung erfolgt mit 50px Höhe, das Seitenverhältnis wird beibehalten",
-  "soapbox_config.hints.promo_panel_fields": "You can have custom defined links displayed on the right panel of the timelines page.",
+  "soapbox_config.hints.promo_panel_fields": "Du kannst persönliche Links angeben, welche im Panel rechts auf der Timeline angezeigt werden.",
   "soapbox_config.hints.promo_panel_icons": "{ link }",
   "soapbox_config.hints.promo_panel_icons.link": "Soapbox Icon-Liste",
   "soapbox_config.home_footer.meta_fields.label_placeholder": "Label",
@@ -959,9 +959,9 @@
   "soapbox_config.save": "Speichern",
   "soapbox_config.saved": "Soapbox-Konfiruation gespeichert!",
   "soapbox_config.single_user_mode_hint": "Startseite leitet zum Nutzerprofil weiter.",
-  "soapbox_config.single_user_mode_label": "Single user mode",
+  "soapbox_config.single_user_mode_label": "Einzelnutzer-Modus",
   "soapbox_config.single_user_mode_profile_hint": "@handle",
-  "soapbox_config.single_user_mode_profile_label": "Main user handle",
+  "soapbox_config.single_user_mode_profile_label": "Primäres Profil",
   "soapbox_config.verified_can_edit_name_label": "Verifizierten Nutzern die Änderung des Anzeigenamens gestatten.",
   "status.actions.more": "Weitere Einstellungen",
   "status.admin_account": "Öffne Moderationsoberfläche für @{name}",
@@ -1024,19 +1024,19 @@
   "statuses.quote_tombstone": "Der Beitrag kann nicht angezeigt werden.",
   "statuses.tombstone": "Beitrag oder Beiträge können nicht angezeigt werden.",
   "suggestions.dismiss": "Empfehlung ausblenden",
-  "tabs_bar.all": "All",
+  "tabs_bar.all": "Alle",
   "tabs_bar.chats": "Chats",
   "tabs_bar.dashboard": "Steuerung",
   "tabs_bar.fediverse": "Fediverse",
   "tabs_bar.home": "Start",
-  "tabs_bar.more": "More",
+  "tabs_bar.more": "Mehr",
   "tabs_bar.notifications": "Benachrichtigungen",
   "tabs_bar.post": "Neuer Beitrag",
-  "tabs_bar.profile": "Profile",
+  "tabs_bar.profile": "Profil",
   "tabs_bar.search": "Suche",
-  "tabs_bar.settings": "Settings",
-  "tabs_bar.theme_toggle_dark": "Switch to dark theme",
-  "tabs_bar.theme_toggle_light": "Switch to light theme",
+  "tabs_bar.settings": "Einstellungen",
+  "tabs_bar.theme_toggle_dark": "Zum dunklen Modus wechseln",
+  "tabs_bar.theme_toggle_light": "Zum hellen Modus wechseln",
   "time_remaining.days": "{number, plural, one {# Tag} other {# Tage}} verbleibend",
   "time_remaining.hours": "{number, plural, one {# Stunde} other {# Stunden}} verbleibend",
   "time_remaining.minutes": "{number, plural, one {# Minute} other {# Minuten}} verbleibend",
@@ -1049,10 +1049,10 @@
   "unauthorized_modal.title": "Sign up for {site_title}",
   "upload_area.title": "Zum Hochladen hereinziehen",
   "upload_button.label": "Mediendatei hinzufügen (JPEG, PNG, GIF, WebM, MP4, MOV)",
-  "upload_error.image_size_limit": "Image exceeds the current file size limit ({limit})",
+  "upload_error.image_size_limit": "Bild überschreitet das Limit von ({limit})",
   "upload_error.limit": "Dateiupload-Limit erreicht.",
   "upload_error.poll": "Dateiuploads sind in Kombination mit Umfragen nicht erlaubt.",
-  "upload_error.video_size_limit": "Video exceeds the current file size limit ({limit})",
+  "upload_error.video_size_limit": "Video überschreitet das Limit von ({limit})",
   "upload_form.description": "Für Menschen mit Sehbehinderung beschreiben",
   "upload_form.preview": "Vorschau",
   "upload_form.undo": "Löschen",

From c605dbe4949d647143f75d600aebc83384dbab64 Mon Sep 17 00:00:00 2001
From: forenta <ueblesurmeli-github@yahoo.de>
Date: Sat, 26 Nov 2022 17:11:11 +0000
Subject: [PATCH 39/50] Update de.json


From 1470de587a6baf1e777043c9a47ca96fc1fe78f2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 12:42:55 -0600
Subject: [PATCH 40/50] Improve direct timeline styles

---
 app/soapbox/features/direct-timeline/index.tsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/features/direct-timeline/index.tsx b/app/soapbox/features/direct-timeline/index.tsx
index 885c617db3..aef932516d 100644
--- a/app/soapbox/features/direct-timeline/index.tsx
+++ b/app/soapbox/features/direct-timeline/index.tsx
@@ -5,14 +5,13 @@ import { directComposeById } from 'soapbox/actions/compose';
 import { connectDirectStream } from 'soapbox/actions/streaming';
 import { expandDirectTimeline } from 'soapbox/actions/timelines';
 import AccountSearch from 'soapbox/components/account-search';
-import ColumnHeader from 'soapbox/components/column-header';
 import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
 const messages = defineMessages({
-  title: { id: 'column.direct', defaultMessage: 'Direct messages' },
+  heading: { id: 'column.direct', defaultMessage: 'Direct messages' },
   searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
 });
 
@@ -20,8 +19,6 @@ const DirectTimeline = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const hasUnread = useAppSelector((state) => (state.timelines.get('direct')?.unread || 0) > 0);
-
   useEffect(() => {
     dispatch(expandDirectTimeline());
     const disconnect = dispatch(connectDirectStream());
@@ -40,13 +37,7 @@ const DirectTimeline = () => {
   };
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
-      <ColumnHeader
-        icon='envelope'
-        active={hasUnread}
-        title={intl.formatMessage(messages.title)}
-      />
-
+    <Column label={intl.formatMessage(messages.heading)}>
       <AccountSearch
         placeholder={intl.formatMessage(messages.searchPlaceholder)}
         onSelected={handleSuggestion}
@@ -57,7 +48,7 @@ const DirectTimeline = () => {
         timelineId='direct'
         onLoadMore={handleLoadMore}
         emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
-        divideType='space'
+        divideType='border'
       />
     </Column>
   );

From de2186babfda407763e3bd4c8538654f791ee94a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 12:48:33 -0600
Subject: [PATCH 41/50] Features: SOAPBOX --> REBASED

---
 app/soapbox/utils/features.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 200cee5f1f..8314cabeb9 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -49,7 +49,8 @@ export const TRUTHSOCIAL = 'TruthSocial';
  * Rebased, the recommended backend for Soapbox.
  * @see {@link https://gitlab.com/soapbox-pub/rebased}
  */
-export const SOAPBOX = 'soapbox';
+// NOTE: Rebased is named 'soapbox' for legacy reasons.
+export const REBASED = 'soapbox';
 
 /**
  * glitch-soc, fork of Mastodon with a number of experimental features.
@@ -105,7 +106,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see PATCH /api/v1/accounts/update_credentials
      */
     accountLocation: any([
-      v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+      v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
       v.software === TRUTHSOCIAL,
     ]),
 
@@ -179,7 +180,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see POST /api/v1/accounts
      * @see PATCH /api/v1/accounts/update_credentials
      */
-    birthdays: v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+    birthdays: v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
 
     /** Whether people who blocked you are visible through the API. */
     blockersVisible: features.includes('blockers_visible'),
@@ -380,7 +381,7 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     mastodonAdmin: any([
       v.software === MASTODON && gte(v.compatVersion, '2.9.1'),
-      v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+      v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
     ]),
 
     /**
@@ -504,7 +505,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see POST /api/v1/statuses
      */
     quotePosts: any([
-      v.software === PLEROMA && [SOAPBOX, AKKOMA].includes(v.build!) && gte(v.version, '2.4.50'),
+      v.software === PLEROMA && [REBASED, AKKOMA].includes(v.build!) && gte(v.version, '2.4.50'),
       instance.feature_quote === true,
     ]),
 
@@ -520,7 +521,7 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     removeFromFollowers: any([
       v.software === MASTODON && gte(v.compatVersion, '3.5.0'),
-      v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+      v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
     ]),
 
     reportMultipleStatuses: any([

From b8542c619d0bc2fe331f447fcb031bc12a9f0d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 20:01:43 +0100
Subject: [PATCH 42/50] Improve chats styles and chat placeholder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/chats/components/chat.tsx        | 44 +++++++++----------
 .../components/placeholder-chat.tsx           | 26 +++++------
 .../components/placeholder-display-name.tsx   |  5 ++-
 app/styles/chats.scss                         | 22 ----------
 4 files changed, 37 insertions(+), 60 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index 7c595c33f6..5b4635fab5 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -35,29 +35,29 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
       <button className='floating-link' onClick={() => onClick(chat)} />
       <HStack key={account.id} space={3} className='relative overflow-hidden'>
         <Avatar className='flex-none' src={account.avatar} size={36} />
-        <Stack className='overflow-hidden'>
+        <Stack className='overflow-hidden flex-1'>
           <DisplayName account={account} withSuffix={false} />
-          {attachment && (
-            <Icon
-              className='chat__attachment-icon'
-              src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
-            />
-          )}
-          {content ? (
-            <Text
-              theme='muted'
-              size='sm'
-              className='chat__last-message'
-              dangerouslySetInnerHTML={{ __html: parsedContent }}
-              truncate
-            />
-          ) : attachment && (
-            <span
-              className='chat__last-message attachment'
-            >
-              {image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
-            </span>
-          )}
+          <HStack space={1} justifyContent='between'>
+            {content ? (
+              <Text
+                theme='muted'
+                size='sm'
+                className='max-h-5'
+                dangerouslySetInnerHTML={{ __html: parsedContent }}
+                truncate
+              />
+            ) : attachment && (
+              <Text theme='muted' size='sm' className='italic'>
+                {image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
+              </Text>
+            )}
+            {attachment && (
+              <Icon
+                className='chat__attachment-icon'
+                src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
+              />
+            )}
+          </HStack>
           {unreadCount > 0 && (
             <div className='absolute top-1 right-0'>
               <Counter count={unreadCount} />
diff --git a/app/soapbox/features/placeholder/components/placeholder-chat.tsx b/app/soapbox/features/placeholder/components/placeholder-chat.tsx
index be33d5aa9f..862424e90c 100644
--- a/app/soapbox/features/placeholder/components/placeholder-chat.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-chat.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { HStack, Stack } from 'soapbox/components/ui';
+
 import { randomIntFromInterval, generateText } from '../utils';
 
 import PlaceholderAvatar from './placeholder-avatar';
@@ -10,20 +12,16 @@ const PlaceholderChat: React.FC = () => {
   const messageLength = randomIntFromInterval(5, 75);
 
   return (
-    <div className='chat-list-item chat-list-item--placeholder'>
-      <div className='account'>
-        <div className='account__wrapper'>
-          <div className='account__display-name'>
-            <div className='account__avatar-wrapper'>
-              <PlaceholderAvatar size={36} />
-            </div>
-            <PlaceholderDisplayName minLength={3} maxLength={25} />
-            <span className='chat__last-message'>
-              {generateText(messageLength)}
-            </span>
-          </div>
-        </div>
-      </div>
+    <div className='account chat-list-item--placeholder'>
+      <HStack space={3}>
+        <PlaceholderAvatar size={36} />
+        <Stack className='overflow-hidden'>
+          <PlaceholderDisplayName minLength={3} maxLength={25} withSuffix={false} />
+          <span className='overflow-hidden text-ellipsis whitespace-nowrap text-primary-50 dark:text-primary-800'>
+            {generateText(messageLength)}
+          </span>
+        </Stack>
+      </HStack>
     </div>
   );
 };
diff --git a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
index 7dfedfc7d6..c367af1321 100644
--- a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
@@ -5,17 +5,18 @@ import { randomIntFromInterval, generateText } from '../utils';
 interface IPlaceholderDisplayName {
   maxLength: number,
   minLength: number,
+  withSuffix?: boolean,
 }
 
 /** Fake display name to show when data is loading. */
-const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength }) => {
+const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength, withSuffix = true }) => {
   const length = randomIntFromInterval(maxLength, minLength);
   const acctLength = randomIntFromInterval(maxLength, minLength);
 
   return (
     <div className='flex flex-col text-primary-50 dark:text-primary-800'>
       <p>{generateText(length)}</p>
-      <p>{generateText(acctLength)}</p>
+      {withSuffix && <p>{generateText(acctLength)}</p>}
     </div>
   );
 };
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 49dfe525b6..e7514d08e6 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -306,28 +306,6 @@
   }
 }
 
-.chat {
-  &__attachment-icon {
-    float: right;
-  }
-
-  &__last-message {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-height: 19px;
-
-    a {
-      color: var(--highlight-text-color);
-    }
-
-    &.attachment {
-      font-style: italic;
-    }
-  }
-}
-
 .chat-message__media {
   height: 120px;
 }

From bbb41533b71a6052d90f56799a9ec981bed0badd Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 13:18:11 -0600
Subject: [PATCH 43/50] RemoteTimeline: improve styles, icons

---
 .../components/instance-restrictions.tsx      | 73 +++++++++++--------
 .../features/remote-timeline/index.tsx        | 38 ++++++----
 2 files changed, 65 insertions(+), 46 deletions(-)

diff --git a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
index ac86039fda..a912f3f4db 100644
--- a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
-import { Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import type { Map as ImmutableMap } from 'immutable';
@@ -16,6 +16,23 @@ const hasRestrictions = (remoteInstance: ImmutableMap<string, any>): boolean =>
     .reduce((acc: boolean, value: boolean) => acc || value, false);
 };
 
+interface IRestriction {
+  icon: string,
+  children: React.ReactNode,
+}
+
+const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
+  return (
+    <HStack space={3}>
+      <Icon className='flex-none w-5 h-5' src={icon} />
+
+      <Text theme='muted'>
+        {children}
+      </Text>
+    </HStack>
+  );
+};
+
 interface IInstanceRestrictions {
   remoteInstance: ImmutableMap<string, any>,
 }
@@ -40,57 +57,52 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (followers_only) {
       items.push((
-        <Text key='followers_only' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/lock.svg')} />
+        <Restriction key='followersOnly' icon={require('@tabler/icons/lock.svg')}>
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
           />
-        </Text>
+        </Restriction>
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/lock-open.svg')} />
+        <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/lock-open.svg')}>
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
     if (fullMediaRemoval) {
       items.push((
-        <Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/photo-off.svg')} />
+        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
           />
-        </Text>
+        </Restriction>
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/photo-off.svg')} />
+        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/eye-off.svg')} />
+        <Restriction key='mediaNsfw' icon={require('@tabler/icons/eye-off.svg')}>
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
@@ -105,46 +117,45 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (remoteInstance.getIn(['federation', 'reject']) === true) {
       return (
-        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/x.svg')} />
+        <Restriction icon={require('@tabler/icons/shield-x.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
             values={{ host, siteTitle }}
           />
-        </Text>
+        </Restriction>
       );
     } else if (hasRestrictions(remoteInstance)) {
-      return [
-        (
-          <Text theme='muted'>
+      return (
+        <>
+          <Restriction icon={require('@tabler/icons/shield-lock.svg')}>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
               values={{ host, siteTitle }}
             />
-          </Text>
-        ),
-        renderRestrictions(),
-      ];
+          </Restriction>
+
+          {renderRestrictions()}
+        </>
+      );
     } else {
       return (
-        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/check.svg')} />
+        <Restriction icon={require('@tabler/icons/shield-check.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
             values={{ host, siteTitle }}
           />
-        </Text>
+        </Restriction>
       );
     }
   };
 
   return (
-    <div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
+    <Stack space={3}>
       {renderContent()}
-    </div>
+    </Stack>
   );
 };
 
diff --git a/app/soapbox/features/remote-timeline/index.tsx b/app/soapbox/features/remote-timeline/index.tsx
index 7ab185be94..a6963df48e 100644
--- a/app/soapbox/features/remote-timeline/index.tsx
+++ b/app/soapbox/features/remote-timeline/index.tsx
@@ -5,8 +5,8 @@ import { useHistory } from 'react-router-dom';
 import { connectRemoteStream } from 'soapbox/actions/streaming';
 import { expandRemoteTimeline } from 'soapbox/actions/timelines';
 import IconButton from 'soapbox/components/icon-button';
-import { HStack, Text } from 'soapbox/components/ui';
-import Column from 'soapbox/features/ui/components/column';
+import SubNavigation from 'soapbox/components/sub-navigation';
+import { Column, HStack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
@@ -14,7 +14,7 @@ import Timeline from '../ui/components/timeline';
 import PinnedHostsPicker from './components/pinned-hosts-picker';
 
 const messages = defineMessages({
-  title: { id: 'column.remote', defaultMessage: 'Federated timeline' },
+  heading: { id: 'column.remote', defaultMessage: 'Federated timeline' },
 });
 
 interface IRemoteTimeline {
@@ -65,18 +65,26 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}>
-      {instance && <PinnedHostsPicker host={instance} />}
-      {!pinned && <HStack className='mb-4 px-2' space={2}>
-        <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
-        <Text>
-          <FormattedMessage
-            id='remote_timeline.filter_message'
-            defaultMessage='You are viewing the timeline of {instance}.'
-            values={{ instance }}
-          />
-        </Text>
-      </HStack>}
+    <Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
+      <div className='px-4 pt-4 sm:p-0'>
+        <SubNavigation message={instance} />
+
+        {instance && <PinnedHostsPicker host={instance} />}
+
+        {!pinned && (
+          <HStack className='mb-4 px-2' space={2}>
+            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
+            <Text>
+              <FormattedMessage
+                id='remote_timeline.filter_message'
+                defaultMessage='You are viewing the timeline of {instance}.'
+                values={{ instance }}
+              />
+            </Text>
+          </HStack>
+        )}
+      </div>
+
       <Timeline
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}

From 3b1eaaddfc9652aa0d198c37d0d9a6c204ff96d6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 13:28:51 -0600
Subject: [PATCH 44/50] Redesign EditFederationModal

---
 .../modals/edit-federation-modal.tsx          | 119 ++++++++----------
 1 file changed, 50 insertions(+), 69 deletions(-)

diff --git a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
index 9dbde1f796..2d3e15872a 100644
--- a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
@@ -1,17 +1,15 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Toggle from 'react-toggle';
 
 import { updateMrf } from 'soapbox/actions/mrf';
 import snackbar from 'soapbox/actions/snackbar';
-import { HStack, Modal, Stack, Text } from 'soapbox/components/ui';
-import { SimpleForm } from 'soapbox/features/forms';
+import List, { ListItem } from 'soapbox/components/list';
+import { Modal } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
 
-const getRemoteInstance = makeGetRemoteInstance();
-
 const messages = defineMessages({
   mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
   forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' },
@@ -31,6 +29,7 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const getRemoteInstance = useCallback(makeGetRemoteInstance(), []);
   const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
 
   const [data, setData] = useState(ImmutableMap<string, any>());
@@ -82,74 +81,56 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
       confirmationAction={handleSubmit}
       confirmationText={intl.formatMessage(messages.save)}
     >
-      <SimpleForm onSubmit={handleSubmit}>
-        <Stack space={2}>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={reject}
-              onChange={handleDataChange('reject')}
-              icons={false}
-              id='reject'
-            />
+      <List>
+        <ListItem label={<FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />}>
+          <Toggle
+            checked={reject}
+            onChange={handleDataChange('reject')}
+            icons={false}
+            id='reject'
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='reject'>
-              <FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={fullMediaRemoval}
-              onChange={handleMediaRemoval}
-              icons={false}
-              id='media_removal'
-              disabled={reject}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />}>
+          <Toggle
+            checked={fullMediaRemoval}
+            onChange={handleMediaRemoval}
+            icons={false}
+            id='media_removal'
+            disabled={reject}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='media_removal'>
-              <FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={media_nsfw}
-              onChange={handleDataChange('media_nsfw')}
-              icons={false}
-              id='media_nsfw'
-              disabled={reject || media_removal}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />}>
+          <Toggle
+            checked={media_nsfw}
+            onChange={handleDataChange('media_nsfw')}
+            icons={false}
+            id='media_nsfw'
+            disabled={reject || media_removal}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='media_nsfw'>
-              <FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={followers_only}
-              onChange={handleDataChange('followers_only')}
-              icons={false}
-              id='followers_only'
-              disabled={reject}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />}>
+          <Toggle
+            checked={followers_only}
+            onChange={handleDataChange('followers_only')}
+            icons={false}
+            id='followers_only'
+            disabled={reject}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='followers_only'>
-              <FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={federated_timeline_removal}
-              onChange={handleDataChange('federated_timeline_removal')}
-              icons={false}
-              id='federated_timeline_removal'
-              disabled={reject || followers_only}
-            />
-
-            <Text theme='muted' tag='label' size='sm' htmlFor='federated_timeline_removal'>
-              <FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />
-            </Text>
-          </HStack>
-        </Stack>
-      </SimpleForm>
+        <ListItem label={<FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />}>
+          <Toggle
+            checked={federated_timeline_removal}
+            onChange={handleDataChange('federated_timeline_removal')}
+            icons={false}
+            id='federated_timeline_removal'
+            disabled={reject || followers_only}
+          />
+        </ListItem>
+      </List>
     </Modal>
   );
 };

From fa8e821c1ee5201d4acd4bc87c9e1795346722dc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 13:47:04 -0600
Subject: [PATCH 45/50] Fix scheduled post datepicker being cut off Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1213

---
 app/soapbox/components/profile-hover-card.tsx | 2 +-
 app/soapbox/components/ui/card/card.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index 8ade427ca4..bc65bc3709 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -106,7 +106,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
       onMouseEnter={handleMouseEnter(dispatch)}
       onMouseLeave={handleMouseLeave(dispatch)}
     >
-      <Card variant='rounded' className='relative'>
+      <Card variant='rounded' className='relative overflow-hidden isolate'>
         <CardBody>
           <Stack space={2}>
             <BundleContainer fetchComponent={UserPanel}>
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 2fb89315bd..ff5fa3be29 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -33,7 +33,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     ref={ref}
     {...filteredProps}
     className={classNames({
-      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden isolate': variant === 'rounded',
+      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
     }, className)}
   >

From 50ead4f16ecbb9a8a9e00de88f72cbe4dd5d6703 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 14:12:50 -0600
Subject: [PATCH 46/50] Mention the author when quote-posting them Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1202

---
 app/soapbox/reducers/compose.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/reducers/compose.ts b/app/soapbox/reducers/compose.ts
index 8e7fe6b0e5..c4d60dc1d4 100644
--- a/app/soapbox/reducers/compose.ts
+++ b/app/soapbox/reducers/compose.ts
@@ -319,10 +319,11 @@ export default function compose(state = initialState, action: AnyAction) {
       }));
     case COMPOSE_QUOTE:
       return updateCompose(state, 'compose-modal', compose => compose.withMutations(map => {
+        const author = action.status.getIn(['account', 'acct']);
         const defaultCompose = state.get('default')!;
 
         map.set('quote', action.status.get('id'));
-        map.set('to', ImmutableOrderedSet());
+        map.set('to', ImmutableOrderedSet([author]));
         map.set('text', '');
         map.set('privacy', privacyPreference(action.status.visibility, defaultCompose.privacy));
         map.set('focusDate', new Date());

From e114b1d362c89c476875d20ea2ebda4fe7f4ac98 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 14:25:22 -0600
Subject: [PATCH 47/50] Break ProfileField out into its own file

---
 .../features/ui/components/profile-field.tsx  | 73 ++++++++++++++++++
 .../ui/components/profile-fields-panel.tsx    | 74 +------------------
 2 files changed, 77 insertions(+), 70 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/profile-field.tsx

diff --git a/app/soapbox/features/ui/components/profile-field.tsx b/app/soapbox/features/ui/components/profile-field.tsx
new file mode 100644
index 0000000000..2593c52010
--- /dev/null
+++ b/app/soapbox/features/ui/components/profile-field.tsx
@@ -0,0 +1,73 @@
+import classNames from 'clsx';
+import React from 'react';
+import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
+
+import Markup from 'soapbox/components/markup';
+import { HStack, Icon } from 'soapbox/components/ui';
+import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
+import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
+
+import type { Field } from 'soapbox/types/entities';
+
+const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1];
+const isTicker = (value: string): boolean => Boolean(getTicker(value));
+
+const messages = defineMessages({
+  linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
+});
+
+const dateFormatOptions: FormatDateOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour12: true,
+  hour: 'numeric',
+  minute: '2-digit',
+};
+
+interface IProfileField {
+  field: Field,
+}
+
+/** Renders a single profile field. */
+const ProfileField: React.FC<IProfileField> = ({ field }) => {
+  const intl = useIntl();
+
+  if (isTicker(field.name)) {
+    return (
+      <BundleContainer fetchComponent={CryptoAddress}>
+        {Component => (
+          <Component
+            ticker={getTicker(field.name).toLowerCase()}
+            address={field.value_plain}
+          />
+        )}
+      </BundleContainer>
+    );
+  }
+
+  return (
+    <dl>
+      <dt title={field.name}>
+        <Markup weight='bold' tag='span' dangerouslySetInnerHTML={{ __html: field.name_emojified }} />
+      </dt>
+
+      <dd
+        className={classNames({ 'text-success-500': field.verified_at })}
+        title={field.value_plain}
+      >
+        <HStack space={2} alignItems='center'>
+          {field.verified_at && (
+            <span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
+              <Icon src={require('@tabler/icons/check.svg')} />
+            </span>
+          )}
+
+          <Markup className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
+        </HStack>
+      </dd>
+    </dl>
+  );
+};
+
+export default ProfileField;
diff --git a/app/soapbox/features/ui/components/profile-fields-panel.tsx b/app/soapbox/features/ui/components/profile-fields-panel.tsx
index 1ee911e34a..1babfb63f9 100644
--- a/app/soapbox/features/ui/components/profile-fields-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-fields-panel.tsx
@@ -1,77 +1,11 @@
-import classNames from 'clsx';
 import React from 'react';
-import { defineMessages, useIntl, FormattedMessage, FormatDateOptions } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
-import Markup from 'soapbox/components/markup';
-import { Widget, Stack, HStack, Icon } from 'soapbox/components/ui';
-import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
-import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
+import { Widget, Stack } from 'soapbox/components/ui';
 
-import type { Account, Field } from 'soapbox/types/entities';
+import ProfileField from './profile-field';
 
-const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1];
-const isTicker = (value: string): boolean => Boolean(getTicker(value));
-
-const messages = defineMessages({
-  linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
-  account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
-  deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
-  bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
-});
-
-const dateFormatOptions: FormatDateOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-  hour12: true,
-  hour: 'numeric',
-  minute: '2-digit',
-};
-
-interface IProfileField {
-  field: Field,
-}
-
-/** Renders a single profile field. */
-const ProfileField: React.FC<IProfileField> = ({ field }) => {
-  const intl = useIntl();
-
-  if (isTicker(field.name)) {
-    return (
-      <BundleContainer fetchComponent={CryptoAddress}>
-        {Component => (
-          <Component
-            ticker={getTicker(field.name).toLowerCase()}
-            address={field.value_plain}
-          />
-        )}
-      </BundleContainer>
-    );
-  }
-
-  return (
-    <dl>
-      <dt title={field.name}>
-        <Markup weight='bold' tag='span' dangerouslySetInnerHTML={{ __html: field.name_emojified }} />
-      </dt>
-
-      <dd
-        className={classNames({ 'text-success-500': field.verified_at })}
-        title={field.value_plain}
-      >
-        <HStack space={2} alignItems='center'>
-          {field.verified_at && (
-            <span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
-              <Icon src={require('@tabler/icons/check.svg')} />
-            </span>
-          )}
-
-          <Markup className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
-        </HStack>
-      </dd>
-    </dl>
-  );
-};
+import type { Account } from 'soapbox/types/entities';
 
 interface IProfileFieldsPanel {
   account: Account,

From 8c55af5b5e18ff1f1c1c554a4b466c4788db570e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 14:36:09 -0600
Subject: [PATCH 48/50] Display custom profile fields on mobile Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1160

---
 .../features/ui/components/profile-info-panel.tsx        | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx
index 89239bd618..a765b38f22 100644
--- a/app/soapbox/features/ui/components/profile-info-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-info-panel.tsx
@@ -13,6 +13,7 @@ import { badgeToTag, getBadges as getAccountBadges } from 'soapbox/utils/badges'
 import { capitalize } from 'soapbox/utils/strings';
 
 import ProfileFamiliarFollowers from './profile-familiar-followers';
+import ProfileField from './profile-field';
 import ProfileStats from './profile-stats';
 
 import type { Account } from 'soapbox/types/entities';
@@ -231,6 +232,14 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
         <ProfileFamiliarFollowers account={account} />
       </Stack>
+
+      {account.fields.size > 0 && (
+        <Stack space={2} className='mt-4 xl:hidden'>
+          {account.fields.map((field, i) => (
+            <ProfileField field={field} key={i} />
+          ))}
+        </Stack>
+      )}
     </div>
   );
 };

From a2a445691f5330c2825b4dbb0c83407c94e0db61 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 17:05:19 -0600
Subject: [PATCH 49/50] Hide Markdown images

---
 app/soapbox/components/markup.css | Bin 1498 -> 1434 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/app/soapbox/components/markup.css b/app/soapbox/components/markup.css
index 099dc66978b294e41ad1b0c9174002c828161174..c10d4084daf8151756aa1e2e48ec7f0508d439e2 100644
GIT binary patch
delta 66
zcmcb`J&St-GmD%@W=g7pZ(>n)N`85sLS}AadTOzPMnFz#QGRZs=42rj6(NOcE(HaL
V#DapHN`;Kfl$6xG&C^+&83EPJ6<h!S

delta 130
zcmbQmeT#boGYh|OVo`QVetDikW^Q77YVl-67L`P+y!;Z4=<>{zl8o5sjMU8ZjFMPQ
zg=#JZ1&73ff}Bc)a^1AjoE(J=U2`La{G_bZ<PzQF{JfIH%shpn{L;LX)D+#EbcOt~
h)S|SU{Bqrl%#@VWJcZm!T@!_*oc!eM&EYK0i~xI4EdBrh


From 0d0ee2b41ac92286ddccf1a95e27ee624a76837d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 27 Nov 2022 11:50:55 -0600
Subject: [PATCH 50/50] Fix feed carousel (overflow-hidden)

---
 app/soapbox/components/profile-hover-card.tsx | 2 +-
 app/soapbox/components/ui/card/card.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index bc65bc3709..39d766f801 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -106,7 +106,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
       onMouseEnter={handleMouseEnter(dispatch)}
       onMouseLeave={handleMouseLeave(dispatch)}
     >
-      <Card variant='rounded' className='relative overflow-hidden isolate'>
+      <Card variant='rounded' className='relative isolate'>
         <CardBody>
           <Stack space={2}>
             <BundleContainer fetchComponent={UserPanel}>
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index ff5fa3be29..675a9d15b5 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -33,7 +33,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     ref={ref}
     {...filteredProps}
     className={classNames({
-      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
+      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
     }, className)}
   >