Browse Source
- Added a FilterBuilder component to allow users to create complex search filters based on various criteria such as event kinds, authors, and tags. - Introduced a FilterDisplay component to show active filters and provide an option to clear them. - Updated the App.svelte to integrate the new filtering features, including handling filter application and clearing. - Enhanced search functionality to utilize the new filter structure, improving the search results experience. - Bumped version to v0.26.0 to reflect these changes.main
mleku
2 months ago
6 changed files with 1147 additions and 34 deletions
@ -0,0 +1,689 @@
@@ -0,0 +1,689 @@
|
||||
<script> |
||||
import { createEventDispatcher } from "svelte"; |
||||
import { KIND_NAMES, isValidPubkey, isValidEventId, isValidTagName, formatDateTimeLocal, parseDateTimeLocal } from "./helpers.tsx"; |
||||
|
||||
const dispatch = createEventDispatcher(); |
||||
|
||||
// Filter state |
||||
export let searchText = ""; |
||||
export let selectedKinds = []; |
||||
export let pubkeys = []; |
||||
export let eventIds = []; |
||||
export let tags = []; |
||||
export let sinceTimestamp = null; |
||||
export let untilTimestamp = null; |
||||
export let limit = null; |
||||
|
||||
// UI state |
||||
let showKindsPicker = false; |
||||
let kindSearchQuery = ""; |
||||
let newPubkey = ""; |
||||
let newEventId = ""; |
||||
let newTagName = ""; |
||||
let newTagValue = ""; |
||||
let pubkeyError = ""; |
||||
let eventIdError = ""; |
||||
let tagNameError = ""; |
||||
|
||||
// Get all available kinds as array |
||||
$: availableKinds = Object.entries(KIND_NAMES).map(([kind, name]) => ({ |
||||
kind: parseInt(kind), |
||||
name: name |
||||
})).sort((a, b) => a.kind - b.kind); |
||||
|
||||
// Filter kinds by search query |
||||
$: filteredKinds = availableKinds.filter(k => |
||||
k.kind.toString().includes(kindSearchQuery) || |
||||
k.name.toLowerCase().includes(kindSearchQuery.toLowerCase()) |
||||
); |
||||
|
||||
function toggleKind(kind) { |
||||
if (selectedKinds.includes(kind)) { |
||||
selectedKinds = selectedKinds.filter(k => k !== kind); |
||||
} else { |
||||
selectedKinds = [...selectedKinds, kind].sort((a, b) => a - b); |
||||
} |
||||
} |
||||
|
||||
function removeKind(kind) { |
||||
selectedKinds = selectedKinds.filter(k => k !== kind); |
||||
} |
||||
|
||||
function addPubkey() { |
||||
const trimmed = newPubkey.trim(); |
||||
if (!trimmed) return; |
||||
|
||||
if (!isValidPubkey(trimmed)) { |
||||
pubkeyError = "Invalid pubkey: must be 64 character hex string"; |
||||
return; |
||||
} |
||||
|
||||
if (pubkeys.includes(trimmed)) { |
||||
pubkeyError = "Pubkey already added"; |
||||
return; |
||||
} |
||||
|
||||
pubkeys = [...pubkeys, trimmed]; |
||||
newPubkey = ""; |
||||
pubkeyError = ""; |
||||
} |
||||
|
||||
function removePubkey(pubkey) { |
||||
pubkeys = pubkeys.filter(p => p !== pubkey); |
||||
} |
||||
|
||||
function addEventId() { |
||||
const trimmed = newEventId.trim(); |
||||
if (!trimmed) return; |
||||
|
||||
if (!isValidEventId(trimmed)) { |
||||
eventIdError = "Invalid event ID: must be 64 character hex string"; |
||||
return; |
||||
} |
||||
|
||||
if (eventIds.includes(trimmed)) { |
||||
eventIdError = "Event ID already added"; |
||||
return; |
||||
} |
||||
|
||||
eventIds = [...eventIds, trimmed]; |
||||
newEventId = ""; |
||||
eventIdError = ""; |
||||
} |
||||
|
||||
function removeEventId(eventId) { |
||||
eventIds = eventIds.filter(id => id !== eventId); |
||||
} |
||||
|
||||
function addTag() { |
||||
const trimmedName = newTagName.trim(); |
||||
const trimmedValue = newTagValue.trim(); |
||||
|
||||
if (!trimmedName || !trimmedValue) return; |
||||
|
||||
if (!isValidTagName(trimmedName)) { |
||||
tagNameError = "Invalid tag name: must be single letter a-z or A-Z"; |
||||
return; |
||||
} |
||||
|
||||
// Check if this exact tag already exists |
||||
if (tags.some(t => t.name === trimmedName && t.value === trimmedValue)) { |
||||
tagNameError = "Tag already added"; |
||||
return; |
||||
} |
||||
|
||||
tags = [...tags, { name: trimmedName, value: trimmedValue }]; |
||||
newTagName = ""; |
||||
newTagValue = ""; |
||||
tagNameError = ""; |
||||
} |
||||
|
||||
function removeTag(index) { |
||||
tags = tags.filter((_, i) => i !== index); |
||||
} |
||||
|
||||
function clearAllFilters() { |
||||
searchText = ""; |
||||
selectedKinds = []; |
||||
pubkeys = []; |
||||
eventIds = []; |
||||
tags = []; |
||||
sinceTimestamp = null; |
||||
untilTimestamp = null; |
||||
limit = null; |
||||
dispatch("clear"); |
||||
} |
||||
|
||||
function applyFilters() { |
||||
dispatch("apply", { |
||||
searchText, |
||||
selectedKinds, |
||||
pubkeys, |
||||
eventIds, |
||||
tags, |
||||
sinceTimestamp, |
||||
untilTimestamp, |
||||
limit |
||||
}); |
||||
} |
||||
|
||||
// Format timestamp for input |
||||
function getFormattedSince() { |
||||
return sinceTimestamp ? formatDateTimeLocal(sinceTimestamp) : ""; |
||||
} |
||||
|
||||
function getFormattedUntil() { |
||||
return untilTimestamp ? formatDateTimeLocal(untilTimestamp) : ""; |
||||
} |
||||
|
||||
function handleSinceChange(event) { |
||||
const value = event.target.value; |
||||
sinceTimestamp = value ? parseDateTimeLocal(value) : null; |
||||
} |
||||
|
||||
function handleUntilChange(event) { |
||||
const value = event.target.value; |
||||
untilTimestamp = value ? parseDateTimeLocal(value) : null; |
||||
} |
||||
</script> |
||||
|
||||
<div class="filter-builder"> |
||||
<!-- Search text input at top --> |
||||
<div class="filter-section"> |
||||
<label for="search-text">Search Text (NIP-50)</label> |
||||
<input |
||||
id="search-text" |
||||
type="text" |
||||
bind:value={searchText} |
||||
placeholder="Search events..." |
||||
class="filter-input" |
||||
/> |
||||
</div> |
||||
|
||||
<!-- Kinds picker --> |
||||
<div class="filter-section"> |
||||
<label>Event Kinds</label> |
||||
<button |
||||
class="picker-toggle-btn" |
||||
on:click={() => showKindsPicker = !showKindsPicker} |
||||
> |
||||
{showKindsPicker ? "▼" : "▶"} Select Kinds ({selectedKinds.length} selected) |
||||
</button> |
||||
|
||||
{#if showKindsPicker} |
||||
<div class="kinds-picker"> |
||||
<input |
||||
type="text" |
||||
bind:value={kindSearchQuery} |
||||
placeholder="Search kinds..." |
||||
class="filter-input kind-search" |
||||
/> |
||||
<div class="kinds-list"> |
||||
{#each filteredKinds as { kind, name }} |
||||
<label class="kind-checkbox"> |
||||
<input |
||||
type="checkbox" |
||||
checked={selectedKinds.includes(kind)} |
||||
on:change={() => toggleKind(kind)} |
||||
/> |
||||
<span class="kind-number">{kind}</span> |
||||
<span class="kind-name">{name}</span> |
||||
</label> |
||||
{/each} |
||||
</div> |
||||
</div> |
||||
{/if} |
||||
|
||||
<!-- Selected kinds chips --> |
||||
{#if selectedKinds.length > 0} |
||||
<div class="chips-container"> |
||||
{#each selectedKinds as kind} |
||||
<div class="chip"> |
||||
<span class="chip-text">{kind}: {KIND_NAMES[kind] || `Kind ${kind}`}</span> |
||||
<button class="chip-remove" on:click={() => removeKind(kind)}>×</button> |
||||
</div> |
||||
{/each} |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
|
||||
<!-- Authors/Pubkeys --> |
||||
<div class="filter-section"> |
||||
<label>Authors (Pubkeys)</label> |
||||
<div class="input-group"> |
||||
<input |
||||
type="text" |
||||
bind:value={newPubkey} |
||||
placeholder="64 character hex pubkey..." |
||||
class="filter-input" |
||||
maxlength="64" |
||||
on:keydown={(e) => e.key === 'Enter' && addPubkey()} |
||||
/> |
||||
<button class="add-btn" on:click={addPubkey}>Add</button> |
||||
</div> |
||||
{#if pubkeyError} |
||||
<div class="error-message">{pubkeyError}</div> |
||||
{/if} |
||||
{#if pubkeys.length > 0} |
||||
<div class="list-items"> |
||||
{#each pubkeys as pubkey} |
||||
<div class="list-item"> |
||||
<span class="list-item-text">{pubkey}</span> |
||||
<button class="list-item-remove" on:click={() => removePubkey(pubkey)}>×</button> |
||||
</div> |
||||
{/each} |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
|
||||
<!-- Event IDs --> |
||||
<div class="filter-section"> |
||||
<label>Event IDs</label> |
||||
<div class="input-group"> |
||||
<input |
||||
type="text" |
||||
bind:value={newEventId} |
||||
placeholder="64 character hex event ID..." |
||||
class="filter-input" |
||||
maxlength="64" |
||||
on:keydown={(e) => e.key === 'Enter' && addEventId()} |
||||
/> |
||||
<button class="add-btn" on:click={addEventId}>Add</button> |
||||
</div> |
||||
{#if eventIdError} |
||||
<div class="error-message">{eventIdError}</div> |
||||
{/if} |
||||
{#if eventIds.length > 0} |
||||
<div class="list-items"> |
||||
{#each eventIds as eventId} |
||||
<div class="list-item"> |
||||
<span class="list-item-text">{eventId}</span> |
||||
<button class="list-item-remove" on:click={() => removeEventId(eventId)}>×</button> |
||||
</div> |
||||
{/each} |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
|
||||
<!-- Tags --> |
||||
<div class="filter-section"> |
||||
<label>Tags (e.g., #e, #p, #a)</label> |
||||
<div class="tag-input-group"> |
||||
<span class="hash-prefix">#</span> |
||||
<input |
||||
type="text" |
||||
bind:value={newTagName} |
||||
placeholder="Tag" |
||||
class="filter-input tag-name-input" |
||||
maxlength="1" |
||||
/> |
||||
<input |
||||
type="text" |
||||
bind:value={newTagValue} |
||||
placeholder="Value..." |
||||
class="filter-input tag-value-input" |
||||
on:keydown={(e) => e.key === 'Enter' && addTag()} |
||||
/> |
||||
<button class="add-btn" on:click={addTag}>Add</button> |
||||
</div> |
||||
{#if tagNameError} |
||||
<div class="error-message">{tagNameError}</div> |
||||
{/if} |
||||
{#if tags.length > 0} |
||||
<div class="list-items"> |
||||
{#each tags as tag, index} |
||||
<div class="list-item"> |
||||
<span class="list-item-text">#{tag.name}: {tag.value}</span> |
||||
<button class="list-item-remove" on:click={() => removeTag(index)}>×</button> |
||||
</div> |
||||
{/each} |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
|
||||
<!-- Since/Until timestamps --> |
||||
<div class="filter-section timestamps-section"> |
||||
<div class="timestamp-field"> |
||||
<label for="since-timestamp">Since</label> |
||||
<input |
||||
id="since-timestamp" |
||||
type="datetime-local" |
||||
value={getFormattedSince()} |
||||
on:change={handleSinceChange} |
||||
class="filter-input" |
||||
/> |
||||
{#if sinceTimestamp} |
||||
<button class="clear-timestamp-btn" on:click={() => sinceTimestamp = null}>×</button> |
||||
{/if} |
||||
</div> |
||||
|
||||
<div class="timestamp-field"> |
||||
<label for="until-timestamp">Until</label> |
||||
<input |
||||
id="until-timestamp" |
||||
type="datetime-local" |
||||
value={getFormattedUntil()} |
||||
on:change={handleUntilChange} |
||||
class="filter-input" |
||||
/> |
||||
{#if untilTimestamp} |
||||
<button class="clear-timestamp-btn" on:click={() => untilTimestamp = null}>×</button> |
||||
{/if} |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Limit --> |
||||
<div class="filter-section"> |
||||
<label for="limit">Limit (optional)</label> |
||||
<input |
||||
id="limit" |
||||
type="number" |
||||
bind:value={limit} |
||||
placeholder="Max events to return" |
||||
class="filter-input" |
||||
min="1" |
||||
/> |
||||
</div> |
||||
|
||||
<!-- Action buttons --> |
||||
<div class="filter-actions"> |
||||
<button class="apply-btn" on:click={applyFilters}>🔍 Apply Filters</button> |
||||
<button class="clear-btn" on:click={clearAllFilters}>🧹 Clear All</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<style> |
||||
.filter-builder { |
||||
padding: 1em; |
||||
background: var(--bg-color); |
||||
border-bottom: 1px solid var(--border-color); |
||||
} |
||||
|
||||
.filter-section { |
||||
margin-bottom: 1.25em; |
||||
} |
||||
|
||||
.filter-section label { |
||||
display: block; |
||||
margin-bottom: 0.5em; |
||||
font-weight: 600; |
||||
color: var(--text-color); |
||||
font-size: 0.9em; |
||||
} |
||||
|
||||
.filter-input { |
||||
width: 100%; |
||||
padding: 0.6em; |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 4px; |
||||
background: var(--input-bg); |
||||
color: var(--input-text-color); |
||||
font-size: 0.9em; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.filter-input:focus { |
||||
outline: none; |
||||
border-color: var(--primary); |
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15); |
||||
} |
||||
|
||||
.picker-toggle-btn { |
||||
width: 100%; |
||||
padding: 0.6em; |
||||
background: var(--secondary); |
||||
color: var(--text-color); |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
font-size: 0.9em; |
||||
text-align: left; |
||||
transition: background-color 0.2s; |
||||
} |
||||
|
||||
.picker-toggle-btn:hover { |
||||
background: var(--accent-hover-color); |
||||
} |
||||
|
||||
.kinds-picker { |
||||
margin-top: 0.5em; |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 4px; |
||||
padding: 0.5em; |
||||
background: var(--card-bg); |
||||
} |
||||
|
||||
.kind-search { |
||||
margin-bottom: 0.5em; |
||||
} |
||||
|
||||
.kinds-list { |
||||
max-height: 300px; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.kind-checkbox { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0.4em; |
||||
cursor: pointer; |
||||
border-radius: 4px; |
||||
transition: background-color 0.2s; |
||||
} |
||||
|
||||
.kind-checkbox:hover { |
||||
background: var(--bg-color); |
||||
} |
||||
|
||||
.kind-checkbox input[type="checkbox"] { |
||||
margin-right: 0.5em; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.kind-number { |
||||
background: var(--primary); |
||||
color: var(--text-color); |
||||
padding: 0.1em 0.4em; |
||||
border-radius: 3px; |
||||
font-size: 0.8em; |
||||
font-weight: 600; |
||||
font-family: monospace; |
||||
margin-right: 0.5em; |
||||
min-width: 40px; |
||||
text-align: center; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.kind-name { |
||||
font-size: 0.85em; |
||||
color: var(--text-color); |
||||
} |
||||
|
||||
.chips-container { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 0.5em; |
||||
margin-top: 0.5em; |
||||
} |
||||
|
||||
.chip { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
background: var(--primary); |
||||
color: var(--text-color); |
||||
padding: 0.3em 0.6em; |
||||
border-radius: 16px; |
||||
font-size: 0.85em; |
||||
gap: 0.5em; |
||||
} |
||||
|
||||
.chip-text { |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.chip-remove { |
||||
background: transparent; |
||||
border: none; |
||||
color: var(--text-color); |
||||
cursor: pointer; |
||||
padding: 0; |
||||
font-size: 1.2em; |
||||
line-height: 1; |
||||
opacity: 0.8; |
||||
transition: opacity 0.2s; |
||||
} |
||||
|
||||
.chip-remove:hover { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.input-group { |
||||
display: flex; |
||||
gap: 0.5em; |
||||
} |
||||
|
||||
.input-group .filter-input { |
||||
flex: 1; |
||||
} |
||||
|
||||
.add-btn { |
||||
background: var(--primary); |
||||
color: var(--text-color); |
||||
border: none; |
||||
padding: 0.6em 1.2em; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
font-size: 0.9em; |
||||
font-weight: 600; |
||||
transition: background-color 0.2s; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.add-btn:hover { |
||||
background: var(--accent-hover-color); |
||||
} |
||||
|
||||
.error-message { |
||||
color: var(--danger); |
||||
font-size: 0.85em; |
||||
margin-top: 0.25em; |
||||
} |
||||
|
||||
.list-items { |
||||
margin-top: 0.5em; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 0.5em; |
||||
} |
||||
|
||||
.list-item { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0.5em; |
||||
background: var(--card-bg); |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 4px; |
||||
gap: 0.5em; |
||||
} |
||||
|
||||
.list-item-text { |
||||
flex: 1; |
||||
font-family: monospace; |
||||
font-size: 0.85em; |
||||
color: var(--text-color); |
||||
word-break: break-all; |
||||
} |
||||
|
||||
.list-item-remove { |
||||
background: var(--danger); |
||||
color: var(--text-color); |
||||
border: none; |
||||
padding: 0.25em 0.5em; |
||||
border-radius: 3px; |
||||
cursor: pointer; |
||||
font-size: 1.2em; |
||||
line-height: 1; |
||||
transition: background-color 0.2s; |
||||
} |
||||
|
||||
.list-item-remove:hover { |
||||
filter: brightness(0.9); |
||||
} |
||||
|
||||
.tag-input-group { |
||||
display: flex; |
||||
gap: 0.5em; |
||||
align-items: center; |
||||
} |
||||
|
||||
.hash-prefix { |
||||
font-weight: 700; |
||||
font-size: 1.2em; |
||||
color: var(--text-color); |
||||
} |
||||
|
||||
.tag-name-input { |
||||
width: 50px; |
||||
} |
||||
|
||||
.tag-value-input { |
||||
flex: 1; |
||||
} |
||||
|
||||
.timestamps-section { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
gap: 1em; |
||||
} |
||||
|
||||
.timestamp-field { |
||||
position: relative; |
||||
} |
||||
|
||||
.clear-timestamp-btn { |
||||
position: absolute; |
||||
right: 0.5em; |
||||
top: 2em; |
||||
background: var(--danger); |
||||
color: var(--text-color); |
||||
border: none; |
||||
padding: 0.25em 0.5em; |
||||
border-radius: 3px; |
||||
cursor: pointer; |
||||
font-size: 1em; |
||||
line-height: 1; |
||||
transition: background-color 0.2s; |
||||
} |
||||
|
||||
.clear-timestamp-btn:hover { |
||||
filter: brightness(0.9); |
||||
} |
||||
|
||||
.filter-actions { |
||||
display: flex; |
||||
gap: 1em; |
||||
padding-top: 1em; |
||||
border-top: 1px solid var(--border-color); |
||||
} |
||||
|
||||
.apply-btn, |
||||
.clear-btn { |
||||
flex: 1; |
||||
padding: 0.75em 1em; |
||||
border: none; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
font-size: 1em; |
||||
font-weight: 600; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.apply-btn { |
||||
background: var(--primary); |
||||
color: var(--text-color); |
||||
} |
||||
|
||||
.apply-btn:hover { |
||||
background: var(--accent-hover-color); |
||||
transform: translateY(-1px); |
||||
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); |
||||
} |
||||
|
||||
.clear-btn { |
||||
background: var(--secondary); |
||||
color: var(--text-color); |
||||
} |
||||
|
||||
.clear-btn:hover { |
||||
background: var(--danger); |
||||
transform: translateY(-1px); |
||||
} |
||||
|
||||
/* Responsive design */ |
||||
@media (max-width: 768px) { |
||||
.timestamps-section { |
||||
grid-template-columns: 1fr; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,115 @@
@@ -0,0 +1,115 @@
|
||||
<script> |
||||
import { createEventDispatcher } from "svelte"; |
||||
import { prettyPrintFilter } from "./helpers.tsx"; |
||||
|
||||
const dispatch = createEventDispatcher(); |
||||
|
||||
export let filter = {}; |
||||
export let showFilter = true; |
||||
|
||||
$: filterJson = prettyPrintFilter(filter); |
||||
$: hasFilter = Object.keys(filter).length > 0; |
||||
|
||||
function handleSweep() { |
||||
dispatch("sweep"); |
||||
} |
||||
</script> |
||||
|
||||
{#if showFilter && hasFilter} |
||||
<div class="filter-display"> |
||||
<div class="filter-display-header"> |
||||
<h3>Active Filter</h3> |
||||
<button class="sweep-btn" on:click={handleSweep} title="Clear filter"> |
||||
🧹 Sweep |
||||
</button> |
||||
</div> |
||||
<div class="filter-json-container"> |
||||
<pre class="filter-json">{filterJson}</pre> |
||||
</div> |
||||
</div> |
||||
{/if} |
||||
|
||||
<style> |
||||
.filter-display { |
||||
background: var(--card-bg); |
||||
border: 1px solid var(--border-color); |
||||
border-radius: 8px; |
||||
margin: 1em; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.filter-display-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 0.75em 1em; |
||||
background: var(--bg-color); |
||||
border-bottom: 1px solid var(--border-color); |
||||
} |
||||
|
||||
.filter-display-header h3 { |
||||
margin: 0; |
||||
font-size: 1em; |
||||
font-weight: 600; |
||||
color: var(--text-color); |
||||
} |
||||
|
||||
.sweep-btn { |
||||
background: var(--danger); |
||||
color: var(--text-color); |
||||
border: none; |
||||
padding: 0.5em 1em; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
font-size: 0.9em; |
||||
font-weight: 600; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.sweep-btn:hover { |
||||
filter: brightness(0.9); |
||||
transform: translateY(-1px); |
||||
box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3); |
||||
} |
||||
|
||||
.filter-json-container { |
||||
padding: 1em; |
||||
max-height: 200px; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.filter-json { |
||||
background: var(--code-bg); |
||||
padding: 1em; |
||||
border-radius: 4px; |
||||
font-family: 'Courier New', Courier, monospace; |
||||
font-size: 0.85em; |
||||
line-height: 1.5; |
||||
color: var(--code-text); |
||||
margin: 0; |
||||
white-space: pre-wrap; |
||||
word-wrap: break-word; |
||||
word-break: break-all; |
||||
overflow-wrap: anywhere; |
||||
} |
||||
|
||||
/* Custom scrollbar for json container */ |
||||
.filter-json-container::-webkit-scrollbar { |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
|
||||
.filter-json-container::-webkit-scrollbar-track { |
||||
background: var(--bg-color); |
||||
} |
||||
|
||||
.filter-json-container::-webkit-scrollbar-thumb { |
||||
background: var(--border-color); |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.filter-json-container::-webkit-scrollbar-thumb:hover { |
||||
background: var(--primary); |
||||
} |
||||
</style> |
||||
|
||||
@ -1,5 +1,6 @@
@@ -1,5 +1,6 @@
|
||||
// Default Nostr relays for searching
|
||||
export const DEFAULT_RELAYS = [ |
||||
// Use the local relay WebSocket endpoint
|
||||
`wss://${window.location.host}/`, |
||||
// Automatically use ws:// for http:// and wss:// for https://
|
||||
`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/`, |
||||
]; |
||||
|
||||
@ -0,0 +1,203 @@
@@ -0,0 +1,203 @@
|
||||
// Helper functions and constants for the ORLY dashboard
|
||||
|
||||
// Comprehensive kind names mapping
|
||||
export const KIND_NAMES = { |
||||
0: "Profile Metadata", |
||||
1: "Text Note", |
||||
2: "Recommend Relay", |
||||
3: "Contacts", |
||||
4: "Encrypted DM", |
||||
5: "Delete Request", |
||||
6: "Repost", |
||||
7: "Reaction", |
||||
8: "Badge Award", |
||||
16: "Generic Repost", |
||||
40: "Channel Creation", |
||||
41: "Channel Metadata", |
||||
42: "Channel Message", |
||||
43: "Channel Hide Message", |
||||
44: "Channel Mute User", |
||||
1063: "File Metadata", |
||||
1311: "Live Chat Message", |
||||
1984: "Reporting", |
||||
1985: "Label", |
||||
9734: "Zap Request", |
||||
9735: "Zap Receipt", |
||||
10000: "Mute List", |
||||
10001: "Pin List", |
||||
10002: "Relay List Metadata", |
||||
10003: "Bookmark List", |
||||
10004: "Communities List", |
||||
10005: "Public Chats List", |
||||
10006: "Blocked Relays List", |
||||
10007: "Search Relays List", |
||||
10009: "User Groups", |
||||
10015: "Interests List", |
||||
10030: "User Emoji List", |
||||
13194: "Wallet Info", |
||||
22242: "Client Auth", |
||||
23194: "Wallet Request", |
||||
23195: "Wallet Response", |
||||
24133: "Nostr Connect", |
||||
27235: "HTTP Auth", |
||||
30000: "Categorized People List", |
||||
30001: "Categorized Bookmarks", |
||||
30002: "Categorized Relay List", |
||||
30003: "Bookmark Sets", |
||||
30004: "Curation Sets", |
||||
30005: "Video Sets", |
||||
30008: "Profile Badges", |
||||
30009: "Badge Definition", |
||||
30015: "Interest Sets", |
||||
30017: "Create/Update Stall", |
||||
30018: "Create/Update Product", |
||||
30019: "Marketplace UI/UX", |
||||
30020: "Product Sold As Auction", |
||||
30023: "Long-form Content", |
||||
30024: "Draft Long-form Content", |
||||
30030: "Emoji Sets", |
||||
30063: "Release Artifact Sets", |
||||
30078: "Application-specific Data", |
||||
30311: "Live Event", |
||||
30315: "User Statuses", |
||||
30388: "Slide Set", |
||||
30402: "Classified Listing", |
||||
30403: "Draft Classified Listing", |
||||
30617: "Repository Announcement", |
||||
30618: "Repository State Announcement", |
||||
30818: "Wiki Article", |
||||
30819: "Redirects", |
||||
31922: "Date-Based Calendar Event", |
||||
31923: "Time-Based Calendar Event", |
||||
31924: "Calendar", |
||||
31925: "Calendar Event RSVP", |
||||
31989: "Handler Recommendation", |
||||
31990: "Handler Information", |
||||
34550: "Community Definition", |
||||
34551: "Community Post Approval", |
||||
}; |
||||
|
||||
// Get human-readable kind name
|
||||
export function getKindName(kind) { |
||||
return KIND_NAMES[kind] || `Kind ${kind}`; |
||||
} |
||||
|
||||
// Validate hex string (for pubkeys and event IDs)
|
||||
export function isValidHex(str, length = null) { |
||||
if (!str || typeof str !== "string") return false; |
||||
const hexRegex = /^[0-9a-fA-F]+$/; |
||||
if (!hexRegex.test(str)) return false; |
||||
if (length && str.length !== length) return false; |
||||
return true; |
||||
} |
||||
|
||||
// Validate pubkey (64 character hex)
|
||||
export function isValidPubkey(pubkey) { |
||||
return isValidHex(pubkey, 64); |
||||
} |
||||
|
||||
// Validate event ID (64 character hex)
|
||||
export function isValidEventId(eventId) { |
||||
return isValidHex(eventId, 64); |
||||
} |
||||
|
||||
// Validate tag name (single letter a-zA-Z)
|
||||
export function isValidTagName(tagName) { |
||||
return /^[a-zA-Z]$/.test(tagName); |
||||
} |
||||
|
||||
// Format timestamp to localized string
|
||||
export function formatTimestamp(timestamp) { |
||||
return new Date(timestamp * 1000).toLocaleString(); |
||||
} |
||||
|
||||
// Format timestamp for datetime-local input
|
||||
export function formatDateTimeLocal(timestamp) { |
||||
const date = new Date(timestamp * 1000); |
||||
const year = date.getFullYear(); |
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
||||
const day = String(date.getDate()).padStart(2, '0'); |
||||
const hours = String(date.getHours()).padStart(2, '0'); |
||||
const minutes = String(date.getMinutes()).padStart(2, '0'); |
||||
return `${year}-${month}-${day}T${hours}:${minutes}`; |
||||
} |
||||
|
||||
// Parse datetime-local input to unix timestamp
|
||||
export function parseDateTimeLocal(dateTimeString) { |
||||
return Math.floor(new Date(dateTimeString).getTime() / 1000); |
||||
} |
||||
|
||||
// Truncate pubkey for display
|
||||
export function truncatePubkey(pubkey) { |
||||
if (!pubkey) return ""; |
||||
return pubkey.slice(0, 8) + "..." + pubkey.slice(-8); |
||||
} |
||||
|
||||
// Truncate content for display
|
||||
export function truncateContent(content, maxLength = 100) { |
||||
if (!content) return ""; |
||||
return content.length > maxLength ? content.slice(0, maxLength) + "..." : content; |
||||
} |
||||
|
||||
// Build Nostr filter from form data
|
||||
export function buildFilter({ |
||||
searchText = null, |
||||
kinds = [], |
||||
authors = [], |
||||
ids = [], |
||||
tags = [], |
||||
since = null, |
||||
until = null, |
||||
limit = null, |
||||
}) { |
||||
const filter = {}; |
||||
|
||||
if (searchText && searchText.trim()) { |
||||
filter.search = searchText.trim(); |
||||
} |
||||
|
||||
if (kinds && kinds.length > 0) { |
||||
filter.kinds = kinds; |
||||
} |
||||
|
||||
if (authors && authors.length > 0) { |
||||
filter.authors = authors; |
||||
} |
||||
|
||||
if (ids && ids.length > 0) { |
||||
filter.ids = ids; |
||||
} |
||||
|
||||
// Add tag filters (e.g., #e, #p, #a)
|
||||
if (tags && tags.length > 0) { |
||||
tags.forEach(tag => { |
||||
if (tag.name && tag.value) { |
||||
const tagKey = `#${tag.name}`; |
||||
if (!filter[tagKey]) { |
||||
filter[tagKey] = []; |
||||
} |
||||
filter[tagKey].push(tag.value); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
if (since) { |
||||
filter.since = since; |
||||
} |
||||
|
||||
if (until) { |
||||
filter.until = until; |
||||
} |
||||
|
||||
if (limit && limit > 0) { |
||||
filter.limit = limit; |
||||
} |
||||
|
||||
return filter; |
||||
} |
||||
|
||||
// Pretty print JSON with word breaking for long strings
|
||||
export function prettyPrintFilter(filter) { |
||||
return JSON.stringify(filter, null, 2); |
||||
} |
||||
|
||||
Loading…
Reference in new issue