add media tab

.changeset/strange-turtles-love.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add media tab in user view

src/app.tsx

@@ -34,6 +34,7 @@ import DirectMessageChatView from "./views/dm/chat";
 import NostrLinkView from "./views/link";
 import UserReportsTab from "./views/user/reports";
 import appSettings from "./services/app-settings";
+import UserMediaTab from "./views/user/media";
 // code split search view because QrScanner library is 400kB
 const SearchView = React.lazy(() => import("./views/search"));
 
@@ -91,6 +92,7 @@ const router = createBrowserRouter([
         children: [
           { path: "", element: <UserNotesTab /> },
           { path: "notes", element: <UserNotesTab /> },
+          { path: "media", element: <UserMediaTab /> },
           { path: "zaps", element: <UserZapsTab /> },
           { path: "followers", element: <UserFollowersTab /> },
           { path: "following", element: <UserFollowingTab /> },

src/components/debug-modals/note-debug-modal.tsx

@@ -3,8 +3,9 @@ import { ModalProps } from "@chakra-ui/react";
 import { Bech32Prefix, hexToBech32 } from "../../helpers/nip19";
 import { getReferences } from "../../helpers/nostr-event";
 import { NostrEvent } from "../../types/nostr-event";
-import RawJson from "./raw-block";
+import RawJson from "./raw-json";
 import RawValue from "./raw-value";
+import RawPre from "./raw-pre";
 
 export default function NoteDebugModal({ event, ...props }: { event: NostrEvent } & Omit<ModalProps, "children">) {
   return (
@@ -16,7 +17,8 @@ export default function NoteDebugModal({ event, ...props }: { event: NostrEvent
           <Flex gap="2" direction="column">
             <RawValue heading="Event Id" value={event.id} />
             <RawValue heading="Encoded id (NIP-19)" value={hexToBech32(event.id, Bech32Prefix.Note) ?? "failed"} />
-            <RawJson heading="Raw" json={event} />
+            <RawPre heading="Content" value={event.content} />
+            <RawJson heading="JSON" json={event} />
             <RawJson heading="References" json={getReferences(event)} />
           </Flex>
         </ModalBody>

src/components/debug-modals/raw-pre.tsx

@@ -0,0 +1,16 @@
+import { Box, Code, Flex, Heading } from "@chakra-ui/react";
+
+export default function RawPre({ value, heading }: { heading: string; value: string }) {
+  return (
+    <Box>
+      <Heading size="sm" mb="2">
+        {heading}
+      </Heading>
+      <Flex gap="2">
+        <Code whiteSpace="pre" overflowX="auto" width="100%">
+          {value}
+        </Code>
+      </Flex>
+    </Box>
+  );
+}

src/components/debug-modals/user-debug-modal.tsx

@@ -4,7 +4,7 @@ import { ModalProps } from "@chakra-ui/react";
 import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip19";
 import { useUserMetadata } from "../../hooks/use-user-metadata";
 import RawValue from "./raw-value";
-import RawJson from "./raw-block";
+import RawJson from "./raw-json";
 
 export default function UserDebugModal({ pubkey, ...props }: { pubkey: string } & Omit<ModalProps, "children">) {
   const npub = useMemo(() => normalizeToBech32(pubkey, Bech32Prefix.Pubkey), [pubkey]);

src/components/embed-types/common.tsx

@@ -3,6 +3,7 @@ import { EmbedableContent, embedJSX } from "../../helpers/embeds";
 import appSettings from "../../services/app-settings";
 import { ImageGalleryLink } from "../image-gallery";
 import { useIsMobile } from "../../hooks/use-is-mobile";
+import { matchImageUrls } from "../../helpers/regexp";
 
 const BlurredImage = (props: ImageProps) => {
   const { isOpen, onOpen } = useDisclosure();
@@ -30,8 +31,7 @@ const EmbeddedImage = ({ src, blue }: { src: string; blue: boolean }) => {
 // 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,
+    regexp: matchImageUrls,
     render: (match) => <EmbeddedImage blue={trusted} src={match[0]} />,
     name: "Image",
   });

src/helpers/regexp.ts

@@ -1 +1,3 @@
 export const mentionNpubOrNote = /@?((npub1|note1)[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58})/gi;
+export const matchImageUrls =
+  /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,6})((?:\/[\+~%\/\.\w\-_]*)?\.(?:svg|gif|png|jpg|jpeg|webp|avif))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i;

src/views/user/index.tsx

@@ -43,6 +43,7 @@ import { RelayFavicon } from "../../components/relay-favicon";
 
 const tabs = [
   { label: "Notes", path: "notes" },
+  { label: "Media", path: "media" },
   { label: "Zaps", path: "zaps" },
   { label: "Followers", path: "followers" },
   { label: "Following", path: "following" },

src/views/user/media.tsx

@@ -0,0 +1,75 @@
+import { AspectRatio, Box, Button, Flex, Grid, IconButton, Image, Spinner } from "@chakra-ui/react";
+import moment from "moment";
+import { Link as RouterLink, useOutletContext } from "react-router-dom";
+import { truncatedId } from "../../helpers/nostr-event";
+import { useTimelineLoader } from "../../hooks/use-timeline-loader";
+import { useAdditionalRelayContext } from "../../providers/additional-relay-context";
+import { useMemo } from "react";
+import { matchImageUrls } from "../../helpers/regexp";
+import { useIsMobile } from "../../hooks/use-is-mobile";
+import { ImageGalleryLink, ImageGalleryProvider } from "../../components/image-gallery";
+import { ExternalLinkIcon } from "../../components/icons";
+import { getSharableNoteId } from "../../helpers/nip19";
+
+const matchAllImages = new RegExp(matchImageUrls, "ig");
+
+const UserMediaTab = () => {
+  const isMobile = useIsMobile();
+  const { pubkey } = useOutletContext() as { pubkey: string };
+  const contextRelays = useAdditionalRelayContext();
+
+  // TODO: move this out of a hook so its not being re-created every time
+  const { events, loading, loadMore } = useTimelineLoader(
+    `${truncatedId(pubkey)}-media`,
+    contextRelays,
+    { authors: [pubkey], kinds: [1] },
+    { pageSize: moment.duration(1, "week").asSeconds(), startLimit: 40 }
+  );
+
+  const images = useMemo(() => {
+    var images: { eventId: string; src: string; index: number }[] = [];
+
+    for (const event of events) {
+      const urls = event.content.matchAll(matchAllImages);
+
+      let i = 0;
+      for (const url of urls) {
+        images.push({ eventId: event.id, src: url[0], index: i++ });
+      }
+    }
+
+    return images;
+  }, [events]);
+
+  return (
+    <Flex direction="column" gap="2" pr="2" pl="2">
+      <ImageGalleryProvider>
+        <Grid templateColumns={`repeat(${isMobile ? 2 : 5}, 1fr)`} gap="4">
+          {images.map((image) => (
+            <ImageGalleryLink key={image.eventId + "-" + image.index} href={image.src} position="relative">
+              <Box
+                aspectRatio={1}
+                backgroundImage={`url(${image.src})`}
+                backgroundSize="cover"
+                backgroundPosition="center"
+              />
+              <IconButton
+                as={RouterLink}
+                icon={<ExternalLinkIcon />}
+                aria-label="Open note"
+                to={`/n/${getSharableNoteId(image.eventId)}`}
+                position="absolute"
+                right="2"
+                top="2"
+                size="sm"
+              />
+            </ImageGalleryLink>
+          ))}
+        </Grid>
+      </ImageGalleryProvider>
+      {loading ? <Spinner ml="auto" mr="auto" mt="8" mb="8" /> : <Button onClick={() => loadMore()}>Load More</Button>}
+    </Flex>
+  );
+};
+
+export default UserMediaTab;