diff --git a/.changeset/twelve-chefs-kiss.md b/.changeset/twelve-chefs-kiss.md new file mode 100644 index 000000000..06bd2a89b --- /dev/null +++ b/.changeset/twelve-chefs-kiss.md @@ -0,0 +1,5 @@ +--- +"nostrudel": minor +--- + +Show articles in lists diff --git a/src/components/embed-event/event-types/embedded-list.tsx b/src/components/embed-event/event-types/embedded-list.tsx index 57bb1df2a..b69426c99 100644 --- a/src/components/embed-event/event-types/embedded-list.tsx +++ b/src/components/embed-event/event-types/embedded-list.tsx @@ -1,18 +1,16 @@ -import { AvatarGroup, Card, CardBody, CardHeader, CardProps, Flex, Heading, Link, Text } from "@chakra-ui/react"; +import { Card, CardBody, CardHeader, CardProps, Flex, Heading, Link, Text } from "@chakra-ui/react"; import { Link as RouterLink } from "react-router-dom"; import { NostrEvent } from "../../../types/nostr-event"; -import { getEventsFromList, getListName, getPubkeysFromList, isSpecialListKind } from "../../../helpers/nostr/lists"; +import { getListName, isSpecialListKind } from "../../../helpers/nostr/lists"; import { createCoordinate } from "../../../services/replaceable-event-requester"; import { getSharableEventAddress } from "../../../helpers/nip19"; import { UserAvatarLink } from "../../user-avatar-link"; import { UserLink } from "../../user-link"; -import { NoteLink } from "../../note-link"; import ListFeedButton from "../../../views/lists/components/list-feed-button"; +import { ListCardContent } from "../../../views/lists/components/list-card"; export default function EmbeddedList({ list: list, ...props }: Omit & { list: NostrEvent }) { - const people = getPubkeysFromList(list); - const notes = getEventsFromList(list); const link = isSpecialListKind(list.kind) ? createCoordinate(list.kind, list.pubkey) : getSharableEventAddress(list); return ( @@ -31,20 +29,7 @@ export default function EmbeddedList({ list: list, ...props }: Omit - {people.length > 0 && ( - - {people.map(({ pubkey, relay }) => ( - - ))} - - )} - {notes.length > 0 && ( - - {notes.map(({ id, relay }) => ( - - ))} - - )} + ); diff --git a/src/views/lists/components/list-card.tsx b/src/views/lists/components/list-card.tsx index 671c24f45..625de5d70 100644 --- a/src/views/lists/components/list-card.tsx +++ b/src/views/lists/components/list-card.tsx @@ -11,9 +11,10 @@ import { Flex, Heading, Link, + LinkProps, Text, } from "@chakra-ui/react"; -import { nip19 } from "nostr-tools"; +import { Kind, nip19 } from "nostr-tools"; import { UserAvatarLink } from "../../../components/user-avatar-link"; import { UserLink } from "../../../components/user-link"; @@ -36,13 +37,99 @@ import { getEventUID } from "../../../helpers/nostr/events"; import ListMenu from "./list-menu"; import Timestamp from "../../../components/timestamp"; import { COMMUNITY_DEFINITION_KIND } from "../../../helpers/nostr/communities"; +import { getArticleTitle } from "../../../helpers/nostr/long-form"; +import { buildAppSelectUrl } from "../../../helpers/nostr/apps"; -function ListCardRender({ list, ...props }: Omit & { list: NostrEvent }) { +function ArticleLinkLoader({ pointer, ...props }: { pointer: nip19.AddressPointer } & Omit) { + const article = useReplaceableEvent(pointer); + if (article) return ; + return null; +} +function ArticleLink({ article, ...props }: { article: NostrEvent } & Omit) { + const title = getArticleTitle(article); + const naddr = getSharableEventAddress(article); + + return ( + + {title} + + ); +} + +export function ListCardContent({ list, ...props }: Omit & { list: NostrEvent }) { const people = getPubkeysFromList(list); const notes = getEventsFromList(list); const coordinates = getParsedCordsFromList(list); const communities = coordinates.filter((cord) => cord.kind === COMMUNITY_DEFINITION_KIND); + const articles = coordinates.filter((cord) => cord.kind === Kind.Article); const references = getReferencesFromList(list); + + return ( + <> + {people.length > 0 && ( + <> + People ({people.length}): + + {people.map(({ pubkey, relay }) => ( + + ))} + + + )} + {notes.length > 0 && ( + <> + Notes ({notes.length}): + + {notes.slice(0, 4).map(({ id, relay }) => ( + + ))} + + + )} + {references.length > 0 && ( + <> + References ({references.length}) + + {references.slice(0, 3).map(({ url, petname }) => ( + + {petname || url} + + ))} + + + )} + {communities.length > 0 && ( + <> + Communities ({communities.length}): + + {communities.map((pointer) => ( + + {pointer.identifier} + + ))} + + + )} + {articles.length > 0 && ( + <> + Articles ({articles.length}): + + {articles.slice(0, 4).map((pointer) => ( + + ))} + + + )} + + ); +} + +function ListCardRender({ list, ...props }: Omit & { list: NostrEvent }) { const link = isSpecialListKind(list.kind) ? createCoordinate(list.kind, list.pubkey) : getSharableEventAddress(list); // if there is a parent intersection observer, register this card @@ -62,54 +149,7 @@ function ListCardRender({ list, ...props }: Omit & { list - {people.length > 0 && ( - <> - People ({people.length}): - - {people.map(({ pubkey, relay }) => ( - - ))} - - - )} - {notes.length > 0 && ( - <> - Notes ({notes.length}): - - {notes.slice(0, 4).map(({ id, relay }) => ( - - ))} - - - )} - {references.length > 0 && ( - <> - References ({references.length}) - - {references.slice(0, 3).map(({ url, petname }) => ( - - {petname || url} - - ))} - - - )} - {communities.length > 0 && ( - <> - Communities ({communities.length}): - - {communities.map((pointer) => ( - - {pointer.identifier} - - ))} - - - )} + Created by: diff --git a/src/views/lists/list-details.tsx b/src/views/lists/list-details.tsx index c2ebe73e4..ffff03761 100644 --- a/src/views/lists/list-details.tsx +++ b/src/views/lists/list-details.tsx @@ -1,8 +1,8 @@ import { useNavigate, useParams } from "react-router-dom"; -import { nip19 } from "nostr-tools"; +import { Kind, nip19 } from "nostr-tools"; import { UserLink } from "../../components/user-link"; -import { Button, Divider, Flex, Heading, SimpleGrid, Spacer } from "@chakra-ui/react"; +import { Button, Flex, Heading, SimpleGrid, Spacer } from "@chakra-ui/react"; import { ArrowLeftSIcon } from "../../components/icons"; import { useCurrentAccount } from "../../hooks/use-current-account"; import { useDeleteEventContext } from "../../providers/delete-event-provider"; @@ -26,6 +26,8 @@ import ListFeedButton from "./components/list-feed-button"; import VerticalPageLayout from "../../components/vertical-page-layout"; import { COMMUNITY_DEFINITION_KIND } from "../../helpers/nostr/communities"; import { EmbedEventPointer } from "../../components/embed-event"; +import { encodePointer } from "../../helpers/nip19"; +import { DecodeResult } from "nostr-tools/lib/nip19"; function useListCoordinate() { const { addr } = useParams() as { addr: string }; @@ -61,6 +63,7 @@ export default function ListDetailsView() { const notes = getEventsFromList(list); const coordinates = getParsedCordsFromList(list); const communities = coordinates.filter((cord) => cord.kind === COMMUNITY_DEFINITION_KIND); + const articles = coordinates.filter((cord) => cord.kind === Kind.Article); const references = getReferencesFromList(list); return ( @@ -88,8 +91,7 @@ export default function ListDetailsView() { {people.length > 0 && ( <> - People - + People {people.map(({ pubkey, relay }) => ( @@ -100,8 +102,7 @@ export default function ListDetailsView() { {notes.length > 0 && ( <> - Notes - + Notes {notes.map(({ id, relay }) => ( @@ -114,8 +115,7 @@ export default function ListDetailsView() { {references.length > 0 && ( <> - References - + References {references.map(({ url, petname }) => ( @@ -131,8 +131,7 @@ export default function ListDetailsView() { {communities.length > 0 && ( <> - Communities - + Communities {communities.map((pointer) => ( @@ -140,6 +139,18 @@ export default function ListDetailsView() { )} + + {articles.length > 0 && ( + <> + Articles + + {articles.map((pointer) => { + const decode: DecodeResult = { type: "naddr", data: pointer }; + return ; + })} + + + )} ); }