fix(bug): show collection in dicover section on unfollowed or reload

src/components/organisms/Collections/CollectionCard/CollectionCard.tsx

@@ -62,6 +62,7 @@ interface CollectionCardProps {
   interactiveActions?: boolean;
   /** Show the owner Delete action. Opt in only from the My Collections overview. */
   showDeleteAction?: boolean;
+  unfollowCollectionHandler?: (id: string) => void;
 }
 
 /**
@@ -91,6 +92,7 @@ export function CollectionCard({
   presentation = 'landing',
   interactiveActions = true,
   showDeleteAction = false,
+  unfollowCollectionHandler,
 }: CollectionCardProps) {
   const compositeId = buildCompositeId({ pubky: authorPubky, id: postId });
   const isMobile = useIsMobile();
@@ -133,6 +135,7 @@ export function CollectionCard({
       isWideLayout={isWideLayout}
       interactiveActions={interactiveActions}
       showDeleteAction={showDeleteAction}
+      unfollowCollectionHandler={unfollowCollectionHandler}
     />
   );
 }
@@ -149,6 +152,7 @@ interface CollectionCardContentProps {
   isWideLayout: boolean;
   interactiveActions: boolean;
   showDeleteAction: boolean;
+  unfollowCollectionHandler?: (id: string) => void;
 }
 
 function CollectionCardContent({
@@ -163,6 +167,7 @@ function CollectionCardContent({
   isWideLayout,
   interactiveActions,
   showDeleteAction,
+  unfollowCollectionHandler,
 }: CollectionCardContentProps) {
   const isEmbed = presentation === 'embed';
   const showTagAddButton = interactiveActions && !isEmbed;
@@ -222,6 +227,9 @@ function CollectionCardContent({
     requireAuth(() => {
       void toggle();
     });
+    if (isBookmarked) {
+      unfollowCollectionHandler?.(compositeId);
+    }
   };
 
   // Collection-specific toast copy so success / failure reads as "Collection

src/components/organisms/Collections/CollectionsSections/CollectionsSections.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { Container } from '@/atoms/Container/Container';
 import { cn } from '@/libs/utils/utils';
 import { DiscoverCollections } from '@/organisms/Collections/DiscoverCollections/DiscoverCollections';
@@ -28,16 +29,21 @@ export function CollectionsSections({ className }: CollectionsSectionsProps) {
   const hasHydrated = useAuthStore((state) => state.hasHydrated);
   const currentUserPubky = useAuthStore((state) => state.currentUserPubky);
   const showPersonalSections = hasHydrated && Boolean(currentUserPubky);
+  const [unfollowedId, setUnfollowedId] = useState<string | null>(null);
+
+  function unfollowedCollectionIdHandler(id: string) {
+    setUnfollowedId(id);
+  }
 
   return (
     <Container overrideDefaults className={cn('flex w-full flex-col gap-12', className)}>
       {showPersonalSections ? (
         <>
           <MyCollections />
-          <FollowedCollections />
+          <FollowedCollections unfollowHandler={unfollowedCollectionIdHandler} />
         </>
       ) : null}
-      <DiscoverCollections />
+      <DiscoverCollections unfollowedId={unfollowedId} />
     </Container>
   );
 }

src/components/organisms/Collections/DiscoverCollections/DiscoverCollections.tsx

@@ -79,7 +79,7 @@ const EMPTY_CURSOR: DiscoverCursor = { lastPostId: undefined, streamTail: 0 };
  * raw posts and filtering removed them all), we surface a toast so the
  * click gets feedback instead of silently rendering nothing.
  */
-export function DiscoverCollections() {
+export function DiscoverCollections({ unfollowedId }: { unfollowedId?: string | null }) {
   const { toast } = useToast();
   // The stream layer filters own collections against the viewer read from the
   // auth store, so a viewer switch must reset and refetch (effect dep below).
@@ -102,6 +102,12 @@ export function DiscoverCollections() {
   const visibleIdsRef = useRef<string[]>([]);
   visibleIdsRef.current = visibleIds;
 
+  useEffect(() => {
+    if (unfollowedId && !visibleIdsRef.current.includes(unfollowedId)) {
+      setVisibleIds([unfollowedId, ...visibleIdsRef.current]);
+    }
+  }, [unfollowedId]);
+
   // Cancellation token for the in-flight initial fetch. When the effect
   // re-fires (StrictMode double-invoke, or genuine viewer switch), the old
   // fetch's closure sees `cancelled.current === true` and skips its state
@@ -146,7 +152,6 @@ export function DiscoverCollections() {
         limit: COLLECTIONS_SECTION_PAGE_SIZE,
       });
       if (token?.cancelled) return;
-
       // `nextPageIds` is already post-filter; `nextCursor` is the raw skip
       // offset the stream layer consumed to produce it. Dedup is defensive
       // only — the stream layer's cursor accounting should prevent overlap.

src/components/organisms/Collections/FollowedCollections/FollowedCollections.tsx

@@ -52,7 +52,7 @@ const EMPTY_IDS: string[] = [];
  * Live-reactive: a Follow / Unfollow performed anywhere in the app
  * pushes a card into / out of this section without a reload.
  */
-export function FollowedCollections() {
+export function FollowedCollections({ unfollowHandler }: { unfollowHandler?: (id: string) => void }) {
   const { toast } = useToast();
   // Gate the seed fetch on auth hydration. `StreamPostsController.getOrFetchStreamSlice`
   // reads `viewerId` from the auth store synchronously, and the bookmarks-collection
@@ -196,7 +196,15 @@ export function FollowedCollections() {
             // collection. Seed the bookmark hook so the CTA renders as
             // "Unfollow" on the first paint instead of briefly flashing
             // "Follow" while the async existence check resolves.
-            return <CollectionCard key={compositeId} authorPubky={pubky} postId={id} initialIsBookmarked />;
+            return (
+              <CollectionCard
+                key={compositeId}
+                authorPubky={pubky}
+                postId={id}
+                initialIsBookmarked
+                unfollowCollectionHandler={unfollowHandler}
+              />
+            );
           })}
         </Container>
       )}