Add options to the ChatListItem

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}

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>

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.'));