Bump to v0.6.0 — article discovery, search, profile tab, reader polish

Article discovery feed with Latest/Following tabs, article search
(NIP-50 + hashtag for kind 30023), Notes/Articles tab on profiles,
reading time + bookmark + like buttons on article reader. Event
passed directly from card to reader to avoid relay re-fetch failures.

src/components/article/ArticleCard.tsx

@@ -0,0 +1,120 @@
+import { NDKEvent, nip19 } from "@nostr-dev-kit/ndk";
+import { useProfile } from "../../hooks/useProfile";
+import { useUIStore } from "../../stores/ui";
+import { shortenPubkey } from "../../lib/utils";
+
+function getTag(event: NDKEvent, name: string): string {
+  return event.tags.find((t) => t[0] === name)?.[1] ?? "";
+}
+
+function getTags(event: NDKEvent, name: string): string[] {
+  return event.tags.filter((t) => t[0] === name).map((t) => t[1]).filter(Boolean);
+}
+
+function buildNaddr(event: NDKEvent): string {
+  const d = getTag(event, "d");
+  if (!d) return "";
+  return nip19.naddrEncode({
+    identifier: d,
+    pubkey: event.pubkey,
+    kind: event.kind!,
+  });
+}
+
+export function ArticleCard({ event }: { event: NDKEvent }) {
+  const { openArticle, openProfile } = useUIStore();
+  const profile = useProfile(event.pubkey);
+
+  const title = getTag(event, "title");
+  const summary = getTag(event, "summary");
+  const image = getTag(event, "image");
+  const tags = getTags(event, "t");
+  const publishedAt = parseInt(getTag(event, "published_at")) || event.created_at || null;
+  const naddr = buildNaddr(event);
+
+  const authorName = profile?.displayName || profile?.name || shortenPubkey(event.pubkey);
+  const date = publishedAt
+    ? new Date(publishedAt * 1000).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })
+    : null;
+
+  const wordCount = event.content?.trim().split(/\s+/).length ?? 0;
+  const readingTime = Math.max(1, Math.ceil(wordCount / 230));
+
+  if (!naddr) return null;
+
+  return (
+    <div
+      className="border-b border-border px-4 py-3 hover:bg-bg-hover transition-colors cursor-pointer"
+      onClick={() => openArticle(naddr, event)}
+    >
+      <div className="flex gap-3">
+        {/* Text content */}
+        <div className="flex-1 min-w-0">
+          {/* Title */}
+          <h3 className="text-text text-[14px] font-medium leading-snug mb-1 line-clamp-2">
+            {title || "Untitled"}
+          </h3>
+
+          {/* Summary */}
+          {summary && (
+            <p className="text-text-muted text-[12px] leading-relaxed mb-2 line-clamp-2">
+              {summary}
+            </p>
+          )}
+
+          {/* Author row */}
+          <div className="flex items-center gap-2 mb-1.5">
+            <button
+              className="shrink-0"
+              onClick={(e) => { e.stopPropagation(); openProfile(event.pubkey); }}
+            >
+              {profile?.picture ? (
+                <img
+                  src={profile.picture}
+                  alt=""
+                  className="w-5 h-5 rounded-sm object-cover"
+                  onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+                />
+              ) : (
+                <div className="w-5 h-5 rounded-sm bg-bg-raised border border-border flex items-center justify-center text-text-dim text-[9px]">
+                  {authorName.charAt(0).toUpperCase()}
+                </div>
+              )}
+            </button>
+            <button
+              className="text-text-dim text-[11px] hover:text-accent transition-colors"
+              onClick={(e) => { e.stopPropagation(); openProfile(event.pubkey); }}
+            >
+              {authorName}
+            </button>
+            {date && <span className="text-text-dim text-[10px]">{date}</span>}
+            <span className="text-text-dim text-[10px]">{readingTime} min read</span>
+          </div>
+
+          {/* Tags */}
+          {tags.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {tags.slice(0, 5).map((tag) => (
+                <span key={tag} className="px-1.5 py-0 text-[9px] border border-border text-text-dim">
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Cover image thumbnail */}
+        {image && (
+          <div className="shrink-0 w-24 h-20 rounded-sm overflow-hidden bg-bg-raised">
+            <img
+              src={image}
+              alt=""
+              className="w-full h-full object-cover"
+              onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/article/ArticleFeed.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect } from "react";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { fetchArticleFeed } from "../../lib/nostr";
+import { useUserStore } from "../../stores/user";
+import { useUIStore } from "../../stores/ui";
+import { ArticleCard } from "./ArticleCard";
+
+type ArticleTab = "latest" | "following";
+
+export function ArticleFeed() {
+  const { loggedIn, follows } = useUserStore();
+  const { setView } = useUIStore();
+  const [tab, setTab] = useState<ArticleTab>("latest");
+  const [articles, setArticles] = useState<NDKEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const authors = tab === "following" ? follows : undefined;
+    fetchArticleFeed(40, authors)
+      .then(setArticles)
+      .catch(() => setArticles([]))
+      .finally(() => setLoading(false));
+  }, [tab, follows]);
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <header className="border-b border-border px-4 py-2.5 flex items-center justify-between shrink-0">
+        <h1 className="text-text text-sm font-medium">Articles</h1>
+        <button
+          onClick={() => setView("article-editor")}
+          className="text-[11px] px-3 py-1 border border-accent/60 text-accent hover:bg-accent hover:text-white transition-colors"
+        >
+          write article
+        </button>
+      </header>
+
+      {/* Tabs */}
+      <div className="border-b border-border flex shrink-0">
+        {(["latest", "following"] as const).map((t) => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            disabled={t === "following" && !loggedIn}
+            className={`px-4 py-2 text-[11px] border-b-2 transition-colors ${
+              tab === t
+                ? "border-accent text-accent"
+                : "border-transparent text-text-dim hover:text-text"
+            } disabled:opacity-30 disabled:cursor-not-allowed`}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {/* Articles list */}
+      <div className="flex-1 overflow-y-auto">
+        {loading && (
+          <div className="px-4 py-8 text-text-dim text-[12px] text-center">Loading articles...</div>
+        )}
+
+        {!loading && articles.length === 0 && (
+          <div className="px-4 py-8 text-center space-y-2">
+            <p className="text-text-dim text-[12px]">
+              {tab === "following"
+                ? "No articles from people you follow yet."
+                : "No articles found on your relays."}
+            </p>
+            {tab === "following" && (
+              <p className="text-text-dim text-[10px]">
+                Try the "latest" tab to discover writers, then follow them.
+              </p>
+            )}
+          </div>
+        )}
+
+        {articles.map((event) => (
+          <ArticleCard key={event.id} event={event} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/article/ArticleView.tsx

@@ -4,7 +4,8 @@ import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { useUIStore } from "../../stores/ui";
 import { useUserStore } from "../../stores/user";
-import { fetchArticle } from "../../lib/nostr";
+import { useBookmarkStore } from "../../stores/bookmark";
+import { fetchArticle, publishReaction } from "../../lib/nostr";
 import { useProfile } from "../../hooks/useProfile";
 import { ZapModal } from "../zap/ZapModal";
 
@@ -25,7 +26,7 @@ function renderMarkdown(md: string): string {
 
 // ── Author row ────────────────────────────────────────────────────────────────
 
-function AuthorRow({ pubkey, publishedAt }: { pubkey: string; publishedAt: number | null }) {
+function AuthorRow({ pubkey, publishedAt, readingTime }: { pubkey: string; publishedAt: number | null; readingTime?: number }) {
   const { openProfile } = useUIStore();
   const profile = useProfile(pubkey);
   const name = profile?.displayName || profile?.name || pubkey.slice(0, 12) + "…";
@@ -53,6 +54,7 @@ function AuthorRow({ pubkey, publishedAt }: { pubkey: string; publishedAt: numbe
           {name}
         </button>
         {date && <span className="text-text-dim text-[11px]">{date}</span>}
+        {readingTime && <span className="text-text-dim text-[11px]"> · {readingTime} min read</span>}
       </div>
     </div>
   );
@@ -61,18 +63,27 @@ function AuthorRow({ pubkey, publishedAt }: { pubkey: string; publishedAt: numbe
 // ── Main view ─────────────────────────────────────────────────────────────────
 
 export function ArticleView() {
-  const { pendingArticleNaddr, goBack } = useUIStore();
+  const { pendingArticleNaddr, pendingArticleEvent, goBack } = useUIStore();
   const { loggedIn } = useUserStore();
 
   const [event, setEvent] = useState<NDKEvent | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [showZap, setShowZap] = useState(false);
+  const [reacted, setReacted] = useState(false);
+  const { isBookmarked, addBookmark, removeBookmark } = useBookmarkStore();
 
   const naddr = pendingArticleNaddr ?? "";
 
   useEffect(() => {
     if (!naddr) { setLoading(false); return; }
+    // Use cached event if available (from ArticleCard click), skip relay fetch
+    if (pendingArticleEvent) {
+      setEvent(pendingArticleEvent);
+      setLoading(false);
+      setError(null);
+      return;
+    }
     setLoading(true);
     setError(null);
     setEvent(null);
@@ -95,6 +106,25 @@ export function ArticleView() {
   const authorName = authorProfile?.displayName || authorProfile?.name || authorPubkey.slice(0, 12) + "…";
 
   const bodyHtml = event?.content ? renderMarkdown(event.content) : "";
+  const wordCount = event?.content?.trim().split(/\s+/).length ?? 0;
+  const readingTime = Math.max(1, Math.ceil(wordCount / 230));
+  const bookmarked = event?.id ? isBookmarked(event.id) : false;
+
+  const handleReaction = async () => {
+    if (!event?.id || reacted) return;
+    setReacted(true);
+    try {
+      await publishReaction(event.id, event.pubkey);
+    } catch {
+      setReacted(false);
+    }
+  };
+
+  const handleBookmark = () => {
+    if (!event?.id) return;
+    if (bookmarked) removeBookmark(event.id);
+    else addBookmark(event.id);
+  };
 
   return (
     <div className="h-full flex flex-col">
@@ -104,6 +134,19 @@ export function ArticleView() {
           ← back
         </button>
         <div className="flex items-center gap-2">
+          {event && loggedIn && (
+            <button
+              onClick={handleBookmark}
+              className={`text-[11px] px-3 py-1 border transition-colors ${
+                bookmarked
+                  ? "border-accent/40 text-accent"
+                  : "border-border text-text-muted hover:text-accent hover:border-accent/40"
+              }`}
+              title={bookmarked ? "Remove bookmark" : "Bookmark article"}
+            >
+              {bookmarked ? "▪ saved" : "▫ save"}
+            </button>
+          )}
           {event && loggedIn && (
             <button
               onClick={() => setShowZap(true)}
@@ -170,8 +213,8 @@ export function ArticleView() {
               </p>
             )}
 
-            {/* Author + date */}
-            <AuthorRow pubkey={authorPubkey} publishedAt={publishedAt} />
+            {/* Author + date + reading time */}
+            <AuthorRow pubkey={authorPubkey} publishedAt={publishedAt} readingTime={readingTime} />
 
             {/* Tags */}
             {articleTags.length > 0 && (
@@ -195,14 +238,41 @@ export function ArticleView() {
               <button onClick={goBack} className="text-text-dim hover:text-text text-[11px] transition-colors">
                 ← back
               </button>
-              {loggedIn && (
-                <button
-                  onClick={() => setShowZap(true)}
-                  className="text-[11px] px-4 py-2 bg-zap hover:bg-zap/90 text-white transition-colors"
-                >
-                  ⚡ Zap {authorName}
-                </button>
-              )}
+              <div className="flex items-center gap-2">
+                {loggedIn && (
+                  <button
+                    onClick={handleReaction}
+                    disabled={reacted}
+                    className={`text-[11px] px-3 py-1.5 border transition-colors disabled:cursor-not-allowed ${
+                      reacted
+                        ? "border-accent/40 text-accent"
+                        : "border-border text-text-muted hover:text-accent hover:border-accent/40"
+                    }`}
+                  >
+                    {reacted ? "♥ liked" : "♡ like"}
+                  </button>
+                )}
+                {loggedIn && (
+                  <button
+                    onClick={handleBookmark}
+                    className={`text-[11px] px-3 py-1.5 border transition-colors ${
+                      bookmarked
+                        ? "border-accent/40 text-accent"
+                        : "border-border text-text-muted hover:text-accent hover:border-accent/40"
+                    }`}
+                  >
+                    {bookmarked ? "▪ saved" : "▫ save"}
+                  </button>
+                )}
+                {loggedIn && (
+                  <button
+                    onClick={() => setShowZap(true)}
+                    className="text-[11px] px-4 py-1.5 bg-zap hover:bg-zap/90 text-white transition-colors"
+                  >
+                    ⚡ Zap {authorName}
+                  </button>
+                )}
+              </div>
             </div>
           </article>
         )}