Enhance reply visibility and collapse functionality in ThreadedPost component

- Updated the collapse state logic to automatically collapse replies if there are more than 2 direct replies, improving user experience by reducing clutter.
- Added a "Load more replies" button to allow users to expand and view additional replies when collapsed, enhancing interaction and engagement.

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

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

@@ -26,8 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-// Collapse state for this post's replies
-const isCollapsed = ref(false)
+// Collapse state for this post's replies - auto-collapse if more than 2 direct replies
+const isCollapsed = ref((props.post.replies?.length || 0) > 2)
 
 // Check if this is an admin post
 const isAdminPost = computed(() => props.adminPubkeys.includes(props.post.pubkey))
@@ -230,10 +230,11 @@ function getRideshareType(post: FeedPost): string {
         </div>
       </div>
 
-      <!-- Render replies recursively (hidden when collapsed) -->
-      <div v-if="!isCollapsed && hasReplies">
+      <!-- Render replies recursively -->
+      <div v-if="hasReplies">
+        <!-- Show first 2 replies when collapsed, or all when expanded -->
         <ThreadedPost
-          v-for="reply in post.replies"
+          v-for="reply in isCollapsed ? post.replies?.slice(0, 2) : post.replies"
           :key="reply.id"
           :post="reply"
           :admin-pubkeys="adminPubkeys"
@@ -243,6 +244,22 @@ function getRideshareType(post: FeedPost): string {
           @reply-to-note="$emit('reply-to-note', $event)"
           @toggle-like="$emit('toggle-like', $event)"
         />
+
+        <!-- Show "Load more replies" button when collapsed and there are more than 2 replies -->
+        <div
+          v-if="isCollapsed && (post.replies?.length || 0) > 2"
+          class="mt-2"
+          :style="{ marginLeft: `${(depth + 1) * 6}px` }"
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            class="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
+            @click="toggleCollapse"
+          >
+            Show {{ (post.replies?.length || 0) - 2 }} more {{ (post.replies?.length || 0) - 2 === 1 ? 'reply' : 'replies' }}
+          </Button>
+        </div>
       </div>
     </div>
   </div>