|
|
import { Button } from '@/components/ui/button' |
|
|
import { Card, CardContent } from '@/components/ui/card' |
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' |
|
|
import { DEFAULT_FAVORITE_RELAYS, FAST_READ_RELAY_URLS } from '@/constants' |
|
|
import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider' |
|
|
import { useNostr } from '@/providers/NostrProvider' |
|
|
import { forwardRef, useEffect, useState, useCallback, useMemo } from 'react' |
|
|
import { useTranslation } from 'react-i18next' |
|
|
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout' |
|
|
import { MessageSquarePlus, Book, BookOpen } from 'lucide-react' |
|
|
import ThreadCard from '@/pages/primary/DiscussionsPage/ThreadCard' |
|
|
import TopicFilter from '@/pages/primary/DiscussionsPage/TopicFilter' |
|
|
import ThreadSort, { SortOption } from '@/pages/primary/DiscussionsPage/ThreadSort' |
|
|
import CreateThreadDialog, { DISCUSSION_TOPICS } from '@/pages/primary/DiscussionsPage/CreateThreadDialog' |
|
|
import ViewToggle from '@/pages/primary/DiscussionsPage/ViewToggle' |
|
|
import { NostrEvent } from 'nostr-tools' |
|
|
import client from '@/services/client.service' |
|
|
import noteStatsService from '@/services/note-stats.service' |
|
|
import { useSecondaryPage } from '@/PageManager' |
|
|
import { toNote } from '@/lib/link' |
|
|
import { kinds } from 'nostr-tools' |
|
|
|
|
|
const DiscussionsPage = forwardRef((_, ref) => { |
|
|
const { t } = useTranslation() |
|
|
const { favoriteRelays, relaySets } = useFavoriteRelays() |
|
|
const { pubkey } = useNostr() |
|
|
const { push } = useSecondaryPage() |
|
|
const [selectedTopic, setSelectedTopic] = useState('all') |
|
|
const [selectedSubtopic, setSelectedSubtopic] = useState<string | null>(null) |
|
|
const [selectedRelay, setSelectedRelay] = useState<string | null>(null) |
|
|
const [selectedSort, setSelectedSort] = useState<SortOption>('newest') |
|
|
const [allThreads, setAllThreads] = useState<NostrEvent[]>([]) |
|
|
const [threads, setThreads] = useState<NostrEvent[]>([]) |
|
|
const [loading, setLoading] = useState(false) |
|
|
const [showCreateThread, setShowCreateThread] = useState(false) |
|
|
const [statsLoaded, setStatsLoaded] = useState(false) |
|
|
const [customVoteStats, setCustomVoteStats] = useState<Record<string, { upvotes: number; downvotes: number; score: number; controversy: number }>>({}) |
|
|
const [viewMode, setViewMode] = useState<'flat' | 'grouped'>('grouped') |
|
|
const [groupedThreads, setGroupedThreads] = useState<Record<string, NostrEvent[]>>({}) |
|
|
|
|
|
// Search and filter state for readings |
|
|
const [searchQuery, setSearchQuery] = useState('') |
|
|
const [filterBy, setFilterBy] = useState<'author' | 'subject' | 'all'>('all') |
|
|
|
|
|
// Use DEFAULT_FAVORITE_RELAYS for logged-out users, or user's favorite relays for logged-in users |
|
|
const availableRelays = useMemo(() => |
|
|
pubkey && favoriteRelays.length > 0 ? favoriteRelays : DEFAULT_FAVORITE_RELAYS, |
|
|
[pubkey, favoriteRelays] |
|
|
) |
|
|
|
|
|
// Memoize relay URLs with deduplication |
|
|
const relayUrls = useMemo(() => { |
|
|
if (selectedRelay) { |
|
|
// Check if it's a relay set |
|
|
const relaySet = relaySets.find(set => set.id === selectedRelay) |
|
|
if (relaySet) { |
|
|
return relaySet.relayUrls |
|
|
} |
|
|
// It's an individual relay |
|
|
return [selectedRelay] |
|
|
} |
|
|
// Deduplicate and combine relays |
|
|
return Array.from(new Set([...availableRelays, ...FAST_READ_RELAY_URLS])) |
|
|
}, [selectedRelay, availableRelays, relaySets]) |
|
|
|
|
|
// Available topic IDs for matching |
|
|
const availableTopicIds = useMemo(() => |
|
|
DISCUSSION_TOPICS.map(topic => topic.id), |
|
|
[] |
|
|
) |
|
|
|
|
|
// Memoize helper functions to prevent recreating on every render |
|
|
const getThreadVoteScore = useCallback((thread: NostrEvent) => { |
|
|
const threadId = thread.id |
|
|
if (customVoteStats[threadId]) { |
|
|
return customVoteStats[threadId].score |
|
|
} |
|
|
const stats = noteStatsService.getNoteStats(threadId) |
|
|
if (!stats?.likes) return 0 |
|
|
const upvoteReactions = stats.likes.filter(r => r.emoji === '⬆️') |
|
|
const downvoteReactions = stats.likes.filter(r => r.emoji === '⬇️') |
|
|
return upvoteReactions.length - downvoteReactions.length |
|
|
}, [customVoteStats]) |
|
|
|
|
|
const getThreadControversyScore = useCallback((thread: NostrEvent) => { |
|
|
const threadId = thread.id |
|
|
if (customVoteStats[threadId]) { |
|
|
return customVoteStats[threadId].controversy |
|
|
} |
|
|
const stats = noteStatsService.getNoteStats(threadId) |
|
|
if (!stats?.likes) return 0 |
|
|
const upvoteReactions = stats.likes.filter(r => r.emoji === '⬆️') |
|
|
const downvoteReactions = stats.likes.filter(r => r.emoji === '⬇️') |
|
|
const balance = Math.min(upvoteReactions.length, downvoteReactions.length) |
|
|
const magnitude = upvoteReactions.length + downvoteReactions.length |
|
|
return balance * magnitude |
|
|
}, [customVoteStats]) |
|
|
|
|
|
const getThreadZapAmount = useCallback((thread: NostrEvent) => { |
|
|
const stats = noteStatsService.getNoteStats(thread.id) |
|
|
if (!stats?.zaps) { |
|
|
return 0 |
|
|
} |
|
|
const totalAmount = stats.zaps.reduce((sum, zap) => sum + zap.amount, 0) |
|
|
return totalAmount |
|
|
}, []) |
|
|
|
|
|
// Memoize fetchAllThreads to prevent recreating on every render |
|
|
const fetchAllThreads = useCallback(async () => { |
|
|
setLoading(true) |
|
|
setCustomVoteStats({}) // Clear custom stats when fetching |
|
|
try { |
|
|
// Fetch all kind 11 events (limit 100, newest first) |
|
|
console.log('Fetching kind 11 events from relays:', relayUrls) |
|
|
// Fetch recent kind 11 events (last 30 days) |
|
|
const thirtyDaysAgo = Math.floor((Date.now() - (30 * 24 * 60 * 60 * 1000)) / 1000) |
|
|
|
|
|
const events = await client.fetchEvents(relayUrls, [ |
|
|
{ |
|
|
kinds: [11], // Thread events |
|
|
since: thirtyDaysAgo, // Only fetch events from last 30 days |
|
|
limit: 100 |
|
|
} |
|
|
]) |
|
|
|
|
|
// Debug: Show date range of fetched events |
|
|
|
|
|
// Filter and sort threads |
|
|
const validThreads = events |
|
|
.filter(event => { |
|
|
// Ensure it has a title tag |
|
|
const titleTag = event.tags.find(tag => tag[0] === 'title' && tag[1]) |
|
|
return titleTag && event.content.trim().length > 0 |
|
|
}) |
|
|
.map(event => { |
|
|
// Get the relay where this event was actually found |
|
|
const eventHints = client.getEventHints(event.id) |
|
|
const relaySource = eventHints.length > 0 ? eventHints[0] : 'unknown' |
|
|
|
|
|
return { |
|
|
...event, |
|
|
_relaySource: relaySource |
|
|
} |
|
|
}) |
|
|
|
|
|
setAllThreads(validThreads) |
|
|
} catch (error) { |
|
|
console.error('Error fetching threads:', error) |
|
|
setAllThreads([]) |
|
|
} finally { |
|
|
setLoading(false) |
|
|
} |
|
|
}, [relayUrls, selectedRelay, selectedSort, pubkey]) |
|
|
|
|
|
useEffect(() => { |
|
|
fetchAllThreads() |
|
|
}, [fetchAllThreads]) |
|
|
|
|
|
useEffect(() => { |
|
|
// Only wait for stats for vote-based sorting |
|
|
if ((selectedSort === 'top' || selectedSort === 'controversial') && !statsLoaded) { |
|
|
return |
|
|
} |
|
|
filterThreadsByTopic() |
|
|
}, [allThreads, selectedTopic, selectedSubtopic, selectedSort, statsLoaded, viewMode, searchQuery, filterBy]) |
|
|
|
|
|
// Fetch stats when sort changes to top/controversial |
|
|
useEffect(() => { |
|
|
if ((selectedSort === 'top' || selectedSort === 'controversial') && allThreads.length > 0) { |
|
|
setStatsLoaded(false) |
|
|
|
|
|
// Use the same relay selection as thread fetching |
|
|
const relayUrls = selectedRelay ? [selectedRelay] : availableRelays |
|
|
|
|
|
// Fetch ALL reactions in a single batch request instead of per-thread |
|
|
const threadIds = allThreads.map(t => t.id) |
|
|
|
|
|
client.fetchEvents(relayUrls, [ |
|
|
{ |
|
|
'#e': threadIds, |
|
|
kinds: [kinds.Reaction], |
|
|
limit: 500 |
|
|
} |
|
|
]).then((reactions) => { |
|
|
// Group reactions by thread |
|
|
const newCustomStats: Record<string, { upvotes: number; downvotes: number; score: number; controversy: number }> = {} |
|
|
|
|
|
allThreads.forEach(thread => { |
|
|
const threadReactions = reactions.filter(r => |
|
|
r.tags.some(tag => tag[0] === 'e' && tag[1] === thread.id) |
|
|
) |
|
|
const upvotes = threadReactions.filter(r => r.content === '⬆️') |
|
|
const downvotes = threadReactions.filter(r => r.content === '⬇️') |
|
|
|
|
|
newCustomStats[thread.id] = { |
|
|
upvotes: upvotes.length, |
|
|
downvotes: downvotes.length, |
|
|
score: upvotes.length - downvotes.length, |
|
|
controversy: Math.min(upvotes.length, downvotes.length) |
|
|
} |
|
|
}) |
|
|
|
|
|
setCustomVoteStats(newCustomStats) |
|
|
setStatsLoaded(true) |
|
|
}).catch((error) => { |
|
|
console.error('Error fetching vote stats:', error) |
|
|
setStatsLoaded(true) |
|
|
}) |
|
|
} else { |
|
|
setStatsLoaded(true) // For non-vote-based sorting, stats don't matter |
|
|
} |
|
|
}, [selectedSort, allThreads, selectedRelay, availableRelays]) |
|
|
|
|
|
const filterThreadsByTopic = useCallback(() => { |
|
|
const categorizedThreads = allThreads.map(thread => { |
|
|
// Find all 't' tags in the thread |
|
|
const topicTags = thread.tags.filter(tag => tag[0] === 't' && tag[1]) |
|
|
|
|
|
// Find the first matching topic from our available topics |
|
|
let matchedTopic = 'general' // Default to general |
|
|
let isReadingGroup = false |
|
|
|
|
|
for (const topicTag of topicTags) { |
|
|
if (availableTopicIds.includes(topicTag[1])) { |
|
|
matchedTopic = topicTag[1] |
|
|
break // Use the first match found |
|
|
} |
|
|
} |
|
|
|
|
|
// Check if this is a reading group thread |
|
|
if (matchedTopic === 'literature') { |
|
|
const readingsTag = thread.tags.find(tag => tag[0] === 't' && tag[1] === 'readings') |
|
|
isReadingGroup = !!readingsTag |
|
|
} |
|
|
|
|
|
return { |
|
|
...thread, |
|
|
_categorizedTopic: matchedTopic, |
|
|
_isReadingGroup: isReadingGroup |
|
|
} |
|
|
}) |
|
|
|
|
|
// Filter threads for the selected topic (or show all if "all" is selected) |
|
|
let threadsForTopic = selectedTopic === 'all' |
|
|
? categorizedThreads.map(thread => { |
|
|
// Remove the temporary categorization property but keep relay source |
|
|
const { _categorizedTopic, _isReadingGroup, ...cleanThread } = thread |
|
|
return cleanThread |
|
|
}) |
|
|
: categorizedThreads |
|
|
.filter(thread => { |
|
|
if (thread._categorizedTopic !== selectedTopic) return false |
|
|
|
|
|
// Handle subtopic filtering for literature |
|
|
if (selectedTopic === 'literature' && selectedSubtopic) { |
|
|
if (selectedSubtopic === 'readings') { |
|
|
return thread._isReadingGroup |
|
|
} else if (selectedSubtopic === 'general') { |
|
|
return !thread._isReadingGroup |
|
|
} |
|
|
} |
|
|
|
|
|
return true |
|
|
}) |
|
|
.map(thread => { |
|
|
// Remove the temporary categorization property but keep relay source |
|
|
const { _categorizedTopic, _isReadingGroup, ...cleanThread } = thread |
|
|
return cleanThread |
|
|
}) |
|
|
|
|
|
// Apply search and filter for readings (handled in display logic) |
|
|
|
|
|
// Apply sorting based on selectedSort |
|
|
|
|
|
switch (selectedSort) { |
|
|
case 'newest': |
|
|
|
|
|
// Create a new sorted array instead of mutating |
|
|
const sortedNewest = [...threadsForTopic].sort((a, b) => { |
|
|
const result = b.created_at - a.created_at |
|
|
return result |
|
|
}) |
|
|
|
|
|
// Replace the original array |
|
|
threadsForTopic.length = 0 |
|
|
threadsForTopic.push(...sortedNewest) |
|
|
|
|
|
break |
|
|
case 'oldest': |
|
|
// Create a new sorted array instead of mutating |
|
|
const sortedOldest = [...threadsForTopic].sort((a, b) => a.created_at - b.created_at) |
|
|
|
|
|
// Replace the original array |
|
|
threadsForTopic.length = 0 |
|
|
threadsForTopic.push(...sortedOldest) |
|
|
|
|
|
break |
|
|
case 'top': |
|
|
// Sort by vote score (upvotes - downvotes), then by newest if tied |
|
|
const sortedTop = [...threadsForTopic].sort((a, b) => { |
|
|
const scoreA = getThreadVoteScore(a) |
|
|
const scoreB = getThreadVoteScore(b) |
|
|
if (scoreA !== scoreB) { |
|
|
return scoreB - scoreA // Higher scores first |
|
|
} |
|
|
return b.created_at - a.created_at // Newest first if tied |
|
|
}) |
|
|
|
|
|
// Replace the original array |
|
|
threadsForTopic.length = 0 |
|
|
threadsForTopic.push(...sortedTop) |
|
|
|
|
|
break |
|
|
case 'controversial': |
|
|
// Sort by controversy score (min of upvotes and downvotes), then by newest if tied |
|
|
const sortedControversial = [...threadsForTopic].sort((a, b) => { |
|
|
const controversyA = getThreadControversyScore(a) |
|
|
const controversyB = getThreadControversyScore(b) |
|
|
if (controversyA !== controversyB) { |
|
|
return controversyB - controversyA // Higher controversy first |
|
|
} |
|
|
return b.created_at - a.created_at // Newest first if tied |
|
|
}) |
|
|
|
|
|
// Replace the original array |
|
|
threadsForTopic.length = 0 |
|
|
threadsForTopic.push(...sortedControversial) |
|
|
|
|
|
break |
|
|
case 'most-zapped': |
|
|
// Sort by total zap amount, then by newest if tied |
|
|
const sortedMostZapped = [...threadsForTopic].sort((a, b) => { |
|
|
const zapAmountA = getThreadZapAmount(a) |
|
|
const zapAmountB = getThreadZapAmount(b) |
|
|
if (zapAmountA !== zapAmountB) { |
|
|
return zapAmountB - zapAmountA // Higher zap amounts first |
|
|
} |
|
|
return b.created_at - a.created_at // Newest first if tied |
|
|
}) |
|
|
|
|
|
// Replace the original array |
|
|
threadsForTopic.length = 0 |
|
|
threadsForTopic.push(...sortedMostZapped) |
|
|
break |
|
|
default: |
|
|
const sortedDefault = [...threadsForTopic].sort((a, b) => b.created_at - a.created_at) |
|
|
threadsForTopic.length = 0 |
|
|
threadsForTopic.push(...sortedDefault) |
|
|
} |
|
|
|
|
|
// If grouped view and showing all topics, group threads by topic |
|
|
if (viewMode === 'grouped' && selectedTopic === 'all') { |
|
|
// Group threads by topic |
|
|
const groupedThreads = categorizedThreads.reduce((groups, thread) => { |
|
|
const topic = thread._categorizedTopic |
|
|
if (!groups[topic]) { |
|
|
groups[topic] = [] |
|
|
} |
|
|
// Remove the temporary categorization property but keep relay source |
|
|
const { _categorizedTopic, ...cleanThread } = thread |
|
|
groups[topic].push(cleanThread) |
|
|
return groups |
|
|
}, {} as Record<string, NostrEvent[]>) |
|
|
|
|
|
// Sort threads within each group |
|
|
Object.keys(groupedThreads).forEach(topic => { |
|
|
groupedThreads[topic] = sortThreads(groupedThreads[topic]) |
|
|
}) |
|
|
|
|
|
// Sort groups by the newest thread in each group |
|
|
const sortedGroupedThreads = Object.fromEntries( |
|
|
Object.entries(groupedThreads) |
|
|
.sort(([, threadsA], [, threadsB]) => { |
|
|
// Get the newest thread from each group |
|
|
const newestA = threadsA[0]?.created_at || 0 // First thread is newest after sorting |
|
|
const newestB = threadsB[0]?.created_at || 0 |
|
|
return newestB - newestA // Newest groups first |
|
|
}) |
|
|
) |
|
|
|
|
|
// Store grouped data in a different state |
|
|
setGroupedThreads(sortedGroupedThreads) |
|
|
setThreads([]) // Clear flat threads |
|
|
} else { |
|
|
// Flat view or specific topic selected |
|
|
setThreads(threadsForTopic) |
|
|
setGroupedThreads({}) // Clear grouped threads |
|
|
} |
|
|
}, [ |
|
|
allThreads, |
|
|
availableTopicIds, |
|
|
selectedTopic, |
|
|
selectedSubtopic, |
|
|
selectedSort, |
|
|
viewMode, |
|
|
searchQuery, |
|
|
filterBy, |
|
|
customVoteStats, |
|
|
getThreadVoteScore, |
|
|
getThreadControversyScore, |
|
|
getThreadZapAmount |
|
|
]) |
|
|
|
|
|
// Helper function to sort threads |
|
|
const sortThreads = useCallback((threadsToSort: NostrEvent[]) => { |
|
|
const sortedThreads = [...threadsToSort] |
|
|
|
|
|
switch (selectedSort) { |
|
|
case 'newest': |
|
|
return sortedThreads.sort((a, b) => b.created_at - a.created_at) |
|
|
case 'oldest': |
|
|
return sortedThreads.sort((a, b) => a.created_at - b.created_at) |
|
|
case 'top': |
|
|
return sortedThreads.sort((a, b) => { |
|
|
const scoreA = getThreadVoteScore(a) |
|
|
const scoreB = getThreadVoteScore(b) |
|
|
if (scoreA !== scoreB) return scoreB - scoreA |
|
|
return b.created_at - a.created_at |
|
|
}) |
|
|
case 'controversial': |
|
|
return sortedThreads.sort((a, b) => { |
|
|
const controversyA = getThreadControversyScore(a) |
|
|
const controversyB = getThreadControversyScore(b) |
|
|
if (controversyA !== controversyB) return controversyB - controversyA |
|
|
return b.created_at - a.created_at |
|
|
}) |
|
|
default: |
|
|
return sortedThreads.sort((a, b) => b.created_at - a.created_at) |
|
|
} |
|
|
}, [selectedSort, getThreadVoteScore, getThreadControversyScore]) |
|
|
|
|
|
const handleCreateThread = () => { |
|
|
setShowCreateThread(true) |
|
|
} |
|
|
|
|
|
const handleThreadCreated = () => { |
|
|
setShowCreateThread(false) |
|
|
fetchAllThreads() // Refresh all threads |
|
|
} |
|
|
|
|
|
return ( |
|
|
<PrimaryPageLayout |
|
|
ref={ref} |
|
|
pageName="discussions" |
|
|
titlebar={ |
|
|
<div className="flex gap-1 items-center h-full justify-between"> |
|
|
<div className="flex gap-1 items-center"> |
|
|
<TopicFilter |
|
|
topics={DISCUSSION_TOPICS} |
|
|
selectedTopic={selectedTopic} |
|
|
onTopicChange={(topic) => { |
|
|
setSelectedTopic(topic) |
|
|
setSelectedSubtopic(null) // Reset subtopic when changing topic |
|
|
}} |
|
|
threads={viewMode === 'grouped' && selectedTopic === 'all' ? allThreads : threads} |
|
|
replies={[]} |
|
|
/> |
|
|
{(availableRelays.length > 1 || relaySets.length > 0) && ( |
|
|
<DropdownMenu> |
|
|
<DropdownMenuTrigger asChild> |
|
|
<Button variant="outline" className="h-10 text-sm"> |
|
|
{selectedRelay ? ( |
|
|
relaySets.find(set => set.id === selectedRelay)?.name || |
|
|
selectedRelay.replace('wss://', '').replace('ws://', '') |
|
|
) : ( |
|
|
'All Relays' |
|
|
)} |
|
|
</Button> |
|
|
</DropdownMenuTrigger> |
|
|
<DropdownMenuContent> |
|
|
<DropdownMenuItem onClick={() => setSelectedRelay(null)}> |
|
|
All Relays |
|
|
</DropdownMenuItem> |
|
|
<DropdownMenuSeparator /> |
|
|
{relaySets.map(relaySet => ( |
|
|
<DropdownMenuItem |
|
|
key={relaySet.id} |
|
|
onClick={() => setSelectedRelay(relaySet.id)} |
|
|
> |
|
|
{relaySet.name} |
|
|
</DropdownMenuItem> |
|
|
))} |
|
|
{availableRelays.map(relay => ( |
|
|
<DropdownMenuItem |
|
|
key={relay} |
|
|
onClick={() => setSelectedRelay(relay)} |
|
|
> |
|
|
{relay.replace('wss://', '').replace('ws://', '')} |
|
|
</DropdownMenuItem> |
|
|
))} |
|
|
</DropdownMenuContent> |
|
|
</DropdownMenu> |
|
|
)} |
|
|
</div> |
|
|
<div className="flex gap-1 items-center"> |
|
|
<Button |
|
|
variant="ghost" |
|
|
size="titlebar-icon" |
|
|
onClick={handleCreateThread} |
|
|
title={t('Create new thread')} |
|
|
> |
|
|
<MessageSquarePlus /> |
|
|
</Button> |
|
|
</div> |
|
|
</div> |
|
|
} |
|
|
displayScrollToTopButton |
|
|
> |
|
|
<div className="p-4 space-y-4"> |
|
|
<div className="flex items-center justify-between"> |
|
|
<h1 className="text-2xl font-bold"> |
|
|
{t('Discussions')} - {selectedTopic === 'all' ? t('All Topics') : DISCUSSION_TOPICS.find(t => t.id === selectedTopic)?.label} |
|
|
</h1> |
|
|
<div className="flex items-center gap-2"> |
|
|
{selectedTopic === 'all' && ( |
|
|
<ViewToggle |
|
|
viewMode={viewMode} |
|
|
onViewModeChange={setViewMode} |
|
|
/> |
|
|
)} |
|
|
<ThreadSort |
|
|
selectedSort={selectedSort} |
|
|
onSortChange={setSelectedSort} |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{loading ? ( |
|
|
<div className="flex justify-center py-8"> |
|
|
<div className="text-muted-foreground">{t('Loading threads...')}</div> |
|
|
</div> |
|
|
) : selectedTopic === 'literature' ? ( |
|
|
<div className="space-y-6"> |
|
|
{/* General Literature and Arts Section */} |
|
|
<div className="space-y-3"> |
|
|
<div className="flex items-center gap-2 pb-2 border-b"> |
|
|
<BookOpen className="w-5 h-5 text-primary" /> |
|
|
<h2 className="text-lg font-semibold">{t('General Topics')}</h2> |
|
|
<span className="text-sm text-muted-foreground"> |
|
|
({threads.filter(thread => !thread.tags.find(tag => tag[0] === 't' && tag[1] === 'readings')).length} {threads.filter(thread => !thread.tags.find(tag => tag[0] === 't' && tag[1] === 'readings')).length === 1 ? t('thread') : t('threads')}) |
|
|
</span> |
|
|
</div> |
|
|
<div className="space-y-3"> |
|
|
{threads.filter(thread => !thread.tags.find(tag => tag[0] === 't' && tag[1] === 'readings')).map(thread => ( |
|
|
<ThreadCard |
|
|
key={thread.id} |
|
|
thread={thread} |
|
|
onThreadClick={() => { |
|
|
push(toNote(thread)) |
|
|
}} |
|
|
/> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{/* Readings Section */} |
|
|
<div className="space-y-3"> |
|
|
<div className="flex items-center gap-2 pb-2 border-b"> |
|
|
<Book className="w-5 h-5 text-primary" /> |
|
|
<h2 className="text-lg font-semibold">{t('Readings')}</h2> |
|
|
<span className="text-sm text-muted-foreground"> |
|
|
({threads.filter(thread => thread.tags.find(tag => tag[0] === 't' && tag[1] === 'readings')).length} {threads.filter(thread => thread.tags.find(tag => tag[0] === 't' && tag[1] === 'readings')).length === 1 ? t('thread') : t('threads')}) |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
{/* Readings-specific search and filter */} |
|
|
<div className="flex gap-2 items-center p-3 bg-muted/30 rounded-lg"> |
|
|
<input |
|
|
type="text" |
|
|
value={searchQuery} |
|
|
onChange={(e) => setSearchQuery(e.target.value)} |
|
|
placeholder={t('Search by author or book...')} |
|
|
className="px-3 h-10 rounded border bg-background text-sm w-48" |
|
|
/> |
|
|
<select |
|
|
value={filterBy} |
|
|
onChange={(e) => setFilterBy(e.target.value as 'author' | 'subject' | 'all')} |
|
|
className="px-3 h-10 rounded border bg-background text-sm" |
|
|
> |
|
|
<option value="all">{t('All')}</option> |
|
|
<option value="author">{t('Author')}</option> |
|
|
<option value="subject">{t('Subject')}</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div className="space-y-3"> |
|
|
{threads |
|
|
.filter(thread => thread.tags.find(tag => tag[0] === 't' && tag[1] === 'readings')) |
|
|
.filter(thread => { |
|
|
if (!searchQuery.trim()) return true |
|
|
|
|
|
const authorTag = thread.tags.find(tag => tag[0] === 'author') |
|
|
const subjectTag = thread.tags.find(tag => tag[0] === 'subject') |
|
|
|
|
|
if (filterBy === 'author' && authorTag) { |
|
|
return authorTag[1].toLowerCase().includes(searchQuery.toLowerCase()) |
|
|
} else if (filterBy === 'subject' && subjectTag) { |
|
|
return subjectTag[1].toLowerCase().includes(searchQuery.toLowerCase()) |
|
|
} else if (filterBy === 'all') { |
|
|
const authorMatch = authorTag && authorTag[1].toLowerCase().includes(searchQuery.toLowerCase()) |
|
|
const subjectMatch = subjectTag && subjectTag[1].toLowerCase().includes(searchQuery.toLowerCase()) |
|
|
return authorMatch || subjectMatch |
|
|
} |
|
|
|
|
|
return false |
|
|
}) |
|
|
.map(thread => ( |
|
|
<ThreadCard |
|
|
key={thread.id} |
|
|
thread={thread} |
|
|
onThreadClick={() => { |
|
|
push(toNote(thread)) |
|
|
}} |
|
|
/> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
) : (viewMode === 'grouped' && selectedTopic === 'all' ? |
|
|
Object.keys(groupedThreads).length === 0 : |
|
|
threads.length === 0) ? ( |
|
|
<Card> |
|
|
<CardContent className="p-8 text-center"> |
|
|
<MessageSquarePlus className="w-12 h-12 mx-auto mb-4 text-muted-foreground" /> |
|
|
<h3 className="text-lg font-semibold mb-2">{t('No threads yet')}</h3> |
|
|
<p className="text-muted-foreground mb-4"> |
|
|
{selectedTopic === 'all' |
|
|
? t('No discussion threads found. Try refreshing or check your relay connection.') |
|
|
: t('Be the first to start a discussion in this topic!') |
|
|
} |
|
|
</p> |
|
|
<div className="flex gap-2 justify-center"> |
|
|
<Button onClick={handleCreateThread}> |
|
|
<MessageSquarePlus className="w-4 h-4 mr-2" /> |
|
|
{t('Create Thread')} |
|
|
</Button> |
|
|
<Button variant="outline" onClick={fetchAllThreads}> |
|
|
{t('Refresh')} |
|
|
</Button> |
|
|
</div> |
|
|
</CardContent> |
|
|
</Card> |
|
|
) : viewMode === 'grouped' && selectedTopic === 'all' ? ( |
|
|
<div className="space-y-6"> |
|
|
{Object.entries(groupedThreads).length === 0 && ( |
|
|
<div className="text-center py-8 text-muted-foreground"> |
|
|
Debug: No grouped threads found. groupedThreads keys: {Object.keys(groupedThreads).join(', ')} |
|
|
</div> |
|
|
)} |
|
|
{Object.entries(groupedThreads).map(([topicId, topicThreads]) => { |
|
|
const topicInfo = DISCUSSION_TOPICS.find(t => t.id === topicId) |
|
|
if (!topicInfo || topicThreads.length === 0) return null |
|
|
|
|
|
return ( |
|
|
<div key={topicId} className="space-y-3"> |
|
|
<div className="flex items-center gap-2 pb-2 border-b"> |
|
|
<topicInfo.icon className="w-5 h-5 text-primary" /> |
|
|
<h2 className="text-lg font-semibold">{topicInfo.label}</h2> |
|
|
<span className="text-sm text-muted-foreground"> |
|
|
({topicThreads.length} {topicThreads.length === 1 ? t('thread') : t('threads')}) |
|
|
</span> |
|
|
</div> |
|
|
<div className="space-y-3"> |
|
|
{topicThreads.map(thread => ( |
|
|
<ThreadCard |
|
|
key={thread.id} |
|
|
thread={thread} |
|
|
onThreadClick={() => { |
|
|
push(toNote(thread)) |
|
|
}} |
|
|
/> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
})} |
|
|
</div> |
|
|
) : ( |
|
|
<div className="space-y-3"> |
|
|
{threads.map(thread => ( |
|
|
<ThreadCard |
|
|
key={thread.id} |
|
|
thread={thread} |
|
|
onThreadClick={() => { |
|
|
push(toNote(thread)) |
|
|
}} |
|
|
/> |
|
|
))} |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
|
|
|
{showCreateThread && ( |
|
|
<CreateThreadDialog |
|
|
topic={selectedTopic} |
|
|
availableRelays={availableRelays} |
|
|
selectedRelay={selectedRelay} |
|
|
onClose={() => setShowCreateThread(false)} |
|
|
onThreadCreated={handleThreadCreated} |
|
|
/> |
|
|
)} |
|
|
</PrimaryPageLayout> |
|
|
) |
|
|
}) |
|
|
|
|
|
DiscussionsPage.displayName = 'DiscussionsPage' |
|
|
export default DiscussionsPage |
|
|
|
|
|
|
