initial commit: rocket.new export of broadcastbeat
This commit is contained in:
Ryan Salazar
471
src/app/forum/[slug]/page.tsx
Normal file
471
src/app/forum/[slug]/page.tsx
Normal file
@@ -0,0 +1,471 @@
|
||||
'use client';
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
interface ForumCategory {
|
||||
id: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
thread_count: number;
|
||||
}
|
||||
|
||||
interface ForumThread {
|
||||
id: string;
|
||||
title: string;
|
||||
body: string;
|
||||
author_name: string;
|
||||
status: string;
|
||||
reply_count: number;
|
||||
view_count: number;
|
||||
upvote_count?: number;
|
||||
last_reply_at: string;
|
||||
created_at: string;
|
||||
is_ai_seeded: boolean;
|
||||
}
|
||||
|
||||
type SortOption = 'newest' | 'top-voted' | 'unanswered';
|
||||
type TopMetric = 'upvotes' | 'replies' | 'views';
|
||||
|
||||
function timeAgo(dateStr: string): string {
|
||||
const diff = Date.now() - new Date(dateStr).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs < 24) return `${hrs}h ago`;
|
||||
const days = Math.floor(hrs / 24);
|
||||
if (days < 30) return `${days}d ago`;
|
||||
return new Date(dateStr).toLocaleDateString();
|
||||
}
|
||||
|
||||
function TopThreadsWidget({ categoryId }: { categoryId: string }) {
|
||||
const [activeMetric, setActiveMetric] = useState<TopMetric>('upvotes');
|
||||
const [threads, setThreads] = useState<ForumThread[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const sortMap: Record<TopMetric, string> = {
|
||||
upvotes: 'top-voted',
|
||||
replies: 'most-replied',
|
||||
views: 'most-viewed',
|
||||
};
|
||||
const params = new URLSearchParams({ category_id: categoryId, limit: '5', sort: sortMap[activeMetric] });
|
||||
fetch(`/api/forum/threads?${params.toString()}`)
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
setThreads(d.threads || []);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, [activeMetric, categoryId]);
|
||||
|
||||
const metrics: { value: TopMetric; label: string; icon: string }[] = [
|
||||
{ value: 'upvotes', label: 'Top Voted', icon: '▲' },
|
||||
{ value: 'replies', label: 'Most Replies', icon: '💬' },
|
||||
{ value: 'views', label: 'Most Viewed', icon: '👁' },
|
||||
];
|
||||
|
||||
const getMetricValue = (thread: ForumThread) => {
|
||||
if (activeMetric === 'upvotes') return { value: thread.upvote_count ?? 0, label: 'votes', color: 'text-[#22c55e]' };
|
||||
if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#3b82f6]' };
|
||||
return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-[#1a1a1a] border border-[#252525] rounded-xl overflow-hidden mb-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-[#252525]">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">🏆</span>
|
||||
<h2 className="text-white font-heading font-bold text-base">Top Performing Threads</h2>
|
||||
</div>
|
||||
{/* Metric Tabs */}
|
||||
<div className="flex gap-1 bg-[#111] border border-[#2a2a2a] rounded-lg p-1">
|
||||
{metrics.map(m => (
|
||||
<button
|
||||
key={m.value}
|
||||
onClick={() => setActiveMetric(m.value)}
|
||||
className={`px-3 py-1 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
|
||||
activeMetric === m.value
|
||||
? 'bg-[#3b82f6] text-white'
|
||||
: 'text-[#666] hover:text-[#aaa]'
|
||||
}`}
|
||||
>
|
||||
<span className="mr-1">{m.icon}</span>
|
||||
{m.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Thread List */}
|
||||
<div className="divide-y divide-[#1e1e1e]">
|
||||
{loading && (
|
||||
<>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 px-5 py-3">
|
||||
<div className="w-6 h-6 bg-[#252525] rounded animate-pulse flex-shrink-0" />
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<div className="h-3.5 bg-[#252525] rounded animate-pulse w-3/4" />
|
||||
<div className="h-2.5 bg-[#1e1e1e] rounded animate-pulse w-1/3" />
|
||||
</div>
|
||||
<div className="w-10 h-8 bg-[#252525] rounded animate-pulse flex-shrink-0" />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{!loading && threads.length === 0 && (
|
||||
<div className="px-5 py-8 text-center text-[#555] font-body text-sm">
|
||||
No threads yet. Be the first to start a discussion!
|
||||
</div>
|
||||
)}
|
||||
{!loading && threads.map((thread, idx) => {
|
||||
const metric = getMetricValue(thread);
|
||||
return (
|
||||
<Link
|
||||
key={thread.id}
|
||||
href={`/forum/thread/${thread.id}`}
|
||||
className="flex items-center gap-3 px-5 py-3 hover:bg-[#1e2a3a] transition-colors group"
|
||||
>
|
||||
{/* Rank */}
|
||||
<span className={`flex-shrink-0 w-6 text-center font-heading font-bold text-sm ${
|
||||
idx === 0 ? 'text-[#f59e0b]' : idx === 1 ? 'text-[#9ca3af]' : idx === 2 ? 'text-[#b45309]' : 'text-[#444]'
|
||||
}`}>
|
||||
{idx + 1}
|
||||
</span>
|
||||
{/* Thread info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white font-body text-sm font-semibold group-hover:text-[#3b82f6] transition-colors truncate leading-snug">
|
||||
{thread.title}
|
||||
</p>
|
||||
<p className="text-[#555] font-body text-xs mt-0.5">
|
||||
<span className="text-[#666]">{thread.author_name}</span>
|
||||
{' · '}{timeAgo(thread.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
{/* Metric value */}
|
||||
<div className="flex-shrink-0 text-right min-w-[48px]">
|
||||
<div className={`font-heading font-bold text-sm ${metric.color}`}>{metric.value.toLocaleString()}</div>
|
||||
<div className="text-[#444] font-body text-xs">{metric.label}</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ForumCategoryPage() {
|
||||
const params = useParams();
|
||||
const slug = params?.slug as string;
|
||||
|
||||
const [category, setCategory] = useState<ForumCategory | null>(null);
|
||||
const [threads, setThreads] = useState<ForumThread[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [threadsLoading, setThreadsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showNewThread, setShowNewThread] = useState(false);
|
||||
const [newTitle, setNewTitle] = useState('');
|
||||
const [newBody, setNewBody] = useState('');
|
||||
const [newAuthor, setNewAuthor] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [search, setSearch] = useState('');
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('');
|
||||
const [sort, setSort] = useState<SortOption>('newest');
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setDebouncedSearch(search), 350);
|
||||
return () => clearTimeout(t);
|
||||
}, [search]);
|
||||
|
||||
// Load category info once
|
||||
useEffect(() => {
|
||||
if (!slug) return;
|
||||
fetch('/api/forum/categories')
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
const cat = (d.categories || []).find((c: ForumCategory) => c.slug === slug);
|
||||
setCategory(cat || null);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setError('Failed to load category.');
|
||||
setLoading(false);
|
||||
});
|
||||
}, [slug]);
|
||||
|
||||
// Load threads when category/search/sort changes
|
||||
const fetchThreads = useCallback(() => {
|
||||
if (!category) return;
|
||||
setThreadsLoading(true);
|
||||
const qParams = new URLSearchParams({ category_id: category.id, limit: '50', sort });
|
||||
if (debouncedSearch.trim()) qParams.set('search', debouncedSearch.trim());
|
||||
|
||||
fetch(`/api/forum/threads?${qParams.toString()}`)
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
setThreads(d?.threads || []);
|
||||
setThreadsLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setError('Failed to load threads.');
|
||||
setThreadsLoading(false);
|
||||
});
|
||||
}, [category, debouncedSearch, sort]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchThreads();
|
||||
}, [fetchThreads]);
|
||||
|
||||
const handleNewThread = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newTitle.trim() || !newBody.trim() || !category) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const res = await fetch('/api/forum/threads', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
category_id: category.id,
|
||||
title: newTitle,
|
||||
body: newBody,
|
||||
author_name: newAuthor || 'Anonymous',
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.thread) {
|
||||
setThreads(prev => [data.thread, ...prev]);
|
||||
setNewTitle('');
|
||||
setNewBody('');
|
||||
setNewAuthor('');
|
||||
setShowNewThread(false);
|
||||
}
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const sortOptions: { value: SortOption; label: string }[] = [
|
||||
{ value: 'newest', label: 'Newest' },
|
||||
{ value: 'top-voted', label: 'Top Voted' },
|
||||
{ value: 'unanswered', label: 'Unanswered' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="min-h-screen bg-[#111111]">
|
||||
{/* Breadcrumb + Header */}
|
||||
<div className="bg-[#1a2535] border-b border-[#2a3a50]">
|
||||
<div className="max-w-container mx-auto px-4 py-8">
|
||||
<nav className="text-sm font-body text-[#666] mb-3">
|
||||
<Link href="/forum" className="hover:text-[#3b82f6] transition-colors">Forum</Link>
|
||||
<span className="mx-2">›</span>
|
||||
<span className="text-[#aab4c4]">{category?.name || slug}</span>
|
||||
</nav>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{category?.icon || '💬'}</span>
|
||||
<div>
|
||||
<h1 className="text-2xl font-heading font-bold text-white">{category?.name || 'Loading...'}</h1>
|
||||
{category && (
|
||||
<p className="text-[#aab4c4] font-body text-sm mt-0.5">{category.thread_count} threads</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowNewThread(!showNewThread)}
|
||||
className="flex-shrink-0 bg-[#3b82f6] hover:bg-[#2563eb] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
+ New Thread
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-4 py-6">
|
||||
{/* New Thread Form */}
|
||||
{showNewThread && (
|
||||
<form onSubmit={handleNewThread} className="bg-[#1a2535] border border-[#2a3a50] rounded-lg p-5 mb-6">
|
||||
<h3 className="text-white font-heading font-semibold mb-4">Start a New Thread</h3>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your name (optional)"
|
||||
value={newAuthor}
|
||||
onChange={e => setNewAuthor(e.target.value)}
|
||||
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#3b82f6]"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Thread title *"
|
||||
value={newTitle}
|
||||
onChange={e => setNewTitle(e.target.value)}
|
||||
required
|
||||
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#3b82f6]"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="What would you like to discuss? *"
|
||||
value={newBody}
|
||||
onChange={e => setNewBody(e.target.value)}
|
||||
required
|
||||
rows={5}
|
||||
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#3b82f6] resize-none"
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
{submitting ? 'Posting...' : 'Post Thread'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewThread(false)}
|
||||
className="bg-[#252525] hover:bg-[#333] text-[#aaa] font-body text-sm px-5 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Top Performing Threads Widget (shown when category is loaded) */}
|
||||
{!loading && category && <TopThreadsWidget categoryId={category.id} />}
|
||||
|
||||
{/* Search + Sort Bar */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 mb-5">
|
||||
{/* Search */}
|
||||
<div className="relative flex-1">
|
||||
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#555]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search threads in this category..."
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
className="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#3b82f6] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
onClick={() => setSearch('')}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-[#555] hover:text-[#aaa] transition-colors"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sort Options */}
|
||||
<div className="flex gap-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-1 flex-shrink-0">
|
||||
{sortOptions.map(opt => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => setSort(opt.value)}
|
||||
className={`px-3 py-1.5 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
|
||||
sort === opt.value
|
||||
? 'bg-[#3b82f6] text-white'
|
||||
: 'text-[#888] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(loading || threadsLoading) && (
|
||||
<div className="space-y-2">
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<div key={i} className="bg-[#1a1a1a] rounded-lg h-16 animate-pulse border border-[#252525]" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-900/20 border border-red-800 rounded-lg p-4 text-red-400 font-body">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !threadsLoading && !error && threads.length === 0 && (
|
||||
<div className="text-center py-16 text-[#555] font-body">
|
||||
<p className="text-lg mb-2">
|
||||
{search ? 'No threads match your search' : sort === 'unanswered' ? 'No unanswered threads' : 'No threads yet'}
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
{search ? 'Try different keywords.' : sort === 'unanswered' ? 'All threads have replies — great community!' : 'Be the first to start a discussion in this category.'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !threadsLoading && threads.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
{debouncedSearch && (
|
||||
<p className="text-[#666] font-body text-xs mb-2">{threads.length} result{threads.length !== 1 ? 's' : ''} for “{debouncedSearch}”</p>
|
||||
)}
|
||||
{threads.map(thread => (
|
||||
<Link
|
||||
key={thread.id}
|
||||
href={`/forum/thread/${thread.id}`}
|
||||
className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#3b82f6] rounded-lg px-4 py-3 transition-all group"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{thread.status === 'pinned' && (
|
||||
<span className="text-xs bg-[#3b82f6]/20 text-[#3b82f6] px-2 py-0.5 rounded font-body font-semibold">PINNED</span>
|
||||
)}
|
||||
{thread.status === 'closed' && (
|
||||
<span className="text-xs bg-[#555]/20 text-[#888] px-2 py-0.5 rounded font-body">CLOSED</span>
|
||||
)}
|
||||
{thread.reply_count === 0 && (
|
||||
<span className="text-xs bg-[#f59e0b]/10 text-[#f59e0b] px-2 py-0.5 rounded font-body">UNANSWERED</span>
|
||||
)}
|
||||
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#3b82f6] transition-colors truncate">
|
||||
{thread.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-[#666] font-body text-xs mt-0.5">
|
||||
by <span className="text-[#888]">{thread.author_name}</span>
|
||||
{' · '}{timeAgo(thread.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right hidden sm:block">
|
||||
<div className="text-[#aaa] font-body text-sm font-semibold">{thread.reply_count}</div>
|
||||
<div className="text-[#555] font-body text-xs">replies</div>
|
||||
</div>
|
||||
{sort === 'top-voted' && (
|
||||
<div className="flex-shrink-0 text-right hidden md:block">
|
||||
<div className="text-[#22c55e] font-body text-sm font-semibold">+{thread.upvote_count ?? 0}</div>
|
||||
<div className="text-[#555] font-body text-xs">votes</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-shrink-0 text-right hidden md:block">
|
||||
<div className="text-[#666] font-body text-xs">{timeAgo(thread.last_reply_at)}</div>
|
||||
<div className="text-[#444] font-body text-xs">last reply</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user