bitvid/components/dm-settings-modal.html

<div
  id="dmSettingsModal"
  class="bv-modal hidden"
  role="dialog"
  aria-modal="true"
  aria-labelledby="dmSettingsTitle"
  tabindex="-1"
  data-ds="new"
>
  <div class="bv-modal-backdrop"></div>

  <div
    class="bv-modal__panel w-full max-w-2xl h-auto max-h-[90vh] rounded-xl border border-border/50 bg-surface shadow-2xl overflow-hidden flex flex-col"
    tabindex="-1"
  >
    <!-- Modal Header -->
    <div class="modal-header border-b border-border/60 p-4 flex items-center justify-between bg-surface-2">
      <h2 id="dmSettingsTitle" class="text-lg font-bold text-text">DM Settings</h2>
      <button id="closeDmSettingsModal" class="modal-close btn-ghost btn-icon p-1 rounded-md text-muted hover:text-text focus-ring">
        <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>

    <!-- Modal Body -->
    <div class="flex-1 overflow-y-auto p-6 space-y-8 bg-surface">

        <!-- Privacy Settings -->
        <section class="space-y-4">
            <h3 class="text-base font-semibold text-text">Privacy</h3>
            <div class="card p-4 space-y-4">
                <label class="flex items-center justify-between gap-3 cursor-pointer">
                    <div class="space-y-1">
                        <span class="block text-sm font-medium text-text">Read receipts</span>
                        <span class="block text-xs text-muted">Let others know when you’ve seen their messages.</span>
                    </div>
                    <input type="checkbox" id="dmSettingsReadReceipts" class="toggle" />
                </label>
                <div class="h-px bg-border/40"></div>
                <label class="flex items-center justify-between gap-3 cursor-pointer">
                    <div class="space-y-1">
                        <span class="block text-sm font-medium text-text">Typing indicators</span>
                        <span class="block text-xs text-muted">Show when you’re typing a message.</span>
                    </div>
                    <input type="checkbox" id="dmSettingsTypingIndicators" class="toggle" />
                </label>
            </div>
        </section>

        <!-- Relay Hints -->
        <section class="space-y-4">
            <div class="space-y-1">
                <h3 class="text-base font-semibold text-text">DM Relay Hints</h3>
                <p class="text-sm text-muted">
                    Publish relay hints for direct messages as <span class="font-medium">kind:10050</span> events. Use WSS-only relay URLs so encrypted DM delivery stays secure.
                </p>
            </div>

            <div class="card p-5 space-y-5">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
                    <label class="flex-1 text-sm text-muted-strong" for="dmSettingsRelayInput">
                        <span class="mb-2 block font-medium">Add a DM relay</span>
                        <input
                            id="dmSettingsRelayInput"
                            type="text"
                            inputmode="url"
                            autocomplete="off"
                            class="input"
                            placeholder="wss://relay.example.com"
                        />
                    </label>
                    <button id="dmSettingsRelayAddBtn" type="button" class="btn focus-ring">
                        Add relay
                    </button>
                </div>

                <div class="space-y-2">
                     <div class="flex items-center justify-between">
                        <span class="text-xs font-medium text-muted-strong uppercase tracking-wider">Your list</span>
                     </div>
                     <ul id="dmSettingsRelayList" class="grid-stack space-y-2" data-orientation="vertical"></ul>
                     <p id="dmSettingsRelayEmpty" class="text-sm text-muted italic hidden">No DM relay hints configured.</p>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-3 pt-2 border-t border-border/40">
                    <span id="dmSettingsRelayStatus" class="text-xs text-muted" role="status" aria-live="polite"></span>
                    <button id="dmSettingsRelayPublishBtn" type="button" class="btn-ghost focus-ring text-xs">
                        Publish relay hints
                    </button>
                </div>
            </div>
        </section>

    </div>
  </div>
</div>