Implement centralized collapse state management in NostrFeed component

- Introduced a centralized mechanism for managing the collapse state of posts, allowing for automatic collapsing of posts with more than 2 direct replies.
- Enhanced the ThreadedPost component to utilize the centralized collapse state, improving the visibility and interaction of nested replies.
- Added cascading collapse functionality to ensure that all descendant posts are collapsed when a parent post is collapsed.

These changes contribute to a more organized and user-friendly experience within the NostrFeed module.

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, watch, ref } from 'vue'
 import { Button } from '@/components/ui/button'
 import { Megaphone, RefreshCw, AlertCircle } from 'lucide-vue-next'
 import { useFeed } from '../composables/useFeed'
@@ -34,6 +34,32 @@ const { posts: notes, threadedPosts, isLoading, error, refreshFeed } = useFeed({
   contentFilters: props.contentFilters
 })
 
+// Centralized collapse state management
+const collapsedPosts = ref(new Set<string>())
+
+// Initialize collapsed state for posts with many replies
+watch(threadedPosts, (newPosts) => {
+  if (newPosts.length > 0) {
+    const newCollapsed = new Set(collapsedPosts.value)
+
+    // Auto-collapse posts with more than 2 direct replies
+    const addCollapsedPosts = (posts: any[]) => {
+      posts.forEach(post => {
+        if ((post.replies?.length || 0) > 2) {
+          newCollapsed.add(post.id)
+        }
+        // Recursively check nested replies
+        if (post.replies?.length > 0) {
+          addCollapsedPosts(post.replies)
+        }
+      })
+    }
+
+    addCollapsedPosts(newPosts)
+    collapsedPosts.value = newCollapsed
+  }
+}, { immediate: true })
+
 // Use profiles service for display names
 const { getDisplayName, fetchProfiles } = useProfiles()
 
@@ -103,6 +129,44 @@ async function onToggleLike(note: FeedPost) {
     console.error('Failed to toggle like:', error)
   }
 }
+
+// Handle collapse toggle with cascading behavior
+function onToggleCollapse(postId: string) {
+  const newCollapsed = new Set(collapsedPosts.value)
+
+  if (newCollapsed.has(postId)) {
+    // Expand this post (remove from collapsed set)
+    newCollapsed.delete(postId)
+  } else {
+    // Collapse this post (add to collapsed set)
+    newCollapsed.add(postId)
+
+    // Find all descendant posts and collapse them too (cascading collapse)
+    const collapseDescendants = (posts: any[], targetId: string) => {
+      posts.forEach(post => {
+        if (post.id === targetId && post.replies) {
+          // Found the target post, collapse all its descendants
+          const addAllDescendants = (replies: any[]) => {
+            replies.forEach(reply => {
+              newCollapsed.add(reply.id)
+              if (reply.replies?.length > 0) {
+                addAllDescendants(reply.replies)
+              }
+            })
+          }
+          addAllDescendants(post.replies)
+        } else if (post.replies?.length > 0) {
+          // Keep searching in nested replies
+          collapseDescendants(post.replies, targetId)
+        }
+      })
+    }
+
+    collapseDescendants(threadedPosts.value, postId)
+  }
+
+  collapsedPosts.value = newCollapsed
+}
 </script>
 
 <template>
@@ -181,8 +245,11 @@ async function onToggleLike(note: FeedPost) {
             :get-display-name="getDisplayName"
             :get-event-reactions="getEventReactions"
             :depth="0"
+            :parent-collapsed="false"
+            :collapsed-posts="collapsedPosts"
             @reply-to-note="onReplyToNote"
             @toggle-like="onToggleLike"
+            @toggle-collapse="onToggleCollapse"
           />
         </div>
       </div>