Add bookmark button to articles

fixes #216

.changeset/tough-colts-pull.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Add bookmark button to articles

src/components/note/bookmark-event.tsx

@@ -28,7 +28,10 @@ import NewListModal from "../../views/lists/components/new-list-modal";
 import useEventBookmarkActions from "../../hooks/use-event-bookmark-actions";
 import { usePublishEvent } from "../../providers/global/publish-provider";
 
-export default function BookmarkButton({ event, ...props }: { event: NostrEvent } & Omit<IconButtonProps, "icon">) {
+export default function BookmarkEventButton({
+  event,
+  ...props
+}: { event: NostrEvent } & Omit<IconButtonProps, "icon">) {
   const publish = usePublishEvent();
   const newListModal = useDisclosure();
   const account = useCurrentAccount();

src/components/note/timeline-note/index.tsx

@@ -29,7 +29,7 @@ import QuoteEventButton from "../quote-event-button";
 import { ReplyIcon } from "../../icons";
 import NoteContentWithWarning from "./note-content-with-warning";
 import { TrustProvider } from "../../../providers/local/trust-provider";
-import BookmarkButton from "../bookmark-button";
+import BookmarkEventButton from "../bookmark-event";
 import useCurrentAccount from "../../../hooks/use-current-account";
 import NoteReactions from "./components/note-reactions";
 import ReplyForm from "../../../views/thread/components/reply-form";
@@ -143,7 +143,7 @@ export function TimelineNote({
               <Box flexGrow={1} />
               <ButtonGroup size="sm" variant="ghost">
                 <NoteProxyLink event={event} />
-                <BookmarkButton event={event} aria-label="Bookmark note" />
+                <BookmarkEventButton event={event} aria-label="Bookmark note" />
                 <NoteMenu event={event} aria-label="More Options" />
               </ButtonGroup>
             </Flex>

src/views/articles/article.tsx

@@ -20,6 +20,7 @@ import ArticleTags from "./components/article-tags";
 import NoteReactions from "../../components/note/timeline-note/components/note-reactions";
 import NoteZapButton from "../../components/note/note-zap-button";
 import ZapBubbles from "../../components/note/timeline-note/components/zap-bubbles";
+import BookmarkEventButton from "../../components/note/bookmark-event";
 
 function ArticlePage({ article }: { article: NostrEvent }) {
   const image = getArticleImage(article);
@@ -41,6 +42,7 @@ function ArticlePage({ article }: { article: NostrEvent }) {
           <Text>{dayjs.unix(published ?? article.created_at).format("LL")}</Text>
         </Box>
         <ArticleTags article={article} />
+        <BookmarkEventButton event={article} aria-label="Bookmark" variant="ghost" float="right" size="sm" />
       </Box>
       {image && <Image src={image} maxW="6xl" w="full" mx="auto" maxH="60vh" />}
       <Box mx="auto" maxW="4xl" w="full">

src/views/link/index.tsx

@@ -60,6 +60,7 @@ function RenderRedirect({ event, link }: { event?: NostrEvent; link: string }) {
       if (k === FLARE_VIDEO_KIND) return <Navigate to={`/videos/${link}`} replace />;
       if (k === kinds.ChannelCreation) return <Navigate to={`/channels/${link}`} replace />;
       if (k === kinds.ShortTextNote) return <Navigate to={`/n/${link}`} replace />;
+      if (k === kinds.LongFormArticle) return <Navigate to={`/articles/${link}`} replace />;
       if (k === WIKI_PAGE_KIND) return <Navigate to={`/wiki/page/${link}`} replace />;
 
       if (!event && decoded.type === "naddr") return <LoadUnknownAddress pointer={decoded.data} link={link} />;

src/views/thread/components/thread-post.tsx

@@ -21,7 +21,7 @@ import RepostButton from "../../../components/note/timeline-note/components/repo
 import QuoteEventButton from "../../../components/note/quote-event-button";
 import NoteZapButton from "../../../components/note/note-zap-button";
 import NoteProxyLink from "../../../components/note/timeline-note/components/note-proxy-link";
-import BookmarkButton from "../../../components/note/bookmark-button";
+import BookmarkEventButton from "../../../components/note/bookmark-event";
 import NoteMenu from "../../../components/note/note-menu";
 import NoteCommunityMetadata from "../../../components/note/timeline-note/note-community-metadata";
 import { TextNoteContents } from "../../../components/note/timeline-note/text-note-contents";
@@ -126,7 +126,7 @@ function ThreadPost({ post, initShowReplies, focusId, level = -1 }: ThreadItemPr
       <Spacer />
       <ButtonGroup size="sm" variant="ghost">
         <NoteProxyLink event={post.event} />
-        <BookmarkButton event={post.event} aria-label="Bookmark" />
+        <BookmarkEventButton event={post.event} aria-label="Bookmark" />
         <NoteMenu event={post.event} aria-label="More Options" />
       </ButtonGroup>
     </Flex>