Add ability to leave chat

app/soapbox/features/chats/components/chat-box.tsx

@@ -41,7 +41,7 @@ const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize }) => {
   const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chat.id, ImmutableOrderedSet<string>()));
   const account = useOwnAccount();
 
-  const { createChatMessage, markChatAsRead, acceptChat } = useChat(chat.id);
+  const { createChatMessage, markChatAsRead, acceptChat, deleteChat } = useChat(chat.id);
 
   const [content, setContent] = useState<string>('');
   const [attachment, setAttachment] = useState<any>(undefined);
@@ -241,7 +241,15 @@ const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize }) => {
               </Button>
 
               <HStack alignItems='center' space={2} className='w-full'>
-                <Button theme='accent' block>Leave chat</Button>
+                <Button
+                  theme='accent'
+                  block
+                  onClick={() => deleteChat.mutate()}
+                  disabled={deleteChat.isLoading}
+                >
+                  Leave chat
+                </Button>
+
                 <Button theme='secondary' block>Report</Button>
               </HStack>
             </Stack>

app/soapbox/queries/chats.ts

@@ -111,7 +111,15 @@ const useChat = (chatId: string) => {
     },
   });
 
-  return { createChatMessage, markChatAsRead, deleteChatMessage, acceptChat };
+  const deleteChat = useMutation(() => api.delete<IChat>(`/api/v1/pleroma/chats/${chatId}`), {
+    onSuccess(response) {
+      setChat(null);
+      queryClient.invalidateQueries(['chats', 'messages', chatId]);
+      queryClient.invalidateQueries(['chats']);
+    },
+  });
+
+  return { createChatMessage, markChatAsRead, deleteChatMessage, acceptChat, deleteChat };
 };
 
 export { useChat, useChats, useChatMessages };