pl-fe: chats cleanup

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/chats/components/chat-message.tsx

@@ -101,6 +101,7 @@ const ChatMessage = (props: IChatMessage) => {
       navigator.clipboard.writeText(text);
     }
   };
+
   const setBubbleRef = (c: HTMLDivElement) => {
     if (!c) return;
     const links = c.querySelectorAll('a[rel="ugc"]');

packages/pl-fe/src/features/chats/components/chats-page/components/chats-page-chat.tsx

@@ -2,6 +2,7 @@ import { Link, useNavigate } from '@tanstack/react-router';
 import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
+import Account from '@/components/account';
 import DropdownMenu, { type Menu } from '@/components/dropdown-menu';
 import Avatar from '@/components/ui/avatar';
 import HStack from '@/components/ui/hstack';
@@ -129,15 +130,7 @@ const ChatsPageChat = () => {
 
         <DropdownMenu
           src={require('@phosphor-icons/core/regular/info.svg')}
-          component={() => (
-            <HStack className='px-4 py-2' alignItems='center' space={3}>
-              <Avatar src={chat.account.avatar} staticSrc={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
-              <Stack>
-                <Text weight='semibold'>{chat.account.display_name}</Text>
-                <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
-              </Stack>
-            </HStack>
-          )}
+          component={() => <div className='px-4 py-2'><Account account={chat.account} disabled hideActions /></div>}
           items={menuItems}
         />
       </HStack>

packages/pl-fe/src/queries/chats.ts

@@ -1,6 +1,7 @@
 import { InfiniteData, keepPreviousData, useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
 import sumBy from 'lodash/sumBy';
 import { type Chat, type ChatMessage as BaseChatMessage, type PaginatedResponse, chatMessageSchema } from 'pl-api';
+import { useCallback, useMemo } from 'react';
 import * as v from 'valibot';
 
 import { importEntities } from '@/actions/importer';
@@ -211,8 +212,7 @@ const useChatActions = (chatId: string) => {
       reOrderChatListItems();
     },
   });
-  const deleteChatMessage = (chatMessageId: string) =>
-    client.chats.deleteChatMessage(chatId, chatMessageId);
+  const deleteChatMessage = useCallback((chatMessageId: string) => client.chats.deleteChatMessage(chatId, chatMessageId), [chatId]);
 
   const deleteChat = useMutation({
     mutationFn: () => client.chats.deleteChat(chatId),
@@ -223,12 +223,12 @@ const useChatActions = (chatId: string) => {
     },
   });
 
-  return {
+  return useMemo(() => ({
     createChatMessage,
     deleteChat,
     deleteChatMessage,
     markChatAsRead,
-  };
+  }), [createChatMessage, deleteChat, deleteChatMessage, markChatAsRead]);
 };
 
 export { ChatKeys, useChat, useChatActions, useChats, useChatMessages };

packages/pl-fe/src/styles/new/chats.scss

@@ -30,6 +30,7 @@
     align-items: center;
     justify-content: space-between;
     height: 4rem;
+    min-height: 4rem;
     border-top-left-radius: 0.75rem;
     border-top-right-radius: 0.75rem;
     padding: 0.75rem 1rem;
@@ -43,6 +44,12 @@
       flex-direction: row;
       align-items: center;
       gap: 0.25rem;
+      overflow: hidden;
+
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     &__title div:first-child,