Mobile-first UI overhaul for Souq, Wallet, Forum pages
- Souq: bottom sheets, emoji category chips, skeleton loading, toast notifications - Wallet: gradient balance card with GBP preview, status badges, clean history - Forum: back nav, skeleton loading, bottom sheet create, thread author avatars - All: pb-24 clearance, rounded-2xl, active: press states, no hover: classes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
FalahMobile
+167
-49
@@ -2,73 +2,162 @@
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useAuth } from '@/lib/AuthContext'
|
||||
import { Plus, ChevronRight } from 'lucide-react'
|
||||
import { Plus, ChevronRight, MessageCircle, X, ArrowLeft } from 'lucide-react'
|
||||
|
||||
interface Category { id: string; name: string; description: string; icon: string }
|
||||
interface Thread { id: string; title: string; content: string; author: { name: string }; category: { name: string }; _count: { posts: number }; createdAt: string }
|
||||
interface Thread {
|
||||
id: string; title: string; content: string
|
||||
author: { name: string }; category: { name: string }
|
||||
_count: { posts: number }; createdAt: string
|
||||
}
|
||||
|
||||
export default function ForumPage() {
|
||||
const { token } = useAuth()
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [threads, setThreads] = useState<Thread[]>([])
|
||||
const [selectedCat, setSelectedCat] = useState<string | null>(null)
|
||||
const [selectedCat, setSelectedCat] = useState<Category | null>(null)
|
||||
const [view, setView] = useState<'categories' | 'threads'>('categories')
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [toast, setToast] = useState('')
|
||||
|
||||
useEffect(() => { fetch('/api/forum/categories').then(r => r.json()).then(d => setCategories(d.categories || [])) }, [])
|
||||
useEffect(() => {
|
||||
fetch('/api/forum/categories')
|
||||
.then(r => r.json())
|
||||
.then(d => setCategories(d.categories || []))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
const loadThreads = async (catId?: string) => {
|
||||
const params = catId ? `?categoryId=${catId}` : ''
|
||||
const res = await fetch(`/api/forum/threads${params}`)
|
||||
const loadThreads = async (catId: string) => {
|
||||
setLoading(true)
|
||||
const res = await fetch(`/api/forum/threads?categoryId=${catId}`)
|
||||
const data = await res.json()
|
||||
setThreads(data.threads || [])
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 3000) }
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-4 sm:p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-[#D4AF37]">Forum</h1>
|
||||
<div className="min-h-dvh bg-[#0a0a0f] pb-24">
|
||||
|
||||
{/* Header */}
|
||||
<div className="px-5 pt-6 pb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{view === 'threads' && (
|
||||
<button onClick={() => { setView('categories'); setSelectedCat(null) }} className="w-9 h-9 flex items-center justify-center rounded-xl bg-gray-800/60 active:opacity-60">
|
||||
<ArrowLeft size={18} className="text-gray-400" />
|
||||
</button>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white">{view === 'threads' && selectedCat ? selectedCat.name : 'Forum'}</h1>
|
||||
<p className="text-[11px] text-gray-600 mt-0.5">
|
||||
{view === 'categories' ? 'Community discussions' : `${threads.length} threads`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{token && (
|
||||
<button onClick={() => setShowCreate(true)}
|
||||
className="flex items-center gap-1 bg-[#D4AF37] text-[#0a0a0f] px-3 py-2 rounded text-sm font-semibold hover:bg-[#C9A84C] transition"><Plus size={16} /> New Thread</button>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="flex items-center gap-1.5 bg-[#D4AF37] text-[#0a0a0f] px-4 py-2.5 rounded-xl font-bold text-sm active:scale-[0.96] transition-transform"
|
||||
>
|
||||
<Plus size={16} /> Post
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{view === 'categories' ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{categories.map(c => (
|
||||
<button key={c.id} onClick={() => { setSelectedCat(c.id); setView('threads'); loadThreads(c.id) }}
|
||||
className="bg-[#111118] border border-gray-800 rounded-lg p-4 text-left hover:border-gray-700 transition">
|
||||
|
||||
{/* Loading */}
|
||||
{loading && (
|
||||
<div className="px-5 space-y-3">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="h-20 rounded-2xl bg-gray-900/60 animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Categories view */}
|
||||
{!loading && view === 'categories' && (
|
||||
<div className="px-5 space-y-3">
|
||||
{categories.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="text-4xl mb-3">🕌</div>
|
||||
<p className="text-gray-500 text-sm">No categories yet</p>
|
||||
</div>
|
||||
) : categories.map(c => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => { setSelectedCat(c); setView('threads'); loadThreads(c.id) }}
|
||||
className="w-full text-left bg-[#111118] border border-gray-800/60 rounded-2xl p-4 active:scale-[0.99] transition-transform"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{c.icon}</span>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold">{c.name}</h3>
|
||||
<p className="text-xs text-gray-500">{c.description}</p>
|
||||
<span className="text-2xl w-10 h-10 flex items-center justify-center bg-gray-800/60 rounded-xl shrink-0">
|
||||
{c.icon || '💬'}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-white text-sm">{c.name}</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5 line-clamp-1">{c.description}</p>
|
||||
</div>
|
||||
<ChevronRight size={16} className="text-gray-600" />
|
||||
<ChevronRight size={16} className="text-gray-700 shrink-0" />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<button onClick={() => setView('categories')} className="text-sm text-[#D4AF37] hover:underline mb-2 inline-block">← Back to categories</button>
|
||||
{threads.map(t => (
|
||||
<div key={t.id} className="bg-[#111118] border border-gray-800 rounded-lg p-4 space-y-1">
|
||||
<h3 className="font-semibold">{t.title}</h3>
|
||||
<p className="text-sm text-gray-400 line-clamp-2">{t.content}</p>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500 pt-1">
|
||||
<span>{t.author.name}</span><span>{t.category.name}</span><span>{t._count.posts} replies</span><span>{new Date(t.createdAt).toLocaleDateString()}</span>
|
||||
)}
|
||||
|
||||
{/* Threads view */}
|
||||
{!loading && view === 'threads' && (
|
||||
<div className="px-5 space-y-3">
|
||||
{threads.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="text-4xl mb-3">💬</div>
|
||||
<p className="text-white font-semibold mb-1">No threads yet</p>
|
||||
<p className="text-gray-500 text-sm">Start the first discussion</p>
|
||||
</div>
|
||||
) : threads.map(t => (
|
||||
<div key={t.id} className="bg-[#111118] border border-gray-800/60 rounded-2xl p-4">
|
||||
<h3 className="font-semibold text-white text-sm leading-snug mb-1">{t.title}</h3>
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mb-3">{t.content}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="w-5 h-5 rounded-full bg-[#D4AF37]/15 flex items-center justify-center">
|
||||
<span className="text-[9px] text-[#D4AF37] font-bold">{t.author.name[0]}</span>
|
||||
</div>
|
||||
<span className="text-[11px] text-gray-600">{t.author.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-[11px] text-gray-700">
|
||||
<MessageCircle size={12} />
|
||||
{t._count.posts}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{showCreate && token && <CreateThreadModal token={token} categories={categories} onClose={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); if (selectedCat) loadThreads(selectedCat) }} />}
|
||||
|
||||
{/* Toast */}
|
||||
{toast && (
|
||||
<div className="fixed bottom-24 left-5 right-5 bg-[#1a1a26] border border-gray-700 rounded-2xl px-4 py-3 text-sm text-white text-center z-50 shadow-xl">
|
||||
{toast}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create thread bottom sheet */}
|
||||
{showCreate && token && (
|
||||
<CreateThreadSheet
|
||||
token={token}
|
||||
categories={categories}
|
||||
onClose={() => setShowCreate(false)}
|
||||
onCreated={() => { if (selectedCat) loadThreads(selectedCat.id); showToast('Thread posted!') }}
|
||||
showToast={showToast}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateThreadModal({ token, categories, onClose, onCreated }: { token: string; categories: Category[]; onClose: () => void; onCreated: () => void }) {
|
||||
function CreateThreadSheet({ token, categories, onClose, onCreated, showToast }: {
|
||||
token: string; categories: Category[]; onClose: () => void; onCreated: () => void; showToast: (m: string) => void
|
||||
}) {
|
||||
const [title, setTitle] = useState('')
|
||||
const [content, setContent] = useState('')
|
||||
const [categoryId, setCategoryId] = useState(categories[0]?.id || '')
|
||||
@@ -76,29 +165,58 @@ function CreateThreadModal({ token, categories, onClose, onCreated }: { token: s
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!categoryId) return
|
||||
setLoading(true)
|
||||
const res = await fetch('/api/forum/threads', { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ title, content, categoryId }) })
|
||||
try {
|
||||
const res = await fetch('/api/forum/threads', {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title, content, categoryId }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.ok) { onCreated(); onClose() }
|
||||
else showToast(data.error || 'Failed to post')
|
||||
} catch { showToast('Something went wrong') }
|
||||
setLoading(false)
|
||||
if (res.ok) { onCreated() } else { const d = await res.json(); alert(d.error) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
|
||||
<form onSubmit={handleSubmit} className="bg-[#111118] border border-gray-800 rounded-lg p-6 max-w-md w-full space-y-4">
|
||||
<h2 className="text-lg font-bold">New Thread</h2>
|
||||
<select value={categoryId} onChange={e => setCategoryId(e.target.value)}
|
||||
className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none">
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
<div className="fixed inset-0 z-50 flex flex-col justify-end" onClick={onClose}>
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="relative bg-[#0f0f18] border border-gray-800/60 rounded-t-3xl p-6 pb-10 space-y-4"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="w-10 h-1 bg-gray-700 rounded-full mx-auto absolute left-1/2 -translate-x-1/2 top-3" />
|
||||
<h2 className="text-lg font-bold text-white mt-2">New Thread</h2>
|
||||
<button type="button" onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-800 mt-2">
|
||||
<X size={15} className="text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={categoryId} onChange={e => setCategoryId(e.target.value)}
|
||||
className="w-full bg-[#0a0a0f] border border-gray-800 rounded-2xl px-4 py-4 text-sm text-white focus:border-[#D4AF37]/50 focus:outline-none"
|
||||
>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.icon} {c.name}</option>)}
|
||||
</select>
|
||||
<input type="text" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} required
|
||||
className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none" />
|
||||
<textarea placeholder="Content" value={content} onChange={e => setContent(e.target.value)} required rows={4}
|
||||
className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none" />
|
||||
<button type="submit" disabled={loading}
|
||||
className="w-full bg-[#D4AF37] text-[#0a0a0f] py-2 rounded font-semibold disabled:opacity-50 hover:bg-[#C9A84C] transition">
|
||||
{loading ? 'Posting...' : 'Create Thread'}
|
||||
|
||||
<input
|
||||
type="text" placeholder="Thread title" value={title} onChange={e => setTitle(e.target.value)} required
|
||||
className="w-full bg-[#0a0a0f] border border-gray-800 rounded-2xl px-4 py-4 text-sm text-white placeholder-gray-600 focus:border-[#D4AF37]/50 focus:outline-none"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Share your thoughts…" value={content} onChange={e => setContent(e.target.value)} required rows={4}
|
||||
className="w-full bg-[#0a0a0f] border border-gray-800 rounded-2xl px-4 py-3 text-sm text-white placeholder-gray-600 focus:border-[#D4AF37]/50 focus:outline-none resize-none"
|
||||
/>
|
||||
<button
|
||||
type="submit" disabled={loading}
|
||||
className="w-full bg-[#D4AF37] text-[#0a0a0f] py-4 rounded-2xl font-bold disabled:opacity-50 active:scale-[0.98] transition-transform"
|
||||
>
|
||||
{loading ? 'Posting…' : 'Post Thread'}
|
||||
</button>
|
||||
<button type="button" onClick={onClose} className="w-full text-gray-500 text-sm hover:text-white">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user