cleanup chat messages a little

src/views/messages/chat.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Button, Card, CardBody, Flex, IconButton, Textarea, useToast } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { Kind } from "nostr-tools";
-import { Link, Navigate, useParams } from "react-router-dom";
+import { Navigate, useNavigate, useParams } from "react-router-dom";
 
 import { ArrowLeftSIcon } from "../../components/icons";
 import { UserAvatar } from "../../components/user-avatar";
@@ -24,6 +24,7 @@ import NostrPublishAction from "../../classes/nostr-publish-action";
 
 function DirectMessageChatPage({ pubkey }: { pubkey: string }) {
   const toast = useToast();
+  const navigate = useNavigate();
   const account = useCurrentAccount()!;
   const { requestEncrypt, requestSignature } = useSigningContext();
   const [content, setContent] = useState<string>("");
@@ -71,19 +72,12 @@ function DirectMessageChatPage({ pubkey }: { pubkey: string }) {
       <Flex height="100%" overflow="hidden" direction="column">
         <Card size="sm" flexShrink={0}>
           <CardBody display="flex" gap="2" alignItems="center">
-            <IconButton
-              as={Link}
-              variant="ghost"
-              icon={<ArrowLeftSIcon />}
-              aria-label="Back"
-              to="/dm"
-              size={["sm", "md"]}
-            />
-            <UserAvatar pubkey={pubkey} size={["sm", "md"]} />
+            <IconButton variant="ghost" icon={<ArrowLeftSIcon />} aria-label="Back" onClick={() => navigate(-1)} />
+            <UserAvatar pubkey={pubkey} size="sm" />
             <UserLink pubkey={pubkey} />
           </CardBody>
         </Card>
-        <Flex flex={1} overflowX="hidden" overflowY="scroll" direction="column-reverse" gap="4" py="4">
+        <Flex flex={1} overflowX="hidden" overflowY="scroll" direction="column-reverse" gap="2" py="4" px="2">
           {[...messages].map((event) => (
             <Message key={event.id} event={event} />
           ))}

src/views/messages/decrypt-placeholder.tsx

@@ -27,7 +27,7 @@ export default function DecryptPlaceholder({
     return children(decrypted);
   }
   return (
-    <Button variant="text" onClick={decrypt} isLoading={loading} leftIcon={<UnlockIcon />} width="100%">
+    <Button onClick={decrypt} isLoading={loading} leftIcon={<UnlockIcon />} width="full">
       Decrypt
     </Button>
   );

src/views/messages/message.tsx

@@ -30,24 +30,15 @@ export function Message({ event }: { event: NostrEvent } & Omit<CardProps, "chil
   useRegisterIntersectionEntity(ref, getEventUID(event));
 
   return (
-    <Flex direction="column" ref={ref}>
-      <Card size="sm">
-        <CardHeader display="flex" gap="2" alignItems="center" pb="0">
-          <UserAvatar pubkey={event.pubkey} size="xs" />
-          <Heading size="md">
-            <UserLink pubkey={event.pubkey} />
-          </Heading>
-          <Timestamp ml="auto" timestamp={event.created_at} />
-        </CardHeader>
-        <CardBody position="relative">
-          <DecryptPlaceholder
-            data={event.content}
-            pubkey={isOwnMessage ? getMessageRecipient(event) ?? "" : event.pubkey}
-          >
-            {(text) => <MessageContent event={event} text={text} />}
-          </DecryptPlaceholder>
-        </CardBody>
-      </Card>
+    <Flex direction="column" gap="2" ref={ref}>
+      <Flex gap="2" mr="2">
+        <UserAvatar pubkey={event.pubkey} size="xs" />
+        <UserLink pubkey={event.pubkey} fontWeight="bold" />
+        <Timestamp ml="auto" timestamp={event.created_at} />
+      </Flex>
+      <DecryptPlaceholder data={event.content} pubkey={isOwnMessage ? getMessageRecipient(event) ?? "" : event.pubkey}>
+        {(text) => <MessageContent event={event} text={text} />}
+      </DecryptPlaceholder>
     </Flex>
   );
 }