aitherboard/src/lib/components/content/MetadataCard.svelte

<script lang="ts">
  import type { NostrEvent } from '../../types/nostr.js';
  import { KIND } from '../../types/kind-lookup.js';

  interface Props {
    event: NostrEvent;
    hideTitle?: boolean; // If true, don't show title (already displayed elsewhere)
    hideSummary?: boolean; // If true, don't show summary (already displayed elsewhere)
  }

  let { event, hideTitle = false, hideSummary = false }: Props = $props();

  // Extract metadata tags (using $derived for reactivity)
  // Only show fields that are NOT in the event header (CardHeader)
  // Header shows: pubkey (author), title, summary, time, client, topics, view/reply buttons, menu
  // Images are shown via MediaAttachments
  // So MetadataCard should only show: description, author tag (if different from pubkey), and other tags
  const description = $derived(event.tags.find(t => t[0] === 'description' && t[1])?.[1]);
  const rawSummary = $derived(event.tags.find(t => t[0] === 'summary' && t[1])?.[1]);
  const summary = $derived(hideSummary ? null : rawSummary); // Hide if already in header
  const authorTag = $derived(event.tags.find(t => t[0] === 'author' && t[1])?.[1]);
  // Only show author tag if it's different from the event pubkey (which is already shown in header)
  const author = $derived(authorTag && authorTag !== event.pubkey ? authorTag : null);
  const title = $derived(
    hideTitle ? null :
    (event.tags.find(t => t[0] === 'title' && t[1])?.[1] || 
    (() => {
      // Fallback to d-tag in Title Case
      const dTag = event.tags.find(t => t[0] === 'd' && t[1])?.[1];
      if (dTag) {
        return dTag.split('-').map(word => 
          word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
        ).join(' ');
      }
      return null;
    })())
  );

  const hasMetadata = $derived(description || summary || author || title);
  const hasContent = $derived(event.content && event.content.trim().length > 0);
  const shouldShowMetadata = $derived(hasMetadata || !hasContent); // Show metadata if it exists OR if there's no content
  
  // Media kinds check (for filtering tags display)
  const MEDIA_KINDS: number[] = [KIND.PICTURE_NOTE, KIND.VIDEO_NOTE, KIND.SHORT_VIDEO_NOTE, KIND.VOICE_NOTE, KIND.VOICE_REPLY];
  const isMediaKind = $derived(MEDIA_KINDS.includes(event.kind));
</script>

{#if shouldShowMetadata}
  <div class="metadata-card">
    {#if title}
      <h2 class="metadata-title">{title}</h2>
    {/if}
    
    <div class="metadata-content">
      {#if description}
        <p class="metadata-description">{description}</p>
      {/if}
      
      {#if summary}
        <p class="metadata-summary">{summary}</p>
      {/if}
      
      {#if author}
        <p class="metadata-author">Author: {author}</p>
      {/if}
      
      {#if !hasContent && !isMediaKind}
        <!-- Show all tags when there's no content, but skip for media kinds (MediaAttachments handles those) -->
        <div class="metadata-tags">
          {#each event.tags as tag}
            {#if tag[0] !== 'image' && tag[0] !== 'description' && tag[0] !== 'summary' && tag[0] !== 'author' && tag[0] !== 'title' && tag[0] !== 'd' && tag[0] !== 'imeta' && tag[0] !== 'file' && tag[0] !== 'alt' && tag[0] !== 'x' && tag[0] !== 'm'}
              <div class="metadata-tag">
                <span class="metadata-tag-name">{tag[0]}:</span>
                {#each tag.slice(1) as value}
                  {#if value}
                    <span class="metadata-tag-value">{value}</span>
                  {/if}
                {/each}
              </div>
            {/if}
          {/each}
        </div>
      {/if}
    </div>
  </div>
{/if}

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

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

  .metadata-title {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--fog-text, #1f2937);
  }

  :global(.dark) .metadata-title {
    color: var(--fog-dark-text, #f9fafb);
  }

  .metadata-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .metadata-description,
  .metadata-summary {
    margin: 0;
    color: var(--fog-text, #1f2937);
    line-height: 1.6;
  }

  :global(.dark) .metadata-description,
  :global(.dark) .metadata-summary {
    color: var(--fog-dark-text, #f9fafb);
  }

  .metadata-author {
    margin: 0;
    font-size: 0.875rem;
    color: var(--fog-text-light, #52667a);
  }

  :global(.dark) .metadata-author {
    color: var(--fog-dark-text-light, #a8b8d0);
  }

  .metadata-tags {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fog-border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

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

  .metadata-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.875rem;
  }

  .metadata-tag-name {
    font-weight: 600;
    color: var(--fog-text, #1f2937);
  }

  :global(.dark) .metadata-tag-name {
    color: var(--fog-dark-text, #f9fafb);
  }

  .metadata-tag-value {
    color: var(--fog-text-light, #52667a);
    font-family: monospace;
    word-break: break-all;
  }

  :global(.dark) .metadata-tag-value {
    color: var(--fog-dark-text-light, #a8b8d0);
  }
</style>