aitherboard/src/lib/modules/feed/FeedPost.svelte

<script lang="ts">
  import ProfileBadge from '../../components/layout/ProfileBadge.svelte';
  import MarkdownRenderer from '../../components/content/MarkdownRenderer.svelte';
  import ReplyContext from '../../components/content/ReplyContext.svelte';
  import QuotedContext from '../../components/content/QuotedContext.svelte';
  import FeedReactionButtons from '../reactions/FeedReactionButtons.svelte';
  import { nostrClient } from '../../services/nostr/nostr-client.js';
  import { relayManager } from '../../services/nostr/relay-manager.js';
  import { onMount } from 'svelte';
  import type { NostrEvent } from '../../types/nostr.js';
  import { getKindInfo } from '../../types/kind-lookup.js';

  interface Props {
    post: NostrEvent;
    parentEvent?: NostrEvent; // Optional parent event if already loaded
    quotedEvent?: NostrEvent; // Optional quoted event if already loaded
    onReply?: (post: NostrEvent) => void;
    onParentLoaded?: (event: NostrEvent) => void; // Callback when parent is loaded
    onQuotedLoaded?: (event: NostrEvent) => void; // Callback when quoted event is loaded
  }

  let { post, parentEvent: providedParentEvent, quotedEvent: providedQuotedEvent, onReply, onParentLoaded, onQuotedLoaded }: Props = $props();

  let loadedParentEvent = $state<NostrEvent | null>(null);
  let loadingParent = $state(false);
  let expanded = $state(false);
  let contentElement: HTMLElement | null = $state(null);
  let needsExpansion = $state(false);

  // Derive the effective parent event: prefer provided, fall back to loaded
  let parentEvent = $derived(providedParentEvent || loadedParentEvent);

  // Sync provided parent event changes and load if needed
  $effect(() => {
    if (providedParentEvent) {
      // If provided parent event is available, use it
      return;
    }
    
    // If no provided parent and this is a reply, try to load it
    if (!loadedParentEvent && isReply()) {
      loadParentEvent();
    }
  });

  onMount(async () => {
    // If parent not provided and this is a reply, try to load it
    if (!providedParentEvent && !loadedParentEvent && isReply()) {
      await loadParentEvent();
    }
  });

  function getRelativeTime(): string {
    const now = Math.floor(Date.now() / 1000);
    const diff = now - post.created_at;
    const hours = Math.floor(diff / 3600);
    const days = Math.floor(diff / 86400);
    const minutes = Math.floor(diff / 60);

    if (days > 0) return `${days}d ago`;
    if (hours > 0) return `${hours}h ago`;
    if (minutes > 0) return `${minutes}m ago`;
    return 'just now';
  }

  function getClientName(): string | null {
    const clientTag = post.tags.find((t) => t[0] === 'client');
    return clientTag?.[1] || null;
  }

  function isReply(): boolean {
    // Check if this is a reply (has e tag pointing to another event)
    return post.tags.some((t) => t[0] === 'e' && t[1] !== post.id);
  }

  function getReplyEventId(): string | null {
    // Find the 'e' tag that's not the root (the direct parent)
    const replyTag = post.tags.find((t) => t[0] === 'e' && t[3] === 'reply');
    if (replyTag) return replyTag[1];
    
    // Fallback: find any 'e' tag that's not the root
    const rootId = getRootEventId();
    const eTag = post.tags.find((t) => t[0] === 'e' && t[1] !== rootId && t[1] !== post.id);
    return eTag?.[1] || null;
  }

  function getRootEventId(): string | null {
    const rootTag = post.tags.find((t) => t[0] === 'root');
    return rootTag?.[1] || null;
  }

  function hasQuotedEvent(): boolean {
    // Check if this event has a "q" tag (quoted event)
    return post.tags.some((t) => t[0] === 'q');
  }

  function getQuotedEventId(): string | null {
    // Find the 'q' tag (quoted event)
    const quotedTag = post.tags.find((t) => t[0] === 'q');
    return quotedTag?.[1] || null;
  }

  async function loadParentEvent() {
    const replyEventId = getReplyEventId();
    if (!replyEventId || loadingParent) return;

    loadingParent = true;
    try {
      const relays = relayManager.getFeedReadRelays();
      const events = await nostrClient.fetchEvents(
        [{ kinds: [1], ids: [replyEventId] }],
        relays,
        { useCache: true, cacheResults: true }
      );
      
      if (events.length > 0) {
        loadedParentEvent = events[0];
      }
    } catch (error) {
      console.error('Error loading parent event:', error);
    } finally {
      loadingParent = false;
    }
  }

  $effect(() => {
    if (contentElement) {
      checkContentHeight();
      // Use ResizeObserver to detect when content changes (e.g., images loading)
      const observer = new ResizeObserver(() => {
        checkContentHeight();
      });
      observer.observe(contentElement);
      return () => observer.disconnect();
    }
  });

  function checkContentHeight() {
    if (contentElement) {
      // Use requestAnimationFrame to ensure DOM is fully updated
      requestAnimationFrame(() => {
        if (contentElement) {
          needsExpansion = contentElement.scrollHeight > 500;
        }
      });
    }
  }

  function toggleExpanded() {
    expanded = !expanded;
  }

</script>

<article class="Feed-post" data-post-id={post.id} id="event-{post.id}" data-event-id={post.id}>
  <div class="card-content" class:expanded bind:this={contentElement}>
    {#if isReply()}
      <ReplyContext 
        {parentEvent} 
        parentEventId={getReplyEventId() || undefined}
        targetId={parentEvent ? `event-${parentEvent.id}` : undefined}
        onParentLoaded={onParentLoaded}
      />
    {/if}

    {#if hasQuotedEvent()}
      <QuotedContext 
        quotedEvent={providedQuotedEvent}
        quotedEventId={getQuotedEventId() || undefined}
        targetId={providedQuotedEvent ? `event-${providedQuotedEvent.id}` : undefined}
        onQuotedLoaded={onQuotedLoaded}
      />
    {/if}

    <div class="post-header flex items-center gap-2 mb-2">
      <ProfileBadge pubkey={post.pubkey} />
      <span class="text-xs text-fog-text-light dark:text-fog-dark-text-light">{getRelativeTime()}</span>
      {#if getClientName()}
        <span class="text-xs text-fog-text-light dark:text-fog-dark-text-light">via {getClientName()}</span>
      {/if}
      {#if isReply()}
        <span class="text-xs text-fog-text-light dark:text-fog-dark-text-light">↳ Reply</span>
      {/if}
    </div>

    <div class="post-content mb-2">
      <MarkdownRenderer content={post.content} />
    </div>

    <div class="post-actions flex items-center gap-4">
      <FeedReactionButtons event={post} />
      {#if onReply}
        <button
          onclick={() => onReply(post)}
          class="text-xs text-fog-accent dark:text-fog-dark-accent hover:underline"
        >
          Reply
        </button>
      {/if}
    </div>
  </div>
  
  {#if needsExpansion}
    <button
      onclick={toggleExpanded}
      class="show-more-button text-sm text-fog-accent dark:text-fog-dark-accent hover:underline mt-2"
    >
      {expanded ? 'Show less' : 'Show more'}
    </button>
  {/if}
  
  <div class="kind-badge">
    <span class="kind-number">{getKindInfo(post.kind).number}</span>
    <span class="kind-description">{getKindInfo(post.kind).description}</span>
  </div>
</article>

<style>
  .Feed-post {
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--fog-post, #ffffff);
    border: 1px solid var(--fog-border, #e5e7eb);
    border-radius: 0.25rem;
  }

  :global(.dark) .Feed-post {
    background: var(--fog-dark-post, #1f2937);
    border-color: var(--fog-dark-border, #374151);
  }

  .post-content {
    line-height: 1.6;
  }

  .post-actions {
    padding-top: 0.5rem;
    border-top: 1px solid var(--fog-border, #e5e7eb);
    margin-top: 0.5rem;
  }

  :global(.dark) .post-actions {
    border-top-color: var(--fog-dark-border, #374151);
  }

  .card-content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .card-content.expanded {
    max-height: none;
  }

  .show-more-button {
    width: 100%;
    text-align: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .kind-badge {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    font-size: 0.625rem;
    line-height: 1;
    color: var(--fog-text-light, #9ca3af);
  }

  :global(.dark) .kind-badge {
    color: var(--fog-dark-text-light, #6b7280);
  }

  .kind-number {
    font-weight: 600;
  }

  .kind-description {
    font-size: 0.5rem;
    opacity: 0.8;
  }

  .Feed-post {
    position: relative;
  }

</style>