mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 16:02:26 +00:00
81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
export function DMRelaySettings({ document: doc } = {}) {
|
|
if (!doc) {
|
|
throw new Error("DMRelaySettings requires a document reference.");
|
|
}
|
|
|
|
const root = doc.createElement("div");
|
|
root.id = "profileMessagesRelayPanel";
|
|
root.className = "dm-relay-settings card space-y-4 p-5";
|
|
|
|
const heading = doc.createElement("div");
|
|
heading.className = "space-y-2";
|
|
|
|
const title = doc.createElement("h3");
|
|
title.className = "text-base font-semibold text-text";
|
|
title.textContent = "DM relay hints";
|
|
heading.appendChild(title);
|
|
|
|
const description = doc.createElement("p");
|
|
description.className = "text-sm text-muted";
|
|
description.innerHTML =
|
|
'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.';
|
|
heading.appendChild(description);
|
|
root.appendChild(heading);
|
|
|
|
const addRow = doc.createElement("div");
|
|
addRow.className = "flex flex-col gap-3 sm:flex-row sm:items-end";
|
|
|
|
const label = doc.createElement("label");
|
|
label.className = "flex-1 text-sm text-muted-strong";
|
|
label.setAttribute("for", "profileMessagesRelayInput");
|
|
|
|
const labelTitle = doc.createElement("span");
|
|
labelTitle.className = "mb-2 block font-medium";
|
|
labelTitle.textContent = "Add a DM relay";
|
|
label.appendChild(labelTitle);
|
|
|
|
const input = doc.createElement("input");
|
|
input.id = "profileMessagesRelayInput";
|
|
input.type = "text";
|
|
input.inputMode = "url";
|
|
input.autocomplete = "off";
|
|
input.className = "input";
|
|
input.placeholder = "wss://relay.example.com";
|
|
label.appendChild(input);
|
|
addRow.appendChild(label);
|
|
|
|
const addButton = doc.createElement("button");
|
|
addButton.id = "profileMessagesRelayAdd";
|
|
addButton.type = "button";
|
|
addButton.className = "btn focus-ring";
|
|
addButton.textContent = "Add relay";
|
|
addRow.appendChild(addButton);
|
|
root.appendChild(addRow);
|
|
|
|
const publishRow = doc.createElement("div");
|
|
publishRow.className = "flex flex-wrap items-center gap-2";
|
|
|
|
const publishButton = doc.createElement("button");
|
|
publishButton.id = "profileMessagesRelayPublish";
|
|
publishButton.type = "button";
|
|
publishButton.className = "btn-ghost focus-ring text-xs";
|
|
publishButton.textContent = "Publish relay hints";
|
|
publishRow.appendChild(publishButton);
|
|
|
|
const status = doc.createElement("span");
|
|
status.id = "profileMessagesRelayStatus";
|
|
status.className = "text-xs text-muted";
|
|
status.setAttribute("role", "status");
|
|
status.setAttribute("aria-live", "polite");
|
|
publishRow.appendChild(status);
|
|
root.appendChild(publishRow);
|
|
|
|
const list = doc.createElement("ul");
|
|
list.id = "profileMessagesRelayList";
|
|
list.className = "grid-stack";
|
|
list.dataset.orientation = "vertical";
|
|
root.appendChild(list);
|
|
|
|
return root;
|
|
}
|