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 01/12] 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 20810efbe..caaea79ee 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 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 02/12] 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 885c617db..aef932516 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 03/12] 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 200cee5f1..8314cabeb 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 04/12] 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 7c595c33f..5b4635fab 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 be33d5aa9..862424e90 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 7dfedfc7d..c367af132 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 49dfe525b..e7514d08e 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 05/12] 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 ac86039fd..a912f3f4d 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 7ab185be9..a6963df48 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 06/12] Redesign EditFederationModal

---
 .../modals/edit-federation-modal.tsx          | 127 ++++++++----------
 1 file changed, 54 insertions(+), 73 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 9dbde1f79..2d3e15872 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'
-            />
-
-            <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}
-            />
-
-            <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}
-            />
-
-            <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}
-            />
-
-            <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>
+      <List>
+        <ListItem label={<FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />}>
+          <Toggle
+            checked={reject}
+            onChange={handleDataChange('reject')}
+            icons={false}
+            id='reject'
+          />
+        </ListItem>
+
+        <ListItem label={<FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />}>
+          <Toggle
+            checked={fullMediaRemoval}
+            onChange={handleMediaRemoval}
+            icons={false}
+            id='media_removal'
+            disabled={reject}
+          />
+        </ListItem>
+
+        <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>
+
+        <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>
+
+        <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 07/12] 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 8ade427ca..bc65bc370 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 2fb89315b..ff5fa3be2 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 08/12] 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 8e7fe6b0e..c4d60dc1d 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 09/12] 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 000000000..2593c5201
--- /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 1ee911e34..1babfb63f 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 10/12] 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 89239bd61..a765b38f2 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 11/12] Hide Markdown images

---
 app/soapbox/components/markup.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/markup.css b/app/soapbox/components/markup.css
index 099dc6697..c10d4084d 100644
--- a/app/soapbox/components/markup.css
+++ b/app/soapbox/components/markup.css
@@ -63,9 +63,9 @@
   @apply w-5 h-5;
 }
 
-/* Markdown images */
-[data-markup] img:not(.emojione):not([width][height]) {
-  @apply w-full h-72 object-contain rounded-lg overflow-hidden my-4 block;
+/* Hide Markdown images (Pleroma) */
+[data-markup] img:not(.emojione) {
+  @apply hidden;
 }
 
 /* User setting to underline links */

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 12/12] 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 bc65bc370..39d766f80 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 ff5fa3be2..675a9d15b 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)}
   >