Merge pull request #47 from hacdias/feat/44

feat: add 'load more' on remaining pages

web/src/api/client.ts

···
   return response;
 }
 
-interface GetFeedParams {
+export interface GetFeedParams {
   source?: string;
   type?: string;
   limit?: number;

web/src/components/feed/FeedItems.tsx

···
+import { Clock, Loader2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { type GetFeedParams, getFeed } from "../../api/client";
+import Card from "../../components/common/Card";
+import { EmptyState } from "../../components/ui";
+import type { AnnotationItem } from "../../types";
+
+const LIMIT = 50;
+
+export interface FeedItemsProps extends Omit<
+  GetFeedParams,
+  "limit" | "offset"
+> {
+  layout: "list" | "mosaic";
+  emptyMessage: string;
+}
+
+export default function FeedItems({
+  creator,
+  source,
+  tag,
+  type,
+  motivation,
+  emptyMessage,
+  layout,
+}: FeedItemsProps) {
+  const [items, setItems] = useState<AnnotationItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    getFeed({ type, motivation, tag, creator, source, limit: LIMIT, offset: 0 })
+      .then((data) => {
+        if (cancelled) return;
+        const fetched = data.items;
+        setItems(fetched);
+        setHasMore(data.hasMore);
+        setOffset(data.fetchedCount);
+        setLoading(false);
+      })
+      .catch((e) => {
+        if (cancelled) return;
+        console.error(e);
+        setItems([]);
+        setHasMore(false);
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [type, motivation, tag, creator, source]);
+
+  const loadMore = useCallback(async () => {
+    setLoadingMore(true);
+    try {
+      const data = await getFeed({
+        type,
+        motivation,
+        tag,
+        creator,
+        source,
+        limit: LIMIT,
+        offset,
+      });
+      const fetched = data?.items || [];
+      setItems((prev) => [...prev, ...fetched]);
+      setHasMore(data.hasMore);
+      setOffset((prev) => prev + data.fetchedCount);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [type, motivation, tag, creator, source, offset]);
+
+  const handleDelete = (uri: string) => {
+    setItems((prev) => prev.filter((i) => i.uri !== uri));
+  };
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 gap-3">
+        <Loader2
+          className="animate-spin text-primary-600 dark:text-primary-400"
+          size={32}
+        />
+        <p className="text-sm text-surface-400 dark:text-surface-500">
+          Loading...
+        </p>
+      </div>
+    );
+  }
+
+  if (items.length === 0) {
+    return (
+      <EmptyState
+        icon={<Clock size={48} />}
+        title="Nothing here yet"
+        message={emptyMessage}
+      />
+    );
+  }
+
+  const loadMoreButton = hasMore && (
+    <div className="flex justify-center py-6">
+      <button
+        type="button"
+        onClick={loadMore}
+        disabled={loadingMore}
+        className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-xl bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors disabled:opacity-50"
+      >
+        {loadingMore ? (
+          <>
+            <Loader2 size={16} className="animate-spin" />
+            Loading...
+          </>
+        ) : (
+          "Load more"
+        )}
+      </button>
+    </div>
+  );
+
+  if (layout === "mosaic") {
+    return (
+      <>
+        <div className="columns-1 sm:columns-2 xl:columns-3 2xl:columns-4 gap-4 animate-fade-in">
+          {items.map((item) => (
+            <div key={item.uri || item.cid} className="break-inside-avoid mb-4">
+              <Card item={item} onDelete={handleDelete} layout="mosaic" />
+            </div>
+          ))}
+        </div>
+        {loadMoreButton}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="space-y-3 animate-fade-in">
+        {items.map((item) => (
+          <Card
+            key={item.uri || item.cid}
+            item={item}
+            onDelete={handleDelete}
+          />
+        ))}
+      </div>
+      {loadMoreButton}
+    </>
+  );
+}

web/src/components/feed/MasonryFeed.tsx

···
 import { useStore as useNanoStore, useStore } from "@nanostores/react";
-import { Loader2 } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { getFeed } from "../../api/client";
+import { useState } from "react";
 import { $user } from "../../store/auth";
 import { $feedLayout } from "../../store/feedLayout";
-import type { AnnotationItem } from "../../types";
-import Card from "../common/Card";
-import { EmptyState, Tabs } from "../ui";
+import { Tabs } from "../ui";
 import LayoutToggle from "../ui/LayoutToggle";
+import FeedItems from "./FeedItems";
 
 interface MasonryFeedProps {
   motivation?: string;
···
   title?: string;
 }
 
-function MasonryContent({
-  tab,
-  motivation,
-  emptyMessage,
-  userDid,
-  layout,
-}: {
-  tab: string;
-  motivation?: string;
-  emptyMessage: string;
-  userDid?: string;
-  layout: "list" | "mosaic";
-}) {
-  const [items, setItems] = useState<AnnotationItem[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const params: { type?: string; motivation?: string; creator?: string } = {
-      motivation,
-    };
-
-    if (tab === "my" && userDid) {
-      params.creator = userDid;
-      params.type = "my-feed";
-    } else {
-      params.type = "all";
-    }
-
-    getFeed(params)
-      .then((data) => {
-        if (cancelled) return;
-        setItems(data.items);
-        setLoading(false);
-      })
-      .catch((e) => {
-        if (cancelled) return;
-        console.error(e);
-        setItems([]);
-        setLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [tab, motivation, userDid]);
-
-  const handleDelete = (uri: string) => {
-    setItems((prev) => prev.filter((i) => i.uri !== uri));
-  };
-
-  if (loading) {
-    return (
-      <div className="flex justify-center py-20">
-        <Loader2
-          className="animate-spin text-primary-600 dark:text-primary-400"
-          size={32}
-        />
-      </div>
-    );
-  }
-
-  if (items.length === 0) {
-    return (
-      <EmptyState
-        message={
-          tab === "my"
-            ? emptyMessage
-            : `No ${motivation === "bookmarking" ? "bookmarks" : "highlights"} from the community yet.`
-        }
-      />
-    );
-  }
-
-  if (layout === "list") {
-    return (
-      <div className="space-y-3 animate-fade-in">
-        {items.map((item) => (
-          <Card
-            key={item.uri || item.cid}
-            item={item}
-            onDelete={handleDelete}
-          />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div className="columns-1 sm:columns-2 md:columns-3 xl:columns-4 gap-4 animate-fade-in">
-      {items.map((item) => (
-        <div key={item.uri || item.cid} className="break-inside-avoid mb-4">
-          <Card item={item} onDelete={handleDelete} layout="mosaic" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 export default function MasonryFeed({
   motivation,
   emptyMessage = "No items found.",
···
       ]
     : [{ id: "global", label: "Global" }];
 
+  const creator = activeTab === "my" ? user?.did : undefined;
+  const type = activeTab === "my" ? "my-feed" : "all";
+
   return (
     <div className="mx-auto max-w-2xl xl:max-w-none">
       {title && (
···
         </div>
       )}
 
-      <MasonryContent
+      <FeedItems
         key={activeTab}
-        tab={activeTab}
+        type={type}
         motivation={motivation}
-        emptyMessage={emptyMessage}
-        userDid={user?.did}
+        emptyMessage={
+          activeTab === "my"
+            ? emptyMessage
+            : `No ${motivation === "bookmarking" ? "bookmarks" : "highlights"} from the community yet.`
+        }
+        creator={creator}
         layout={layout}
       />
     </div>

web/src/views/core/Feed.tsx

···
 import { useStore } from "@nanostores/react";
 import { clsx } from "clsx";
-import {
-  Bookmark,
-  Clock,
-  Highlighter,
-  Loader2,
-  MessageSquareText,
-} from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+import { Bookmark, Highlighter, MessageSquareText } from "lucide-react";
+import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { getFeed } from "../../api/client";
-import Card from "../../components/common/Card";
-import { Button, EmptyState, Tabs } from "../../components/ui";
+import FeedItems from "../../components/feed/FeedItems";
+import { Button, Tabs } from "../../components/ui";
 import LayoutToggle from "../../components/ui/LayoutToggle";
 import { $user } from "../../store/auth";
 import { $feedLayout } from "../../store/feedLayout";
-import type { AnnotationItem } from "../../types";
 
 interface FeedProps {
   initialType?: string;
···
   emptyMessage?: string;
 }
 
-function FeedContent({
-  type,
-  motivation,
-  emptyMessage,
-  layout,
-  tag,
-}: {
-  type: string;
-  motivation?: string;
-  emptyMessage: string;
-  layout: "list" | "mosaic";
-  tag?: string;
-}) {
-  const [items, setItems] = useState<AnnotationItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [hasMore, setHasMore] = useState(false);
-  const [offset, setOffset] = useState(0);
-
-  const LIMIT = 50;
-
-  useEffect(() => {
-    let cancelled = false;
-
-    getFeed({ type, motivation, tag, limit: LIMIT, offset: 0 })
-      .then((data) => {
-        if (cancelled) return;
-        const fetched = data.items;
-        setItems(fetched);
-        setHasMore(data.hasMore);
-        setOffset(data.fetchedCount);
-        setLoading(false);
-      })
-      .catch((e) => {
-        if (cancelled) return;
-        console.error(e);
-        setItems([]);
-        setHasMore(false);
-        setLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [type, motivation, tag]);
-
-  const loadMore = useCallback(async () => {
-    setLoadingMore(true);
-    try {
-      const data = await getFeed({
-        type,
-        motivation,
-        tag,
-        limit: LIMIT,
-        offset,
-      });
-      const fetched = data?.items || [];
-      setItems((prev) => [...prev, ...fetched]);
-      setHasMore(data.hasMore);
-      setOffset((prev) => prev + data.fetchedCount);
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoadingMore(false);
-    }
-  }, [type, motivation, tag, offset]);
-
-  const handleDelete = (uri: string) => {
-    setItems((prev) => prev.filter((i) => i.uri !== uri));
-  };
-
-  if (loading) {
-    return (
-      <div className="flex flex-col items-center justify-center py-20 gap-3">
-        <Loader2
-          className="animate-spin text-primary-600 dark:text-primary-400"
-          size={32}
-        />
-        <p className="text-sm text-surface-400 dark:text-surface-500">
-          Loading feed...
-        </p>
-      </div>
-    );
-  }
-
-  if (items.length === 0) {
-    return (
-      <EmptyState
-        icon={<Clock size={48} />}
-        title="Nothing here yet"
-        message={emptyMessage}
-      />
-    );
-  }
-
-  const loadMoreButton = hasMore && (
-    <div className="flex justify-center py-6">
-      <button
-        onClick={loadMore}
-        disabled={loadingMore}
-        className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-xl bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors disabled:opacity-50"
-      >
-        {loadingMore ? (
-          <>
-            <Loader2 size={16} className="animate-spin" />
-            Loading...
-          </>
-        ) : (
-          "Load more"
-        )}
-      </button>
-    </div>
-  );
-
-  if (layout === "mosaic") {
-    return (
-      <>
-        <div className="columns-1 sm:columns-2 xl:columns-3 2xl:columns-4 gap-4 animate-fade-in">
-          {items.map((item) => (
-            <div key={item.uri || item.cid} className="break-inside-avoid mb-4">
-              <Card item={item} onDelete={handleDelete} layout="mosaic" />
-            </div>
-          ))}
-        </div>
-        {loadMoreButton}
-      </>
-    );
-  }
-
-  return (
-    <>
-      <div className="space-y-3 animate-fade-in">
-        {items.map((item) => (
-          <Card
-            key={item.uri || item.cid}
-            item={item}
-            onDelete={handleDelete}
-          />
-        ))}
-      </div>
-      {loadMoreButton}
-    </>
-  );
-}
-
 export default function Feed({
   initialType = "all",
   motivation,
···
         </div>
       )}
 
-      <FeedContent
+      <FeedItems
         key={`${activeTab}-${activeFilter || "all"}-${tag || ""}`}
         type={activeTab}
         motivation={activeFilter}
-        tag={tag}
         emptyMessage={emptyMessage}
         layout={layout}
+        tag={tag}
       />
     </div>
   );

web/src/views/profile/Profile.tsx

···
 import { useStore } from "@nanostores/react";
 import { clsx } from "clsx";
 import {
-  Bookmark,
   Edit2,
   Eye,
   EyeOff,
···
   Link2,
   Linkedin,
   Loader2,
-  MessageSquare,
-  PenTool,
   ShieldBan,
   ShieldOff,
   Volume2,
   VolumeX,
 } from "lucide-react";
-import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import {
   blockUser,
   getCollections,
-  getFeed,
   getModerationRelationship,
   getProfile,
   muteUser,
   unblockUser,
   unmuteUser,
 } from "../../api/client";
-import Card from "../../components/common/Card";
 import CollectionIcon from "../../components/common/CollectionIcon";
 import { BlueskyIcon, TangledIcon } from "../../components/common/Icons";
 import type { MoreMenuItem } from "../../components/common/MoreMenu";
 import MoreMenu from "../../components/common/MoreMenu";
 import RichText from "../../components/common/RichText";
+import FeedItems from "../../components/feed/FeedItems";
 import EditProfileModal from "../../components/modals/EditProfileModal";
 import ExternalLinkModal from "../../components/modals/ExternalLinkModal";
 import ReportModal from "../../components/modals/ReportModal";
···
 import { $user } from "../../store/auth";
 import { $preferences, loadPreferences } from "../../store/preferences";
 import type {
-  AnnotationItem,
   Collection,
   ContentLabel,
   ModerationRelationship,
···
   collections: undefined,
 };
 
-const LIMIT = 50;
-
 export default function Profile({ did }: ProfileProps) {
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [loading, setLoading] = useState(true);
···
   const [collections, setCollections] = useState<Collection[]>([]);
   const [dataLoading, setDataLoading] = useState(false);
 
-  const [items, setItems] = useState<{
-    all: AnnotationItem[];
-    annotations: AnnotationItem[];
-    highlights: AnnotationItem[];
-    bookmarks: AnnotationItem[];
-  }>({
-    all: [],
-    annotations: [],
-    highlights: [],
-    bookmarks: [],
-  });
-
   const user = useStore($user);
   const isOwner = user?.did === did;
   const [showEdit, setShowEdit] = useState(false);
   const [externalLink, setExternalLink] = useState<string | null>(null);
   const [showReportModal, setShowReportModal] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);
-  const [pagination, setPagination] = useState<
-    Record<string, { hasMore: boolean; offset: number }>
-  >({
-    all: { hasMore: false, offset: 0 },
-    annotations: { hasMore: false, offset: 0 },
-    highlights: { hasMore: false, offset: 0 },
-    bookmarks: { hasMore: false, offset: 0 },
-  });
   const loadMoreTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [modRelation, setModRelation] = useState<ModerationRelationship>({
     blocking: false,
···
 
   useEffect(() => {
     setProfile(null);
-    setItems({
-      all: [],
-      annotations: [],
-      highlights: [],
-      bookmarks: [],
-    });
     setCollections([]);
     setActiveTab("all");
     setLoading(true);
···
     };
   }, []);
 
+  const isHandle = !did.startsWith("did:");
+  const resolvedDid = isHandle ? profile?.did : did;
+
   useEffect(() => {
     const loadTabContent = async () => {
       const isHandle = !did.startsWith("did:");
···
       if (!resolvedDid) return;
 
       setDataLoading(true);
-      setPagination((prev) => ({
-        ...prev,
-        [activeTab]: { hasMore: false, offset: 0 },
-      }));
       try {
-        if (
-          ["all", "annotations", "highlights", "bookmarks"].includes(activeTab)
-        ) {
-          const res = await getFeed({
-            creator: resolvedDid,
-            limit: LIMIT,
-            motivation: motivationMap[activeTab],
-          });
-          setItems((prev) => ({
-            ...prev,
-            [activeTab]: res.items,
-          }));
-          setPagination((prev) => ({
-            ...prev,
-            [activeTab]: {
-              hasMore: res.hasMore,
-              offset: res.fetchedCount,
-            },
-          }));
-        } else if (activeTab === "collections") {
+        if (activeTab === "collections") {
           const res = await getCollections(resolvedDid);
           setCollections(res);
         }
···
     loadTabContent();
   }, [profile?.did, did, activeTab]);
 
-  const loadMore = useCallback(async () => {
-    if (activeTab === "collections") return;
-
-    const isHandle = !did.startsWith("did:");
-    const resolvedDid = isHandle ? profile?.did : did;
-    if (!resolvedDid) return;
-
-    const tabPagination = pagination[activeTab];
-    if (!tabPagination) return;
-
-    const capturedTab = activeTab;
-    setLoadingMore(true);
-    setLoadMoreError(null);
-
-    try {
-      const res = await getFeed({
-        creator: resolvedDid,
-        motivation: motivationMap[capturedTab],
-        limit: LIMIT,
-        offset: tabPagination.offset,
-      });
-      setItems((prev) => ({
-        ...prev,
-        [capturedTab]: [...prev[capturedTab], ...res.items],
-      }));
-      setPagination((prev) => ({
-        ...prev,
-        [capturedTab]: {
-          hasMore: res.hasMore,
-          offset: prev[capturedTab].offset + res.fetchedCount,
-        },
-      }));
-    } catch (e) {
-      console.error(e);
-      const msg = e instanceof Error ? e.message : "Something went wrong";
-      setLoadMoreError(msg);
-      if (loadMoreTimerRef.current) clearTimeout(loadMoreTimerRef.current);
-      loadMoreTimerRef.current = setTimeout(() => setLoadMoreError(null), 5000);
-    } finally {
-      setLoadingMore(false);
-    }
-  }, [did, profile?.did, activeTab, pagination]);
-
   if (loading) {
     return (
       <div className="max-w-2xl mx-auto animate-fade-in">
···
     { id: "bookmarks", label: "Bookmarks" },
     { id: "collections", label: "Collections" },
   ];
-
-  const currentItems = activeTab !== "collections" ? items[activeTab] : [];
 
   const LABEL_DESCRIPTIONS: Record<string, string> = {
     sexual: "Sexual Content",
···
               ))}
             </div>
           )
-        ) : currentItems.length > 0 ? (
-          <div className="space-y-3">
-            {currentItems.map((item) => (
-              <Card key={item.uri || item.cid} item={item} />
-            ))}
-          </div>
         ) : (
-          <EmptyState
-            icon={
-              activeTab === "annotations" ? (
-                <MessageSquare size={40} />
-              ) : activeTab === "highlights" ? (
-                <PenTool size={40} />
-              ) : (
-                <Bookmark size={40} />
-              )
-            }
-            message={
+          <FeedItems
+            key={activeTab}
+            type="all"
+            motivation={motivationMap[activeTab]}
+            creator={resolvedDid}
+            layout="list"
+            emptyMessage={
               isOwner
                 ? `You haven't added any ${activeTab} yet.`
                 : `No ${activeTab}`
             }
           />
-        )}
-
-        {activeTab !== "collections" && pagination[activeTab]?.hasMore && (
-          <div className="flex flex-col items-center gap-2 py-6">
-            {loadMoreError && (
-              <p className="text-sm text-red-500 dark:text-red-400">
-                Failed to load more: {loadMoreError}
-              </p>
-            )}
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={loadMore}
-              loading={loadingMore}
-              disabled={loadingMore}
-              className="rounded-xl"
-            >
-              Load more
-            </Button>
-          </div>
         )}
       </div>