Implement limited replies feature in NostrFeed component

- Introduced a mechanism to track posts that should display limited replies (only the first 2) instead of collapsing them entirely, enhancing user interaction with threaded discussions.
- Updated the ThreadedPost component to support toggling between limited and full replies, improving visibility and engagement with nested replies.
- Enhanced the FeedService to ensure proper filtering and handling of feed types, contributing to a more organized and user-friendly experience within the NostrFeed module.

src/modules/nostr-feed/components/NostrFeed.vue

@@ -37,26 +37,30 @@ const { posts: notes, threadedPosts, isLoading, error, refreshFeed } = useFeed({
 // Centralized collapse state management
 const collapsedPosts = ref(new Set<string>())
 
-// Initialize collapsed state for posts with many replies
+// Track which posts should show limited replies (not collapsed, just limited)
+const limitedReplyPosts = ref(new Set<string>())
+
+// Initialize posts that should show limited replies (>2 children)
 watch(threadedPosts, (newPosts) => {
   if (newPosts.length > 0) {
-    const newCollapsed = new Set(collapsedPosts.value)
+    const newLimited = new Set<string>()
 
-    // Auto-collapse posts with more than 2 direct replies
-    const addCollapsedPosts = (posts: any[]) => {
+    // Find posts with more than 2 direct replies - these should show limited replies by default
+    const findLimitedPosts = (posts: any[]) => {
       posts.forEach(post => {
         if ((post.replies?.length || 0) > 2) {
-          newCollapsed.add(post.id)
+          // Mark this post as having limited replies shown
+          newLimited.add(post.id)
         }
         // Recursively check nested replies
         if (post.replies?.length > 0) {
-          addCollapsedPosts(post.replies)
+          findLimitedPosts(post.replies)
         }
       })
     }
 
-    addCollapsedPosts(newPosts)
-    collapsedPosts.value = newCollapsed
+    findLimitedPosts(newPosts)
+    limitedReplyPosts.value = newLimited
   }
 }, { immediate: true })
 
@@ -112,6 +116,7 @@ const feedDescription = computed(() => {
 
 
 
+
 // Handle reply to note
 function onReplyToNote(note: any) {
   emit('reply-to-note', {
@@ -167,6 +172,21 @@ function onToggleCollapse(postId: string) {
 
   collapsedPosts.value = newCollapsed
 }
+
+// Handle toggle limited replies (show/hide extra replies beyond first 2)
+function onToggleLimited(postId: string) {
+  const newLimited = new Set(limitedReplyPosts.value)
+
+  if (newLimited.has(postId)) {
+    // Show all replies
+    newLimited.delete(postId)
+  } else {
+    // Limit to first 2 replies
+    newLimited.add(postId)
+  }
+
+  limitedReplyPosts.value = newLimited
+}
 </script>
 
 <template>
@@ -236,6 +256,10 @@ function onToggleCollapse(postId: string) {
 
       <!-- Posts List - Full height scroll with threaded view -->
       <div v-else class="h-full overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+        <!-- Debug info for troubleshooting -->
+        <div v-if="threadedPosts.length === 0" class="p-4 text-sm text-muted-foreground">
+          Debug: threadedPosts.length = {{ threadedPosts.length }}, posts.length = {{ notes.length }}
+        </div>
         <div>
           <ThreadedPost
             v-for="post in threadedPosts"
@@ -247,9 +271,11 @@ function onToggleCollapse(postId: string) {
             :depth="0"
             :parent-collapsed="false"
             :collapsed-posts="collapsedPosts"
+            :limited-reply-posts="limitedReplyPosts"
             @reply-to-note="onReplyToNote"
             @toggle-like="onToggleLike"
             @toggle-collapse="onToggleCollapse"
+            @toggle-limited="onToggleLimited"
           />
         </div>
       </div>