Add FollowingPage component and related hooks; update routing and BlogHeader

src/AppRouter.tsx

@@ -7,6 +7,7 @@ import CreatePostPage from "./pages/CreatePostPage";
 import EditPostPage from "./pages/EditPostPage";
 import SearchResultsPage from "./pages/SearchResultsPage";
 import { BookmarksPage } from "./pages/BookmarksPage";
+import FollowingPage from "./pages/FollowingPage";
 import { NIP19Page } from "./pages/NIP19Page";
 import NotFound from "./pages/NotFound";
 
@@ -21,6 +22,7 @@ export function AppRouter() {
           <Route path="/edit/:identifier" element={<EditPostPage />} />
           <Route path="/search" element={<SearchResultsPage />} />
           <Route path="/bookmarks" element={<BookmarksPage />} />
+          <Route path="/following" element={<FollowingPage />} />
           {/* NIP-19 route for all Nostr identifiers (npub, nprofile, naddr, note, nevent) */}
           <Route path="/:nip19" element={<NIP19Page />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}

src/components/BlogHeader.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { LoginArea } from '@/components/auth/LoginArea';
 import { Button } from '@/components/ui/button';
-import { PenSquare, Menu, Bookmark } from 'lucide-react';
+import { PenSquare, Menu, Bookmark, Users } from 'lucide-react';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { ThemeToggle } from '@/components/ThemeToggle';
 import { useState } from 'react';
@@ -25,6 +25,12 @@ export function BlogHeader() {
           {/* Desktop Navigation */}
           {user && (
             <nav className="hidden sm:flex items-center gap-2">
+              <Button variant="ghost" size="sm" asChild>
+                <Link to="/following">
+                  <Users className="h-4 w-4 mr-2" />
+                  Following
+                </Link>
+              </Button>
               <Button variant="ghost" size="sm" asChild>
                 <Link to="/bookmarks">
                   <Bookmark className="h-4 w-4 mr-2" />
@@ -73,6 +79,12 @@ export function BlogHeader() {
                 {user && (
                   <>
                     <div className="border-t pt-4 space-y-2">
+                      <Button variant="outline" className="w-full" asChild onClick={() => setIsMenuOpen(false)}>
+                        <Link to="/following">
+                          <Users className="h-4 w-4 mr-2" />
+                          Following
+                        </Link>
+                      </Button>
                       <Button variant="outline" className="w-full" asChild onClick={() => setIsMenuOpen(false)}>
                         <Link to="/bookmarks">
                           <Bookmark className="h-4 w-4 mr-2" />

src/hooks/useFollowing.ts

@@ -0,0 +1,44 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { useCurrentUser } from './useCurrentUser';
+
+/**
+ * Hook to fetch the list of pubkeys that the current user follows.
+ * Returns the pubkeys from the user's kind 3 contact list event.
+ */
+export function useFollowing() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+
+  return useQuery({
+    queryKey: ['following', user?.pubkey],
+    queryFn: async (c) => {
+      if (!user?.pubkey) {
+        return [];
+      }
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(1500)]);
+      
+      // Query kind 3 (contact list) for the current user
+      const events = await nostr.query(
+        [{ kinds: [3], authors: [user.pubkey], limit: 1 }],
+        { signal }
+      );
+
+      if (events.length === 0) {
+        return [];
+      }
+
+      // Extract pubkeys from p tags
+      const contactEvent = events[0];
+      const followedPubkeys = contactEvent.tags
+        .filter(([tagName]) => tagName === 'p')
+        .map(([, pubkey]) => pubkey)
+        .filter((pubkey): pubkey is string => !!pubkey);
+
+      return followedPubkeys;
+    },
+    enabled: !!user?.pubkey,
+    staleTime: 1000 * 60 * 5, // Cache for 5 minutes
+  });
+}

src/hooks/useFollowingBlogPosts.ts

@@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import type { NostrEvent } from '@nostrify/nostrify';
+import { useFollowing } from './useFollowing';
+
+/**
+ * Hook to fetch long-form blog posts (kind 30023) from authors the user follows.
+ */
+export function useFollowingBlogPosts() {
+  const { nostr } = useNostr();
+  const { data: followedPubkeys = [], isLoading: isLoadingFollowing } = useFollowing();
+
+  return useQuery({
+    queryKey: ['following-blog-posts', followedPubkeys],
+    queryFn: async (c) => {
+      if (followedPubkeys.length === 0) {
+        return [];
+      }
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(3000)]);
+
+      // Query kind 30023 (long-form content) from followed authors
+      const events = await nostr.query(
+        [
+          {
+            kinds: [30023],
+            authors: followedPubkeys,
+            limit: 50,
+          },
+        ],
+        { signal }
+      );
+
+      // Filter out events without required tags
+      const validEvents = events.filter((event: NostrEvent) => {
+        const hasTitle = event.tags.some(([name]) => name === 'title');
+        const hasDTag = event.tags.some(([name]) => name === 'd');
+        return hasTitle && hasDTag;
+      });
+
+      // Sort by created_at descending (newest first)
+      return validEvents.sort((a, b) => b.created_at - a.created_at);
+    },
+    enabled: followedPubkeys.length > 0 && !isLoadingFollowing,
+    staleTime: 1000 * 60 * 2, // Cache for 2 minutes
+  });
+}

src/pages/BookmarksPage.tsx

@@ -16,7 +16,7 @@ export function BookmarksPage() {
   const isLoading = isLoadingBookmarks || isLoadingArticles;
 
   return (
-      <div className="container mx-auto px-4 py-8 max-w-5xl">
+      <div className="container mx-auto px-4 py-8 max-w-6xl">
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-2">
             <Bookmark className="h-8 w-8" />

src/pages/FollowingPage.tsx

@@ -0,0 +1,121 @@
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useFollowingBlogPosts } from '@/hooks/useFollowingBlogPosts';
+import { ArticlePreview } from '@/components/ArticlePreview';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { RelaySelector } from '@/components/RelaySelector';
+import { Users } from 'lucide-react';
+import { LoginArea } from '@/components/auth/LoginArea';
+
+export default function FollowingPage() {
+  const { user } = useCurrentUser();
+  const { data: posts = [], isLoading, isError } = useFollowingBlogPosts();
+
+  // Show login prompt if user is not logged in
+  if (!user) {
+    return (
+      <div className="min-h-screen">
+        <div className="container max-w-6xl py-12 px-4 sm:px-6 lg:px-8">
+          <Card className="border-dashed">
+            <CardContent className="py-12 px-8 text-center">
+              <div className="max-w-sm mx-auto space-y-6">
+                <div className="flex justify-center">
+                  <Users className="h-12 w-12 text-muted-foreground" />
+                </div>
+                <div className="space-y-2">
+                  <h2 className="text-xl font-semibold">Sign in to see posts from people you follow</h2>
+                  <p className="text-muted-foreground text-sm">
+                    Log in to view long-form content from the authors you follow on Nostr.
+                  </p>
+                </div>
+                <LoginArea className="max-w-60 mx-auto" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      <div className="container max-w-6xl py-8 px-4 space-y-8">
+        {/* Header */}
+        <div className="space-y-2">
+          <div className="flex items-center gap-3">
+            <Users className="h-8 w-8 text-primary" />
+            <h1 className="text-3xl sm:text-4xl font-bold">Following</h1>
+          </div>
+          <p className="text-muted-foreground">
+            Articles from people you follow
+          </p>
+        </div>
+
+        {/* Loading state */}
+        {isLoading && (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {[...Array(6)].map((_, i) => (
+              <Card key={i}>
+                <div className="aspect-video">
+                  <Skeleton className="w-full h-full" />
+                </div>
+                <CardContent className="p-6 space-y-3">
+                  <Skeleton className="h-6 w-3/4" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-5/6" />
+                  <div className="flex items-center gap-2 pt-2">
+                    <Skeleton className="h-6 w-6 rounded-full" />
+                    <Skeleton className="h-4 w-24" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {/* Error state */}
+        {isError && !isLoading && (
+          <Card className="border-dashed">
+            <CardContent className="py-12 px-8 text-center">
+              <div className="max-w-sm mx-auto space-y-6">
+                <p className="text-muted-foreground">
+                  Failed to load articles. Try another relay?
+                </p>
+                <RelaySelector className="w-full" />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Empty state */}
+        {!isLoading && !isError && posts.length === 0 && (
+          <Card className="border-dashed">
+            <CardContent className="py-12 px-8 text-center">
+              <div className="max-w-sm mx-auto space-y-6">
+                <Users className="h-12 w-12 text-muted-foreground mx-auto" />
+                <div className="space-y-2">
+                  <p className="text-muted-foreground">
+                    No articles found from people you follow.
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    Try following some authors or switching to a different relay.
+                  </p>
+                </div>
+                <RelaySelector className="w-full" />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Posts grid */}
+        {!isLoading && !isError && posts.length > 0 && (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {posts.map((post) => (
+              <ArticlePreview key={post.id} post={post} variant="compact" />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}