'use client'; import { useEffect,useState,useRef } from 'react'; import { Home,Video,MessageCircle,ShoppingBag,Heart,Newspaper,Search,Plus,ArrowUpRight,ArrowRight,Globe,Lock,MapPin,ThumbsUp,Send,Share2,Smile,Users,ChevronRight,Check,Mic,MicOff,Camera,CameraOff,PhoneOff,Trash2,Menu,Sparkles,Radio,Leaf,MoreHorizontal } from 'lucide-react'; import { SidebarProvider,Sidebar,SidebarContent,SidebarTrigger } from '@/components/ui/sidebar'; import { AlertDialog,AlertDialogContent,AlertDialogHeader,AlertDialogTitle,AlertDialogDescription,AlertDialogFooter,AlertDialogCancel,AlertDialogAction } from '@/components/ui/alert-dialog'; import { Dialog,DialogContent,DialogHeader,DialogTitle,DialogDescription } from '@/components/ui/dialog'; import { Tabs,TabsList,TabsTrigger } from '@/components/ui/tabs'; import { Select,SelectTrigger,SelectValue,SelectContent,SelectItem } from '@/components/ui/select'; import { Checkbox } from '@/components/ui/checkbox'; import { Toaster,toast } from 'sonner'; import VideoRoom from './video-room'; type Row=Record; const nav=[['feed','Home feed',Home],['rooms','Video rooms',Video],['messages','Messages',MessageCircle],['marketplace','Marketplace',ShoppingBag],['singles','Find your person',Heart],['news','News & stories',Newspaper]] as const; const topics=['All conversations','Culture & vibes','Business & hustle','Everyday Naija','Relationships']; const links:Record={feed:'/',rooms:'/rooms',messages:'/messages',marketplace:'/marketplace',singles:'/singles',news:'/news'}; async function api(view='feed'){const r=await fetch('/api/community?view='+view);const d:any=await r.json();if(!r.ok)throw new Error(d.error);return d;} export async function act(body:Row){const r=await fetch('/api/community',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});const d:any=await r.json();if(!r.ok)throw new Error(d.error);return d;} function Avatar({name='Naija',large=false}:{name?:string,large?:boolean}){return {name.split(' ').map(x=>x[0]).slice(0,2).join('').toUpperCase()}} function Choice({value,onChange,options}:{value:string,onChange:(v:string)=>void,options:string[]}){return } function Empty({icon:Icon,title,text,action}:{icon:any,title:string,text:string,action?:React.ReactNode}){return

{title}

{text}

{action}

} export default function Community({initialView}:{initialView:string}){ const [view,setView]=useState(initialView),[data,setData]=useState({posts:[],rooms:[],people:[],market:[]}),[error,setError]=useState(''),[loading,setLoading]=useState(true),[modal,setModal]=useState(''),[query,setQuery]=useState(''),[topic,setTopic]=useState('All conversations'),[draft,setDraft]=useState(''),[busy,setBusy]=useState(false),[form,setForm]=useState({}),[singles,setSingles]=useState([]),[news,setNews]=useState(null),[newsRegion,setNewsRegion]=useState('All'),[recipient,setRecipient]=useState(null),[messages,setMessages]=useState([]),[message,setMessage]=useState(''),[selected,setSelected]=useState(null),[comments,setComments]=useState([]),[comment,setComment]=useState(''),[room,setRoom]=useState(null),[invite,setInvite]=useState(''); const me=data.me;const name=me?.name??data.user?.name??'Neighbour'; async function refresh(){try{setData(await api());setError('')}catch(e){setError((e as Error).message)}finally{setLoading(false)}} function navigate(v:string){setView(v);setQuery('');history.pushState({},'',links[v]);} useEffect(()=>{refresh();const pop=()=>setView(Object.keys(links).find(k=>links[k]===location.pathname)??'feed');window.addEventListener('popstate',pop);return()=>window.removeEventListener('popstate',pop)},[]); useEffect(()=>{const timer=setInterval(refresh,20000);return()=>clearInterval(timer)},[]); useEffect(()=>{if(view==='news'&&!news)loadNews();if(view==='singles')api('singles').then(x=>setSingles(x.profiles)).catch(()=>{});},[view]); useEffect(()=>{if(view!=='messages'||!recipient)return;let alive=true;const run=()=>api('messages&with='+encodeURIComponent(recipient.id)).then(x=>{if(alive)setMessages(x.messages)}).catch(e=>{if(alive)setError(e.message)});run();const t=setInterval(run,4000);return()=>{alive=false;clearInterval(t)}},[view,recipient]); useEffect(()=>{const q=new URLSearchParams(location.search);if(q.get('room')){setForm({id:q.get('room'),secret:q.get('invite')??''});setModal('join')}},[]); useEffect(()=>{const c=(document as any).modelContext;if(!c?.registerTool)return;const ctrl=new AbortController();Promise.resolve(c.registerTool({name:'navigate_naijatalks',description:'Open a Naijatalk community section.',inputSchema:{type:'object',properties:{section:{type:'string',enum:Object.keys(links)}},required:['section'],additionalProperties:false},annotations:{readOnlyHint:true},execute:async(input:any)=>{if(!Object.hasOwn(links,input.section))throw new Error('Unknown section');navigate(input.section);return{section:input.section}}},{signal:ctrl.signal})).catch(()=>{});return()=>ctrl.abort()},[]); async function loadNews(){setNews(null);try{const r=await fetch('/api/news');if(!r.ok)throw new Error();setNews(await r.json())}catch{setNews({feeds:[],error:'News is temporarily unavailable. Please try again.'})}} function needAccount(){if(!data.user){setModal('signin');return false}return true} function openProfile(singles=false){if(!needAccount())return;setForm({name,city:me?.city??'',bio:me?.bio??'',age:me?.age??'',gender:me?.gender||'Woman',looking:me?.looking||'A life partner',singles:singles||!!me?.singles});setModal('profile')} async function perform(fn:()=>Promise){setBusy(true);try{await fn()}catch(e){toast.error((e as Error).message)}finally{setBusy(false)}} function startMessage(p:Row){if(!needAccount())return;if(p.id===data.user.id){toast('That’s your profile. Choose another member.');return}setRecipient(p);navigate('messages');setModal('')} async function join(r:Row){if(!needAccount())return;await perform(async()=>{const joined=await act({action:'join',id:r.id,secret:r.secret??''});setInvite(r.secret?location.origin+'/rooms?room='+r.id+'&invite='+r.secret:'');setRoom({...r,...joined});setModal('');navigate('rooms')})} useEffect(()=>{const post=new URLSearchParams(location.search).get('post');if(post&&data.posts.length)document.getElementById(post)?.scrollIntoView({behavior:'smooth',block:'center'})},[data.posts]); const matched=(rows:Row[])=>rows.filter(x=>JSON.stringify(x).toLowerCase().includes(query.toLowerCase())); const posts=matched(data.posts).filter((p:Row)=>topic==='All conversations'||p.body.includes('#'+topic.split(' ')[0])); return {e.preventDefault();navigate('feed')}}>Naijatalk

YOUR CORNER OF THE INTERNET

MADE FOR OUR PEOPLE

🇳🇬Home is a conversation.

From Lagos to London.
From Abuja to everywhere.

Be kind. Stay curious.
Make meaningful connections.

Community {nav.find(x=>x[0]===view)?.[1]}

setQuery(e.target.value)} placeholder={view==='feed'?'Search conversations…':'Search this page…'} aria-label="Search this page"/>⌕

{view==='feed'&&<>

THE COMMUNITY STARTS WITH YOU

Your people. Your conversations.

A little gist. A big idea. A connection that matters.

🇳🇬 Naija, together.

ROOTED IN NAIJA. OPEN TO THE WORLD.

There’s a place
for you here.

Real people. Fresh perspectives. One community.

Lagos, Nigeria · Photo: kopee15

setDraft(e.target.value)} placeholder={`What’s on your mind, ${name.split(' ')[0]}?`} rows={2} maxLength={3000}/></div><div className="composer-actions"><span><Globe size={16}/> Public conversation</span><button className="primary small" disabled={busy||!draft.trim()} onClick={()=>{if(needAccount())perform(async()=>{await act({action:'post',body:draft});setDraft('');await refresh();toast.success('Your conversation is live.')})}}>Post <Send size={15}/></button></div></section>
 <div className="topic-scroll"><Tabs value={topic} onValueChange={setTopic}><TabsList className="topics">{topics.map(t=><TabsTrigger value={t} key={t}>{t}</TabsTrigger>)}</TabsList></Tabs></div>
 {error&&<div className="error" role="alert">{error}<button onClick={refresh}>Try again</button></div>}{loading&&<div className="card loading">Finding your conversations…</div>}{posts.map((p:Row)=><article id={p.id} className="post card" key={p.id}><div className="post-header"><Avatar name={p.name}/><div><b>{p.name}</b><small>{p.city&&p.city+' · '}{new Date(p.created).toLocaleDateString()} · <Globe size={12}/></small></div>{p.owner===data.user?.id&&<button className="icon-button push" aria-label="Delete post" onClick={()=>{setSelected(p);setModal('delete')}}><Trash2 size={16}/></button>}</div><p className="post-body">{p.body}</p><div className="post-actions"><button className={p.liked?'liked':''} onClick={()=>{if(needAccount())perform(async()=>{await act({action:'like',id:p.id,liked:!!p.liked});await refresh()})}}><ThumbsUp size={18}/>{p.likes||''} Like</button><button onClick={()=>{setSelected(p);setModal('comments');api('comments&post='+p.id).then(x=>setComments(x.comments)).catch(e=>toast.error(e.message))}}><MessageCircle size={18}/>Comment</button><button onClick={()=>perform(async()=>{await navigator.clipboard.writeText(location.origin+'/?post='+p.id);toast.success('Post link copied.')})}><Share2 size={17}/>Share</button></div></article>)}
 {!loading&&!posts.length&&<article className="post card editorial-post"><div className="post-header"><span className="community-avatar"><MessageCircle size={23}/></span><div><b>Welcome to Naijatalk <span className="verified"><Check size={10}/></span></b><small>Community conversation starter · <Globe size={12}/></small></div><Leaf className="push" size={21}/></div><p className="post-body">Every great community starts with a simple hello. 👋<br/>Where are you joining us from, and what’s one thing you love about home?</p><div className="conversation-art"><span>Different cities.<br/><b>Same Naija spirit.</b></span><span className="city-tags">LAGOS <i>✦</i> ABUJA<br/>ACCRA <i>✦</i> LONDON<br/>EVERYWHERE</span></div><button className="start-reply" onClick={()=>{setDraft('Hello Naijatalk! I’m joining from ');document.getElementById('post-draft')?.focus()}}><MessageCircle size={17}/> Be the first to say hello <ArrowRight size={16}/></button></article>}
 </>}
 {view==='rooms'&&<><PageTitle eyebrow="PULL UP A CHAIR" title="Good conversations happen here." text="Start a public hangout or bring your circle into a private room." action={<button className="primary" onClick={()=>{if(needAccount()){setForm({title:'',privacy:'public'});setModal('room')}}}><Plus size={18}/> Create a room</button>}/>{room?<VideoRoom room={room} userId={data.user?.id} onLeave={()=>setRoom(null)} invite={invite}/>:<><div className="room-intro"><span className="round-icon"><Video size={32}/></span><div><h2>Less typing. More talking.</h2><p>Video conversations for up to 6 people. Your camera is always your choice.</p></div></div><div className="section-heading"><h3>Community rooms</h3><button onClick={()=>{setForm({id:'',secret:''});setModal('join')}}><Lock size={14}/> Join with an invite</button></div><div className="room-grid">{matched(data.rooms).map((r:Row)=><div className="card room-card" key={r.id}><span className={'room-type '+r.privacy}>{r.privacy==='private'?<Lock size={15}/>:<Globe size={15}/>} {r.privacy==='private'?'Private room':'Public room'}</span><Video size={35}/><h3>{r.title}</h3><p>Drop in and join the conversation.</p><button className="outline" onClick={()=>join(r)}>Enter room <ArrowUpRight size={16}/></button></div>)}</div>{!data.rooms.length&&<Empty icon={Video} title="Make room for a good conversation" text="No rooms yet. Start one for your friends, your community, or your next big idea."/>}</> }</>}
 {view==='messages'&&<><PageTitle eyebrow="JUST BETWEEN YOU" title="Your conversations" text="A little hello can go a long way."/><div className="messages card"><aside><h3>Messages <MessageCircle size={18}/></h3>{matched(data.people).filter((p:Row)=>p.id!==data.user?.id).map((p:Row)=><button className={'person '+(recipient?.id===p.id?'selected':'')} key={p.id} onClick={()=>{setMessages([]);setRecipient(p)}}><Avatar name={p.name}/><span><b>{p.name}</b><small>{p.city||'Naijatalk member'}</small></span></button>)}{data.people.filter((p:Row)=>p.id!==data.user?.id).length===0&&<p className="muted inset">Members will appear here when they join.</p>}</aside><section>{recipient?<><div className="chat-head"><Avatar name={recipient.name}/><div><b>{recipient.name}</b><small><Lock size={12}/> Private conversation</small></div></div><div className="chat-messages">{messages.length?messages.map(m=><div key={m.id} className={'bubble '+(m.owner===data.user?.id?'mine':'')}>{m.body}<small>{new Date(m.created).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})}</small></div>):<Empty icon={MessageCircle} title={`Say hello to ${recipient.name.split(' ')[0]}`} text="Your messages are visible only to the two of you."/>}</div><form className="chat-input" onSubmit={e=>{e.preventDefault();if(needAccount())perform(async()=>{await act({action:'message',target:recipient.id,body:message});setMessage('');setMessages((await api('messages&with='+encodeURIComponent(recipient.id))).messages)})}}><input aria-label="Message" placeholder="Write a message…" value={message} onChange={e=>setMessage(e.target.value)} maxLength={3000}/><button className="primary" disabled={!message.trim()||busy} aria-label="Send message"><Send size={18}/></button></form></>:<Empty icon={MessageCircle} title="Your next conversation starts here" text="Choose a community member to send a private message."/>}</section></div></>}
 {view==='marketplace'&&<><PageTitle eyebrow="GOOD FINDS. GREAT NEIGHBOURS." title="The community marketplace" text="Buy local. Sell something special. Support our people." action={<button className="primary" onClick={()=>{if(needAccount()){setForm({title:'',price:'',description:'',category:'Fashion & style'});setModal('listing')}}}><Plus size={18}/> Sell something</button>}/><div className="market-banner"><ShoppingBag size={38}/><div><h2>Your next great find is closer than you think.</h2><p>Connect directly with sellers. Agree payment and delivery together.</p></div></div><div className="market-grid">{matched(data.market).map((r:Row)=>{let l;try{l=JSON.parse(r.body)}catch{return null}return <button className="card listing" key={r.id} onClick={()=>{setSelected({...r,...l});setModal('listing-detail')}}><div className="listing-visual"><ShoppingBag size={45}/><span>{l.category}</span></div><div className="listing-info"><strong>₦{Number(l.price).toLocaleString()}</strong><h3>{l.title}</h3><p><MapPin size={13}/>{r.city||'Location not added'}</p></div></button>})}</div>{!data.market.length&&<Empty icon={ShoppingBag} title="Good things start with the first listing" text="Give your preloved items a new home, or introduce your business to the community." action={<button className="outline" onClick={()=>{if(needAccount()){setForm({category:'Fashion & style'});setModal('listing')}}}>Create a listing</button>}/>}</>}
 {view==='singles'&&<><PageTitle eyebrow="SOMETHING REAL STARTS HERE · 18+" title="Find your person." text="For single people looking for love, commitment, and a future together."/><section className="love-banner"><div><span className="banner-tag">INTENTIONAL CONNECTIONS</span><h2>Not just a match.<br/>A shared tomorrow.</h2><p>Meet people who are ready for something meaningful.</p><button className="dark-button" onClick={()=>openProfile(true)}>{me?.singles?'Edit your dating profile':'Create your dating profile'} <Heart size={16}/></button></div><Heart className="love-icon" strokeWidth={0.7}/></section><div className="section-heading"><h3>Meet the community</h3><span className="muted">Marriage-minded connections</span></div><div className="singles-grid">{matched(singles).map(p=><div className="card singles-card" key={p.id}><Avatar name={p.name} large/><h3>{p.name}, {p.age}</h3><p><MapPin size={14}/>{p.city||'Location not added'}</p><span className="intent"><Heart size={13}/>{p.looking}</span><p className="bio">{p.bio||'Looking forward to meeting someone special.'}</p><button className="outline" onClick={()=>startMessage(p)}>Say hello <MessageCircle size={16}/></button></div>)}</div>{!singles.length&&<Empty icon={Heart} title="Be part of a new beginning" text="Opt in to appear here. New profiles will appear as people join. You can hide your profile at any time."/>}<p className="safety-note"><Lock size={15}/> Take your time getting to know someone. Meet in public, and never send money to someone you have not met.</p></>}
 {view==='news'&&<><PageTitle eyebrow="IN THE KNOW" title="Nigeria. Africa. What matters." text="Latest headlines from independent publishers, with the full story at the source." action={<button className="outline" onClick={loadNews}>Refresh news</button>}/><Tabs value={newsRegion} onValueChange={setNewsRegion}><TabsList className="topics">{['All','Nigeria','Africa'].map(x=><TabsTrigger key={x} value={x}>{x}</TabsTrigger>)}</TabsList></Tabs>{!news&&<div className="card loading">Checking the latest headlines…</div>}{news?.error&&<div className="error">{news.error}</div>}{news?.feeds?.filter((f:Row)=>newsRegion==='All'||newsRegion===f.region).map((f:Row)=><section key={f.name} className="news-section"><div className="section-heading"><h3>{f.region} <span className="source-label">{f.name}</span></h3><a href={f.home} target="_blank" rel="noreferrer">Visit publisher <ArrowUpRight size={14}/></a></div>{f.error?<div className="card inset"><p>{f.error}</p><a className="text-link" href={f.home} target="_blank" rel="noreferrer">Read {f.name} <ArrowUpRight size={16}/></a></div>:matched(f.stories).map((n:Row,i:number)=><a key={n.url} href={n.url} target="_blank" rel="noreferrer" className="news-item card"><span className="news-number">{String(i+1).padStart(2,'0')}</span><div><small>{n.source} · {n.date?new Date(n.date).toLocaleDateString():''}</small><h3>{n.title}</h3><span>Read the full story <ArrowUpRight size={14}/></span></div></a>)}</section>)}{news?.updated&&<p className="muted">Last checked {new Date(news.updated).toLocaleString()}. Headlines refresh when you open this page.</p>}</>}
 </main>
 <aside className="right-rail"><div className="rail-card"><div className="rail-heading"><h3>Make yourself at home</h3><Sparkles size={18}/></div><p>There’s more than one way to connect.</p><button className="discover-row" onClick={()=>navigate('rooms')}><span className="mini-icon green"><Video size={21}/></span><span><b>Face-to-face, from anywhere</b><small>Discover video rooms</small></span><ChevronRight size={16}/></button><button className="discover-row" onClick={()=>navigate('marketplace')}><span className="mini-icon orange"><ShoppingBag size={21}/></span><span><b>A little local love</b><small>Explore the marketplace</small></span><ChevronRight size={16}/></button><button className="discover-row" onClick={()=>navigate('news')}><span className="mini-icon blue"><Newspaper size={21}/></span><span><b>Stay in the loop</b><small>News from Nigeria & Africa</small></span><ChevronRight size={16}/></button></div><div className="rail-love"><span className="love-label"><Heart size={15}/> MORE THAN A CONNECTION</span><h3>Your person<br/>could be here.</h3><p>For the love that feels like home.</p><button onClick={()=>navigate('singles')}>Meet with intention <ArrowRight size={16}/></button><Heart className="rail-heart" size={105} strokeWidth={0.7}/></div><div className="rail-card conversation-topics"><div className="rail-heading"><h3>Let’s talk about…</h3><MessageCircle size={18}/></div>{[['01','The Naija hustle','Ideas, businesses & big dreams'],['02','Our culture, our pride','Food, music & everything us'],['03','Love & real life','The conversations that matter']].map(([n,t,d])=><button key={n} onClick={()=>{navigate('feed');setDraft(t==='The Naija hustle'?'#Business ':t==='Our culture, our pride'?'#Culture ':'#Relationships ');setTimeout(()=>document.getElementById('post-draft')?.focus(),50)}}><span>{n}</span><div><b>{t}</b><small>{d}</small></div></button>)}</div><footer>Our people. Our stories. Our Naija.<br/><span>© {new Date().getFullYear()} Naijatalk</span></footer></aside></div></div>
 <AlertDialog open={modal==='delete'} onOpenChange={o=>{if(!o)setModal('')}}><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete your post?</AlertDialogTitle><AlertDialogDescription>This removes your post from the community feed.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Keep post</AlertDialogCancel><AlertDialogAction onClick={()=>perform(async()=>{await act({action:'delete',id:selected?.id});await refresh();setModal('')})}>Delete post</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog><Dialog open={!!modal&&modal!=='delete'} onOpenChange={o=>{if(!o)setModal('')}}><DialogContent className="app-dialog"><DialogHeader><DialogTitle>{{signin:'Welcome to Naijatalk',profile:'Make yourself at home',room:'Create a video room',join:'Join a video room',listing:'Sell something',comments:'Keep the conversation going',delete:'Delete your post?', 'listing-detail':selected?.title}[modal]??'Naijatalk'}</DialogTitle><DialogDescription>{{signin:'Sign in to post, connect, and send private messages.',profile:'Choose what you share with the community.',room:'Invite a few friends or open the conversation to everyone.',join:'Use a room ID or paste your complete invitation link.',listing:'Add the details buyers need. Payments are arranged directly.',comments:'Share your perspective with kindness.',delete:'This removes your post from the community feed.','listing-detail':'Community marketplace'}[modal]}</DialogDescription></DialogHeader>
 {modal==='signin'&&<a className="primary" href={'/signin-with-chatgpt?return_to='+encodeURIComponent(links[view])} target="_top">Sign in with ChatGPT <ArrowRight size={17}/></a>}
 {modal==='profile'&&<form className="form" onSubmit={e=>{e.preventDefault();perform(async()=>{await act({action:'profile',...form});await refresh();if(view==='singles')setSingles((await api('singles')).profiles);setModal('');toast.success('Your profile is saved.')})}}><label>Display name<input required value={form.name} onChange={e=>setForm({...form,name:e.target.value})} maxLength={80}/></label><label>City<input value={form.city} onChange={e=>setForm({...form,city:e.target.value})} placeholder="Lagos, Nigeria" maxLength={80}/></label><label>A little about you<textarea value={form.bio} onChange={e=>setForm({...form,bio:e.target.value})} maxLength={1000}/></label><label className="check-row"><Checkbox checked={!!form.singles} onCheckedChange={c=>setForm({...form,singles:c===true})}/> Show my profile in Find your person (18+)</label>{form.singles&&<><label>Age<input type="number" min="18" max="110" required value={form.age} onChange={e=>setForm({...form,age:e.target.value})}/></label><label>I am<Choice value={form.gender} onChange={gender=>setForm({...form,gender})} options={['Woman','Man','Nonbinary','Prefer not to say']}/></label><label>Looking for<Choice value={form.looking} onChange={looking=>setForm({...form,looking})} options={['A life partner','Marriage','A committed relationship']}/></label></>}<button className="primary" disabled={busy}>Save profile</button></form>}
 {modal==='room'&&<form className="form" onSubmit={e=>{e.preventDefault();perform(async()=>{const r=await act({action:'room',...form});setInvite(r.secret?location.origin+'/rooms?room='+r.id+'&invite='+r.secret:location.origin+'/rooms?room='+r.id);await refresh();setRoom({...r,...form});setModal('');navigate('rooms')})}}><label>Room name<input required maxLength={100} value={form.title} onChange={e=>setForm({...form,title:e.target.value})} placeholder="Friday night gist"/></label><label>Who can join?<Choice value={form.privacy} onChange={privacy=>setForm({...form,privacy})} options={['public','private']}/></label><p className="muted">Private rooms require an invitation link. Anyone with that link can join. Up to 6 participants.</p><button className="primary" disabled={busy}>Create room</button></form>}
 {modal==='join'&&<form className="form" onSubmit={e=>{e.preventDefault();let f={...form};try{const u=new URL(form.id);f={id:u.searchParams.get('room'),secret:u.searchParams.get('invite')??''}}catch{}join(f)}}><label>Room ID or invitation link<input required value={form.id} onChange={e=>setForm({...form,id:e.target.value})}/></label><button className="primary" disabled={busy}>Join room</button></form>}
 {modal==='listing'&&<form className="form" onSubmit={e=>{e.preventDefault();perform(async()=>{await act({action:'listing',body:JSON.stringify(form)});await refresh();setModal('');toast.success('Your listing is live.')})}}><label>What are you selling?<input required maxLength={100} value={form.title??''} onChange={e=>setForm({...form,title:e.target.value})}/></label><label>Price (₦)<input required type="number" min="1" value={form.price??''} onChange={e=>setForm({...form,price:e.target.value})}/></label><label>Category<Choice value={form.category} onChange={category=>setForm({...form,category})} options={['Fashion & style','Electronics','Home & living','Services','Other']}/></label><label>Description<textarea required value={form.description??''} onChange={e=>setForm({...form,description:e.target.value})} maxLength={1600}/></label><button className="primary" disabled={busy}>Publish listing</button></form>}
 {modal==='listing-detail'&&selected&&<div className="listing-detail"><strong>₦{Number(selected.price).toLocaleString()}</strong><p>{selected.description}</p><p className="muted">{selected.name} · {selected.city||'Location not added'}</p>{selected.owner===data.user?.id?<button className="outline" onClick={()=>perform(async()=>{await act({action:'delete',id:selected.id});await refresh();setModal('')})}>Remove listing</button>:<button className="primary" onClick={()=>startMessage({id:selected.owner,name:selected.name})}>Message seller <MessageCircle size={17}/></button>}<p className="muted">Inspect before paying. Never share banking passwords or one-time codes.</p></div>}
 {modal==='comments'&&<><div className="comment-list">{comments.map(c=><div className="comment" key={c.id}><Avatar name={c.name}/><div><b>{c.name}</b><p>{c.body}</p></div></div>)}{!comments.length&&<p className="muted">Start the conversation.</p>}</div><form className="chat-input" onSubmit={e=>{e.preventDefault();if(needAccount())perform(async()=>{await act({action:'comment',target:selected?.id,body:comment});setComment('');setComments((await api('comments&post='+selected?.id)).comments)})}}><input placeholder="Write a comment…" value={comment} aria-label="Comment" maxLength={3000} onChange={e=>setComment(e.target.value)}/><button className="primary" disabled={busy||!comment.trim()} aria-label="Send comment"><Send size={17}/></button></form></>}
 {modal==='delete'&&<button className="danger-button" disabled={busy} onClick={()=>perform(async()=>{await act({action:'delete',id:selected?.id});await refresh();setModal('')})}>Delete post</button>}
 </DialogContent></Dialog></SidebarProvider>
}
function PageTitle({eyebrow,title,text,action}:{eyebrow:string,title:string,text:string,action?:React.ReactNode}){return <div className="page-heading section-title"><div><div className="eyebrow">{eyebrow}</div><h1>{title}</h1><p>{text}</p></div>{action}</div>}
</article></body></html>

{title}

Your people. Your conversations.

There’s a placefor you here.

There’s a place
for you here.