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

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { formatDistanceToNow } from 'date-fns'
import { Reply, Heart, Share, ChevronUp, ChevronDown } from 'lucide-vue-next'
import type { FeedPost } from '../services/FeedService'

interface Props {
  post: FeedPost
  adminPubkeys?: string[]
  getDisplayName: (pubkey: string) => string
  getEventReactions: (eventId: string) => { likes: number; userHasLiked: boolean }
  depth?: number
}

interface Emits {
  (e: 'reply-to-note', note: { id: string; content: string; pubkey: string }): void
  (e: 'toggle-like', note: FeedPost): void
}

const props = withDefaults(defineProps<Props>(), {
  adminPubkeys: () => [],
  depth: 0
})

const emit = defineEmits<Emits>()

// 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))

// Check if post has replies
const hasReplies = computed(() => props.post.replies && props.post.replies.length > 0)

// Count total nested replies
const replyCount = computed(() => {
  const countReplies = (post: FeedPost): number => {
    let count = (post.replies?.length || 0)
    post.replies?.forEach(reply => {
      count += countReplies(reply)
    })
    return count
  }
  return countReplies(props.post)
})

// Toggle collapse state
function toggleCollapse() {
  isCollapsed.value = !isCollapsed.value
}

// Handle reply action
function onReplyToNote() {
  emit('reply-to-note', {
    id: props.post.id,
    content: props.post.content,
    pubkey: props.post.pubkey
  })
}

// Handle like action
function onToggleLike() {
  emit('toggle-like', props.post)
}

// Check if a post is a rideshare post (for badge display)
function isRidesharePost(post: FeedPost): boolean {
  const hasTags = post.tags?.some((tag: string[]) =>
    tag[0] === 't' && ['rideshare', 'carpool'].includes(tag[1])
  ) || false

  const hasRideshareTypeTags = post.tags?.some((tag: string[]) =>
    tag[0] === 'rideshare_type' && ['offering', 'seeking'].includes(tag[1])
  ) || false

  const hasRideshareContent = !!(post.content && (
    post.content.includes('🚗 OFFERING RIDE') ||
    post.content.includes('🚶 SEEKING RIDE') ||
    post.content.includes('#rideshare') ||
    post.content.includes('#carpool')
  ))

  return hasTags || hasRideshareTypeTags || hasRideshareContent
}

// Get rideshare type from post
function getRideshareType(post: FeedPost): string {
  const typeTag = post.tags?.find((tag: string[]) => tag[0] === 'rideshare_type')
  if (typeTag) {
    return typeTag[1] === 'offering' ? 'Offering Ride' : 'Seeking Ride'
  }

  if (post.content?.includes('🚗 OFFERING RIDE')) return 'Offering Ride'
  if (post.content?.includes('🚶 SEEKING RIDE')) return 'Seeking Ride'

  return 'Rideshare'
}
</script>

<template>
  <div class="relative">
    <!-- Vertical line connecting to parent (for nested replies) -->
    <div
      v-if="depth > 0"
      class="absolute left-0 top-0 bottom-0 w-px bg-muted-foreground/60"
      :style="{ marginLeft: `${depth * 6 + 3}px` }"
    />

    <!-- Post container with indentation -->
    <div
      :class="{
        'pl-2': depth > 0,
        'hover:bg-accent/50': true,
        'transition-colors': true,
        'border-b': depth === 0,
        'border-border/40': depth === 0
      }"
      :style="{ marginLeft: `${depth * 6}px` }"
    >
      <div class="p-3 relative">

        <!-- Post Header -->
        <div class="flex items-center justify-between mb-2">
          <div class="flex items-center gap-2">
            <!-- Collapse button for posts with replies -->
            <Button
              v-if="hasReplies"
              variant="ghost"
              size="sm"
              class="h-6 w-6 p-0"
              @click="toggleCollapse"
            >
              <ChevronDown v-if="!isCollapsed" class="h-4 w-4" />
              <ChevronUp v-else class="h-4 w-4" />
            </Button>
            <div v-else class="w-6" />

            <!-- Badges -->
            <Badge
              v-if="isAdminPost"
              variant="default"
              class="text-xs px-1.5 py-0.5"
            >
              Admin
            </Badge>
            <Badge
              v-if="post.isReply && depth === 0"
              variant="secondary"
              class="text-xs px-1.5 py-0.5"
            >
              Reply
            </Badge>
            <Badge
              v-if="isRidesharePost(post)"
              variant="secondary"
              class="text-xs px-1.5 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
            >
              🚗 {{ getRideshareType(post) }}
            </Badge>

            <!-- Author name -->
            <span class="text-sm font-medium">{{ getDisplayName(post.pubkey) }}</span>

            <!-- Reply count badge if collapsed -->
            <Badge
              v-if="isCollapsed && hasReplies"
              variant="outline"
              class="text-xs px-1.5 py-0.5"
            >
              {{ replyCount }} {{ replyCount === 1 ? 'reply' : 'replies' }}
            </Badge>
          </div>

          <!-- Timestamp -->
          <span class="text-xs text-muted-foreground">
            {{ formatDistanceToNow(post.created_at * 1000, { addSuffix: true }) }}
          </span>
        </div>

        <!-- Post Content (hidden when collapsed if has replies) -->
        <div
          v-if="!isCollapsed || !hasReplies"
          class="text-sm leading-relaxed whitespace-pre-wrap"
        >
          {{ post.content }}
        </div>

        <!-- Post Actions (hidden when collapsed) -->
        <div v-if="!isCollapsed" class="mt-2">
          <div class="flex items-center gap-1">
            <!-- Reply Button -->
            <Button
              variant="ghost"
              size="sm"
              class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/50"
              @click="onReplyToNote"
            >
              <Reply class="h-3 w-3" />
            </Button>

            <!-- Like Button -->
            <Button
              variant="ghost"
              size="sm"
              class="h-6 px-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
              :class="{ 'text-red-500 hover:text-red-600': getEventReactions(post.id).userHasLiked }"
              @click="onToggleLike"
            >
              <Heart
                class="h-3 w-3"
                :class="{ 'fill-current': getEventReactions(post.id).userHasLiked }"
              />
              <span v-if="getEventReactions(post.id).likes > 0" class="ml-1">
                {{ getEventReactions(post.id).likes }}
              </span>
            </Button>

            <!-- Share Button -->
            <Button
              variant="ghost"
              size="sm"
              class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/50"
            >
              <Share class="h-3 w-3" />
            </Button>
          </div>
        </div>
      </div>

      <!-- Render replies recursively -->
      <div v-if="hasReplies">
        <!-- Show first 2 replies when collapsed, or all when expanded -->
        <ThreadedPost
          v-for="reply in isCollapsed ? post.replies?.slice(0, 2) : post.replies"
          :key="reply.id"
          :post="reply"
          :admin-pubkeys="adminPubkeys"
          :get-display-name="getDisplayName"
          :get-event-reactions="getEventReactions"
          :depth="depth + 1"
          @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>
</template>