Cleanup responsive breakpoints

.changeset/selfish-lemons-behave.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Cleanup responsive breakpoints

src/components/embed-types/common.tsx

@@ -1,7 +1,6 @@
 import { Box, Image, ImageProps, Link, useDisclosure } from "@chakra-ui/react";
 import appSettings from "../../services/settings/app-settings";
 import { ImageGalleryLink } from "../image-gallery";
-import { useIsMobile } from "../../hooks/use-is-mobile";
 import { useTrusted } from "../../providers/trust";
 import OpenGraphCard from "../open-graph-card";
 
@@ -28,7 +27,6 @@ const BlurredImage = (props: ImageProps) => {
 };
 
 const EmbeddedImage = ({ src }: { src: string }) => {
-  const isMobile = useIsMobile();
   const trusted = useTrusted();
   const ImageComponent = trusted || !appSettings.value.blurImages ? Image : BlurredImage;
   const thumbnail = appSettings.value.imageProxy
@@ -37,7 +35,7 @@ const EmbeddedImage = ({ src }: { src: string }) => {
 
   return (
     <ImageGalleryLink href={src} target="_blank" display="block" mx="-2">
-      <ImageComponent src={thumbnail} cursor="pointer" maxH={isMobile ? "80vh" : "35vh"} mx={isMobile ? "auto" : "0"} />
+      <ImageComponent src={thumbnail} cursor="pointer" maxH={["initial", "35vh"]} mx={["auto", 0]} />
     </ImageGalleryLink>
   );
 };

src/components/layout/index.tsx

@@ -1,32 +1,31 @@
 import React from "react";
-import { Container, Flex } from "@chakra-ui/react";
+import { Container, Flex, useBreakpointValue } from "@chakra-ui/react";
 import { ErrorBoundary } from "../error-boundary";
 
-import { useIsMobile } from "../../hooks/use-is-mobile";
 import { ReloadPrompt } from "../reload-prompt";
 import DesktopSideNav from "./desktop-side-nav";
 import MobileBottomNav from "./mobile-bottom-nav";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  const isMobile = useIsMobile();
+  const showSideNav = useBreakpointValue({ base: true, md: false });
 
   return (
     <>
       <ReloadPrompt mb="2" />
       <Container size="lg" display="flex" padding="0" gap="4" alignItems="flex-start">
-        {!isMobile && <DesktopSideNav position="sticky" top="0" />}
+        {!showSideNav && <DesktopSideNav position="sticky" top="0" />}
         <Flex
           flexGrow={1}
           direction="column"
           w="full"
           overflowX="hidden"
           overflowY="visible"
-          pb={isMobile ? "14" : 0}
+          pb={showSideNav ? "14" : 0}
           minH="50vh"
         >
           <ErrorBoundary>{children}</ErrorBoundary>
         </Flex>
-        {isMobile && (
+        {showSideNav && (
           <MobileBottomNav
             position="fixed"
             bottom="0"

src/components/note/index.tsx

@@ -9,7 +9,6 @@ import {
   CardHeader,
   CardProps,
   Flex,
-  Heading,
   IconButton,
   Link,
 } from "@chakra-ui/react";
@@ -18,7 +17,6 @@ import { UserAvatarLink } from "../user-avatar-link";
 
 import { NoteMenu } from "./note-menu";
 import { EventRelays } from "./note-relays";
-import { useIsMobile } from "../../hooks/use-is-mobile";
 import { UserLink } from "../user-link";
 import { UserDnsIdentityIcon } from "../user-dns-identity-icon";
 import ReactionButton from "./buttons/reaction-button";
@@ -41,7 +39,6 @@ export type NoteProps = {
   variant?: CardProps["variant"];
 };
 export const Note = React.memo(({ event, variant = "outline" }: NoteProps) => {
-  const isMobile = useIsMobile();
   const { showReactions, showSignatureVerification } = useSubject(appSettings);
 
   // if there is a parent intersection observer, register this card
@@ -57,7 +54,7 @@ export const Note = React.memo(({ event, variant = "outline" }: NoteProps) => {
         <Card variant={variant} ref={ref}>
           <CardHeader padding="2">
             <Flex flex="1" gap="2" alignItems="center" wrap="wrap">
-              <UserAvatarLink pubkey={event.pubkey} size={isMobile ? "xs" : "sm"} />
+              <UserAvatarLink pubkey={event.pubkey} size={["xs", "sm"]} />
               <UserLink pubkey={event.pubkey} isTruncated fontWeight="bold" fontSize="lg" />
               <UserDnsIdentityIcon pubkey={event.pubkey} onlyIcon />
               <Flex grow={1} />

src/components/timeline-page/generic-note-timeline/repost-note.tsx

@@ -13,12 +13,16 @@ import { TrustProvider } from "../../../providers/trust";
 import { safeJson } from "../../../helpers/parse";
 import { useReadRelayUrls } from "../../../hooks/use-client-relays";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
+import { validateEvent } from "nostr-tools";
 
 function parseHardcodedNoteContent(event: NostrEvent) {
   const json = safeJson(event.content, null);
+  if (!json) return null;
 
-  // TODO: disabled until signature verification can be done in another thread
-  // if (json && !verifySignature(json)) return null;
+  // ensure the note has tags
+  json.tags = json.tags || [];
+
+  validateEvent(json);
 
   return (json as NostrEvent) ?? null;
 }

src/components/timeline-page/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from "react";
-import { Flex, Grid } from "@chakra-ui/react";
+import { Flex, Grid, SimpleGrid } from "@chakra-ui/react";
 import IntersectionObserverProvider from "../../providers/intersection-observer";
 import GenericNoteTimeline from "./generic-note-timeline";
 import { ImageGalleryProvider } from "../image-gallery";
@@ -43,9 +43,9 @@ export default function TimelinePage({ timeline, header }: { timeline: TimelineL
       case "images":
         return (
           <ImageGalleryProvider>
-            <Grid templateColumns={`repeat(${isMobile ? 2 : 5}, 1fr)`} gap="4">
+            <SimpleGrid minChildWidth={["full", "15rem"]} gap="4">
               <MediaTimeline timeline={timeline} />
-            </Grid>
+            </SimpleGrid>
           </ImageGalleryProvider>
         );
       default:

src/views/profile/edit.tsx

@@ -19,7 +19,6 @@ import { isLNURL } from "../../helpers/lnurl";
 import { Kind0ParsedContent } from "../../helpers/user-metadata";
 import { useReadRelayUrls, useWriteRelayUrls } from "../../hooks/use-client-relays";
 import { useCurrentAccount } from "../../hooks/use-current-account";
-import { useIsMobile } from "../../hooks/use-is-mobile";
 import { useUserMetadata } from "../../hooks/use-user-metadata";
 import dnsIdentityService from "../../services/dns-identity";
 import signingService from "../../services/signing";
@@ -51,7 +50,6 @@ type MetadataFormProps = {
 
 const MetadataForm = ({ defaultValues, onSubmit }: MetadataFormProps) => {
   const account = useCurrentAccount()!;
-  const isMobile = useIsMobile();
   const {
     register,
     reset,
@@ -68,7 +66,7 @@ const MetadataForm = ({ defaultValues, onSubmit }: MetadataFormProps) => {
   }, [defaultValues]);
 
   return (
-    <Flex direction="column" pb="4" px={isMobile ? "2" : 0}>
+    <Flex direction="column" pb="4" px={["2",0]}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Flex direction="column" gap="2" pt="4">
           <Flex gap="2">

src/views/streams/index.tsx

@@ -66,7 +66,7 @@ function StreamsPage() {
         <RelaySelectionButton ml="auto" />
       </Flex>
       <IntersectionObserverProvider callback={callback}>
-        <SimpleGrid minChildWidth="25rem" spacing="2">
+        <SimpleGrid minChildWidth="20rem" spacing="2">
           {streams.map((stream) => (
             <StreamCard key={stream.event.id} stream={stream} />
           ))}

src/views/user/about.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useOutletContext } from "react-router-dom";
 import dayjs from "dayjs";
 import {
@@ -38,7 +37,6 @@ import { useUserContacts } from "../../hooks/use-user-contacts";
 import userTrustedStatsService from "../../services/user-trusted-stats";
 import { readablizeSats } from "../../helpers/bolt11";
 import { UserAvatar } from "../../components/user-avatar";
-import { useIsMobile } from "../../hooks/use-is-mobile";
 import { getUserDisplayName } from "../../helpers/user-metadata";
 import { useSharableProfileId } from "../../hooks/use-shareable-profile-id";
 
@@ -52,7 +50,6 @@ function buildDescriptionContent(description: string) {
 }
 
 export default function UserAboutTab() {
-  const isMobile = useIsMobile();
   const expanded = useDisclosure();
   const { pubkey } = useOutletContext() as { pubkey: string };
   const contextRelays = useAdditionalRelayContext();
@@ -94,12 +91,12 @@ export default function UserAboutTab() {
           left="0"
           p="2"
           position="absolute"
-          direction={isMobile ? "column" : "row"}
+          direction={["column", "row"]}
           bg="linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, var(--chakra-colors-chakra-body-bg) 100%)"
           gap="2"
-          alignItems={isMobile ? "flex-start" : "flex-end"}
+          alignItems={["flex-start", "flex-end"]}
         >
-          <UserAvatar pubkey={pubkey} size={isMobile ? "lg" : "xl"} noProxy />
+          <UserAvatar pubkey={pubkey} size={["lg", "lg", "xl"]} noProxy />
           <Box overflow="hidden">
             <Heading isTruncated>{getUserDisplayName(metadata, pubkey)}</Heading>
             <UserDnsIdentityIcon pubkey={pubkey} />
@@ -115,7 +112,11 @@ export default function UserAboutTab() {
           position="absolute"
         />
       </Box>
-      {aboutContent && <Box whiteSpace="pre">{aboutContent}</Box>}
+      {aboutContent && (
+        <Box whiteSpace="pre-wrap" px="2">
+          {aboutContent}
+        </Box>
+      )}
 
       <Flex gap="2" px="2" direction="column">
         {metadata?.lud16 && (

src/views/user/followers.tsx

@@ -47,7 +47,7 @@ export default function UserFollowersTab() {
 
   return (
     <IntersectionObserverProvider callback={callback}>
-      <SimpleGrid minChildWidth="4in" spacing="2" py="2">
+      <SimpleGrid minChildWidth={["full", "4in"]} spacing="2" py="2">
         {followers.map((event) => (
           <FollowerItem key={event.pubkey} event={event} />
         ))}

src/views/user/following.tsx

@@ -17,7 +17,7 @@ export default function UserFollowingTab() {
   if (!contacts) return <Spinner />;
 
   return (
-    <SimpleGrid minChildWidth="4in" spacing="2" py="2">
+    <SimpleGrid minChildWidth={["full", "4in"]} spacing="2" py="2">
       {people.map((pubkey) => (
         <UserCard key={pubkey} pubkey={pubkey} relay={contacts?.contactRelay[pubkey]} />
       ))}

src/views/user/zaps.tsx

@@ -18,6 +18,8 @@ import TimelineActionAndStatus from "../../components/timeline-page/timeline-act
 import useSubject from "../../hooks/use-subject";
 import IntersectionObserverProvider, { useRegisterIntersectionEntity } from "../../providers/intersection-observer";
 import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
+import { EmbedableContent, embedUrls } from "../../helpers/embeds";
+import { embedNostrLinks, renderGenericUrl } from "../../components/embed-types";
 
 const Zap = ({ zapEvent }: { zapEvent: NostrEvent }) => {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -27,6 +29,10 @@ const Zap = ({ zapEvent }: { zapEvent: NostrEvent }) => {
   try {
     const { request, payment, eventId } = parseZapEvent(zapEvent);
 
+    let embedContent: EmbedableContent = [request.content];
+    embedContent = embedNostrLinks(embedContent);
+    embedContent = embedUrls(embedContent, [renderGenericUrl]);
+
     return (
       <Box
         borderWidth="1px"
@@ -52,7 +58,7 @@ const Zap = ({ zapEvent }: { zapEvent: NostrEvent }) => {
           )}
           <Text ml="auto">{dayjs.unix(request.created_at).fromNow()}</Text>
         </Flex>
-        {request.content && <Text>{request.content}</Text>}
+        {embedContent && <Box>{embedContent}</Box>}
       </Box>
     );
   } catch (e) {