Browse Source
- Add comprehensive eventKinds.js database with all NIPs event kinds including templates, descriptions, NIP references, and type flags - Create EventTemplateSelector.svelte modal with search functionality and category filtering (Social, Messaging, Lists, Marketplace, etc.) - Update ComposeView with "Generate Template" button and error banner for displaying permission-aware publish error messages - Enhance publishEvent() in App.svelte with detailed error handling that explains policy restrictions, permission issues, and provides actionable guidance for users - Add permission pre-check to prevent read-only users from attempting to publish events - Update CLAUDE.md with Web UI event templates documentation - Create docs/WEB_UI_EVENT_TEMPLATES.md with comprehensive user guide Files modified: - app/web/src/eventKinds.js (new) - app/web/src/EventTemplateSelector.svelte (new) - app/web/src/ComposeView.svelte - app/web/src/App.svelte - docs/WEB_UI_EVENT_TEMPLATES.md (new) - CLAUDE.md - pkg/version/version 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>main
mleku
4 weeks ago
7 changed files with 3433 additions and 16 deletions
@ -0,0 +1,404 @@
@@ -0,0 +1,404 @@
|
||||
<script> |
||||
import { createEventDispatcher } from "svelte"; |
||||
import { eventKinds, kindCategories, createTemplateEvent, searchEventKinds } from "./eventKinds.js"; |
||||
|
||||
export let isOpen = false; |
||||
export let userPubkey = ""; |
||||
|
||||
const dispatch = createEventDispatcher(); |
||||
|
||||
let searchQuery = ""; |
||||
let selectedCategory = "all"; |
||||
let filteredKinds = eventKinds; |
||||
|
||||
// Filter kinds based on search and category |
||||
$: { |
||||
let kinds = eventKinds; |
||||
|
||||
// Apply category filter |
||||
const category = kindCategories.find(c => c.id === selectedCategory); |
||||
if (category) { |
||||
kinds = kinds.filter(category.filter); |
||||
} |
||||
|
||||
// Apply search filter |
||||
if (searchQuery.trim()) { |
||||
const query = searchQuery.toLowerCase(); |
||||
kinds = kinds.filter(k => |
||||
k.name.toLowerCase().includes(query) || |
||||
k.description.toLowerCase().includes(query) || |
||||
k.kind.toString().includes(query) || |
||||
(k.nip && k.nip.includes(query)) |
||||
); |
||||
} |
||||
|
||||
filteredKinds = kinds; |
||||
} |
||||
|
||||
function selectKind(kindInfo) { |
||||
const template = createTemplateEvent(kindInfo.kind, userPubkey); |
||||
dispatch("select", { |
||||
kind: kindInfo, |
||||
template: template |
||||
}); |
||||
closeModal(); |
||||
} |
||||
|
||||
function closeModal() { |
||||
isOpen = false; |
||||
searchQuery = ""; |
||||
selectedCategory = "all"; |
||||
dispatch("close"); |
||||
} |
||||
|
||||
function handleKeydown(event) { |
||||
if (event.key === "Escape") { |
||||
closeModal(); |
||||
} |
||||
} |
||||
|
||||
function handleBackdropClick(event) { |
||||
if (event.target === event.currentTarget) { |
||||
closeModal(); |
||||
} |
||||
} |
||||
|
||||
function getKindBadgeClass(kindInfo) { |
||||
if (kindInfo.isAddressable) return "badge-addressable"; |
||||
if (kindInfo.isReplaceable) return "badge-replaceable"; |
||||
if (kindInfo.kind >= 20000 && kindInfo.kind < 30000) return "badge-ephemeral"; |
||||
return "badge-regular"; |
||||
} |
||||
|
||||
function getKindBadgeText(kindInfo) { |
||||
if (kindInfo.isAddressable) return "Addressable"; |
||||
if (kindInfo.isReplaceable) return "Replaceable"; |
||||
if (kindInfo.kind >= 20000 && kindInfo.kind < 30000) return "Ephemeral"; |
||||
return "Regular"; |
||||
} |
||||
</script> |
||||
|
||||
<svelte:window on:keydown={handleKeydown} /> |
||||
|
||||
{#if isOpen} |
||||
<!-- svelte-ignore a11y-click-events-have-key-events --> |
||||
<!-- svelte-ignore a11y-no-static-element-interactions --> |
||||
<div class="modal-backdrop" on:click={handleBackdropClick}> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h2>Generate Event Template</h2> |
||||
<button class="close-btn" on:click={closeModal}>×</button> |
||||
</div> |
||||
|
||||
<div class="modal-filters"> |
||||
<div class="search-box"> |
||||
<input |
||||
type="text" |
||||
placeholder="Search by name, description, or kind number..." |
||||
bind:value={searchQuery} |
||||
class="search-input" |
||||
/> |
||||
</div> |
||||
|
||||
<div class="category-tabs"> |
||||
{#each kindCategories as category} |
||||
<button |
||||
class="category-tab" |
||||
class:active={selectedCategory === category.id} |
||||
on:click={() => selectedCategory = category.id} |
||||
> |
||||
{category.name} |
||||
</button> |
||||
{/each} |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal-body"> |
||||
<div class="kinds-list"> |
||||
{#if filteredKinds.length === 0} |
||||
<div class="no-results"> |
||||
No event kinds found matching "{searchQuery}" |
||||
</div> |
||||
{:else} |
||||
{#each filteredKinds as kindInfo} |
||||
<button |
||||
class="kind-item" |
||||
on:click={() => selectKind(kindInfo)} |
||||
> |
||||
<div class="kind-header"> |
||||
<span class="kind-number">Kind {kindInfo.kind}</span> |
||||
<span class="kind-badge {getKindBadgeClass(kindInfo)}"> |
||||
{getKindBadgeText(kindInfo)} |
||||
</span> |
||||
{#if kindInfo.nip && kindInfo.nip !== "XX"} |
||||
<span class="nip-badge">NIP-{kindInfo.nip}</span> |
||||
{/if} |
||||
</div> |
||||
<div class="kind-name">{kindInfo.name}</div> |
||||
<div class="kind-description">{kindInfo.description}</div> |
||||
</button> |
||||
{/each} |
||||
{/if} |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal-footer"> |
||||
<span class="result-count">{filteredKinds.length} event type{filteredKinds.length !== 1 ? 's' : ''}</span> |
||||
<button class="cancel-btn" on:click={closeModal}>Cancel</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{/if} |
||||
|
||||
<style> |
||||
.modal-backdrop { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: rgba(0, 0, 0, 0.7); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
z-index: 1000; |
||||
} |
||||
|
||||
.modal-content { |
||||
background: var(--card-bg); |
||||
border-radius: 0.5rem; |
||||
width: 90%; |
||||
max-width: 800px; |
||||
max-height: 85vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
||||
border: 1px solid var(--border-color); |
||||
} |
||||
|
||||
.modal-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 1rem 1.5rem; |
||||
border-bottom: 1px solid var(--border-color); |
||||
} |
||||
|
||||
.modal-header h2 { |
||||
margin: 0; |
||||
font-size: 1.25rem; |
||||
color: var(--text-color); |
||||
} |
||||
|
||||
.close-btn { |
||||
background: none; |
||||
border: none; |
||||
font-size: 1.5rem; |
||||
cursor: pointer; |
||||
color: var(--text-color); |
||||
padding: 0; |
||||
width: 2rem; |
||||
height: 2rem; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 0.25rem; |
||||
} |
||||
|
||||
.close-btn:hover { |
||||
background: var(--button-hover-bg); |
||||
} |
||||
|
||||
.modal-filters { |
||||
padding: 1rem 1.5rem; |
||||
border-bottom: 1px solid var(--border-color); |
||||
} |
||||
|
||||
.search-box { |
||||
margin-bottom: 0.75rem; |
||||
} |
||||
|
||||
.search-input { |
||||
width: 100%; |
||||
padding: 0.75rem; |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 0.25rem; |
||||
background: var(--input-bg); |
||||
color: var(--input-text-color); |
||||
font-size: 0.9rem; |
||||
} |
||||
|
||||
.search-input:focus { |
||||
outline: none; |
||||
border-color: var(--accent-color); |
||||
} |
||||
|
||||
.category-tabs { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 0.5rem; |
||||
} |
||||
|
||||
.category-tab { |
||||
padding: 0.4rem 0.75rem; |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 1rem; |
||||
background: transparent; |
||||
color: var(--text-color); |
||||
font-size: 0.75rem; |
||||
cursor: pointer; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.category-tab:hover { |
||||
background: var(--button-hover-bg); |
||||
} |
||||
|
||||
.category-tab.active { |
||||
background: var(--accent-color); |
||||
border-color: var(--accent-color); |
||||
color: white; |
||||
} |
||||
|
||||
.modal-body { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
padding: 1rem 1.5rem; |
||||
} |
||||
|
||||
.kinds-list { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 0.5rem; |
||||
} |
||||
|
||||
.kind-item { |
||||
display: block; |
||||
width: 100%; |
||||
text-align: left; |
||||
padding: 0.75rem 1rem; |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 0.375rem; |
||||
background: var(--bg-color); |
||||
cursor: pointer; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.kind-item:hover { |
||||
border-color: var(--accent-color); |
||||
background: var(--button-hover-bg); |
||||
} |
||||
|
||||
.kind-header { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 0.5rem; |
||||
margin-bottom: 0.25rem; |
||||
} |
||||
|
||||
.kind-number { |
||||
font-family: monospace; |
||||
font-size: 0.8rem; |
||||
color: var(--accent-color); |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.kind-badge { |
||||
font-size: 0.65rem; |
||||
padding: 0.15rem 0.4rem; |
||||
border-radius: 0.25rem; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.badge-regular { |
||||
background: #6c757d; |
||||
color: white; |
||||
} |
||||
|
||||
.badge-replaceable { |
||||
background: #17a2b8; |
||||
color: white; |
||||
} |
||||
|
||||
.badge-ephemeral { |
||||
background: #ffc107; |
||||
color: black; |
||||
} |
||||
|
||||
.badge-addressable { |
||||
background: #28a745; |
||||
color: white; |
||||
} |
||||
|
||||
.nip-badge { |
||||
font-size: 0.65rem; |
||||
padding: 0.15rem 0.4rem; |
||||
border-radius: 0.25rem; |
||||
background: var(--primary); |
||||
color: var(--text-color); |
||||
} |
||||
|
||||
.kind-name { |
||||
font-weight: 600; |
||||
color: var(--text-color); |
||||
margin-bottom: 0.25rem; |
||||
} |
||||
|
||||
.kind-description { |
||||
font-size: 0.85rem; |
||||
color: var(--text-color); |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.no-results { |
||||
text-align: center; |
||||
padding: 2rem; |
||||
color: var(--text-color); |
||||
opacity: 0.6; |
||||
} |
||||
|
||||
.modal-footer { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 1rem 1.5rem; |
||||
border-top: 1px solid var(--border-color); |
||||
} |
||||
|
||||
.result-count { |
||||
font-size: 0.85rem; |
||||
color: var(--text-color); |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.cancel-btn { |
||||
padding: 0.5rem 1rem; |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 0.25rem; |
||||
background: var(--button-bg); |
||||
color: var(--button-text); |
||||
cursor: pointer; |
||||
font-size: 0.9rem; |
||||
} |
||||
|
||||
.cancel-btn:hover { |
||||
background: var(--button-hover-bg); |
||||
} |
||||
|
||||
@media (max-width: 640px) { |
||||
.modal-content { |
||||
width: 95%; |
||||
max-height: 90vh; |
||||
} |
||||
|
||||
.category-tabs { |
||||
overflow-x: auto; |
||||
flex-wrap: nowrap; |
||||
padding-bottom: 0.5rem; |
||||
} |
||||
|
||||
.category-tab { |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,163 @@
@@ -0,0 +1,163 @@
|
||||
# Web UI Event Templates |
||||
|
||||
The ORLY Web UI includes a comprehensive event template generator that helps users create properly-structured Nostr events for any of the 140+ defined event kinds. |
||||
|
||||
## Overview |
||||
|
||||
The Compose tab provides a "Generate Template" button that opens a searchable, categorized modal dialog. Users can browse or search for any Nostr event kind and instantly load a pre-filled template with the correct structure, tags, and example content. |
||||
|
||||
## Features |
||||
|
||||
### Event Kind Database (`app/web/src/eventKinds.js`) |
||||
|
||||
A comprehensive JavaScript database containing: |
||||
|
||||
- **140+ event kinds** from the NIPs (Nostr Implementation Possibilities) repository |
||||
- Each entry includes: |
||||
- Kind number |
||||
- Human-readable name |
||||
- Description |
||||
- NIP reference (where applicable) |
||||
- Event type flags (replaceable, addressable, ephemeral) |
||||
- Pre-built template with proper tag structure |
||||
|
||||
### Template Selector Modal (`app/web/src/EventTemplateSelector.svelte`) |
||||
|
||||
A user-friendly modal interface featuring: |
||||
|
||||
- **Search functionality**: Find events by name, description, kind number, or NIP reference |
||||
- **Category filters**: Quick-filter buttons for event types: |
||||
- All Kinds |
||||
- Regular Events (0-9999) |
||||
- Replaceable (10000-19999) |
||||
- Ephemeral (20000-29999) |
||||
- Addressable (30000-39999) |
||||
- Domain-specific: Social, Messaging, Lists, Marketplace, Lightning, Media, Git, Calendar, Groups |
||||
- **Visual badges**: Color-coded indicators showing event type |
||||
- **NIP references**: Quick reference to the defining NIP |
||||
- **Keyboard navigation**: Escape key closes the modal |
||||
|
||||
### Permission-Aware Error Handling |
||||
|
||||
When publishing fails, the system provides detailed, actionable error messages: |
||||
|
||||
| Error Type | Description | User Guidance | |
||||
|------------|-------------|---------------| |
||||
| Policy Error | Event kind blocked by relay policy | Contact relay administrator to allow the kind | |
||||
| Permission Error | User role insufficient | Shows current role, suggests permission upgrade | |
||||
| Kind Restriction | Event type not allowed | Policy configuration may need updating | |
||||
| Rate Limit | Too many requests | Wait before retrying | |
||||
| Size Limit | Event too large | Reduce content length | |
||||
|
||||
## Usage |
||||
|
||||
### Generating a Template |
||||
|
||||
1. Navigate to the **Compose** tab in the Web UI |
||||
2. Click the **Generate Template** button (purple button) |
||||
3. In the modal: |
||||
- Use the search box to find specific event types |
||||
- Or click category tabs to filter by event type |
||||
- Click on any event kind to select it |
||||
4. The template is loaded into the editor with: |
||||
- Correct `kind` value |
||||
- Proper tag structure with placeholder values |
||||
- Example content (where applicable) |
||||
- Current timestamp |
||||
- Your pubkey (if logged in) |
||||
|
||||
### Editing and Publishing |
||||
|
||||
1. Replace placeholder values (marked with `<angle_brackets>`) with actual data |
||||
2. Click **Reformat** to clean up JSON formatting |
||||
3. Click **Sign** to sign the event with your key |
||||
4. Click **Publish** to send to the relay |
||||
|
||||
### Understanding Templates |
||||
|
||||
Templates use placeholder values in angle brackets that must be replaced: |
||||
|
||||
```json |
||||
{ |
||||
"kind": 1, |
||||
"content": "Your note content here", |
||||
"tags": [ |
||||
["p", "<pubkey_to_mention>"], |
||||
["e", "<event_id_to_reference>"] |
||||
], |
||||
"created_at": 1702857600, |
||||
"pubkey": "<your_pubkey_here>" |
||||
} |
||||
``` |
||||
|
||||
## Event Categories |
||||
|
||||
### Regular Events (0-9999) |
||||
Standard events that are stored indefinitely. Examples: |
||||
- Kind 0: User Metadata |
||||
- Kind 1: Short Text Note |
||||
- Kind 7: Reaction |
||||
- Kind 1984: Reporting |
||||
|
||||
### Replaceable Events (10000-19999) |
||||
Events where only the latest version is kept. Examples: |
||||
- Kind 10000: Mute List |
||||
- Kind 10002: Relay List Metadata |
||||
- Kind 13194: Wallet Info |
||||
|
||||
### Ephemeral Events (20000-29999) |
||||
Events not intended for permanent storage. Examples: |
||||
- Kind 22242: Client Authentication |
||||
- Kind 24133: Nostr Connect |
||||
|
||||
### Addressable Events (30000-39999) |
||||
Parameterized replaceable events identified by kind + pubkey + d-tag. Examples: |
||||
- Kind 30023: Long-form Content |
||||
- Kind 30311: Live Event |
||||
- Kind 34550: Community Definition |
||||
|
||||
## API Reference |
||||
|
||||
### Helper Functions in `eventKinds.js` |
||||
|
||||
```javascript |
||||
import { |
||||
eventKinds, // Array of all event kinds |
||||
kindCategories, // Array of category filter definitions |
||||
getEventKind, // Get kind info by number |
||||
searchEventKinds, // Search by query string |
||||
createTemplateEvent // Generate template with current timestamp |
||||
} from './eventKinds.js'; |
||||
|
||||
// Get information about a specific kind |
||||
const kind1 = getEventKind(1); |
||||
// Returns: { kind: 1, name: "Short Text Note", description: "...", template: {...} } |
||||
|
||||
// Search for kinds |
||||
const results = searchEventKinds("zap"); |
||||
// Returns: Array of matching kinds |
||||
|
||||
// Create a template event |
||||
const template = createTemplateEvent(1, "abc123..."); |
||||
// Returns: Event object with current timestamp and provided pubkey |
||||
``` |
||||
|
||||
## Troubleshooting |
||||
|
||||
### "Permission denied" error |
||||
Your user role does not allow publishing events. Check your role in the header badge and contact a relay administrator. |
||||
|
||||
### "Policy Error: kind blocked" |
||||
The relay's policy configuration does not allow this event kind. If you're an administrator, check `ORLY_POLICY_PATH` or the Policy tab. |
||||
|
||||
### "Event must be signed before publishing" |
||||
Click the **Sign** button before **Publish**. Events must be cryptographically signed before the relay will accept them. |
||||
|
||||
### Template not loading |
||||
Ensure JavaScript is enabled and the page has fully loaded. Try refreshing the page. |
||||
|
||||
## Related Documentation |
||||
|
||||
- [POLICY_USAGE_GUIDE.md](./POLICY_USAGE_GUIDE.md) - Policy configuration for event restrictions |
||||
- [POLICY_CONFIGURATION_REFERENCE.md](./POLICY_CONFIGURATION_REFERENCE.md) - Policy rule reference |
||||
- [NIPs Repository](https://github.com/nostr-protocol/nips) - Official Nostr protocol specifications |
||||
Loading…
Reference in new issue