aitherboard/src/lib/modules/comments/Comment.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 type { NostrEvent } from '../../types/nostr.js';
  import { getKindInfo } from '../../types/kind-lookup.js';

  interface Props {
    comment: NostrEvent;
    parentEvent?: NostrEvent;
    onReply?: (comment: NostrEvent) => void;
  }

  let { comment, parentEvent, onReply }: Props = $props();
  let expanded = $state(false);
  let contentElement: HTMLElement | null = $state(null);
  let needsExpansion = $state(false);

  function getRelativeTime(): string {
    const now = Math.floor(Date.now() / 1000);
    const diff = now - comment.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 = comment.tags.find((t) => t[0] === 'client');
    return clientTag?.[1] || null;
  }


  function handleReply() {
    onReply?.(comment);
  }

  $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
  id="comment-{comment.id}"
  class="comment"
  data-event-id={comment.id}
>
  <div class="card-content" class:expanded bind:this={contentElement}>
    {#if parentEvent}
      <ReplyContext {parentEvent} targetId="comment-{parentEvent.id}" />
    {/if}

    <div class="comment-header flex items-center gap-2 mb-2">
      <ProfileBadge pubkey={comment.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}
    </div>

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

    <div class="comment-actions flex gap-2">
      <button
        onclick={handleReply}
        class="text-xs text-fog-accent dark:text-fog-dark-accent hover:underline"
      >
        Reply
      </button>
    </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(comment.kind).number}</span>
    <span class="kind-description">{getKindInfo(comment.kind).description}</span>
  </div>
</article>

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

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


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

  .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;
  }
</style>