From 904e93bd8e1088449d48885d9f302eba109c78c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 22 Sep 2022 22:00:32 +0200
Subject: [PATCH 01/19] Fix ReplyMentionsModal crash
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/compose/components/reply_mentions.tsx  | 4 +++-
 app/soapbox/features/ui/components/reply_mentions_modal.tsx | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/compose/components/reply_mentions.tsx b/app/soapbox/features/compose/components/reply_mentions.tsx
index 577334281..865f6539d 100644
--- a/app/soapbox/features/compose/components/reply_mentions.tsx
+++ b/app/soapbox/features/compose/components/reply_mentions.tsx
@@ -36,7 +36,9 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
 
-    dispatch(openModal('REPLY_MENTIONS'));
+    dispatch(openModal('REPLY_MENTIONS', {
+      composeId,
+    }));
   };
 
   if (!parentTo || (parentTo.size === 0)) {
diff --git a/app/soapbox/features/ui/components/reply_mentions_modal.tsx b/app/soapbox/features/ui/components/reply_mentions_modal.tsx
index 43aaa24c4..2c8fc73b1 100644
--- a/app/soapbox/features/ui/components/reply_mentions_modal.tsx
+++ b/app/soapbox/features/ui/components/reply_mentions_modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Modal } from 'soapbox/components/ui';
@@ -18,7 +18,8 @@ interface IReplyMentionsModal {
 const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ composeId, onClose }) => {
   const compose = useCompose(composeId);
 
-  const status = useAppSelector<StatusEntity | null>(state => makeGetStatus()(state, { id: compose.in_reply_to! }));
+  const getStatus = useCallback(makeGetStatus(), []);
+  const status = useAppSelector<StatusEntity | null>(state => getStatus(state, { id: compose.in_reply_to! }));
   const account = useAppSelector((state) => state.accounts.get(state.me));
 
   const mentions = statusToMentionsAccountIdsArray(status!, account!);

From e8b547565ec9e467ea9c32c584c85c6be993b36c Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 23 Sep 2022 09:04:01 -0400
Subject: [PATCH 02/19] Add options to the ChatListItem

---
 .../chats/components/chat-list-item.tsx       | 77 ++++++++++++++++++-
 .../chats/components/chat-pane/blankslate.tsx |  2 +-
 app/soapbox/queries/chats.ts                  |  2 +
 3 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index e600f9859..0453baaf8 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -1,10 +1,22 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 
+import { openModal } from 'soapbox/actions/modals';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
+import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
+import { useAppDispatch } from 'soapbox/hooks';
+import { IChat, IChatSilence, useChat, useChatSilence, useChatSilences } from 'soapbox/queries/chats';
 
-import type { IChat, IChatSilence } from 'soapbox/queries/chats';
+import type { Menu } from 'soapbox/components/dropdown_menu';
+
+const messages = defineMessages({
+  leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.' },
+  leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave Chat' },
+  leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave Chat' },
+  leaveChat: { id: 'chat_settings.options.leave_chat', defaultMessage: 'Leave Chat' },
+});
 
 interface IChatListItemInterface {
   chat: IChat,
@@ -13,12 +25,60 @@ interface IChatListItemInterface {
 }
 
 const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onClick }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const { handleSilence } = useChatSilence(chat);
+  const { deleteChat } = useChat(chat?.id as string);
+
+  const menu = useMemo((): Menu => {
+    const menu: Menu = [];
+
+    if (chatSilence) {
+      menu.push({
+        text: 'Unsilence notifications',
+        action: (event) => {
+          event.stopPropagation();
+          handleSilence();
+        },
+        icon: require('@tabler/icons/bell.svg'),
+      });
+    } else {
+      menu.push({
+        text: 'Silence notifications',
+        action: (event) => {
+          event.stopPropagation();
+          handleSilence();
+        },
+        icon: require('@tabler/icons/bell-off.svg'),
+      });
+    }
+
+    menu.push({
+      text: intl.formatMessage(messages.leaveChat),
+      action: (event) => {
+        event.stopPropagation();
+
+        dispatch(openModal('CONFIRM', {
+          heading: intl.formatMessage(messages.leaveHeading),
+          message: intl.formatMessage(messages.leaveMessage),
+          confirm: intl.formatMessage(messages.leaveConfirm),
+          confirmationTheme: 'primary',
+          onConfirm: () => deleteChat.mutate(),
+        }));
+      },
+      icon: require('@tabler/icons/logout.svg'),
+    });
+
+    return menu;
+  }, [chatSilence]);
+
   return (
     <button
       key={chat.id}
       type='button'
       onClick={() => onClick(chat)}
-      className='px-2 py-3 w-full flex flex-col rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 focus:shadow-inset-ring'
+      className='group px-2 py-3 w-full flex flex-col rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 focus:shadow-inset-ring'
       data-testid='chat'
     >
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
@@ -47,6 +107,15 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
         </HStack>
 
         <HStack alignItems='center' space={2}>
+          <div className='text-gray-600 hidden group-hover:block hover:text-gray-100'>
+            <DropdownMenuContainer
+              items={menu}
+              src={require('@tabler/icons/dots.svg')}
+              title='Settings'
+            />
+          </div>
+
+
           {chatSilence ? (
             <Icon src={require('@tabler/icons/bell-off.svg')} className='w-5 h-5 text-gray-600' />
           ) : null}
diff --git a/app/soapbox/features/chats/components/chat-pane/blankslate.tsx b/app/soapbox/features/chats/components/chat-pane/blankslate.tsx
index 464fe0576..605ffd384 100644
--- a/app/soapbox/features/chats/components/chat-pane/blankslate.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/blankslate.tsx
@@ -19,7 +19,7 @@ const Blankslate = ({ onSearch }: IBlankslate) => {
   return (
     <Stack alignItems='center' justifyContent='center' className='h-full flex-grow'>
       <Stack space={4}>
-        <Stack space={1} className='max-w-[85%] mx-auto'>
+        <Stack space={1} className='max-w-[80%] mx-auto'>
           <Text size='lg' weight='bold' align='center'>
             {intl.formatMessage(messages.title)}
           </Text>
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index 0c472b36d..c3c043d58 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -236,6 +236,7 @@ const useChatSilence = (chat: IChat | null) => {
     api.post(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`)
       .then(() => {
         dispatch(snackbar.success('Successfully silenced this chat.'));
+        queryClient.invalidateQueries(['chatSilences']);
       })
       .catch(() => {
         dispatch(snackbar.error('Something went wrong trying to silence this chat. Please try again.'));
@@ -249,6 +250,7 @@ const useChatSilence = (chat: IChat | null) => {
     api.delete(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`)
       .then(() => {
         dispatch(snackbar.success('Successfully unsilenced this chat.'));
+        queryClient.invalidateQueries(['chatSilences']);
       })
       .catch(() => {
         dispatch(snackbar.error('Something went wrong trying to unsilence this chat. Please try again.'));

From 31b1f3ec973211e6ca15a8714c39946ae3cccc21 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 23 Sep 2022 09:07:22 -0400
Subject: [PATCH 03/19] I18n

---
 .../features/chats/components/chat-list-item.tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 20e3f1f0e..bf8ac9053 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -3,15 +3,17 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Avatar, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { useAppDispatch } from 'soapbox/hooks';
-import { IChat, IChatSilence, useChat, useChatSilence, useChatSilences } from 'soapbox/queries/chats';
+import { IChat, IChatSilence, useChat, useChatSilence } from 'soapbox/queries/chats';
 
 import type { Menu } from 'soapbox/components/dropdown_menu';
 
 const messages = defineMessages({
+  silenceNotifications: { id: 'chat_settings.silence_notifications', defaultMessage: 'Silence notifications' },
+  unsilenceNotifications: { id: 'chat_settings.unsilence_notifications', defaultMessage: 'Unsilence notifications' },
   leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.' },
   leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave Chat' },
   leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave Chat' },
@@ -36,7 +38,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
 
     if (chatSilence) {
       menu.push({
-        text: 'Unsilence notifications',
+        text: intl.formatMessage(messages.unsilenceNotifications),
         action: (event) => {
           event.stopPropagation();
           handleSilence();
@@ -45,7 +47,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
       });
     } else {
       menu.push({
-        text: 'Silence notifications',
+        text: intl.formatMessage(messages.silenceNotifications),
         action: (event) => {
           event.stopPropagation();
           handleSilence();

From 7335a3a0d3903341426f31cabb006788d03e96cd Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 23 Sep 2022 09:08:46 -0400
Subject: [PATCH 04/19] Change color of last message text if unread

---
 app/soapbox/features/chats/components/chat-list-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index bf8ac9053..600548880 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -98,7 +98,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
                 align='left'
                 size='sm'
                 weight='medium'
-                theme='muted'
+                theme={chat.last_message.unread ? 'default' : 'muted'}
                 truncate
                 className='w-full h-5 truncate-child pointer-events-none'
                 data-testid='chat-last-message'

From 641bf1268d6ae2144780a122036b07fef55f7581 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 23 Sep 2022 09:24:20 -0400
Subject: [PATCH 05/19] Fix loading state for chat-list

---
 .../features/chats/components/chat-pane/chat-pane.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
index 9ab8252e0..f1ceec98f 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -24,7 +24,7 @@ const ChatPane = () => {
   const debouncedValue = debounce(value as string, 300);
 
   const { chat, setChat, isOpen, isSearching, setSearching, toggleChatPane } = useChatContext();
-  const { chatsQuery: { data: chats } } = useChats(debouncedValue);
+  const { chatsQuery: { data: chats, isLoading } } = useChats(debouncedValue);
 
   const unreadCount = sumBy(chats, (chat) => chat.unread);
 
@@ -42,7 +42,7 @@ const ChatPane = () => {
   };
 
   const renderBody = () => {
-    if (hasSearchValue || Number(chats?.length) > 0) {
+    if (hasSearchValue || Number(chats?.length) > 0 || isLoading) {
       return (
         <Stack space={4} className='flex-grow h-full'>
           {features.chatsSearch && (
@@ -55,7 +55,7 @@ const ChatPane = () => {
             </div>
           )}
 
-          {Number(chats?.length) > 0 ? (
+          {(Number(chats?.length) > 0 || isLoading) ? (
             <ChatList
               searchValue={debouncedValue}
               onClickChat={handleClickChat}

From 0003b7323a095bde918b2b7d6a6d2aded52e3b85 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 23 Sep 2022 09:48:52 -0400
Subject: [PATCH 06/19] Fix errant fetches to the silence endpoint

---
 .../components/chat-page/components/chat-page-main.tsx | 10 ++++++++--
 .../features/chats/components/chat-settings.tsx        | 10 ++++++++--
 app/soapbox/queries/chats.ts                           | 10 ++--------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index c743baa26..6b6ba786d 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
@@ -33,7 +33,7 @@ const ChatPageMain = () => {
   const account = useOwnAccount();
 
   const { chat, setChat } = useChatContext();
-  const { isSilenced, handleSilence } = useChatSilence(chat);
+  const { isSilenced, handleSilence, fetchChatSilence } = useChatSilence(chat);
   const { deleteChat } = useChat(chat?.id as string);
 
   const handleBlockUser = () => {
@@ -58,6 +58,12 @@ const ChatPageMain = () => {
 
   const handleReportChat = () => dispatch(initReport(chat?.account as any));
 
+  useEffect(() => {
+    if (chat?.id) {
+      fetchChatSilence();
+    }
+  }, [chat?.id]);
+
   if (!chat && !account?.chats_onboarded) {
     return (
       <Welcome />
diff --git a/app/soapbox/features/chats/components/chat-settings.tsx b/app/soapbox/features/chats/components/chat-settings.tsx
index 870b08ba2..fe10f2ab6 100644
--- a/app/soapbox/features/chats/components/chat-settings.tsx
+++ b/app/soapbox/features/chats/components/chat-settings.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
@@ -30,7 +30,7 @@ const ChatSettings = () => {
   const intl = useIntl();
 
   const { chat, setEditing, toggleChatPane } = useChatContext();
-  const { isSilenced, handleSilence } = useChatSilence(chat);
+  const { isSilenced, handleSilence, fetchChatSilence } = useChatSilence(chat);
 
   const { deleteChat } = useChat(chat?.id as string);
 
@@ -63,6 +63,12 @@ const ChatSettings = () => {
 
   const handleReportChat = () => dispatch(initReport(chat?.account as any));
 
+  useEffect(() => {
+    if (chat?.id) {
+      fetchChatSilence();
+    }
+  }, [chat?.id]);
+
   if (!chat) {
     return null;
   }
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index 495628ed1..eccb1c896 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -1,5 +1,5 @@
 import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import snackbar from 'soapbox/actions/snackbar';
@@ -255,13 +255,7 @@ const useChatSilence = (chat: IChat | null) => {
       });
   };
 
-  useEffect(() => {
-    if (chat?.id) {
-      fetchChatSilence();
-    }
-  }, [chat?.id]);
-
-  return { isSilenced, handleSilence };
+  return { isSilenced, handleSilence, fetchChatSilence };
 };
 
 export { useChat, useChats, useChatMessages, useChatSilences, useChatSilence };

From 9768203f1bf7b0afa0a6053c6a1dc003c68b8d53 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 23 Sep 2022 12:53:55 -0400
Subject: [PATCH 07/19] Open chat pane on action

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

diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
index f1ceec98f..dd4b2fc01 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -96,6 +96,10 @@ const ChatPane = () => {
         secondaryAction={() => {
           setSearching(true);
           setValue(undefined);
+
+          if (!isOpen) {
+            toggleChatPane();
+          }
         }}
         secondaryActionIcon={require('@tabler/icons/edit.svg')}
       />

From f662023480c2b4eddd13a5dcc096d587450da41a Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 23 Sep 2022 13:00:40 -0400
Subject: [PATCH 08/19] Add other actions for non-current-user messages

---
 .../chats/components/chat-message-list.tsx         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 11818c488..ccfcea91d 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -30,6 +30,8 @@ const messages = defineMessages({
   more: { id: 'chats.actions.more', defaultMessage: 'More' },
   delete: { id: 'chats.actions.delete', defaultMessage: 'Delete for both' },
   copy: { id: 'chats.actions.copy', defaultMessage: 'Copy' },
+  report: { id: 'chats.actions.report', defaultMessage: 'Report' },
+  deleteForMe: { id: 'chats.actions.deleteForMe', defaultMessage: 'Delete for me' },
   blockedBy: { id: 'chat_message_list.blockedBy', defaultMessage: 'You are blocked by' },
   networkFailureTitle: { id: 'chat_message_list.network_failure.title', defaultMessage: 'Whoops!' },
   networkFailureSubtitle: { id: 'chat_message_list.network_failure.subtitle', defaultMessage: 'We encountered a network failure.' },
@@ -241,6 +243,18 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
         icon: require('@tabler/icons/trash.svg'),
         destructive: true,
       });
+    } else {
+      menu.push({
+        text: intl.formatMessage(messages.report),
+        action: () => null, // TODO: implement once API is available
+        icon: require('@tabler/icons/flag.svg'),
+      });
+      menu.push({
+        text: intl.formatMessage(messages.deleteForMe),
+        action: () => null, // TODO: implement once API is available
+        icon: require('@tabler/icons/trash.svg'),
+        destructive: true,
+      });
     }
 
     return (

From c1618026a79e5b7b1a447c4a9e9c254ca8bbef19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 23 Sep 2022 23:12:44 +0200
Subject: [PATCH 09/19] Fix share route
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/share/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/share/index.tsx b/app/soapbox/features/share/index.tsx
index 562f23689..fdb5caa3d 100644
--- a/app/soapbox/features/share/index.tsx
+++ b/app/soapbox/features/share/index.tsx
@@ -19,7 +19,7 @@ const Share = () => {
     .join('\n\n');
 
   if (text) {
-    dispatch(openComposeWithText(text));
+    dispatch(openComposeWithText('compose-modal', text));
   }
 
   return (
@@ -27,4 +27,4 @@ const Share = () => {
   );
 };
 
-export default Share;
\ No newline at end of file
+export default Share;

From 1d69b66e4bdd12f6a00c411f2a41b200c931925e Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 26 Sep 2022 15:22:00 -0400
Subject: [PATCH 10/19] Use React Query for suggestions

---
 app/soapbox/components/ui/widget/widget.tsx   |   2 +-
 .../placeholder-sidebar-suggestions.tsx       |  29 +++++
 .../ui/components/who-to-follow-panel.tsx     |  58 ++++-----
 app/soapbox/pages/default_page.tsx            |   2 +-
 app/soapbox/pages/home_page.tsx               |   2 +-
 app/soapbox/pages/profile_page.tsx            |   2 +-
 app/soapbox/pages/status_page.tsx             |   2 +-
 app/soapbox/queries/suggestions.ts            | 122 +++++++++++++++++-
 app/soapbox/utils/queries.ts                  |  61 +++++++++
 9 files changed, 241 insertions(+), 39 deletions(-)
 create mode 100644 app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
 create mode 100644 app/soapbox/utils/queries.ts

diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index 7b966a6ef..c4be654b3 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -42,7 +42,7 @@ const Widget: React.FC<IWidget> = ({
 }): JSX.Element => {
   return (
     <Stack space={2}>
-      <HStack alignItems='center'>
+      <HStack alignItems='center' justifyContent='between'>
         <WidgetTitle title={title} />
         {action || (onActionClick && (
           <IconButton
diff --git a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
new file mode 100644
index 000000000..757c47cc7
--- /dev/null
+++ b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { HStack, Stack } from 'soapbox/components/ui';
+
+import { randomIntFromInterval, generateText } from '../utils';
+
+export default ({ limit }: { limit: number }) => {
+  const length = randomIntFromInterval(15, 3);
+  const acctLength = randomIntFromInterval(15, 3);
+
+  return (
+    <>
+      {new Array(limit).fill(undefined).map((_, idx) => (
+        <HStack alignItems='center' space={2} className='animate-pulse'>
+          <Stack space={3} className='text-center'>
+            <div
+              className='w-9 h-9 block mx-auto rounded-full bg-primary-200 dark:bg-primary-700'
+            />
+          </Stack>
+
+          <Stack className='text-primary-200 dark:text-primary-700'>
+            <p>{generateText(length)}</p>
+            <p>{generateText(acctLength)}</p>
+          </Stack>
+        </HStack>
+      ))}
+    </>
+  );
+};
\ No newline at end of file
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 2458997f4..418d2143c 100644
--- a/app/soapbox/features/ui/components/who-to-follow-panel.tsx
+++ b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
 
-import { fetchSuggestions, dismissSuggestion } from 'soapbox/actions/suggestions';
-import { Widget } from 'soapbox/components/ui';
+import { Text, Widget } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
-import { useAppSelector } from 'soapbox/hooks';
+import PlaceholderSidebarSuggestions from 'soapbox/features/placeholder/components/placeholder-sidebar-suggestions';
+import { useDismissSuggestion, useSuggestions } from 'soapbox/queries/suggestions';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
@@ -18,44 +18,40 @@ interface IWhoToFollowPanel {
 }
 
 const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
-  const dispatch = useDispatch();
   const intl = useIntl();
 
-  const suggestions = useAppSelector((state) => state.suggestions.items);
+  const { data: suggestions, isFetching } = useSuggestions();
+  const dismissSuggestion = useDismissSuggestion();
+
   const suggestionsToRender = suggestions.slice(0, limit);
 
   const handleDismiss = (account: AccountEntity) => {
-    dispatch(dismissSuggestion(account.id));
+    dismissSuggestion.mutate(account.id);
   };
 
-  React.useEffect(() => {
-    dispatch(fetchSuggestions());
-  }, []);
-
-  if (suggestionsToRender.isEmpty()) {
-    return null;
-  }
-
-  // FIXME: This page actually doesn't look good right now
-  // const handleAction = () => {
-  //   history.push('/suggestions');
-  // };
-
   return (
     <Widget
       title={<FormattedMessage id='who_to_follow.title' defaultMessage='People To Follow' />}
-      // onAction={handleAction}
+      action={
+        <Link to='/suggestions'>
+          <Text tag='span' theme='primary' size='sm' className='hover:underline'>View all</Text>
+        </Link>
+      }
     >
-      {suggestionsToRender.map((suggestion) => (
-        <AccountContainer
-          key={suggestion.account}
-          // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
-          id={suggestion.account}
-          actionIcon={require('@tabler/icons/x.svg')}
-          actionTitle={intl.formatMessage(messages.dismissSuggestion)}
-          onActionClick={handleDismiss}
-        />
-      ))}
+      {isFetching ? (
+        <PlaceholderSidebarSuggestions limit={limit} />
+      ) : (
+        suggestionsToRender.map((suggestion: any) => (
+          <AccountContainer
+            key={suggestion.account}
+            // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
+            id={suggestion.account}
+            actionIcon={require('@tabler/icons/x.svg')}
+            actionTitle={intl.formatMessage(messages.dismissSuggestion)}
+            onActionClick={handleDismiss}
+          />
+        ))
+      )}
     </Widget>
   );
 };
diff --git a/app/soapbox/pages/default_page.tsx b/app/soapbox/pages/default_page.tsx
index b64cf452d..c013eb63d 100644
--- a/app/soapbox/pages/default_page.tsx
+++ b/app/soapbox/pages/default_page.tsx
@@ -41,7 +41,7 @@ const DefaultPage: React.FC = ({ children }) => {
         )}
         {features.suggestions && (
           <BundleContainer fetchComponent={WhoToFollowPanel}>
-            {Component => <Component limit={5} key='wtf-panel' />}
+            {Component => <Component limit={3} key='wtf-panel' />}
           </BundleContainer>
         )}
         <LinkFooter key='link-footer' />
diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx
index 23bd3e3c7..dc8c2c9f4 100644
--- a/app/soapbox/pages/home_page.tsx
+++ b/app/soapbox/pages/home_page.tsx
@@ -105,7 +105,7 @@ const HomePage: React.FC = ({ children }) => {
         )}
         {features.suggestions && (
           <BundleContainer fetchComponent={WhoToFollowPanel}>
-            {Component => <Component limit={5} />}
+            {Component => <Component limit={3} />}
           </BundleContainer>
         )}
         <LinkFooter key='link-footer' />
diff --git a/app/soapbox/pages/profile_page.tsx b/app/soapbox/pages/profile_page.tsx
index f4ff974e0..9f57e23ab 100644
--- a/app/soapbox/pages/profile_page.tsx
+++ b/app/soapbox/pages/profile_page.tsx
@@ -139,7 +139,7 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
           </BundleContainer>
         ) : features.suggestions && (
           <BundleContainer fetchComponent={WhoToFollowPanel}>
-            {Component => <Component limit={5} key='wtf-panel' />}
+            {Component => <Component limit={3} key='wtf-panel' />}
           </BundleContainer>
         )}
         <LinkFooter key='link-footer' />
diff --git a/app/soapbox/pages/status_page.tsx b/app/soapbox/pages/status_page.tsx
index 2c35947ad..414df6783 100644
--- a/app/soapbox/pages/status_page.tsx
+++ b/app/soapbox/pages/status_page.tsx
@@ -45,7 +45,7 @@ const StatusPage: React.FC<IStatusPage> = ({ children }) => {
         )}
         {features.suggestions && (
           <BundleContainer fetchComponent={WhoToFollowPanel}>
-            {Component => <Component limit={5} key='wtf-panel' />}
+            {Component => <Component limit={3} key='wtf-panel' />}
           </BundleContainer>
         )}
         <LinkFooter key='link-footer' />
diff --git a/app/soapbox/queries/suggestions.ts b/app/soapbox/queries/suggestions.ts
index 433a0c940..8c9e2ec20 100644
--- a/app/soapbox/queries/suggestions.ts
+++ b/app/soapbox/queries/suggestions.ts
@@ -1,9 +1,12 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
 
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import { importFetchedAccounts } from 'soapbox/actions/importer';
+import { SuggestedProfile } from 'soapbox/actions/suggestions';
 import { getLinks } from 'soapbox/api';
-import { useApi, useAppDispatch } from 'soapbox/hooks';
+import { useApi, useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks';
+
+import { PaginatedResult, removePageItem } from '../utils/queries';
 
 type Account = {
   acct: string
@@ -35,7 +38,118 @@ type Suggestion = {
   account: Account
 }
 
-export default function useOnboardingSuggestions() {
+type TruthSuggestion = {
+  account_avatar: string
+  account_id: string
+  acct: string
+  display_name: string
+  note: string
+  verified: boolean
+}
+
+type PageParam = {
+  link?: string
+}
+
+const suggestionKeys = {
+  suggestions: ['suggestions'] as const,
+};
+
+const mapSuggestedProfileToAccount = (suggestedProfile: SuggestedProfile) => ({
+  id: suggestedProfile.account_id,
+  avatar: suggestedProfile.account_avatar,
+  avatar_static: suggestedProfile.account_avatar,
+  acct: suggestedProfile.acct,
+  display_name: suggestedProfile.display_name,
+  note: suggestedProfile.note,
+  verified: suggestedProfile.verified,
+});
+
+const useSuggestions = () => {
+  const account = useOwnAccount();
+  const api = useApi();
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+
+  const getV2Suggestions = async(pageParam: PageParam): Promise<PaginatedResult<TruthSuggestion | Suggestion>> => {
+    const endpoint = pageParam?.link || '/api/v2/suggestions';
+    const response = await api.get<Suggestion[]>(endpoint);
+    const hasMore = !!response.headers.link;
+    const nextLink = getLinks(response).refs.find(link => link.rel === 'next')?.uri;
+
+    const accounts = response.data.map(({ account }) => account);
+    const accountIds = accounts.map((account) => account.id);
+    dispatch(importFetchedAccounts(accounts));
+    dispatch(fetchRelationships(accountIds));
+
+    return {
+      result: response.data,
+      link: nextLink,
+      hasMore,
+    };
+  };
+
+  const getTruthSuggestions = async(pageParam: PageParam): Promise<PaginatedResult<TruthSuggestion | Suggestion>> => {
+    const endpoint = pageParam?.link || '/api/v1/truth/carousels/suggestions';
+    const response = await api.get<TruthSuggestion[]>(endpoint);
+    const hasMore = !!response.headers.link;
+    const nextLink = getLinks(response).refs.find(link => link.rel === 'next')?.uri;
+
+    const accounts = response.data.map(mapSuggestedProfileToAccount);
+    dispatch(importFetchedAccounts(accounts, { should_refetch: true }));
+
+    return {
+      result: response.data.map((x) => ({ ...x, account: x.account_id })),
+      link: nextLink,
+      hasMore,
+    };
+  };
+
+  const getSuggestions = (pageParam: PageParam) => {
+    if (features.truthSuggestions) {
+      return getTruthSuggestions(pageParam);
+    } else {
+      return getV2Suggestions(pageParam);
+    }
+  };
+
+  const result = useInfiniteQuery(
+    suggestionKeys.suggestions,
+    ({ pageParam }: any) => getSuggestions(pageParam),
+    {
+      keepPreviousData: true,
+      enabled: !!account,
+      getNextPageParam: (config) => {
+        if (config?.hasMore) {
+          return { nextLink: config?.link };
+        }
+
+        return undefined;
+      },
+    });
+
+  const data: any = result.data?.pages.reduce<Suggestion[]>(
+    (prev: any, curr: any) => [...prev, ...curr.result],
+    [],
+  );
+
+  return {
+    ...result,
+    data: data || [],
+  };
+};
+
+const useDismissSuggestion = () => {
+  const api = useApi();
+
+  return useMutation((accountId: string) => api.delete(`/api/v1/suggestions/${accountId}`), {
+    onMutate(accountId: string) {
+      removePageItem(suggestionKeys.suggestions, accountId, (o: any, n: any) => o.account_id === n);
+    },
+  });
+};
+
+function useOnboardingSuggestions() {
   const api = useApi();
   const dispatch = useAppDispatch();
 
@@ -78,3 +192,5 @@ export default function useOnboardingSuggestions() {
     data,
   };
 }
+
+export { useOnboardingSuggestions as default, useSuggestions, useDismissSuggestion };
\ No newline at end of file
diff --git a/app/soapbox/utils/queries.ts b/app/soapbox/utils/queries.ts
new file mode 100644
index 000000000..d066f0855
--- /dev/null
+++ b/app/soapbox/utils/queries.ts
@@ -0,0 +1,61 @@
+import { queryClient } from 'soapbox/queries/client';
+
+import type { InfiniteData, QueryKey, UseInfiniteQueryResult } from '@tanstack/react-query';
+
+export interface PaginatedResult<T> {
+  result: T[],
+  hasMore: boolean,
+  link?: string,
+}
+
+/** Flatten paginated results into a single array. */
+const flattenPages = <T>(queryInfo: UseInfiniteQueryResult<PaginatedResult<T>>) => {
+  return queryInfo.data?.pages.reduce<T[]>(
+    (prev: T[], curr) => [...prev, ...curr.result],
+    [],
+  );
+};
+
+/** Traverse pages and update the item inside if found. */
+const updatePageItem = <T>(queryKey: QueryKey, newItem: T, isItem: (item: T, newItem: T) => boolean) => {
+  queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
+    if (data) {
+      const pages = data.pages.map(page => {
+        const result = page.result.map(item => isItem(item, newItem) ? newItem : item);
+        return { ...page, result };
+      });
+      return { ...data, pages };
+    }
+  });
+};
+
+/** Insert the new item at the beginning of the first page. */
+const appendPageItem = <T>(queryKey: QueryKey, newItem: T) => {
+  queryClient.setQueryData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
+    if (data) {
+      const pages = [...data.pages];
+      pages[0] = { ...pages[0], result: [...pages[0].result, newItem] };
+      return { ...data, pages };
+    }
+  });
+};
+
+/** Remove an item inside if found. */
+const removePageItem = <T>(queryKey: QueryKey, itemToRemove: T, isItem: (item: T, newItem: T) => boolean) => {
+  queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
+    if (data) {
+      const pages = data.pages.map(page => {
+        const result = page.result.filter(item => !isItem(item, itemToRemove));
+        return { ...page, result };
+      });
+      return { ...data, pages };
+    }
+  });
+};
+
+export {
+  flattenPages,
+  updatePageItem,
+  appendPageItem,
+  removePageItem,
+};

From 63bd9a21fc93db585c19619b4f5edc0363fc6c23 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 26 Sep 2022 15:23:51 -0400
Subject: [PATCH 11/19] Update spacing on Widgets

---
 app/soapbox/components/ui/widget/widget.tsx                | 2 +-
 app/soapbox/features/feed-suggestions/feed-suggestions.tsx | 4 ++--
 app/soapbox/features/follow-recommendations/index.tsx      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index c4be654b3..3bced193f 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -41,7 +41,7 @@ const Widget: React.FC<IWidget> = ({
   action,
 }): JSX.Element => {
   return (
-    <Stack space={2}>
+    <Stack space={4}>
       <HStack alignItems='center' justifyContent='between'>
         <WidgetTitle title={title} />
         {action || (onActionClick && (
diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index d946f5e8c..2545c72e5 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -11,7 +11,7 @@ import ActionButton from '../ui/components/action-button';
 import type { Account } from 'soapbox/types/entities';
 
 const messages = defineMessages({
-  heading: { id: 'feed_suggestions.heading', defaultMessage: 'Suggested profiles' },
+  heading: { id: 'feed_suggestions.heading', defaultMessage: 'Suggested Profiles' },
   viewAll: { id: 'feed_suggestions.view_all', defaultMessage: 'View all' },
 });
 
@@ -65,7 +65,7 @@ const FeedSuggestions = () => {
   if (!isLoading && suggestedProfiles.size === 0) return null;
 
   return (
-    <Card size='lg' variant='rounded' className='space-y-4'>
+    <Card size='lg' variant='rounded' className='space-y-6'>
       <HStack justifyContent='between' alignItems='center'>
         <CardTitle title={intl.formatMessage(messages.heading)} />
 
diff --git a/app/soapbox/features/follow-recommendations/index.tsx b/app/soapbox/features/follow-recommendations/index.tsx
index 7fda03c7a..221ca1491 100644
--- a/app/soapbox/features/follow-recommendations/index.tsx
+++ b/app/soapbox/features/follow-recommendations/index.tsx
@@ -10,7 +10,7 @@ import Column from 'soapbox/features/ui/components/column';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 
 const messages = defineMessages({
-  heading: { id: 'followRecommendations.heading', defaultMessage: 'Suggested profiles' },
+  heading: { id: 'followRecommendations.heading', defaultMessage: 'Suggested Profiles' },
 });
 
 const FollowRecommendations: React.FC = () => {

From a0d595c7df8f056921cd1ec017f62dcff2d2cba0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 26 Sep 2022 15:00:01 -0500
Subject: [PATCH 12/19] CountryCodeDropdown: support +55, +351

---
 app/soapbox/utils/phone.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/soapbox/utils/phone.ts b/app/soapbox/utils/phone.ts
index 9cc175f5d..8fde39f12 100644
--- a/app/soapbox/utils/phone.ts
+++ b/app/soapbox/utils/phone.ts
@@ -1,7 +1,9 @@
 /** List of supported E164 country codes. */
 const COUNTRY_CODES = [
   '1',
+  '351',
   '44',
+  '55',
 ] as const;
 
 /** Supported E164 country code. */

From facd4e95f53b83d0d3f6feef3e456e2d75d73a07 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 27 Sep 2022 09:58:49 -0400
Subject: [PATCH 13/19] Add tests for new Who To Follow panel

---
 .../steps/suggested-accounts-step.tsx         |   2 +-
 .../placeholder-sidebar-suggestions.tsx       |   2 +-
 .../__tests__/who-to-follow-panel.test.tsx    | 294 +++++++++++-------
 .../queries/__tests__/suggestions.test.ts     |   6 +-
 app/soapbox/queries/suggestions.ts            |  18 +-
 5 files changed, 201 insertions(+), 121 deletions(-)

diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index 8db08d1a4..a05202ff9 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
-import useOnboardingSuggestions from 'soapbox/queries/suggestions';
+import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
 
 const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
   const { data, fetchNextPage, hasNextPage, isFetching } = useOnboardingSuggestions();
diff --git a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index 757c47cc7..e96268cb2 100644
--- a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -11,7 +11,7 @@ export default ({ limit }: { limit: number }) => {
   return (
     <>
       {new Array(limit).fill(undefined).map((_, idx) => (
-        <HStack alignItems='center' space={2} className='animate-pulse'>
+        <HStack key={idx} alignItems='center' space={2} className='animate-pulse'>
           <Stack space={3} className='text-center'>
             <div
               className='w-9 h-9 block mx-auto rounded-full bg-primary-200 dark:bg-primary-700'
diff --git a/app/soapbox/features/ui/components/__tests__/who-to-follow-panel.test.tsx b/app/soapbox/features/ui/components/__tests__/who-to-follow-panel.test.tsx
index 84a645514..01a65dc49 100644
--- a/app/soapbox/features/ui/components/__tests__/who-to-follow-panel.test.tsx
+++ b/app/soapbox/features/ui/components/__tests__/who-to-follow-panel.test.tsx
@@ -1,123 +1,201 @@
-import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React from 'react';
 
-import { render, screen } from '../../../../jest/test-helpers';
-import { normalizeAccount } from '../../../../normalizers';
+import { __stub } from 'soapbox/api';
+
+import { render, rootState, screen, waitFor } from '../../../../jest/test-helpers';
+import { normalizeInstance } from '../../../../normalizers';
 import WhoToFollowPanel from '../who-to-follow-panel';
 
+const buildTruthSuggestion = (id: string) => ({
+  account_avatar: 'avatar',
+  account_id: id,
+  acct: 'acct',
+  display_name: 'my name',
+  note: 'hello',
+  verified: true,
+});
+
+const buildSuggestion = (id: string) => ({
+  source: 'staff',
+  account: {
+    username: 'username',
+    verified: true,
+    id,
+    acct: 'acct',
+    avatar: 'avatar',
+    avatar_static: 'avatar',
+    display_name: 'my name',
+  },
+});
+
 describe('<WhoToFollow />', () => {
-  it('renders suggested accounts', () => {
-    const store = {
-      accounts: ImmutableMap({
-        '1': normalizeAccount({
-          id: '1',
-          acct: 'username',
-          display_name: 'My name',
-          avatar: 'test.jpg',
-        }),
-      }),
-      suggestions: {
-        items: ImmutableOrderedSet([{
-          source: 'staff',
-          account: '1',
-        }]),
-      },
-    };
+  let store: any;
 
-    render(<WhoToFollowPanel limit={1} />, undefined, store);
-    expect(screen.getByTestId('account')).toHaveTextContent(/my name/i);
+  describe('using Truth Social software', () => {
+    beforeEach(() => {
+      store = rootState
+        .set('me', '1234')
+        .set('instance', normalizeInstance({
+          version: '3.4.1 (compatible; TruthSocial 1.0.0)',
+        }));
+    });
+
+    describe('with a single suggestion', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/truth/carousels/suggestions')
+            .reply(200, [buildTruthSuggestion('1')], {
+              link: '<https://example.com/api/v1/truth/carousels/suggestions?since_id=1>; rel=\'prev\'',
+            });
+        });
+      });
+
+      it('renders suggested accounts', async () => {
+        render(<WhoToFollowPanel limit={1} />, undefined, store);
+
+        await waitFor(() => {
+          expect(screen.getByTestId('account')).toHaveTextContent(/my name/i);
+        });
+      });
+    });
+
+    describe('with a multiple suggestion', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/truth/carousels/suggestions')
+            .reply(200, [buildTruthSuggestion('1'), buildTruthSuggestion('2')], {
+              link: '<https://example.com/api/v1/truth/carousels/suggestions?since_id=1>; rel=\'prev\'',
+            });
+        });
+      });
+
+      it('renders suggested accounts', async () => {
+        render(<WhoToFollowPanel limit={2} />, undefined, store);
+
+        await waitFor(() => {
+          expect(screen.queryAllByTestId('account')).toHaveLength(2);
+        });
+      });
+    });
+
+    describe('with a set limit', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/truth/carousels/suggestions')
+            .reply(200, [buildTruthSuggestion('1'), buildTruthSuggestion('2')], {
+              link: '<https://example.com/api/v1/truth/carousels/suggestions?since_id=1>; rel=\'prev\'',
+            });
+        });
+      });
+
+      it('respects the limit prop', async () => {
+        render(<WhoToFollowPanel limit={1} />, undefined, store);
+
+        await waitFor(() => {
+          expect(screen.queryAllByTestId('account')).toHaveLength(1);
+        });
+      });
+    });
+
+    describe('when the API returns an empty list', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/truth/carousels/suggestions')
+            .reply(200, [], {
+              link: '',
+            });
+        });
+      });
+
+      it('renders empty', async () => {
+        render(<WhoToFollowPanel limit={1} />, undefined, store);
+
+        await waitFor(() => {
+          expect(screen.queryAllByTestId('account')).toHaveLength(0);
+        });
+      });
+    });
   });
 
-  it('renders multiple accounts', () => {
-    const store = {
-      accounts: ImmutableMap({
-        '1': normalizeAccount({
-          id: '1',
-          acct: 'username',
-          display_name: 'My name',
-          avatar: 'test.jpg',
-        }),
-        '2': normalizeAccount({
-          id: '1',
-          acct: 'username2',
-          display_name: 'My other name',
-          avatar: 'test.jpg',
-        }),
-      }),
-      suggestions: {
-        items: ImmutableOrderedSet([
-          {
-            source: 'staff',
-            account: '1',
-          },
-          {
-            source: 'staff',
-            account: '2',
-          },
-        ]),
-      },
-    };
+  describe('using Pleroma software', () => {
+    beforeEach(() => {
+      store = rootState.set('me', '1234');
+    });
 
-    render(<WhoToFollowPanel limit={3} />, undefined, store);
-    expect(screen.queryAllByTestId('account')).toHaveLength(2);
-  });
+    describe('with a single suggestion', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v2/suggestions')
+            .reply(200, [buildSuggestion('1')], {
+              link: '<https://example.com/api/v2/suggestions?since_id=1>; rel=\'prev\'',
+            });
+        });
+      });
 
-  it('respects the limit prop', () => {
-    const store = {
-      accounts: ImmutableMap({
-        '1': normalizeAccount({
-          id: '1',
-          acct: 'username',
-          display_name: 'My name',
-          avatar: 'test.jpg',
-        }),
-        '2': normalizeAccount({
-          id: '1',
-          acct: 'username2',
-          display_name: 'My other name',
-          avatar: 'test.jpg',
-        }),
-      }),
-      suggestions: {
-        items: ImmutableOrderedSet([
-          {
-            source: 'staff',
-            account: '1',
-          },
-          {
-            source: 'staff',
-            account: '2',
-          },
-        ]),
-      },
-    };
+      it('renders suggested accounts', async () => {
+        render(<WhoToFollowPanel limit={1} />, undefined, store);
 
-    render(<WhoToFollowPanel limit={1} />, undefined, store);
-    expect(screen.queryAllByTestId('account')).toHaveLength(1);
-  });
+        await waitFor(() => {
+          expect(screen.getByTestId('account')).toHaveTextContent(/my name/i);
+        });
+      });
+    });
 
-  it('renders empty', () => {
-    const store = {
-      accounts: ImmutableMap({
-        '1': normalizeAccount({
-          id: '1',
-          acct: 'username',
-          display_name: 'My name',
-          avatar: 'test.jpg',
-        }),
-        '2': normalizeAccount({
-          id: '1',
-          acct: 'username2',
-          display_name: 'My other name',
-          avatar: 'test.jpg',
-        }),
-      }),
-      suggestions: {
-        items: ImmutableOrderedSet([]),
-      },
-    };
+    describe('with a multiple suggestion', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v2/suggestions')
+            .reply(200, [buildSuggestion('1'), buildSuggestion('2')], {
+              link: '<https://example.com/api/v2/suggestions?since_id=1>; rel=\'prev\'',
+            });
+        });
+      });
 
-    render(<WhoToFollowPanel limit={1} />, undefined, store);
-    expect(screen.queryAllByTestId('account')).toHaveLength(0);
+      it('renders suggested accounts', async () => {
+        render(<WhoToFollowPanel limit={2} />, undefined, store);
+
+        await waitFor(() => {
+          expect(screen.queryAllByTestId('account')).toHaveLength(2);
+        });
+      });
+    });
+
+    describe('with a set limit', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v2/suggestions')
+            .reply(200, [buildSuggestion('1'), buildSuggestion('2')], {
+              link: '<https://example.com/api/v2/suggestions?since_id=1>; rel=\'prev\'',
+            });
+        });
+      });
+
+      it('respects the limit prop', async () => {
+        render(<WhoToFollowPanel limit={1} />, undefined, store);
+
+        await waitFor(() => {
+          expect(screen.queryAllByTestId('account')).toHaveLength(1);
+        });
+      });
+    });
+
+    describe('when the API returns an empty list', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v2/suggestions')
+            .reply(200, [], {
+              link: '',
+            });
+        });
+      });
+
+      it('renders empty', async () => {
+        render(<WhoToFollowPanel limit={1} />, undefined, store);
+
+        await waitFor(() => {
+          expect(screen.queryAllByTestId('account')).toHaveLength(0);
+        });
+      });
+    });
   });
 });
diff --git a/app/soapbox/queries/__tests__/suggestions.test.ts b/app/soapbox/queries/__tests__/suggestions.test.ts
index f38bf0dbc..aa352abe9 100644
--- a/app/soapbox/queries/__tests__/suggestions.test.ts
+++ b/app/soapbox/queries/__tests__/suggestions.test.ts
@@ -1,7 +1,7 @@
 import { __stub } from 'soapbox/api';
 import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
 
-import useOnboardingSuggestions from '../suggestions';
+import { useOnboardingSuggestions } from '../suggestions';
 
 describe('useCarouselAvatars', () => {
   describe('with a successful query', () => {
@@ -17,7 +17,7 @@ describe('useCarouselAvatars', () => {
       });
     });
 
-    it('is successful', async() => {
+    it('is successful', async () => {
       const { result } = renderHook(() => useOnboardingSuggestions());
 
       await waitFor(() => expect(result.current.isFetching).toBe(false));
@@ -33,7 +33,7 @@ describe('useCarouselAvatars', () => {
       });
     });
 
-    it('is successful', async() => {
+    it('is successful', async () => {
       const { result } = renderHook(() => useOnboardingSuggestions());
 
       await waitFor(() => expect(result.current.isFetching).toBe(false));
diff --git a/app/soapbox/queries/suggestions.ts b/app/soapbox/queries/suggestions.ts
index 8c9e2ec20..50b624831 100644
--- a/app/soapbox/queries/suggestions.ts
+++ b/app/soapbox/queries/suggestions.ts
@@ -4,7 +4,7 @@ import { fetchRelationships } from 'soapbox/actions/accounts';
 import { importFetchedAccounts } from 'soapbox/actions/importer';
 import { SuggestedProfile } from 'soapbox/actions/suggestions';
 import { getLinks } from 'soapbox/api';
-import { useApi, useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { useApi, useAppDispatch, useFeatures } from 'soapbox/hooks';
 
 import { PaginatedResult, removePageItem } from '../utils/queries';
 
@@ -47,6 +47,10 @@ type TruthSuggestion = {
   verified: boolean
 }
 
+type Result = TruthSuggestion | {
+  account: string
+}
+
 type PageParam = {
   link?: string
 }
@@ -66,12 +70,11 @@ const mapSuggestedProfileToAccount = (suggestedProfile: SuggestedProfile) => ({
 });
 
 const useSuggestions = () => {
-  const account = useOwnAccount();
   const api = useApi();
   const dispatch = useAppDispatch();
   const features = useFeatures();
 
-  const getV2Suggestions = async(pageParam: PageParam): Promise<PaginatedResult<TruthSuggestion | Suggestion>> => {
+  const getV2Suggestions = async (pageParam: PageParam): Promise<PaginatedResult<Result>> => {
     const endpoint = pageParam?.link || '/api/v2/suggestions';
     const response = await api.get<Suggestion[]>(endpoint);
     const hasMore = !!response.headers.link;
@@ -83,13 +86,13 @@ const useSuggestions = () => {
     dispatch(fetchRelationships(accountIds));
 
     return {
-      result: response.data,
+      result: response.data.map(x => ({ ...x, account: x.account.id })),
       link: nextLink,
       hasMore,
     };
   };
 
-  const getTruthSuggestions = async(pageParam: PageParam): Promise<PaginatedResult<TruthSuggestion | Suggestion>> => {
+  const getTruthSuggestions = async (pageParam: PageParam): Promise<PaginatedResult<Result>> => {
     const endpoint = pageParam?.link || '/api/v1/truth/carousels/suggestions';
     const response = await api.get<TruthSuggestion[]>(endpoint);
     const hasMore = !!response.headers.link;
@@ -118,7 +121,6 @@ const useSuggestions = () => {
     ({ pageParam }: any) => getSuggestions(pageParam),
     {
       keepPreviousData: true,
-      enabled: !!account,
       getNextPageParam: (config) => {
         if (config?.hasMore) {
           return { nextLink: config?.link };
@@ -153,7 +155,7 @@ function useOnboardingSuggestions() {
   const api = useApi();
   const dispatch = useAppDispatch();
 
-  const getV2Suggestions = async(pageParam: any): Promise<{ data: Suggestion[], link: string | undefined, hasMore: boolean }> => {
+  const getV2Suggestions = async (pageParam: any): Promise<{ data: Suggestion[], link: string | undefined, hasMore: boolean }> => {
     const link = pageParam?.link || '/api/v2/suggestions';
     const response = await api.get<Suggestion[]>(link);
     const hasMore = !!response.headers.link;
@@ -193,4 +195,4 @@ function useOnboardingSuggestions() {
   };
 }
 
-export { useOnboardingSuggestions as default, useSuggestions, useDismissSuggestion };
\ No newline at end of file
+export { useOnboardingSuggestions, useSuggestions, useDismissSuggestion };
\ No newline at end of file

From b34b65cb90cf2267ef0a167150bcd3cb7aeb85dd Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 27 Sep 2022 09:59:01 -0400
Subject: [PATCH 14/19] Fix conflict between eslint / typescript

---
 .eslintrc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 164949e65..0ecb15a5b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -277,6 +277,7 @@ module.exports = {
       files: ['**/*.ts', '**/*.tsx'],
       rules: {
         'no-undef': 'off', // https://stackoverflow.com/a/69155899
+        'space-before-function-paren': 'off',
       },
       parser: '@typescript-eslint/parser',
     },

From 90c122bf3f2ca4a0c5f23d7551373d16d5658a6e Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 27 Sep 2022 10:18:12 -0400
Subject: [PATCH 15/19] Update leave chat summary

---
 app/soapbox/features/chats/components/chat-list-item.tsx        | 2 +-
 .../features/chats/components/chat-message-list-intro.tsx       | 2 +-
 .../chats/components/chat-page/components/chat-page-main.tsx    | 2 +-
 app/soapbox/features/chats/components/chat-settings.tsx         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 600548880..531b504c0 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -14,7 +14,7 @@ import type { Menu } from 'soapbox/components/dropdown_menu';
 const messages = defineMessages({
   silenceNotifications: { id: 'chat_settings.silence_notifications', defaultMessage: 'Silence notifications' },
   unsilenceNotifications: { id: 'chat_settings.unsilence_notifications', defaultMessage: 'Unsilence notifications' },
-  leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.' },
+  leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' },
   leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave Chat' },
   leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave Chat' },
   leaveChat: { id: 'chat_settings.options.leave_chat', defaultMessage: 'Leave Chat' },
diff --git a/app/soapbox/features/chats/components/chat-message-list-intro.tsx b/app/soapbox/features/chats/components/chat-message-list-intro.tsx
index d85858464..309a018de 100644
--- a/app/soapbox/features/chats/components/chat-message-list-intro.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list-intro.tsx
@@ -11,7 +11,7 @@ import { useChat } from 'soapbox/queries/chats';
 
 const messages = defineMessages({
   leaveChatHeading: { id: 'chat_message_list_intro.leave_chat.heading', defaultMessage: 'Leave Chat' },
-  leaveChatMessage: { id: 'chat_message_list_intro.leave_chat.message', defaultMessage: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.' },
+  leaveChatMessage: { id: 'chat_message_list_intro.leave_chat.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' },
   leaveChatConfirm: { id: 'chat_message_list_intro.leave_chat.confirm', defaultMessage: 'Leave Chat' },
   intro: { id: 'chat_message_list_intro.intro', defaultMessage: 'wants to start a chat with you' },
   accept: { id: 'chat_message_list_intro.actions.accept', defaultMessage: 'Accept' },
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index 6b6ba786d..3f2798c92 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -19,7 +19,7 @@ const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
   blockHeading: { id: 'chat_settings.block.heading', defaultMessage: 'Block @{acct}' },
   blockConfirm: { id: 'chat_settings.block.confirm', defaultMessage: 'Block' },
-  leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.' },
+  leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' },
   leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave Chat' },
   leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave Chat' },
   blockUser: { id: 'chat_settings.options.block_user', defaultMessage: 'Block @{acct}' },
diff --git a/app/soapbox/features/chats/components/chat-settings.tsx b/app/soapbox/features/chats/components/chat-settings.tsx
index fe10f2ab6..69dfbecd6 100644
--- a/app/soapbox/features/chats/components/chat-settings.tsx
+++ b/app/soapbox/features/chats/components/chat-settings.tsx
@@ -16,7 +16,7 @@ const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
   blockHeading: { id: 'chat_settings.block.heading', defaultMessage: 'Block @{acct}' },
   blockConfirm: { id: 'chat_settings.block.confirm', defaultMessage: 'Block' },
-  leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.' },
+  leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' },
   leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave Chat' },
   leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave Chat' },
   title: { id: 'chat_settings.title', defaultMessage: 'Chat Details' },

From d4cf5dc2b9d90618cb2dab77fffa689e5bb42cb7 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 27 Sep 2022 10:35:35 -0400
Subject: [PATCH 16/19] Remove unneeded disabled button on Bio step

We don't require users to have bios, so we shouldn't force them to add one
during the onboarding steps in order to proceed to the next step without
"skipping" it.
---
 app/soapbox/features/onboarding/steps/bio-step.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index 895fd08e8..31c7bc6c9 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -17,10 +17,6 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
   const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
   const [errors, setErrors] = React.useState<string[]>([]);
 
-  const trimmedValue = value.trim();
-  const isValid = trimmedValue.length > 0;
-  const isDisabled = !isValid;
-
   const handleSubmit = () => {
     setSubmitting(true);
 
@@ -79,7 +75,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
                   block
                   theme='primary'
                   type='submit'
-                  disabled={isDisabled || isSubmitting}
+                  disabled={isSubmitting}
                   onClick={handleSubmit}
                 >
                   {isSubmitting ? (

From 1a124c2eabe9b31f45177368ce0976bb05e05670 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 27 Sep 2022 10:50:01 -0400
Subject: [PATCH 17/19] Fix fade when scrolling on ChatList

---
 .../chats/components/chat-list-item.tsx       |  1 +
 .../features/chats/components/chat-list.tsx   | 33 +++++++++----------
 .../chats/components/chat-pane/chat-pane.tsx  |  1 -
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 531b504c0..b091187b2 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -110,6 +110,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
 
         <HStack alignItems='center' space={2}>
           <div className='text-gray-600 hidden group-hover:block hover:text-gray-100'>
+            {/* TODO: fix nested buttons here */}
             <DropdownMenuContainer
               items={menu}
               src={require('@tabler/icons/dots.svg')}
diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index 0fb6555df..6ea676336 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/app/soapbox/features/chats/components/chat-list.tsx
@@ -14,11 +14,10 @@ import ChatListItem from './chat-list-item';
 interface IChatList {
   onClickChat: (chat: any) => void,
   useWindowScroll?: boolean,
-  fade?: boolean,
   searchValue?: string
 }
 
-const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, searchValue, fade }) => {
+const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, searchValue }) => {
   const dispatch = useAppDispatch();
 
   const chatListRef = useRef(null);
@@ -76,22 +75,20 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
         )}
       </PullToRefresh>
 
-      {fade && (
-        <>
-          <div
-            className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
-              'opacity-0': isNearTop,
-              'opacity-100': !isNearTop,
-            })}
-          />
-          <div
-            className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
-              'opacity-0': isNearBottom,
-              'opacity-100': !isNearBottom,
-            })}
-          />
-        </>
-      )}
+      <>
+        <div
+          className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+            'opacity-0': isNearTop,
+            'opacity-100': !isNearTop,
+          })}
+        />
+        <div
+          className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+            'opacity-0': isNearBottom,
+            'opacity-100': !isNearBottom,
+          })}
+        />
+      </>
     </div>
   );
 };
diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
index dd4b2fc01..d89bee60a 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -59,7 +59,6 @@ const ChatPane = () => {
             <ChatList
               searchValue={debouncedValue}
               onClickChat={handleClickChat}
-              fade
             />
           ) : (
             <EmptyResultsBlankslate />

From 17c2958df10ca828275e6d0c6144de75ede43b53 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 27 Sep 2022 15:42:24 -0400
Subject: [PATCH 18/19] Use query key system

---
 app/soapbox/features/ads/components/ad.tsx    |  3 ++-
 .../chats/components/chat-message-list.tsx    |  4 +--
 .../components/chat-search/chat-search.tsx    |  3 ++-
 .../features/chats/components/chat.tsx        |  4 +--
 app/soapbox/queries/ads.ts                    | 10 +++++--
 app/soapbox/queries/chats.ts                  | 26 ++++++++++++-------
 6 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index 5c1ff6a41..9da3f1387 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -6,6 +6,7 @@ import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import StatusCard from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
+import { adKeys } from 'soapbox/queries/ads';
 
 import type { Card as CardEntity } from 'soapbox/types/entities';
 
@@ -29,7 +30,7 @@ const Ad: React.FC<IAd> = ({ card, impression, expires }) => {
 
   /** Invalidate query cache for ads. */
   const bustCache = (): void => {
-    queryClient.invalidateQueries(['ads']);
+    queryClient.invalidateQueries(adKeys.ads);
   };
 
   /** Toggle the info box on click. */
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index ccfcea91d..3f842bf35 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -14,7 +14,7 @@ import PlaceholderChatMessage from 'soapbox/features/placeholder/components/plac
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { IChat, IChatMessage, useChat, useChatMessages } from 'soapbox/queries/chats';
+import { chatKeys, IChat, IChatMessage, useChat, useChatMessages } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { onlyEmoji } from 'soapbox/utils/rich_content';
 
@@ -96,7 +96,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
 
   const handleDeleteMessage = useMutation((chatMessageId: string) => deleteChatMessage(chatMessageId), {
     onSettled: () => {
-      queryClient.invalidateQueries(['chats', 'messages', chat.id]);
+      queryClient.invalidateQueries(chatKeys.chatMessages(chat.id));
     },
   });
 
diff --git a/app/soapbox/features/chats/components/chat-search/chat-search.tsx b/app/soapbox/features/chats/components/chat-search/chat-search.tsx
index 9bce51e86..6c4f2f4db 100644
--- a/app/soapbox/features/chats/components/chat-search/chat-search.tsx
+++ b/app/soapbox/features/chats/components/chat-search/chat-search.tsx
@@ -11,6 +11,7 @@ import { useChats } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import useAccountSearch from 'soapbox/queries/search';
 
+import { chatKeys } from '../../../../queries/chats';
 import ChatPaneHeader from '../chat-pane-header';
 import { Pane } from '../ui';
 
@@ -47,7 +48,7 @@ const ChatSearch = () => {
     },
     onSuccess: (response) => {
       setChat(response.data);
-      queryClient.invalidateQueries(['chats', 'search']);
+      queryClient.invalidateQueries(chatKeys.chatSearch());
     },
   });
 
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index 6475ad53c..2dba86f95 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -8,7 +8,7 @@ import { HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui
 import UploadProgress from 'soapbox/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { IChat, useChat } from 'soapbox/queries/chats';
+import { chatKeys, IChat, useChat } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { truncateFilename } from 'soapbox/utils/media';
 
@@ -97,7 +97,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className })
     },
     // Always refetch after error or success:
     onSuccess: () => {
-      queryClient.invalidateQueries(['chats', 'messages', chat.id]);
+      queryClient.invalidateQueries(chatKeys.chatMessages(chat.id));
     },
   });
 
diff --git a/app/soapbox/queries/ads.ts b/app/soapbox/queries/ads.ts
index 86dc1e86f..13cad46fa 100644
--- a/app/soapbox/queries/ads.ts
+++ b/app/soapbox/queries/ads.ts
@@ -4,7 +4,11 @@ import { Ad, getProvider } from 'soapbox/features/ads/providers';
 import { useAppDispatch } from 'soapbox/hooks';
 import { isExpired } from 'soapbox/utils/ads';
 
-export default function useAds() {
+const adKeys = {
+  ads: ['ads'] as const,
+};
+
+function useAds() {
   const dispatch = useAppDispatch();
 
   const getAds = async() => {
@@ -18,7 +22,7 @@ export default function useAds() {
     });
   };
 
-  const result = useQuery<Ad[]>(['ads'], getAds, {
+  const result = useQuery<Ad[]>(adKeys.ads, getAds, {
     placeholderData: [],
   });
 
@@ -30,3 +34,5 @@ export default function useAds() {
     data,
   };
 }
+
+export { useAds as default, adKeys };
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index eccb1c896..4e6011ec1 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -56,6 +56,12 @@ export interface PaginatedResult<T> {
   link?: string,
 }
 
+const chatKeys = {
+  chatMessages: (chatId: string) => ['chats', 'messages', chatId] as const,
+  chatSearch: (searchQuery?: string) => ['chats', 'search', searchQuery] as const,
+  chatSilences: ['chatSilences'] as const,
+};
+
 const reverseOrder = (a: IChat, b: IChat): number => compareId(a.id, b.id);
 
 const useChatMessages = (chatId: string) => {
@@ -78,7 +84,7 @@ const useChatMessages = (chatId: string) => {
     };
   };
 
-  const queryInfo = useInfiniteQuery(['chats', 'messages', chatId], ({ pageParam }) => getChatMessages(chatId, pageParam), {
+  const queryInfo = useInfiniteQuery(chatKeys.chatMessages(chatId), ({ pageParam }) => getChatMessages(chatId, pageParam), {
     keepPreviousData: true,
     getNextPageParam: (config) => {
       if (config.hasMore) {
@@ -126,7 +132,7 @@ const useChats = (search?: string) => {
     };
   };
 
-  const queryInfo = useInfiniteQuery(['chats', 'search', search], ({ pageParam }) => getChats(pageParam), {
+  const queryInfo = useInfiniteQuery(chatKeys.chatSearch(search), ({ pageParam }) => getChats(pageParam), {
     keepPreviousData: true,
     getNextPageParam: (config) => {
       if (config.hasMore) {
@@ -168,8 +174,8 @@ const useChat = (chatId: string) => {
   const acceptChat = useMutation(() => api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/accept`), {
     onSuccess(response) {
       setChat(response.data);
-      queryClient.invalidateQueries(['chats', 'messages', chatId]);
-      queryClient.invalidateQueries(['chats', 'search']);
+      queryClient.invalidateQueries(chatKeys.chatMessages(chatId));
+      queryClient.invalidateQueries(chatKeys.chatSearch());
     },
   });
 
@@ -177,8 +183,8 @@ const useChat = (chatId: string) => {
     onSuccess(response) {
       setChat(null);
       setEditing(false);
-      queryClient.invalidateQueries(['chats', 'messages', chatId]);
-      queryClient.invalidateQueries(['chats', 'search']);
+      queryClient.invalidateQueries(chatKeys.chatMessages(chatId));
+      queryClient.invalidateQueries(chatKeys.chatSearch());
     },
   });
 
@@ -194,7 +200,7 @@ const useChatSilences = () => {
     return data;
   };
 
-  return useQuery<IChatSilence[]>(['chatSilences'], getChatSilences, {
+  return useQuery<IChatSilence[]>(chatKeys.chatSilences, getChatSilences, {
     placeholderData: [],
   });
 };
@@ -233,7 +239,7 @@ const useChatSilence = (chat: IChat | null) => {
     api.post(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`)
       .then(() => {
         dispatch(snackbar.success('Successfully silenced this chat.'));
-        queryClient.invalidateQueries(['chatSilences']);
+        queryClient.invalidateQueries(chatKeys.chatSilences);
       })
       .catch(() => {
         dispatch(snackbar.error('Something went wrong trying to silence this chat. Please try again.'));
@@ -247,7 +253,7 @@ const useChatSilence = (chat: IChat | null) => {
     api.delete(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`)
       .then(() => {
         dispatch(snackbar.success('Successfully unsilenced this chat.'));
-        queryClient.invalidateQueries(['chatSilences']);
+        queryClient.invalidateQueries(chatKeys.chatSilences);
       })
       .catch(() => {
         dispatch(snackbar.error('Something went wrong trying to unsilence this chat. Please try again.'));
@@ -258,4 +264,4 @@ const useChatSilence = (chat: IChat | null) => {
   return { isSilenced, handleSilence, fetchChatSilence };
 };
 
-export { useChat, useChats, useChatMessages, useChatSilences, useChatSilence };
+export { chatKeys, useChat, useChats, useChatMessages, useChatSilences, useChatSilence };

From 002fef27a3a2912db26afc7c829e172bb26c61df Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 27 Sep 2022 16:05:19 -0400
Subject: [PATCH 19/19] Add StatContext to store global stat state

---
 app/soapbox/components/sidebar-navigation.tsx |  5 +-
 app/soapbox/components/thumb_navigation.tsx   |  6 +-
 app/soapbox/contexts/stat-context.tsx         | 29 ++++++++
 .../chats/components/chat-pane/chat-pane.tsx  |  6 +-
 app/soapbox/features/ui/index.tsx             | 71 ++++++++++---------
 app/soapbox/queries/chats.ts                  |  6 ++
 6 files changed, 82 insertions(+), 41 deletions(-)
 create mode 100644 app/soapbox/contexts/stat-context.tsx

diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index e7a65326d..df8c9697e 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { getSettings } from 'soapbox/actions/settings';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
+import { useStatContext } from 'soapbox/contexts/stat-context';
 import ComposeButton from 'soapbox/features/ui/components/compose-button';
 import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
 import { getFeatures } from 'soapbox/utils/features';
@@ -24,12 +25,12 @@ const messages = defineMessages({
 /** Desktop sidebar with links to different views in the app. */
 const SidebarNavigation = () => {
   const intl = useIntl();
+  const { unreadChatsCount } = useStatContext();
 
   const instance = useAppSelector((state) => state.instance);
   const settings = useAppSelector((state) => getSettings(state));
   const account = useOwnAccount();
   const notificationCount = useAppSelector((state) => state.notifications.get('unread'));
-  const chatsCount = useAppSelector((state) => state.chats.items.reduce((acc, curr) => acc + Math.min(curr.unread || 0, 1), 0));
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
 
@@ -114,7 +115,7 @@ const SidebarNavigation = () => {
         <SidebarNavigationLink
           to='/chats'
           icon={require('@tabler/icons/mail.svg')}
-          count={chatsCount}
+          count={unreadChatsCount}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );
diff --git a/app/soapbox/components/thumb_navigation.tsx b/app/soapbox/components/thumb_navigation.tsx
index 1935526ed..0c0b8d977 100644
--- a/app/soapbox/components/thumb_navigation.tsx
+++ b/app/soapbox/components/thumb_navigation.tsx
@@ -2,13 +2,15 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ThumbNavigationLink from 'soapbox/components/thumb_navigation-link';
+import { useStatContext } from 'soapbox/contexts/stat-context';
 import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
 import { getFeatures } from 'soapbox/utils/features';
 
 const ThumbNavigation: React.FC = (): JSX.Element => {
   const account = useOwnAccount();
+  const { unreadChatsCount } = useStatContext();
+
   const notificationCount = useAppSelector((state) => state.notifications.unread);
-  const chatsCount = useAppSelector((state) => state.chats.items.reduce((acc, curr) => acc + Math.min(curr.unread || 0, 1), 0));
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
   const features = getFeatures(useAppSelector((state) => state.instance));
 
@@ -21,7 +23,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
           to='/chats'
           exact
-          count={chatsCount}
+          count={unreadChatsCount}
         />
       );
     }
diff --git a/app/soapbox/contexts/stat-context.tsx b/app/soapbox/contexts/stat-context.tsx
new file mode 100644
index 000000000..00d28436c
--- /dev/null
+++ b/app/soapbox/contexts/stat-context.tsx
@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+
+type IStatContext = {
+  unreadChatsCount: number,
+  setUnreadChatsCount: React.Dispatch<React.SetStateAction<number>>
+}
+
+const StatContext = createContext<any>({
+  unreadChatsCount: 0,
+});
+
+const StatProvider: React.FC = ({ children }) => {
+  const [unreadChatsCount, setUnreadChatsCount] = useState<number>(0);
+
+  const value = useMemo(() => ({
+    unreadChatsCount,
+    setUnreadChatsCount,
+  }), [unreadChatsCount]);
+
+  return (
+    <StatContext.Provider value={value}>
+      {children}
+    </StatContext.Provider>
+  );
+};
+
+const useStatContext = (): IStatContext => useContext(StatContext);
+
+export { StatProvider, useStatContext };
\ No newline at end of file
diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
index d89bee60a..fe29641ce 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 
 import { Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
+import { useStatContext } from 'soapbox/contexts/stat-context';
 import { useDebounce, useFeatures } from 'soapbox/hooks';
 import { IChat, useChats } from 'soapbox/queries/chats';
 
@@ -19,6 +20,7 @@ import Blankslate from './blankslate';
 const ChatPane = () => {
   const features = useFeatures();
   const debounce = useDebounce;
+  const { unreadChatsCount } = useStatContext();
 
   const [value, setValue] = useState<string>();
   const debouncedValue = debounce(value as string, 300);
@@ -26,8 +28,6 @@ const ChatPane = () => {
   const { chat, setChat, isOpen, isSearching, setSearching, toggleChatPane } = useChatContext();
   const { chatsQuery: { data: chats, isLoading } } = useChats(debouncedValue);
 
-  const unreadCount = sumBy(chats, (chat) => chat.unread);
-
   const hasSearchValue = Number(debouncedValue?.length) > 0;
 
   const handleClickChat = (chat: IChat) => {
@@ -89,7 +89,7 @@ const ChatPane = () => {
     <Pane isOpen={isOpen} index={0} main>
       <ChatPaneHeader
         title='Messages'
-        unreadCount={unreadCount}
+        unreadCount={unreadChatsCount}
         isOpen={isOpen}
         onToggle={toggleChatPane}
         secondaryAction={() => {
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index d76c49756..2b3b07feb 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -118,6 +118,7 @@ import { WrappedRoute } from './util/react_router_helpers';
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import 'soapbox/components/status';
+import { StatProvider } from '../../contexts/stat-context';
 
 const EmptyPage = HomePage;
 
@@ -651,52 +652,54 @@ const UI: React.FC = ({ children }) => {
   };
 
   return (
-    <HotKeys keyMap={keyMap} handlers={me ? handlers : undefined} ref={setHotkeysRef} attach={window} focused>
-      <div ref={node} style={style}>
-        <BackgroundShapes />
+    <StatProvider>
+      <HotKeys keyMap={keyMap} handlers={me ? handlers : undefined} ref={setHotkeysRef} attach={window} focused>
+        <div ref={node} style={style}>
+          <BackgroundShapes />
 
-        <div className='z-10 flex flex-col'>
-          <Navbar />
+          <div className='z-10 flex flex-col'>
+            <Navbar />
 
-          <Layout>
-            <Layout.Sidebar>
-              {!standalone && <SidebarNavigation />}
-            </Layout.Sidebar>
+            <Layout>
+              <Layout.Sidebar>
+                {!standalone && <SidebarNavigation />}
+              </Layout.Sidebar>
 
-            <SwitchingColumnsArea>
-              {children}
-            </SwitchingColumnsArea>
-          </Layout>
+              <SwitchingColumnsArea>
+                {children}
+              </SwitchingColumnsArea>
+            </Layout>
 
-          {me && floatingActionButton}
+            {me && floatingActionButton}
 
-          <BundleContainer fetchComponent={UploadArea}>
-            {Component => <Component active={draggingOver} onClose={closeUploadModal} />}
-          </BundleContainer>
+            <BundleContainer fetchComponent={UploadArea}>
+              {Component => <Component active={draggingOver} onClose={closeUploadModal} />}
+            </BundleContainer>
 
-          {me && (
-            <BundleContainer fetchComponent={SidebarMenu}>
+            {me && (
+              <BundleContainer fetchComponent={SidebarMenu}>
+                {Component => <Component />}
+              </BundleContainer>
+            )}
+
+            {me && features.chats && !mobile && (
+              <BundleContainer fetchComponent={ChatWidget}>
+                {Component => <Component />}
+              </BundleContainer>
+            )}
+            <ThumbNavigation />
+
+            <BundleContainer fetchComponent={ProfileHoverCard}>
               {Component => <Component />}
             </BundleContainer>
-          )}
 
-          {me && features.chats && !mobile && (
-            <BundleContainer fetchComponent={ChatWidget}>
+            <BundleContainer fetchComponent={StatusHoverCard}>
               {Component => <Component />}
             </BundleContainer>
-          )}
-          <ThumbNavigation />
-
-          <BundleContainer fetchComponent={ProfileHoverCard}>
-            {Component => <Component />}
-          </BundleContainer>
-
-          <BundleContainer fetchComponent={StatusHoverCard}>
-            {Component => <Component />}
-          </BundleContainer>
+          </div>
         </div>
-      </div>
-    </HotKeys>
+      </HotKeys>
+    </StatProvider>
   );
 };
 
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index 66a1c1f0d..0d750fb46 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -1,4 +1,5 @@
 import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
+import sumBy from 'lodash/sumBy';
 import { useState } from 'react';
 
 import { fetchRelationships } from 'soapbox/actions/accounts';
@@ -6,6 +7,7 @@ import snackbar from 'soapbox/actions/snackbar';
 import { getNextLink } from 'soapbox/api';
 import compareId from 'soapbox/compare_id';
 import { useChatContext } from 'soapbox/contexts/chat-context';
+import { useStatContext } from 'soapbox/contexts/stat-context';
 import { useApi, useAppDispatch, useFeatures } from 'soapbox/hooks';
 import { normalizeChatMessage } from 'soapbox/normalizers';
 import { flattenPages, PaginatedResult, updatePageItem } from 'soapbox/utils/queries';
@@ -101,6 +103,7 @@ const useChats = (search?: string) => {
   const api = useApi();
   const dispatch = useAppDispatch();
   const features = useFeatures();
+  const { setUnreadChatsCount } = useStatContext();
 
   const getChats = async (pageParam?: any): Promise<PaginatedResult<IChat>> => {
     const endpoint = features.chatsV2 ? '/api/v2/pleroma/chats' : '/api/v1/pleroma/chats';
@@ -116,6 +119,9 @@ const useChats = (search?: string) => {
     const link = getNextLink(response);
     const hasMore = !!link;
 
+    // TODO: change to response header
+    setUnreadChatsCount(sumBy(data, (chat) => chat.unread));
+
     // Set the relationships to these users in the redux store.
     dispatch(fetchRelationships(data.map((item) => item.account.id)));