bitvid/components/share-nostr-modal.html

<!-- components/share-nostr-modal.html -->
<div
  id="shareNostrModal"
  class="bv-modal hidden items-start justify-center md:items-center"
  role="dialog"
  aria-modal="true"
  aria-labelledby="shareNostrModalTitle"
  aria-describedby="shareNostrModalDescription"
  data-ds="new"
>
  <div class="bv-modal-backdrop" data-dismiss></div>

  <div class="modal-sheet max-h-modal-shell overflow-hidden flex flex-col w-full max-w-2xl" tabindex="-1">
    <div class="modal-header">
      <h2 id="shareNostrModalTitle" class="text-xl font-bold text-text">
        Share on Nostr
      </h2>
      <button
        id="closeShareNostrModal"
        class="modal-close"
        type="button"
        aria-label="Close share modal"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <div class="modal-body space-y-6 overflow-y-auto flex-1 min-h-0 custom-scrollbar p-6">
      <p id="shareNostrModalDescription" class="text-sm text-muted">
        Publish a short note and thumbnail preview to your preferred Nostr relays.
      </p>

      <div class="space-y-2">
        <label for="shareNostrContent" class="block text-sm font-medium text-text">
          Post content
        </label>
        <textarea
          id="shareNostrContent"
          rows="6"
          class="textarea"
          placeholder="Write your message"
        ></textarea>
      </div>

      <div class="space-y-3 rounded-lg border border-border bg-panel/50 p-4">
        <div class="flex items-center justify-between">
          <span class="text-xs font-semibold uppercase tracking-wide text-muted">
            Preview
          </span>
          <a
            id="shareNostrPreviewUrl"
            class="text-xs text-accent hover:underline break-all"
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          >
            --
          </a>
        </div>
        <div class="flex items-start gap-4">
          <div class="h-16 w-24 rounded-md border border-border bg-surface-alt overflow-hidden flex items-center justify-center">
            <img
              id="shareNostrPreviewThumbnail"
              class="h-full w-full object-cover hidden"
              alt="Video thumbnail preview"
            />
            <span
              id="shareNostrPreviewFallback"
              class="text-xs text-muted text-center px-2"
            >
              No thumbnail
            </span>
          </div>
          <div class="flex-1 space-y-1 min-w-0">
            <p id="shareNostrPreviewTitle" class="text-sm font-semibold text-text truncate">
              --
            </p>
            <p id="shareNostrPreviewMeta" class="text-xs text-muted truncate">
              --
            </p>
          </div>
        </div>
      </div>

      <div class="space-y-2">
        <label for="shareNostrRelays" class="block text-sm font-medium text-text">
          Relays to post to
        </label>
        <input
          id="shareNostrRelays"
          type="text"
          class="input"
          placeholder="wss://relay.example, wss://relay.example2"
        />
        <p class="text-xs text-muted">
          Separate relay URLs with commas. The list defaults to your write relays.
        </p>
        <div id="shareNostrRelayPills" class="flex flex-wrap gap-2"></div>
      </div>
    </div>

    <div class="modal-footer flex flex-col gap-3 border-t border-border bg-panel/30 p-4 sm:flex-row sm:items-center sm:justify-between">
      <p id="shareNostrStatus" class="text-xs text-muted" role="status" aria-live="polite"></p>
      <div class="flex items-center gap-3">
        <button id="cancelShareNostr" type="button" class="btn-ghost">
          Cancel
        </button>
        <button id="postShareNostr" type="button" class="btn-primary">
          Post
        </button>
      </div>
    </div>
  </div>
</div>