trim note content

.changeset/good-mails-play.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Trim note content

src/components/embed-types/common.tsx

@@ -2,6 +2,7 @@ import { Box, Image, ImageProps, Link, useDisclosure } from "@chakra-ui/react";
 import { EmbedableContent, embedJSX } from "../../helpers/embeds";
 import appSettings from "../../services/app-settings";
 import { ImageGalleryLink } from "../image-gallery";
+import { useIsMobile } from "../../hooks/use-is-mobile";
 
 const BlurredImage = (props: ImageProps) => {
   const { isOpen, onOpen } = useDisclosure();
@@ -12,24 +13,26 @@ const BlurredImage = (props: ImageProps) => {
   );
 };
 
+const EmbeddedImage = ({ src, blue }: { src: string; blue: boolean }) => {
+  const isMobile = useIsMobile();
+  const ImageComponent = blue || !appSettings.value.blurImages ? Image : BlurredImage;
+  const thumbnail = appSettings.value.imageProxy
+    ? new URL(`/256,fit/${src}`, appSettings.value.imageProxy).toString()
+    : src;
+
+  return (
+    <ImageGalleryLink href={src} target="_blank" display="block" mx="-2">
+      <ImageComponent src={thumbnail} cursor="pointer" maxH={isMobile ? "80vh" : "25vh"} mx={isMobile ? "auto" : "0"} />
+    </ImageGalleryLink>
+  );
+};
+
 // note1n06jceulg3gukw836ghd94p0ppwaz6u3mksnnz960d8vlcp2fnqsgx3fu9
 export function embedImages(content: EmbedableContent, trusted = false) {
   return embedJSX(content, {
     regexp:
       /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,6})((?:\/[\+~%\/\.\w\-_]*)?\.(?:svg|gif|png|jpg|jpeg|webp|avif))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i,
-    render: (match) => {
-      const ImageComponent = trusted || !appSettings.value.blurImages ? Image : BlurredImage;
-      const thumbnail = appSettings.value.imageProxy
-        ? new URL(`/256,fit/${match[0]}`, appSettings.value.imageProxy).toString()
-        : match[0];
-      const src = match[0];
-
-      return (
-        <ImageGalleryLink href={src} target="_blank" display="block" mx="-2">
-          <ImageComponent src={thumbnail} cursor="pointer" maxW="30rem" w="full" />
-        </ImageGalleryLink>
-      );
-    },
+    render: (match) => <EmbeddedImage blue={trusted} src={match[0]} />,
     name: "Image",
   });
 }

src/components/embeded-note.tsx

@@ -41,7 +41,7 @@ const EmbeddedNote = ({ note }: { note: NostrEvent }) => {
           </Link>
         </Flex>
       </CardHeader>
-      <CardBody px="2" pt="0" pb="2">
+      <CardBody p="0">
         <NoteContents event={note} trusted={following.includes(note.pubkey)} maxHeight={200} />
       </CardBody>
     </Card>

src/components/note/note-contents.tsx

@@ -23,7 +23,7 @@ import {
 import { ImageGalleryProvider } from "../image-gallery";
 
 function buildContents(event: NostrEvent | DraftNostrEvent, trusted: boolean = false) {
-  let content: EmbedableContent = [event.content];
+  let content: EmbedableContent = [event.content.trim()];
 
   content = embedLightningInvoice(content);
   content = embedTweet(content);