Index: chapterx-frontend/src/pages/LandingPage.tsx =================================================================== --- chapterx-frontend/src/pages/LandingPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/LandingPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,181 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom' +import { Feather, Star, BookOpen, Users, Sparkles, ArrowRight, ChevronRight } from 'lucide-react' +import logo from '../assets/chapterX-removebg-preview.png' +import { useStoryStore } from '../store/storyStore' +import { useAuthStore } from '../store/authStore' +import { Button } from '../components/ui/Button' +import { StoryCard } from '../components/ui/StoryCard' +import { GenreBadge } from '../components/ui/Badge' + +const features = [ + { icon: , title: 'Read & Discover', desc: 'Explore thousands of stories across every genre. From fantasy epics to contemporary fiction.' }, + { icon: , title: 'Write & Publish', desc: 'Share your stories with a passionate community. Get feedback, likes, and readers from day one.' }, + { icon: , title: 'Collaborate', desc: 'Invite co-authors, editors, and beta readers. Build stories together with real-time collaboration.' }, + { icon: , title: 'AI Assistance', desc: 'Get intelligent writing suggestions for grammar, style, plot, and pacing to improve your craft.' }, +] + +const genres = ['Fantasy', 'Sci-Fi', 'Romance', 'Historical Fiction', 'Adventure', 'Thriller', 'Mystery', 'Horror'] + +export const LandingPage: React.FC = () => { + const navigate = useNavigate() + const { stories } = useStoryStore() + const { currentUser } = useAuthStore() + + const trending = stories.filter(s => s.status === 'published').slice(0, 4) + + return ( +
+ {/* Hero */} +
+
+
+
+ +
+
+ + The collaborative storytelling platform +
+ +
+ ChapterX +
+ +

+ Write Your Own Story. +
+ + Anyone Could Be Shakespeare. + +

+ +

+ ChapterX is where writers and readers connect. Publish your stories, collaborate with others, + and discover your next great read. +

+ +
+ {currentUser ? ( + <> + + {(currentUser.role === 'writer' || currentUser.role === 'admin') && ( + + )} + + ) : ( + <> + + + + )} +
+ +
+
+ + {/* Features */} +
+
+

+ Everything You Need +

+

+ A complete platform for creative writing and reading. +

+
+
+ {features.map(f => ( +
+
+ {f.icon} +
+

{f.title}

+

{f.desc}

+
+ ))} +
+
+ + {/* Genres */} +
+
+
+

Explore Genres

+ +
+
+ {genres.map(g => ( + + ))} +
+
+
+ + {/* Trending stories */} +
+
+
+

Trending Stories

+

Most popular right now

+
+ +
+
+ {trending.map(story => ( + + ))} +
+
+ + {/* CTA */} + {!currentUser && ( +
+
+
+

+ Ready to Begin Your Story? +

+

+ Join thousands of writers and readers on ChapterX today. +

+
+ + +
+
+
+
+ )} +
+ ) +} Index: chapterx-frontend/src/pages/NotificationsPage.tsx =================================================================== --- chapterx-frontend/src/pages/NotificationsPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/NotificationsPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,105 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom' +import { Bell, Heart, MessageCircle, Users, Settings, Check, ExternalLink } from 'lucide-react' +import { useNotificationStore } from '../store/notificationStore' +import { useAuthStore } from '../store/authStore' +import { Button } from '../components/ui/Button' +import { NotificationType } from '../types' + +const typeIcon = (type: NotificationType) => { + switch (type) { + case 'like': return + case 'comment': return + case 'collaboration': return + case 'system': return + default: return + } +} + +function formatDate(str: string) { + return new Date(str).toLocaleDateString('en-US', { + month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit', + }) +} + +export const NotificationsPage: React.FC = () => { + const navigate = useNavigate() + const { currentUser } = useAuthStore() + const { notifications, markAllRead, markRead } = useNotificationStore() + + if (!currentUser) { + return ( +
+ +

Sign in to view notifications

+ +
+ ) + } + + const userNotifications = notifications + const unread = userNotifications.filter(n => !n.is_read) + + return ( +
+
+
+

Notifications

+ {unread.length > 0 && ( +

{unread.length} unread

+ )} +
+ {unread.length > 0 && ( + + )} +
+ + {userNotifications.length === 0 ? ( +
+ +

No notifications yet

+

You'll see activity here when readers interact with your content.

+
+ ) : ( +
+ {userNotifications.map(n => ( +
{ + markRead(n.notification_id) + if (n.link) navigate(n.link) + }} + > +
+ {typeIcon(n.type)} +
+
+
+

{n.title}

+
+ {!n.is_read && ( +
+ )} + {n.link && ( + + )} +
+
+

{n.message}

+

{formatDate(n.created_at)}

+
+
+ ))} +
+ )} +
+ ) +} Index: chapterx-frontend/src/pages/admin/AdminContentPage.tsx =================================================================== --- chapterx-frontend/src/pages/admin/AdminContentPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/admin/AdminContentPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,32 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom' +import { ArrowLeft, BookOpen } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { ContentModerationTable } from '../../components/admin/ContentModerationTable' + +export const AdminContentPage: React.FC = () => { + const navigate = useNavigate() + const { stories } = useStoryStore() + + return ( +
+
+ +
+

Content Moderation

+

{stories.length} total stories

+
+
+ +
+
+ +

All Stories

+
+ +
+
+ ) +} Index: chapterx-frontend/src/pages/admin/AdminDashboard.tsx =================================================================== --- chapterx-frontend/src/pages/admin/AdminDashboard.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/admin/AdminDashboard.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,130 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom' +import { Shield, Users, BookOpen, AlertTriangle, Settings, ChevronRight } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { useStoryStore } from '../../store/storyStore' +import { useNotificationStore } from '../../store/notificationStore' +import { PlatformStats } from '../../components/admin/PlatformStats' +import { Button } from '../../components/ui/Button' +import { RoleBadge } from '../../components/ui/Badge' +import { Avatar } from '../../components/ui/Avatar' + +function timeAgo(str: string): string { + const diff = Date.now() - new Date(str).getTime() + const m = Math.floor(diff / 60000) + if (m < 1) return 'just now' + if (m < 60) return `${m}m ago` + const h = Math.floor(m / 60) + if (h < 24) return `${h}h ago` + return `${Math.floor(h / 24)}d ago` +} + +export const AdminDashboard: React.FC = () => { + const navigate = useNavigate() + const { allUsers } = useAuthStore() + const { stories } = useStoryStore() + const { notifications } = useNotificationStore() + + const recentUsers = [...allUsers].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).slice(0, 5) + const recentStories = [...stories].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).slice(0, 5) + + const adminLinks = [ + { to: '/admin/users', icon: , label: 'Manage Users', desc: `${allUsers.length} registered users`, color: 'bg-blue-500/10 border-blue-500/20' }, + { to: '/admin/content', icon: , label: 'Content Moderation', desc: `${stories.length} total stories`, color: 'bg-violet-500/10 border-violet-500/20' }, + { to: '/admin/genres', icon: , label: 'Manage Genres', desc: 'Add or remove genres', color: 'bg-amber-500/10 border-amber-500/20' }, + ] + + return ( +
+ {/* Header */} +
+
+ +
+
+

Admin Dashboard

+

Platform management and moderation

+
+
+ + {/* Platform stats */} +
+

Platform Overview

+ +
+ + {/* Quick links */} +
+ {adminLinks.map(link => ( + + ))} +
+ +
+ {/* Recent users */} +
+
+

Recent Users

+ +
+
+ {recentUsers.map(user => ( +
+ +
+

{user.name} {user.surname}

+

@{user.username}

+
+ +
+ ))} +
+
+ + {/* Recent stories */} +
+
+

Recent Stories

+ +
+
+ {recentStories.map(story => ( +
+
+

{story.title}

+

by @{story.author_username}

+
+ + {story.status} + +
+ ))} +
+
+
+
+ ) +} Index: chapterx-frontend/src/pages/admin/AdminGenresPage.tsx =================================================================== --- chapterx-frontend/src/pages/admin/AdminGenresPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/admin/AdminGenresPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,126 @@ +import React, { useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { ArrowLeft, Plus, Trash2, Tag } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { useUIStore } from '../../store/uiStore' +import { Button } from '../../components/ui/Button' +import { Modal } from '../../components/ui/Modal' +import { Genre } from '../../types' + +export const AdminGenresPage: React.FC = () => { + const navigate = useNavigate() + const { genres, addGenre, deleteGenre } = useStoryStore() + const { addToast } = useUIStore() + const [addOpen, setAddOpen] = useState(false) + const [newName, setNewName] = useState('') + const [deleteTarget, setDeleteTarget] = useState(null) + + const handleAdd = () => { + if (!newName.trim()) return + if (genres.some(g => g.name.toLowerCase() === newName.trim().toLowerCase())) { + addToast('Genre already exists', 'error') + return + } + addGenre({ genre_id: Date.now(), name: newName.trim(), story_count: 0 }) + addToast(`Genre "${newName.trim()}" added!`) + setNewName('') + setAddOpen(false) + } + + const handleDelete = (genre: Genre) => { + if (genre.story_count > 0) { + addToast('Cannot delete genre with associated stories', 'error') + return + } + deleteGenre(genre.genre_id) + addToast(`Genre "${genre.name}" deleted`, 'info') + setDeleteTarget(null) + } + + return ( +
+
+
+ +
+

Manage Genres

+

{genres.length} genres

+
+
+ +
+ +
+
+ +

All Genres

+
+
+ {genres.map(genre => ( +
+
+
+ {genre.name} +
+
+ {genre.story_count} stories + +
+
+ ))} +
+
+ + {/* Add modal */} + setAddOpen(false)} title="Add Genre" size="sm"> +
+
+ + setNewName(e.target.value)} + onKeyDown={e => e.key === 'Enter' && handleAdd()} + placeholder="e.g., Dystopia..." + className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500" + /> +
+
+ + +
+
+ + + {/* Delete confirm */} + setDeleteTarget(null)} title="Delete Genre" size="sm"> + {deleteTarget && ( +
+

+ Delete the genre "{deleteTarget.name}"? This action cannot be undone. +

+
+ + +
+
+ )} + +
+ ) +} Index: chapterx-frontend/src/pages/admin/AdminUsersPage.tsx =================================================================== --- chapterx-frontend/src/pages/admin/AdminUsersPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/admin/AdminUsersPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,33 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom' +import { ArrowLeft, Users } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { UserTable } from '../../components/admin/UserTable' +import { Button } from '../../components/ui/Button' + +export const AdminUsersPage: React.FC = () => { + const navigate = useNavigate() + const { allUsers } = useAuthStore() + + return ( +
+
+ +
+

User Management

+

{allUsers.length} registered users

+
+
+ +
+
+ +

All Users

+
+ +
+
+ ) +} Index: chapterx-frontend/src/pages/auth/LoginPage.tsx =================================================================== --- chapterx-frontend/src/pages/auth/LoginPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/auth/LoginPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,151 @@ +import React, { useState } from 'react' +import { useNavigate, Link } from 'react-router-dom' +import { Eye, EyeOff } from 'lucide-react' +import logo from '../../assets/chapterX-removebg-preview.png' +import { useAuthStore } from '../../store/authStore' +import { useUIStore } from '../../store/uiStore' +import { Button } from '../../components/ui/Button' +import { Avatar } from '../../components/ui/Avatar' +import { RoleBadge } from '../../components/ui/Badge' + +const quickUsers = [ + { username: 'admin_alex', name: 'Alex Admin', role: 'admin' as const }, + { username: 'elena_writes', name: 'Elena Dimitrova', role: 'writer' as const }, + { username: 'boris_writer', name: 'Boris Nikolov', role: 'writer' as const }, + { username: 'sara_reader', name: 'Sara Petkovska', role: 'regular' as const }, +] + +export const LoginPage: React.FC = () => { + const navigate = useNavigate() + const { login, switchUser } = useAuthStore() + const { addToast } = useUIStore() + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [showPw, setShowPw] = useState(false) + const [loading, setLoading] = useState(false) + const [errors, setErrors] = useState<{ email?: string; password?: string }>({}) + + const validate = () => { + const e: typeof errors = {} + if (!email.trim()) e.email = 'Email or username is required' + if (!password.trim()) e.password = 'Password is required' + setErrors(e) + return Object.keys(e).length === 0 + } + + const handleSubmit = async (ev: React.FormEvent) => { + ev.preventDefault() + if (!validate()) return + setLoading(true) + try { + await login(email, password) + addToast('Welcome back!') + navigate('/') + } catch (err: any) { + addToast(err.message || 'Login failed', 'error') + } finally { + setLoading(false) + } + } + + const handleQuickLogin = (username: string) => { + const { allUsers } = useAuthStore.getState() + const user = allUsers.find(u => u.username === username) + if (user) { + switchUser(user.user_id) + addToast(`Signed in as ${user.name}`) + navigate('/') + } + } + + return ( +
+
+ {/* Logo */} +
+ + ChapterX + +

Welcome back

+

Sign in to your account

+
+ + {/* Quick login */} +
+

Quick demo login

+
+ {quickUsers.map(u => ( + + ))} +
+
+ +
+
+ or sign in with email +
+
+ + {/* Form */} +
+
+ + { setEmail(e.target.value); setErrors(p => ({ ...p, email: '' })) }} + placeholder="you@example.com" + className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors ${ + errors.email ? 'border-rose-500' : 'border-slate-700' + }`} + /> + {errors.email &&

{errors.email}

} +
+
+ +
+ { setPassword(e.target.value); setErrors(p => ({ ...p, password: '' })) }} + placeholder="••••••••" + className={`w-full px-4 py-3 pr-12 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors ${ + errors.password ? 'border-rose-500' : 'border-slate-700' + }`} + /> + +
+ {errors.password &&

{errors.password}

} +
+ + +
+ +

+ Don't have an account?{' '} + + Create one + +

+
+
+ ) +} Index: chapterx-frontend/src/pages/auth/RegisterPage.tsx =================================================================== --- chapterx-frontend/src/pages/auth/RegisterPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/auth/RegisterPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,224 @@ +import React, { useState } from 'react' +import { useNavigate, Link } from 'react-router-dom' +import { BookOpen, PenLine, ArrowLeft, Eye, EyeOff } from 'lucide-react' +import logo from '../../assets/chapterX-removebg-preview.png' +import { useAuthStore } from '../../store/authStore' +import { useUIStore } from '../../store/uiStore' +import { Button } from '../../components/ui/Button' + +type Role = 'regular' | 'writer' +type Step = 1 | 2 + +export const RegisterPage: React.FC = () => { + const navigate = useNavigate() + const { register } = useAuthStore() + const { addToast } = useUIStore() + const [step, setStep] = useState(1) + const [role, setRole] = useState('regular') + const [loading, setLoading] = useState(false) + const [showPw, setShowPw] = useState(false) + const [form, setForm] = useState({ + username: '', + email: '', + name: '', + surname: '', + password: '', + confirmPassword: '', + }) + const [errors, setErrors] = useState>({}) + + const validate = () => { + const e: Record = {} + if (!form.username.trim()) e.username = 'Username is required' + if (form.username.length < 3) e.username = 'Username must be at least 3 characters' + if (!form.email.includes('@')) e.email = 'Enter a valid email address' + if (!form.name.trim()) e.name = 'First name is required' + if (!form.surname.trim()) e.surname = 'Last name is required' + if (form.password.length < 6) e.password = 'Password must be at least 6 characters' + if (form.password !== form.confirmPassword) e.confirmPassword = 'Passwords do not match' + setErrors(e) + return Object.keys(e).length === 0 + } + + const handleSubmit = async (ev: React.FormEvent) => { + ev.preventDefault() + if (!validate()) return + setLoading(true) + try { + await register( + { username: form.username, email: form.email, name: form.name, surname: form.surname, password: form.password }, + role + ) + addToast('Account created! Welcome to ChapterX.') + navigate('/') + } catch (err: any) { + addToast(err.message || 'Registration failed', 'error') + } finally { + setLoading(false) + } + } + + const setField = (field: string, value: string) => { + setForm(p => ({ ...p, [field]: value })) + setErrors(p => ({ ...p, [field]: '' })) + } + + return ( +
+
+
+ + ChapterX + +

Create your account

+

Step {step} of 2

+ + {/* Progress */} +
+
+
+
+
+ + {step === 1 ? ( +
+

I want to join as...

+
+ + +
+ +

+ Already have an account?{' '} + Sign in +

+
+ ) : ( +
+ + +
+
+ + setField('name', e.target.value)} + placeholder="Elena" + className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 ${errors.name ? 'border-rose-500' : 'border-slate-700'}`} + /> + {errors.name &&

{errors.name}

} +
+
+ + setField('surname', e.target.value)} + placeholder="Dimitrova" + className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 ${errors.surname ? 'border-rose-500' : 'border-slate-700'}`} + /> + {errors.surname &&

{errors.surname}

} +
+
+ + {[ + { field: 'username', label: 'Username', placeholder: 'elena_writes', type: 'text' }, + { field: 'email', label: 'Email', placeholder: 'you@example.com', type: 'email' }, + ].map(f => ( +
+ + setField(f.field, e.target.value)} + placeholder={f.placeholder} + className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 ${(errors as any)[f.field] ? 'border-rose-500' : 'border-slate-700'}`} + /> + {(errors as any)[f.field] &&

{(errors as any)[f.field]}

} +
+ ))} + +
+ +
+ setField('password', e.target.value)} + placeholder="Min. 6 characters" + className={`w-full px-4 py-3 pr-12 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 ${errors.password ? 'border-rose-500' : 'border-slate-700'}`} + /> + +
+ {errors.password &&

{errors.password}

} +
+ +
+ + setField('confirmPassword', e.target.value)} + placeholder="••••••••" + className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 ${errors.confirmPassword ? 'border-rose-500' : 'border-slate-700'}`} + /> + {errors.confirmPassword &&

{errors.confirmPassword}

} +
+ + +
+ )} +
+
+ ) +} Index: chapterx-frontend/src/pages/browse/BrowsePage.tsx =================================================================== --- chapterx-frontend/src/pages/browse/BrowsePage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/browse/BrowsePage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,166 @@ +import React, { useState, useMemo } from 'react' +import { Search, SlidersHorizontal, X } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { useAuthStore } from '../../store/authStore' +import { StoryGrid } from '../../components/story/StoryGrid' +import { GenreBadge } from '../../components/ui/Badge' + +const sortOptions = [ + { value: 'popular', label: 'Most Popular' }, + { value: 'recent', label: 'Most Recent' }, + { value: 'views', label: 'Most Viewed' }, + { value: 'comments', label: 'Most Discussed' }, +] + +const allGenres = ['Fantasy', 'Sci-Fi', 'Romance', 'Historical Fiction', 'Adventure', 'Thriller', 'Mystery', 'Horror', 'Contemporary', 'Poetry'] + +export const BrowsePage: React.FC = () => { + const { stories } = useStoryStore() + const { currentUser, showMatureContent, setShowMatureContent } = useAuthStore() + const [search, setSearch] = useState('') + const [selectedGenres, setSelectedGenres] = useState([]) + const [sort, setSort] = useState('popular') + const [showFilters, setShowFilters] = useState(false) + + const filtered = useMemo(() => { + let list = stories.filter(s => s.status === 'published') + + if (!showMatureContent && !currentUser) { + list = list.filter(s => !s.mature_content) + } + + if (search.trim()) { + const q = search.toLowerCase() + list = list.filter(s => + s.title.toLowerCase().includes(q) || + s.short_description.toLowerCase().includes(q) || + s.author_username.toLowerCase().includes(q) + ) + } + + if (selectedGenres.length > 0) { + list = list.filter(s => selectedGenres.some(g => s.genres.includes(g))) + } + + switch (sort) { + case 'popular': return [...list].sort((a, b) => b.total_likes - a.total_likes) + case 'recent': return [...list].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) + case 'views': return [...list].sort((a, b) => b.total_views - a.total_views) + case 'comments': return [...list].sort((a, b) => b.total_comments - a.total_comments) + default: return list + } + }, [stories, search, selectedGenres, sort, showMatureContent, currentUser]) + + const toggleGenre = (g: string) => + setSelectedGenres(prev => prev.includes(g) ? prev.filter(x => x !== g) : [...prev, g]) + + return ( +
+ {/* Header */} +
+

Browse Stories

+

Discover your next favorite read

+
+ + {/* Search + controls */} +
+
+ + setSearch(e.target.value)} + placeholder="Search titles, authors, descriptions..." + className="w-full pl-10 pr-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500" + /> + {search && ( + + )} +
+ + +
+ + {/* Filters panel */} + {showFilters && ( +
+
+

Filter by Genre

+ {selectedGenres.length > 0 && ( + + )} +
+
+ {allGenres.map(g => ( + + ))} +
+ {currentUser && ( +
+
+ )} + + {/* Result count */} +
+

{filtered.length} stories found

+ {selectedGenres.length > 0 && ( +
+ Active filters: + {selectedGenres.map(g => ( + + ))} +
+ )} +
+ + +
+ ) +} Index: chapterx-frontend/src/pages/browse/GenrePage.tsx =================================================================== --- chapterx-frontend/src/pages/browse/GenrePage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/browse/GenrePage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,79 @@ +import React from 'react' +import { useParams, useNavigate } from 'react-router-dom' +import { ArrowLeft } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { StoryGrid } from '../../components/story/StoryGrid' +import { getGenreGradient } from '../../components/story/GenreBadge' + +function toTitleCase(s: string) { + return s.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()) +} + +export const GenrePage: React.FC = () => { + const { genre } = useParams<{ genre: string }>() + const navigate = useNavigate() + const { stories } = useStoryStore() + + const genreName = toTitleCase(genre || '') + const gradient = getGenreGradient(genreName) + const filtered = stories.filter( + s => s.status === 'published' && s.genres.some(g => g.toLowerCase() === genreName.toLowerCase()) + ) + + return ( +
+ {/* Hero */} +
+
+ +

{genreName}

+

{filtered.length} stories

+
+
+
+ + +
+ ) +} + +export const GenresListPage: React.FC = () => { + const navigate = useNavigate() + const { genres } = useStoryStore() + + return ( +
+
+

Explore Genres

+

Find stories by your favorite genre

+
+
+ {genres.map(genre => { + const gradient = getGenreGradient(genre.name) + return ( + + ) + })} +
+
+ ) +} Index: chapterx-frontend/src/pages/profile/ProfilePage.tsx =================================================================== --- chapterx-frontend/src/pages/profile/ProfilePage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/profile/ProfilePage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,163 @@ +import React, { useState } from 'react' +import { useParams, useNavigate } from 'react-router-dom' +import { BookOpen, Heart, Users, Calendar, MessageCircle, Eye } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { useStoryStore } from '../../store/storyStore' +import { Avatar } from '../../components/ui/Avatar' +import { RoleBadge, StatusBadge } from '../../components/ui/Badge' +import { StoryCard } from '../../components/ui/StoryCard' +import { GenreBadge } from '../../components/ui/Badge' + +type Tab = 'stories' | 'about' + +export const ProfilePage: React.FC = () => { + const { username } = useParams<{ username: string }>() + const navigate = useNavigate() + const { allUsers, currentUser } = useAuthStore() + const { stories, comments } = useStoryStore() + const [tab, setTab] = useState('stories') + + const user = allUsers.find(u => u.username === username) + + if (!user) { + return ( +
+

User not found

+
+ ) + } + + const userStories = stories.filter(s => s.user_id === user.user_id && s.status === 'published') + const totalLikes = userStories.reduce((acc, s) => acc + s.total_likes, 0) + const totalViews = userStories.reduce((acc, s) => acc + s.total_views, 0) + const userComments = comments.filter(c => c.user_id === user.user_id) + const allGenres = [...new Set(userStories.flatMap(s => s.genres))] + + return ( +
+ {/* Profile header */} +
+ {/* Cover */} +
+
+
+
+
+
+ + {/* Avatar + info */} +
+ + {currentUser?.user_id === user.user_id && ( + + )} +
+
+ + {/* User info */} +
+
+

+ {user.name} {user.surname} +

+ +
+

@{user.username}

+ {user.bio &&

{user.bio}

} +
+ + + Joined {new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} + + + + {user.follower_count} followers · {user.following_count} following + +
+
+ + {/* Stats */} +
+ {[ + { icon: , value: userStories.length, label: 'Stories' }, + { icon: , value: totalLikes.toLocaleString(), label: 'Likes' }, + { icon: , value: totalViews.toLocaleString(), label: 'Views' }, + { icon: , value: userComments.length, label: 'Comments' }, + ].map(s => ( +
+
{s.icon}
+

{s.value}

+

{s.label}

+
+ ))} +
+ + {/* Tabs */} +
+ {(['stories', 'about'] as Tab[]).map(t => ( + + ))} +
+ + {/* Tab content */} + {tab === 'stories' ? ( +
+ {userStories.length === 0 ? ( +
+ +

No published stories yet.

+
+ ) : ( +
+ {userStories.map(story => ( + + ))} +
+ )} +
+ ) : ( +
+
+

About

+

{user.bio || 'No bio provided.'}

+
+ {allGenres.length > 0 && ( +
+

Writes In

+
+ {allGenres.map(g => )} +
+
+ )} +
+

Stats

+
+
+ Role + +
+
+ Member since + {new Date(user.created_at).toLocaleDateString()} +
+
+ Published stories + {userStories.length} +
+
+
+
+ )} +
+ ) +} Index: chapterx-frontend/src/pages/reading-list/CommunityListsPage.tsx =================================================================== --- chapterx-frontend/src/pages/reading-list/CommunityListsPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/reading-list/CommunityListsPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,134 @@ +import React, { useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { Globe, BookOpen, User } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { ReadingList } from '../../types' +import { Modal } from '../../components/ui/Modal' +import { GenreBadge } from '../../components/ui/Badge' +import { Avatar } from '../../components/ui/Avatar' + +export const CommunityListsPage: React.FC = () => { + const navigate = useNavigate() + const { readingLists } = useStoryStore() + const [selectedList, setSelectedList] = useState(null) + + const publicLists = readingLists.filter(l => l.is_public) + + return ( +
+ {/* Header */} +
+
+ +

Community Reading Lists

+
+

Discover curated lists from the ChapterX community

+
+ + {publicLists.length === 0 ? ( +
+ +

No public lists yet

+

Be the first to share your reading list!

+
+ ) : ( +
+ {publicLists.map(list => ( +
setSelectedList(list)} + > + {/* Cover preview */} +
+
+ {Array.from({ length: Math.min(3, list.stories.length) }).map((_, i) => ( +
0 ? '2' : '0'}`} style={{ transform: `rotate(${(i - 1) * 5}deg)` }} /> + ))} +
+
+ +
+
+

+ {list.name} +

+ + Public + +
+ +
+ + @{list.username} +
+ + {list.description && ( +

{list.description}

+ )} + +
+ + + {list.stories.length} stories + + +
+
+
+ ))} +
+ )} + + {/* List detail modal */} + {selectedList && ( + setSelectedList(null)} + title={selectedList.name} + size="lg" + > +
+
+ +
+

@{selectedList.username}

+

{selectedList.stories.length} stories

+
+
+ {selectedList.description && ( +

{selectedList.description}

+ )} + + {selectedList.stories.length === 0 ? ( +

This list is empty.

+ ) : ( +
+ {selectedList.stories.map(item => ( +
{ navigate(`/story/${item.story_id}`); setSelectedList(null) }} + > +
+

{item.story_title}

+

by {item.author_username}

+
+
+ {item.genres.slice(0, 2).map(g => )} +
+
+ ))} +
+ )} +
+ + )} +
+ ) +} Index: chapterx-frontend/src/pages/reading-list/ReadingListPage.tsx =================================================================== --- chapterx-frontend/src/pages/reading-list/ReadingListPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/reading-list/ReadingListPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,200 @@ +import React, { useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { Plus, BookOpen, Lock, Globe, Trash2, X } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { useStoryStore } from '../../store/storyStore' +import { useUIStore } from '../../store/uiStore' +import { Button } from '../../components/ui/Button' +import { Modal } from '../../components/ui/Modal' +import { GenreBadge } from '../../components/ui/Badge' + +export const ReadingListPage: React.FC = () => { + const navigate = useNavigate() + const { currentUser } = useAuthStore() + const { readingLists, createReadingList, deleteReadingList, removeStoryFromList } = useStoryStore() + const { addToast } = useUIStore() + const [createOpen, setCreateOpen] = useState(false) + const [newListName, setNewListName] = useState('') + const [newListDesc, setNewListDesc] = useState('') + const [isPublic, setIsPublic] = useState(false) + + if (!currentUser) { + return ( +
+ +

Sign in to view your reading lists

+ +
+ ) + } + + const myLists = readingLists.filter(l => l.user_id === currentUser.user_id) + + const handleCreate = () => { + if (!newListName.trim()) return + createReadingList({ + list_id: Date.now(), + user_id: currentUser.user_id, + username: currentUser.username, + name: newListName.trim(), + description: newListDesc.trim() || undefined, + is_public: isPublic, + created_at: new Date().toISOString(), + stories: [], + }) + addToast(`"${newListName}" created!`) + setNewListName('') + setNewListDesc('') + setIsPublic(false) + setCreateOpen(false) + } + + return ( +
+ {/* Header */} +
+
+

My Reading Lists

+

{myLists.length} list{myLists.length !== 1 ? 's' : ''}

+
+ +
+ + {myLists.length === 0 ? ( +
+ +

No reading lists yet

+

Create your first list to save stories you love.

+ +
+ ) : ( +
+ {myLists.map(list => ( +
+ {/* Header */} +
+
+
+
+

{list.name}

+ {list.is_public ? ( + + Public + + ) : ( + + Private + + )} +
+ {list.description && ( +

{list.description}

+ )} +

{list.stories.length} stories

+
+ +
+
+ + {/* Stories */} +
+ {list.stories.length === 0 ? ( +

No stories yet.

+ ) : ( +
+ {list.stories.slice(0, 4).map(item => ( +
+
+ +
+ by {item.author_username} + {item.genres.slice(0, 1).map(g => )} +
+
+ +
+ ))} + {list.stories.length > 4 && ( +

+ +{list.stories.length - 4} more stories +

+ )} +
+ )} + +
+
+ ))} +
+ )} + + {/* Create modal */} + setCreateOpen(false)} title="Create Reading List"> +
+
+ + setNewListName(e.target.value)} + placeholder="My Fantasy Favorites..." + className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500" + /> +
+
+ +