Index: chapterx-frontend/src/components/DevSwitcher.tsx =================================================================== --- chapterx-frontend/src/components/DevSwitcher.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/DevSwitcher.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,82 @@ +import React, { useState } from 'react' +import { Code2, X, User } from 'lucide-react' +import { useAuthStore } from '../store/authStore' +import { Avatar } from './ui/Avatar' +import { RoleBadge } from './ui/Badge' +import { useUIStore } from '../store/uiStore' + +const DEV_USERS = [ + { user_id: 0, username: 'Guest', name: 'Guest', role: 'guest' as const }, + { user_id: 1, username: 'admin_alex', name: 'Alex Admin', role: 'admin' as const }, + { user_id: 2, username: 'elena_writes', name: 'Elena Dimitrova', role: 'writer' as const }, + { user_id: 3, username: 'marco_author', name: 'Marco Rossi', role: 'writer' as const }, + { user_id: 4, username: 'sara_reader', name: 'Sara Petkovska', role: 'regular' as const }, + { user_id: 9, username: 'boris_writer', name: 'Boris Nikolov', role: 'writer' as const }, +] + +export const DevSwitcher: React.FC = () => { + const [open, setOpen] = useState(false) + const { currentUser, switchUser } = useAuthStore() + const { addToast } = useUIStore() + + const handleSwitch = (userId: number, name: string, role: string) => { + switchUser(userId) + addToast(`Switched to ${name} (${role})`) + setOpen(false) + } + + return ( +
+ {open && ( +
+
+
+ + Dev Switcher +
+ +
+
+ {DEV_USERS.map(u => ( + + ))} +
+
+

Development only

+
+
+ )} + + +
+ ) +} Index: chapterx-frontend/src/components/admin/ContentModerationTable.tsx =================================================================== --- chapterx-frontend/src/components/admin/ContentModerationTable.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/admin/ContentModerationTable.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,124 @@ +import React, { useState } from 'react' +import { Trash2, Eye, AlertTriangle } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { useNotificationStore } from '../../store/notificationStore' +import { useUIStore } from '../../store/uiStore' +import { Story } from '../../types' +import { StatusBadge, GenreBadge } from '../ui/Badge' +import { Button } from '../ui/Button' +import { Modal } from '../ui/Modal' +import { useNavigate } from 'react-router-dom' + +export const ContentModerationTable: React.FC = () => { + const { stories, deleteStory } = useStoryStore() + const { addNotification } = useNotificationStore() + const { addToast } = useUIStore() + const navigate = useNavigate() + const [confirmStory, setConfirmStory] = useState(null) + + const handleDelete = (story: Story) => { + deleteStory(story.story_id) + addNotification({ + user_id: story.user_id, + type: 'system', + title: 'Story Removed', + message: `Your story "${story.title}" has been removed by an administrator.`, + }) + addToast(`"${story.title}" removed from platform`, 'info') + setConfirmStory(null) + } + + const formatDate = (str: string) => + new Date(str).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + + return ( +
+
+ + + + + + + + + + + + + {stories.map(story => ( + + + + + + + + + ))} + +
StoryAuthorGenresStatusPublishedActions
+
+

{story.title}

+ {story.mature_content && ( + 18+ + )} +
+ 		@{story.author_username} +
+ {story.genres.slice(0, 2).map(g => )} +
+ 		{formatDate(story.created_at)} +
+ + +
+
+ {stories.length === 0 && ( +
No stories to moderate.
+ )} +
+ + {/* Confirm modal */} + setConfirmStory(null)} + title="Remove Story" + size="sm" + > + {confirmStory && ( +
+
+ +
+

"{confirmStory.title}"

+

+ This will permanently remove the story and notify the author. This action cannot be undone. +

+
+
+
+ + +
+
+ )} + +
+ ) +} Index: chapterx-frontend/src/components/admin/PlatformStats.tsx =================================================================== --- chapterx-frontend/src/components/admin/PlatformStats.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/admin/PlatformStats.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,37 @@ +import React from 'react' +import { Users, BookOpen, FileText, Heart, Eye, MessageCircle } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { useStoryStore } from '../../store/storyStore' + +export const PlatformStats: React.FC = () => { + const { allUsers } = useAuthStore() + const { stories, comments } = useStoryStore() + + const totalViews = stories.reduce((acc, s) => acc + s.total_views, 0) + const totalLikes = stories.reduce((acc, s) => acc + s.total_likes, 0) + const published = stories.filter(s => s.status === 'published').length + + const stats = [ + { icon: , label: 'Total Users', value: allUsers.length, color: 'bg-blue-500/20', change: '+12 this month' }, + { icon: , label: 'Total Stories', value: stories.length, color: 'bg-violet-500/20', change: `${published} published` }, + { icon: , label: 'Comments', value: comments.length, color: 'bg-emerald-500/20', change: 'Platform-wide' }, + { icon: , label: 'Total Likes', value: totalLikes.toLocaleString(), color: 'bg-rose-500/20', change: 'Across all stories' }, + { icon: , label: 'Total Views', value: totalViews.toLocaleString(), color: 'bg-amber-500/20', change: 'All time' }, + { icon: , label: 'Writers', value: allUsers.filter(u => u.role === 'writer').length, color: 'bg-cyan-500/20', change: 'Active creators' }, + ] + + return ( +
+ {stats.map(stat => ( +
+
+ {stat.icon} +
+

{stat.value}

+

{stat.label}

+

{stat.change}

+
+ ))} +
+ ) +} Index: chapterx-frontend/src/components/admin/UserTable.tsx =================================================================== --- chapterx-frontend/src/components/admin/UserTable.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/admin/UserTable.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,153 @@ +import React, { useState } from 'react' +import { Search, Shield, UserX, UserCheck } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { useNotificationStore } from '../../store/notificationStore' +import { useUIStore } from '../../store/uiStore' +import { User, UserRole } from '../../types' +import { Avatar } from '../ui/Avatar' +import { RoleBadge } from '../ui/Badge' +import { Button } from '../ui/Button' +import { Modal } from '../ui/Modal' + +export const UserTable: React.FC = () => { + const { allUsers, updateUserRole, currentUser } = useAuthStore() + const { addNotification } = useNotificationStore() + const { addToast } = useUIStore() + const [search, setSearch] = useState('') + const [confirmUser, setConfirmUser] = useState(null) + const [confirmAction, setConfirmAction] = useState<'promote' | 'demote' | null>(null) + + const filtered = allUsers.filter( + u => + u.username.toLowerCase().includes(search.toLowerCase()) || + u.email.toLowerCase().includes(search.toLowerCase()) || + u.name.toLowerCase().includes(search.toLowerCase()) + ) + + const handlePromote = (user: User) => { + const newRole: UserRole = user.role === 'regular' ? 'writer' : user.role === 'writer' ? 'admin' : 'admin' + updateUserRole(user.user_id, newRole) + addNotification({ + user_id: user.user_id, + type: 'system', + title: 'Role Updated', + message: `Your account has been promoted to ${newRole}.`, + }) + addToast(`${user.username} promoted to ${newRole}`) + setConfirmUser(null) + } + + const handleDemote = (user: User) => { + const newRole: UserRole = user.role === 'admin' ? 'writer' : 'regular' + updateUserRole(user.user_id, newRole) + addToast(`${user.username} role changed to ${newRole}`, 'info') + setConfirmUser(null) + } + + const formatDate = (str: string) => + new Date(str).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + + return ( +
+ {/* Search */} +
+ + setSearch(e.target.value)} + placeholder="Search users..." + className="w-full pl-9 pr-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500" + /> +
+ + {/* Table */} +
+ + + + + + + + + + + + {filtered.map(user => ( + + + + + + + + ))} + +
UserEmailRoleJoinedActions
+
+ +
+

{user.name} {user.surname}

+

@{user.username}

+
+
+ 		{user.email}{formatDate(user.created_at)} +
+ {user.user_id !== currentUser?.user_id && user.role !== 'admin' && ( + + )} + {user.user_id !== currentUser?.user_id && user.role !== 'regular' && ( + + )} +
+
+ {filtered.length === 0 && ( +
No users found.
+ )} +
+ + {/* Confirm modal */} + { setConfirmUser(null); setConfirmAction(null) }} + title={confirmAction === 'promote' ? 'Promote User' : 'Demote User'} + size="sm" + > + {confirmUser && ( +
+

+ {confirmAction === 'promote' + ? `Promote @${confirmUser.username} to the next role tier?` + : `Demote @${confirmUser.username} to a lower role?`} +

+
+ + +
+
+ )} + +
+ ) +} Index: chapterx-frontend/src/components/layout/Footer.tsx =================================================================== --- chapterx-frontend/src/components/layout/Footer.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/layout/Footer.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,48 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { Feather } from 'lucide-react' + +export const Footer: React.FC = () => ( +
+
+
+
+ +
+ +
+ ChapterX + +

+ A collaborative storytelling platform for writers and readers. +

+
+
+

Explore

+
    +
  • Browse Stories
    • +
  • Genres
    • +
  • Reading Lists
    • +
+
+
+

Create

+
    +
  • Start Writing
    • +
  • Writer Dashboard
    • +
+
+
+

Account

+
    +
  • Sign In
    • +
  • Register
    • +
+
+
+
+ © {new Date().getFullYear()} ChapterX. All rights reserved. +
+
+
+) Index: chapterx-frontend/src/components/layout/Navbar.tsx =================================================================== --- chapterx-frontend/src/components/layout/Navbar.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/layout/Navbar.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,223 @@ +import React, { useState, useRef, useEffect } from 'react' +import { Link, useNavigate, useLocation } from 'react-router-dom' +import { Bell, Menu, X, ChevronDown, BookOpen, PenLine, Shield, List } from 'lucide-react' +import logo from '../../assets/chapterX-removebg-preview.png' +import { useAuthStore } from '../../store/authStore' +import { useNotificationStore } from '../../store/notificationStore' +import { Avatar } from '../ui/Avatar' +import { RoleBadge } from '../ui/Badge' +import { Button } from '../ui/Button' +import { NotificationDropdown } from '../notifications/NotificationDropdown' + +export const Navbar: React.FC = () => { + const navigate = useNavigate() + const location = useLocation() + const { currentUser, logout } = useAuthStore() + const { notifications } = useNotificationStore() + const unread = notifications.filter(n => !n.is_read).length + + const [mobileOpen, setMobileOpen] = useState(false) + const [userMenuOpen, setUserMenuOpen] = useState(false) + const [notifOpen, setNotifOpen] = useState(false) + const userMenuRef = useRef(null) + const notifRef = useRef(null) + + useEffect(() => { + const handler = (e: MouseEvent) => { + if (userMenuRef.current && !userMenuRef.current.contains(e.target as Node)) setUserMenuOpen(false) + if (notifRef.current && !notifRef.current.contains(e.target as Node)) setNotifOpen(false) + } + document.addEventListener('mousedown', handler) + return () => document.removeEventListener('mousedown', handler) + }, []) + + const navLinks = [ + { to: '/browse', label: 'Browse', icon: }, + { to: '/genres', label: 'Genres', icon: null }, + { to: '/community-lists', label: 'Reading Lists', icon: }, + ] + + const isActive = (path: string) => location.pathname.startsWith(path) + + return ( + + ) +} Index: chapterx-frontend/src/components/notifications/NotificationDropdown.tsx =================================================================== --- chapterx-frontend/src/components/notifications/NotificationDropdown.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/notifications/NotificationDropdown.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,92 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom' +import { Heart, MessageCircle, Users, Bell, Settings, Check } from 'lucide-react' +import { useNotificationStore } from '../../store/notificationStore' +import { NotificationType } from '../../types' + +const typeIcon = (type: NotificationType) => { + const props = { size: 14 } + switch (type) { + case 'like': return + case 'comment': return + case 'collaboration': return + case 'follow': return + case 'system': return + default: return + } +} + +function timeAgo(dateStr: string): string { + const diff = Date.now() - new Date(dateStr).getTime() + const mins = Math.floor(diff / 60000) + if (mins < 1) return 'just now' + if (mins < 60) return `${mins}m ago` + const hrs = Math.floor(mins / 60) + if (hrs < 24) return `${hrs}h ago` + return `${Math.floor(hrs / 24)}d ago` +} + +interface Props { + onClose: () => void +} + +export const NotificationDropdown: React.FC = ({ onClose }) => { + const navigate = useNavigate() + const { notifications, markAllRead, markRead } = useNotificationStore() + const recent = notifications.slice(0, 5) + + return ( +
+
+ Notifications + +
+
+ {recent.length === 0 ? ( +
+ No notifications yet +
+ ) : ( + recent.map(n => ( +
{ + markRead(n.notification_id) + if (n.link) { navigate(n.link); onClose() } + }} + > +
+ {typeIcon(n.type)} +
+
+

{n.title}

+

{n.message}

+

{timeAgo(n.created_at)}

+
+ {!n.is_read && ( +
+ )} +
+ )) + )} +
+
+ +
+
+ ) +} Index: chapterx-frontend/src/components/story/ChapterList.tsx =================================================================== --- chapterx-frontend/src/components/story/ChapterList.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/story/ChapterList.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,85 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom' +import { Eye, BookOpen, Lock } from 'lucide-react' +import { Chapter } from '../../types' + +interface ChapterListProps { + chapters: Chapter[] + storyId: number + showEditLinks?: boolean + onEdit?: (chapterId: number) => void +} + +function formatDate(str: string) { + return new Date(str).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) +} + +export const ChapterList: React.FC = ({ chapters, storyId, showEditLinks, onEdit }) => { + const navigate = useNavigate() + const sorted = [...chapters].sort((a, b) => a.chapter_number - b.chapter_number) + + if (sorted.length === 0) { + return ( +
+ +

No chapters yet.

+
+ ) + } + + return ( +
+ {sorted.map(chapter => ( +
{ + if (chapter.is_published) navigate(`/story/${storyId}/chapter/${chapter.chapter_id}`) + }} + > + {/* Number */} +
+ {chapter.chapter_number} +
+ + {/* Info */} +
+
+

{chapter.title}

+ {!chapter.is_published && ( + + + Draft + + )} +
+
+ {chapter.word_count.toLocaleString()} words + {formatDate(chapter.created_at)} +
+
+ + {/* Views */} +
+ + {chapter.view_count.toLocaleString()} +
+ + {/* Edit button */} + {showEditLinks && onEdit && ( + + )} +
+ ))} +
+ ) +} Index: chapterx-frontend/src/components/story/CommentSection.tsx =================================================================== --- chapterx-frontend/src/components/story/CommentSection.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/story/CommentSection.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,148 @@ +import React, { useState } from 'react' +import { MessageCircle, Trash2, Send } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { useStoryStore } from '../../store/storyStore' +import { useNotificationStore } from '../../store/notificationStore' +import { useUIStore } from '../../store/uiStore' +import { Comment } from '../../types' +import { Avatar } from '../ui/Avatar' +import { Button } from '../ui/Button' + +interface CommentSectionProps { + storyId: number + authorUserId: number +} + +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 CommentSection: React.FC = ({ storyId, authorUserId }) => { + const { currentUser } = useAuthStore() + const { comments, addComment, deleteComment } = useStoryStore() + const { addNotification } = useNotificationStore() + const { addToast } = useUIStore() + const [text, setText] = useState('') + const [submitting, setSubmitting] = useState(false) + + const storyComments = comments + .filter(c => c.story_id === storyId) + .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) + + const handleSubmit = async () => { + if (!text.trim() || !currentUser) return + setSubmitting(true) + await new Promise(r => setTimeout(r, 300)) + const comment: Comment = { + comment_id: Date.now(), + story_id: storyId, + user_id: currentUser.user_id, + username: currentUser.username, + content: text.trim(), + created_at: new Date().toISOString(), + } + addComment(comment) + if (currentUser.user_id !== authorUserId) { + addNotification({ + user_id: authorUserId, + type: 'comment', + title: 'New Comment', + message: `${currentUser.username} commented: "${text.trim().slice(0, 60)}..."`, + link: `/story/${storyId}`, + }) + } + setText('') + setSubmitting(false) + addToast('Comment posted!') + } + + return ( +
+
+ +

Comments ({storyComments.length})

+
+ + {/* Input */} + {currentUser ? ( +
+ +
+