Skip to content

improve buttons ui #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Catrya merged 2 commits into from
Apr 13, 2026
Merged

improve buttons ui #21

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f481c8a
improve buttons ui
Catrya Apr 13, 2026
544315c
Remove MKStack-only attribution from instruction files
Catrya Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 26 additions & 18 deletions src/pages/EventMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export function EventMonitor() {
const [streamEvents, setStreamEvents] = useState<EventWithRelay[]>([]);
const [lastDisplayedEvents, setLastDisplayedEvents] = useState<EventWithRelay[]>([]);
const [error, setError] = useState<string | null>(null);
const [noRelayHint, setNoRelayHint] = useState<'search' | 'stream' | null>(null);
const [nipFilter, setNipFilter] = useState<string[]>(['']);
const [nipKinds, setNipKinds] = useState<number[]>([]);
const [nipMessage, setNipMessage] = useState<string | null>(null);
Expand Down Expand Up @@ -182,6 +183,11 @@ export function EventMonitor() {
}
}, [validRelays.length, nipMessage]);

// Clear no-relay hint once a relay is added
useEffect(() => {
if (validRelays.length > 0) setNoRelayHint(null);
}, [validRelays.length]);

// Query for limited events from multiple relays
const { isLoading, refetch } = useQuery({
queryKey: ['events', validRelays, filters.kinds, filters.limit, filters.authors, filters.since, filters.until, filters.tags, nipKinds],
Expand Down Expand Up @@ -452,14 +458,22 @@ export function EventMonitor() {
}, [isStreaming, validRelays, queryFilters, filters.limit]);

const handleSearch = useCallback(() => {
if (validRelays.length === 0) return;
if (validRelays.length === 0) {
setNoRelayHint('search');
return;
}
setNoRelayHint(null);
setIsStreaming(false);
setError(null);
refetch();
}, [validRelays.length, refetch]);

const handleStream = useCallback(() => {
if (validRelays.length === 0) return;
if (validRelays.length === 0) {
setNoRelayHint('stream');
return;
}
setNoRelayHint(null);
setError(null);
setIsStreaming(false);
// Re-trigger the streaming effect
Expand Down Expand Up @@ -879,12 +893,14 @@ export function EventMonitor() {
<div className="flex flex-col items-center gap-0.5">
<Button
type="submit"
disabled={validRelays.length === 0 || isLoading}
disabled={isLoading}
className="h-8 px-4 text-xs bg-accent/80 hover:bg-accent border-accent/50"
>
Search
</Button>
<span className="text-[10px] text-muted-foreground">Fetch once</span>
<span className="text-[10px] text-muted-foreground">
{noRelayHint === 'search' ? 'Enter a relay first' : 'Fetch once'}
</span>
</div>
<div className="flex flex-col items-center gap-0.5">
{isStreaming ? (
Expand All @@ -899,14 +915,15 @@ export function EventMonitor() {
) : (
<Button
type="button"
disabled={validRelays.length === 0}
onClick={handleStream}
className="h-8 px-4 text-xs bg-accent/80 hover:bg-accent border-accent/50"
>
Stream
</Button>
)}
<span className="text-[10px] text-muted-foreground">{isStreaming ? 'Stop streaming' : 'Real-time'}</span>
<span className="text-[10px] text-muted-foreground">
{noRelayHint === 'stream' ? 'Enter a relay first' : isStreaming ? 'Stop streaming' : 'Real-time'}
</span>
</div>
<div className="flex flex-col items-center gap-0.5">
<Button
Expand Down Expand Up @@ -1242,23 +1259,14 @@ export function EventMonitor() {
<div className="text-center py-8 text-sm text-muted-foreground space-y-3">
<p>
Vibed by{" "}
<a
href="https://github.com/Catrya"
target="_blank"
<a
href="https://github.com/Catrya"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline"
>
Catrya
</a>
Comment thread
Catrya marked this conversation as resolved.
{" "}with{" "}
<a
href="https://soapbox.pub/mkstack"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline"
>
MKStack
</a>
</p>
<a
href="https://github.com/Catrya/Nostr-Events-Monitor"
Expand Down
Loading