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
7 changed files with 3433 additions and 16 deletions
@ -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 @@ |
|||||||
|
# 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