clean up list view a little

src/components/embed-event/event-types/embedded-list.tsx

@@ -2,7 +2,7 @@ import { Card, CardBody, CardHeader, CardProps, Flex, Heading, Link, Text } from
 import { Link as RouterLink } from "react-router-dom";
 
 import { NostrEvent } from "../../../types/nostr-event";
-import { getListName, isSpecialListKind } from "../../../helpers/nostr/lists";
+import { getListDescription, getListName, isSpecialListKind } from "../../../helpers/nostr/lists";
 import { createCoordinate } from "../../../services/replaceable-event-requester";
 import { getSharableEventAddress } from "../../../helpers/nip19";
 import UserAvatarLink from "../../user-avatar-link";
@@ -12,21 +12,25 @@ import { ListCardContent } from "../../../views/lists/components/list-card";
 
 export default function EmbeddedList({ list, ...props }: Omit<CardProps, "children"> & { list: NostrEvent }) {
   const link = isSpecialListKind(list.kind) ? createCoordinate(list.kind, list.pubkey) : getSharableEventAddress(list);
+  const description = getListDescription(list);
 
   return (
     <Card {...props}>
-      <CardHeader display="flex" alignItems="center" p="2" pb="0" gap="2">
-        <Heading size="md">
-          <Link as={RouterLink} to={`/lists/${link}`}>
-            {getListName(list)}
-          </Link>
-        </Heading>
-        <Flex gap="2">
-          <Text>by</Text>
-          <UserAvatarLink pubkey={list.pubkey} size="xs" />
-          <UserLink pubkey={list.pubkey} isTruncated fontWeight="bold" fontSize="lg" />
+      <CardHeader p="2" pb="0">
+        <Flex alignItems="center" gap="2">
+          <Heading size="md">
+            <Link as={RouterLink} to={`/lists/${link}`}>
+              {getListName(list)}
+            </Link>
+          </Heading>
+          <Flex gap="2">
+            <Text>by</Text>
+            <UserAvatarLink pubkey={list.pubkey} size="xs" />
+            <UserLink pubkey={list.pubkey} isTruncated fontWeight="bold" fontSize="lg" />
+          </Flex>
+          <ListFeedButton list={list} ml="auto" size="sm" />
         </Flex>
-        <ListFeedButton list={list} ml="auto" size="sm" />
+        {description && <Text fontStyle="italic">{description}</Text>}
       </CardHeader>
       <CardBody p="2">
         <ListCardContent list={list} />

src/helpers/nostr/lists.ts

@@ -20,6 +20,9 @@ export function getListName(event: NostrEvent) {
     event.tags.find(isDTag)?.[1]
   );
 }
+export function getListDescription(event: NostrEvent) {
+  return event.tags.find((t) => t[0] === "description")?.[1];
+}
 
 export function isJunkList(event: NostrEvent) {
   const name = event.tags.find(isDTag)?.[1];

src/views/lists/components/list-card.tsx

@@ -7,19 +7,19 @@ import {
   CardFooter,
   CardHeader,
   CardProps,
+  Flex,
   Heading,
-  Link,
   LinkBox,
-  LinkProps,
   SimpleGrid,
   Text,
 } from "@chakra-ui/react";
-import { Kind, nip19 } from "nostr-tools";
+import { Kind } from "nostr-tools";
 
 import UserAvatarLink from "../../../components/user-avatar-link";
 import { UserLink } from "../../../components/user-link";
 import {
   getEventsFromList,
+  getListDescription,
   getListName,
   getParsedCordsFromList,
   getPubkeysFromList,
@@ -35,8 +35,6 @@ import ListFavoriteButton from "./list-favorite-button";
 import { getEventUID } from "../../../helpers/nostr/events";
 import ListMenu from "./list-menu";
 import { COMMUNITY_DEFINITION_KIND } from "../../../helpers/nostr/communities";
-import { getArticleTitle } from "../../../helpers/nostr/long-form";
-import { buildAppSelectUrl } from "../../../helpers/nostr/apps";
 import { CommunityIcon, NotesIcon } from "../../../components/icons";
 import User01 from "../../../components/icons/user-01";
 import HoverLinkOverlay from "../../../components/hover-link-overlay";
@@ -45,22 +43,6 @@ import Link01 from "../../../components/icons/link-01";
 import File02 from "../../../components/icons/file-02";
 import SimpleLikeButton from "../../../components/event-reactions/simple-like-button";
 
-function ArticleLinkLoader({ pointer, ...props }: { pointer: nip19.AddressPointer } & Omit<LinkProps, "children">) {
-  const article = useReplaceableEvent(pointer);
-  if (article) return <ArticleLink article={article} {...props} />;
-  return null;
-}
-function ArticleLink({ article, ...props }: { article: NostrEvent } & Omit<LinkProps, "children">) {
-  const title = getArticleTitle(article);
-  const naddr = getSharableEventAddress(article);
-
-  return (
-    <Link href={naddr ? buildAppSelectUrl(naddr, false) : undefined} isExternal color="blue.500" {...props}>
-      {title}
-    </Link>
-  );
-}
-
 export function ListCardContent({ list, ...props }: Omit<CardProps, "children"> & { list: NostrEvent }) {
   const people = getPubkeysFromList(list);
   const notes = getEventsFromList(list);
@@ -111,21 +93,26 @@ function ListCardRender({
   const ref = useRef<HTMLDivElement | null>(null);
   useRegisterIntersectionEntity(ref, getEventUID(list));
 
+  const description = getListDescription(list);
+
   return (
     <Card as={LinkBox} ref={ref} variant="outline" {...props}>
-      <CardHeader display="flex" gap="2" p="4" alignItems="center">
-        <Heading size="md" isTruncated>
-          <HoverLinkOverlay as={RouterLink} to={`/lists/${link}`}>
-            {getListName(list)}
-          </HoverLinkOverlay>
-        </Heading>
-        {!hideCreator && (
-          <>
-            <Text>by</Text>
-            <UserAvatarLink pubkey={list.pubkey} size="xs" />
-            <UserLink pubkey={list.pubkey} isTruncated fontWeight="bold" fontSize="lg" />
-          </>
-        )}
+      <CardHeader p="4">
+        <Flex gap="2" alignItems="center">
+          <Heading size="md" isTruncated>
+            <HoverLinkOverlay as={RouterLink} to={`/lists/${link}`}>
+              {getListName(list)}
+            </HoverLinkOverlay>
+          </Heading>
+          {!hideCreator && (
+            <>
+              <Text>by</Text>
+              <UserAvatarLink pubkey={list.pubkey} size="xs" />
+              <UserLink pubkey={list.pubkey} isTruncated fontWeight="bold" fontSize="lg" />
+            </>
+          )}
+        </Flex>
+        {description && <Text fontStyle="italic">{description}</Text>}
       </CardHeader>
       <CardBody py="0" px="4">
         <ListCardContent list={list} />

src/views/lists/list-details.tsx

@@ -2,13 +2,14 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Kind, nip19 } from "nostr-tools";
 
 import { UserLink } from "../../components/user-link";
-import { Button, Flex, Heading, SimpleGrid, Spacer } from "@chakra-ui/react";
+import { Box, Button, Flex, Heading, SimpleGrid, Spacer, Text } from "@chakra-ui/react";
 import { ChevronLeftIcon } from "../../components/icons";
 import useCurrentAccount from "../../hooks/use-current-account";
 import { useDeleteEventContext } from "../../providers/delete-event-provider";
 import { parseCoordinate } from "../../helpers/nostr/events";
 import {
   getEventsFromList,
+  getListDescription,
   getListName,
   getParsedCordsFromList,
   getPubkeysFromList,
@@ -28,6 +29,7 @@ import { EmbedEvent, EmbedEventPointer } from "../../components/embed-event";
 import { encodePointer } from "../../helpers/nip19";
 import { DecodeResult } from "nostr-tools/lib/types/nip19";
 import useSingleEvent from "../../hooks/use-single-event";
+import UserAvatarLink from "../../components/user-avatar-link";
 
 function useListCoordinate() {
   const { addr } = useParams() as { addr: string };
@@ -64,6 +66,7 @@ export default function ListDetailsView() {
       </>
     );
 
+  const description = getListDescription(list);
   const isAuthor = account?.pubkey === list.pubkey;
   const people = getPubkeysFromList(list);
   const notes = getEventsFromList(list);
@@ -80,13 +83,9 @@ export default function ListDetailsView() {
             Back
           </Button>
 
-          <Heading size="md" isTruncated>
-            {getListName(list)}
-          </Heading>
-          <ListFavoriteButton list={list} size="sm" />
-
           <Spacer />
 
+          <ListFavoriteButton list={list} />
           <ListFeedButton list={list} />
           {isAuthor && !isSpecialListKind(list.kind) && (
             <Button colorScheme="red" onClick={() => deleteEvent(list).then(() => navigate("/lists"))}>
@@ -96,6 +95,17 @@ export default function ListDetailsView() {
           <ListMenu aria-label="More options" list={list} />
         </Flex>
 
+        <Box>
+          <Heading size="lg" isTruncated>
+            {getListName(list)}
+          </Heading>
+          <Text>
+            Created by <UserAvatarLink pubkey={list.pubkey} size="xs" />{" "}
+            <UserLink pubkey={list.pubkey} fontWeight="bold" />
+          </Text>
+          {description && <Text fontStyle="italic">{description}</Text>}
+        </Box>
+
         {people.length > 0 && (
           <>
             <Heading size="lg">People</Heading>