refactor(editor): improve nostr preview display with kind icons

Updates the nostr event preview chips to show more meaningful information:

Changes:
- Add getKindIcon() helper function with 15+ kind mappings
- Display format: kind-icon + author/id (e.g., "📄 a1b2c3d4")
- For naddr: show kind icon + author pubkey (first 8 chars)
- For nevent: show kind icon + author if available, else event ID
- For note: show 📝 + event ID (first 8 chars)
- For npub/nprofile: show 👤 + pubkey (first 8 chars)
- Removed verbose type labels (NPUB, NEVENT, etc.)
- Increased label max-width to 120px for better readability

Kind icon mappings:
- 👤 Profile (kind 0)
- 📝 Note (kind 1)
- 👥 Contacts (kind 3)
- 🔁 Repost (kind 6)
- ❤️ Reaction (kind 7)
-  Zap (kind 9735)
- 📄 Long-form (kind 30023)
- 🎙️ Live event (kind 30311)
- 📦 File metadata (kind 1063)
- 📌 Addressable events (30000-39999)
- 🔄 Replaceable events (10000-19999)

Result: More compact, visually intuitive previews that immediately
convey the content type and author without requiring event fetching.
This commit is contained in:
Claude
2026-01-20 19:27:04 +00:00
parent 37cecd0db7
commit 1b608fb960

View File

@@ -337,43 +337,60 @@ const NostrEventPreview = Node.create({
"nostr-event-preview inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-primary/10 border border-primary/30 text-xs align-middle";
dom.contentEditable = "false";
// Icon based on type
// Helper to get kind icon
const getKindIcon = (kind?: number): string => {
if (!kind) return "📝";
if (kind === 0) return "👤"; // Profile
if (kind === 1) return "📝"; // Note
if (kind === 3) return "👥"; // Contacts
if (kind === 6) return "🔁"; // Repost
if (kind === 7) return "❤️"; // Reaction
if (kind === 9735) return "⚡"; // Zap
if (kind === 30023) return "📄"; // Long-form
if (kind === 30311) return "🎙️"; // Live event
if (kind === 1063) return "📦"; // File metadata
if (kind >= 30000 && kind < 40000) return "📌"; // Addressable
if (kind >= 10000 && kind < 20000) return "🔄"; // Replaceable
return "📝"; // Default
};
// Icon based on type and kind
const icon = document.createElement("span");
icon.className = "text-primary flex-shrink-0";
if (type === "npub" || type === "nprofile") {
icon.textContent = "👤";
} else if (type === "note" || type === "nevent") {
icon.textContent = "📝";
} else if (type === "naddr") {
icon.textContent = "📄";
} else {
icon.textContent = "🔗";
}
dom.appendChild(icon);
// Type label
const typeLabel = document.createElement("span");
typeLabel.className = "text-primary font-mono font-medium";
typeLabel.textContent = type.toUpperCase();
dom.appendChild(typeLabel);
// Content label
const label = document.createElement("span");
label.className = "text-muted-foreground truncate max-w-[120px]";
// ID preview (truncated)
const idLabel = document.createElement("span");
idLabel.className = "text-muted-foreground truncate max-w-[80px]";
if (type === "npub") {
idLabel.textContent = `${data.slice(0, 8)}...`;
} else if (type === "note") {
idLabel.textContent = `${data.slice(0, 8)}...`;
} else if (type === "nevent") {
idLabel.textContent = `${data.id.slice(0, 8)}...`;
} else if (type === "naddr") {
idLabel.textContent = data.identifier
? `${data.identifier.slice(0, 12)}...`
: `kind:${data.kind}`;
// npub: 👤 pubkey
icon.textContent = "👤";
label.textContent = data.slice(0, 8);
} else if (type === "nprofile") {
idLabel.textContent = `${data.pubkey.slice(0, 8)}...`;
// nprofile: 👤 pubkey
icon.textContent = "👤";
label.textContent = data.pubkey.slice(0, 8);
} else if (type === "note") {
// note: 📝 event-id
icon.textContent = "📝";
label.textContent = data.slice(0, 8);
} else if (type === "nevent") {
// nevent: kind-icon event-id (or author if available)
icon.textContent = getKindIcon(data.kind);
// nevent can optionally include author
if (data.author) {
label.textContent = data.author.slice(0, 8);
} else {
label.textContent = data.id.slice(0, 8);
}
} else if (type === "naddr") {
// naddr: kind-icon author
icon.textContent = getKindIcon(data.kind);
label.textContent = data.pubkey.slice(0, 8);
}
dom.appendChild(idLabel);
dom.appendChild(icon);
dom.appendChild(label);
return { dom };
};