feat: added open chat button in trading views

Author: marcelpanse

frontend/src/components/ui/friend-id-display.tsx

@@ -1,4 +1,4 @@
-import { Copy } from 'lucide-react'
+import { Copy, MessageSquare } from 'lucide-react'
 import type { FC } from 'react'
 import { useToast } from '@/hooks/use-toast.ts'
 import { cn, formatFriendId } from '@/lib/utils'
@@ -9,9 +9,10 @@ interface FriendIdDisplayProps {
   className?: string
   showCopyButton?: boolean
   showFriendId?: boolean
+  onChat?: () => void
 }
 
-export const FriendIdDisplay: FC<FriendIdDisplayProps> = ({ friendId, className = '', showFriendId = true, showCopyButton = true }) => {
+export const FriendIdDisplay: FC<FriendIdDisplayProps> = ({ friendId, className = '', showFriendId = true, showCopyButton = true, onChat }) => {
   const { toast } = useToast()
 
   const handleCopy = async () => {
@@ -41,6 +42,7 @@ export const FriendIdDisplay: FC<FriendIdDisplayProps> = ({ friendId, className
       {showFriendId && <span className="font-mono">{formatFriendId(friendId)}</span>}
       {showCopyButton && (
         <Button
+          title="copy id"
           variant="ghost"
           size="icon"
           onClick={handleCopy}
@@ -50,6 +52,18 @@ export const FriendIdDisplay: FC<FriendIdDisplayProps> = ({ friendId, className
           <Copy className="h-2.5 w-2.5" />
         </Button>
       )}
+      {onChat && (
+        <Button
+          title="open chat"
+          variant="ghost"
+          size="icon"
+          onClick={onChat}
+          className="h-4 w-4 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+          aria-label="Open chat"
+        >
+          <MessageSquare className="h-2.5 w-2.5" />
+        </Button>
+      )}
     </span>
   )
 }

frontend/src/pages/trade/TradeWith.tsx

@@ -6,6 +6,7 @@ import { Spinner } from '@/components/Spinner'
 import { Button } from '@/components/ui/button'
 import { FriendIdDisplay } from '@/components/ui/friend-id-display'
 import { Switch } from '@/components/ui/switch'
+import { useChatContext } from '@/context/ChatContext'
 import { useToast } from '@/hooks/use-toast'
 import { getCardByInternalId, tradeableExpansions } from '@/lib/CardsDB.ts'
 import { getExtraCards, getNeededCards } from '@/lib/utils'
@@ -40,6 +41,7 @@ function TradeWith() {
   const { data: friends = [] } = useFriends()
   const manageFriend = useManageFriend()
   const { toast } = useToast()
+  const { openChat } = useChatContext()
 
   const [viewHistory, setViewHistory] = useState(false)
   const [pageHistory, setPageHistory] = useState(0)
@@ -121,7 +123,10 @@ function TradeWith() {
           <span className="text-2xl font-light">{t('tradingWith')}</span>
           <span className="text-2xl font-bold"> {friendAccount.username} </span>
           <span className="block sm:inline text-sm">
-            <FriendIdDisplay friendId={friendAccount.friend_id} />
+            <FriendIdDisplay
+              friendId={friendAccount.friend_id}
+              onChat={isAlreadyFriend ? () => openChat(friendAccount.friend_id, friendAccount.username || friendAccount.friend_id) : undefined}
+            />
           </span>
         </h1>
         <div className="flex flex-col-reverse sm:flex-row gap-2">

frontend/src/pages/trade/components/TradePartner.tsx

@@ -6,8 +6,10 @@ import { Spinner } from '@/components/Spinner'
 import { Button } from '@/components/ui/button.tsx'
 import { FriendIdDisplay } from '@/components/ui/friend-id-display.tsx'
 import { Switch } from '@/components/ui/switch.tsx'
+import { useChatContext } from '@/context/ChatContext'
 import TradeList from '@/pages/trade/components/TradeList.tsx'
 import { usePublicAccount } from '@/services/account/useAccount.ts'
+import { useFriends } from '@/services/friends/useFriends'
 import { useAllTrades } from '@/services/trade/useTrade'
 import type { TradeRow } from '@/types'
 
@@ -20,6 +22,9 @@ function TradePartner({ friendId, activeTrades }: TradePartnerProps) {
   const { t } = useTranslation(['trade-matches', 'common'])
 
   const { data: friendAccount, isLoading: isLoadingAccount } = usePublicAccount(friendId)
+  const { data: friends = [] } = useFriends()
+  const { openChat } = useChatContext()
+  const isAlreadyFriend = friends.some((f) => f.friend_id === friendId)
 
   const [viewHistory, setViewHistory] = useState(false)
   const [pageHistory, setPageHistory] = useState(0)
@@ -35,7 +40,14 @@ function TradePartner({ friendId, activeTrades }: TradePartnerProps) {
         <p>
           <span className="text-md">{t('tradingWith')}</span>
           <span className="text-md font-bold"> {friendAccount?.username || 'unknown'} </span>
-          {friendAccount && <FriendIdDisplay friendId={friendAccount.friend_id} showFriendId={false} className="ml-1" />}
+          {friendAccount && (
+            <FriendIdDisplay
+              friendId={friendAccount.friend_id}
+              showFriendId={false}
+              className="ml-1"
+              onChat={isAlreadyFriend ? () => openChat(friendAccount.friend_id, friendAccount.username || friendAccount.friend_id) : undefined}
+            />
+          )}
         </p>
         <span className="flex gap-4">
           <label htmlFor={`history-${friendId}`} className="my-auto flex items-center">