|
|
<script lang="ts"> |
|
|
import Header from '../../lib/components/layout/Header.svelte'; |
|
|
import DiscussionList from '../../lib/modules/discussions/DiscussionList.svelte'; |
|
|
import UnifiedSearch from '../../lib/components/layout/UnifiedSearch.svelte'; |
|
|
import { nostrClient } from '../../lib/services/nostr/nostr-client.js'; |
|
|
import { onMount } from 'svelte'; |
|
|
|
|
|
let filterResult = $state<{ type: 'event' | 'pubkey' | 'text' | null; value: string | null }>({ type: null, value: null }); |
|
|
|
|
|
function handleFilterChange(result: { type: 'event' | 'pubkey' | 'text' | null; value: string | null }) { |
|
|
filterResult = result; |
|
|
} |
|
|
|
|
|
onMount(async () => { |
|
|
await nostrClient.initialize(); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
<Header /> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
<div class="discussions-content"> |
|
|
<div class="discussions-header mb-4"> |
|
|
<div> |
|
|
<h1 class="font-bold mb-6 text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Discussions</h1> |
|
|
<p class="mb-4 text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr.</p> |
|
|
</div> |
|
|
<a href="/write?kind=11" class="write-button" title="Write a new thread"> |
|
|
<span class="emoji emoji-grayscale">✍️</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="search-section mb-6"> |
|
|
<UnifiedSearch mode="filter" onFilterChange={handleFilterChange} placeholder="Filter by pubkey, p, q tags, or content..." /> |
|
|
</div> |
|
|
|
|
|
<DiscussionList filterResult={filterResult} /> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<style> |
|
|
.discussions-content { |
|
|
max-width: var(--content-width); |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.discussions-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: flex-start; |
|
|
padding: 0 1rem; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
background: var(--fog-bg, #ffffff); |
|
|
z-index: 10; |
|
|
padding-top: 1rem; |
|
|
padding-bottom: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
border-bottom: 1px solid var(--fog-border, #e5e7eb); |
|
|
} |
|
|
|
|
|
:global(.dark) .discussions-header { |
|
|
background: var(--fog-dark-bg, #0f172a); |
|
|
border-bottom-color: var(--fog-dark-border, #1e293b); |
|
|
} |
|
|
|
|
|
.search-section { |
|
|
padding: 0 1rem; |
|
|
display: flex; |
|
|
justify-content: flex-start; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
background: var(--fog-bg, #ffffff); |
|
|
z-index: 9; |
|
|
padding-top: 1rem; |
|
|
padding-bottom: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
border-bottom: 1px solid var(--fog-border, #e5e7eb); |
|
|
} |
|
|
|
|
|
:global(.dark) .search-section { |
|
|
background: var(--fog-dark-bg, #0f172a); |
|
|
border-bottom-color: var(--fog-dark-border, #1e293b); |
|
|
} |
|
|
|
|
|
.search-section :global(.unified-search-container) { |
|
|
max-width: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.search-section :global(.search-input) { |
|
|
max-width: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
</style>
|
|
|
|
