Index: chapterx-frontend/src/pages/story/ChapterReadPage.tsx =================================================================== --- chapterx-frontend/src/pages/story/ChapterReadPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/story/ChapterReadPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,165 @@ +import React, { useEffect, useState } from 'react' +import { useParams, useNavigate } from 'react-router-dom' +import { ArrowLeft, ArrowRight, BookOpen, Eye, ChevronLeft, ChevronRight } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { Button } from '../../components/ui/Button' + +export const ChapterReadPage: React.FC = () => { + const { storyId, chapterId } = useParams<{ storyId: string; chapterId: string }>() + const navigate = useNavigate() + const { stories, chapters, incrementViewCount } = useStoryStore() + const [scrollProgress, setScrollProgress] = useState(0) + const [viewed, setViewed] = useState(false) + + const story = stories.find(s => s.story_id === Number(storyId)) + const chapter = chapters.find(c => c.chapter_id === Number(chapterId)) + const storyChapters = chapters + .filter(c => c.story_id === Number(storyId) && c.is_published) + .sort((a, b) => a.chapter_number - b.chapter_number) + + const currentIndex = storyChapters.findIndex(c => c.chapter_id === Number(chapterId)) + const prevChapter = currentIndex > 0 ? storyChapters[currentIndex - 1] : null + const nextChapter = currentIndex < storyChapters.length - 1 ? storyChapters[currentIndex + 1] : null + + // Track scroll progress + useEffect(() => { + const handler = () => { + const el = document.documentElement + const progress = (el.scrollTop / (el.scrollHeight - el.clientHeight)) * 100 + setScrollProgress(Math.min(100, progress)) + // Increment view count when 30% read + if (progress > 30 && !viewed) { + setViewed(true) + if (chapter) incrementViewCount(chapter.chapter_id) + } + } + window.addEventListener('scroll', handler) + return () => window.removeEventListener('scroll', handler) + }, [chapter, viewed, incrementViewCount]) + + if (!story || !chapter) { + return ( +
+

Chapter not found

+ +
+ ) + } + + return ( +
+ {/* Progress bar */} +
+
+
+ + {/* Top nav */} +
+
+ + +
+

{chapter.title}

+

Chapter {chapter.chapter_number}

+
+ +
+ + {scrollProgress.toFixed(0)}% +
+
+
+ + {/* Content */} +
+ {/* Chapter header */} +
+

+ Chapter {chapter.chapter_number} +

+

+ {chapter.title} +

+
+ + + {chapter.word_count.toLocaleString()} words + + + + {chapter.view_count.toLocaleString()} reads + +
+
+
+ + {/* Chapter content */} +
+ {chapter.content.split('\n\n').map((para, i) => ( +

+ {para} +

+ ))} +
+ + {/* Chapter navigation */} +
+
+ {prevChapter ? ( + + ) : ( +
+ )} + + + + {nextChapter ? ( + + ) : ( +
+

End of story

+
+ )} +
+
+
+
+ ) +} Index: chapterx-frontend/src/pages/story/StoryDetailPage.tsx =================================================================== --- chapterx-frontend/src/pages/story/StoryDetailPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/pages/story/StoryDetailPage.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,282 @@ +import React, { useState } from 'react' +import { useParams, useNavigate } from 'react-router-dom' +import { ArrowLeft, BookOpen, Eye, Users, Calendar, Plus, BookmarkPlus } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { useAuthStore } from '../../store/authStore' +import { useUIStore } from '../../store/uiStore' +import { Button } from '../../components/ui/Button' +import { GenreBadge } from '../../components/ui/Badge' +import { Avatar } from '../../components/ui/Avatar' +import { ChapterList } from '../../components/story/ChapterList' +import { CommentSection } from '../../components/story/CommentSection' +import { LikeButton } from '../../components/story/LikeButton' +import { Modal } from '../../components/ui/Modal' +import { getGenreGradient } from '../../components/story/GenreBadge' +import { ReadingListItem } from '../../types' + +export const StoryDetailPage: React.FC = () => { + const { id } = useParams<{ id: string }>() + const navigate = useNavigate() + const { stories, chapters, collaborations, readingLists, addStoryToList, createReadingList } = useStoryStore() + const { currentUser } = useAuthStore() + const { addToast } = useUIStore() + const [listModalOpen, setListModalOpen] = useState(false) + const [newListName, setNewListName] = useState('') + + const story = stories.find(s => s.story_id === Number(id)) + if (!story) { + return ( +
+

Story not found

+ +
+ ) + } + + const storyChapters = chapters.filter(c => c.story_id === story.story_id) + const storyCollabs = collaborations.filter(c => c.story_id === story.story_id) + const gradient = getGenreGradient(story.genres[0]) + const myLists = currentUser ? readingLists.filter(l => l.user_id === currentUser.user_id) : [] + + const handleAddToList = (listId: number) => { + const list = readingLists.find(l => l.list_id === listId) + if (!list) return + if (list.stories.some(s => s.story_id === story.story_id)) { + addToast('Already in this list', 'info') + return + } + const item: ReadingListItem = { + item_id: Date.now(), + list_id: listId, + story_id: story.story_id, + story_title: story.title, + author_username: story.author_username, + added_at: new Date().toISOString(), + genres: story.genres, + } + addStoryToList(listId, item) + addToast(`Added to "${list.name}"!`) + setListModalOpen(false) + } + + const handleCreateList = () => { + if (!newListName.trim() || !currentUser) return + const newList = { + list_id: Date.now(), + user_id: currentUser.user_id, + username: currentUser.username, + name: newListName.trim(), + is_public: false, + created_at: new Date().toISOString(), + stories: [{ + item_id: Date.now() + 1, + list_id: Date.now(), + story_id: story.story_id, + story_title: story.title, + author_username: story.author_username, + added_at: new Date().toISOString(), + genres: story.genres, + }], + } + createReadingList(newList) + addToast(`Created "${newListName}" and added story!`) + setNewListName('') + setListModalOpen(false) + } + + const isOwner = currentUser?.user_id === story.user_id + + return ( +
+ {/* Back */} + + + {/* Hero */} +
+
+
+
+ {story.genres.map(g => )} + {story.mature_content && ( + + 18+ + + )} +
+

{story.title}

+

{story.short_description}

+ +
+
+ + {story.author_username} +
+
+ + {story.total_views.toLocaleString()} views +
+
+ + {story.total_chapters} chapters +
+
+ + {new Date(story.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} +
+
+
+
+ +
+ {/* Main content */} +
+ {/* Action bar */} +
+ + {currentUser && ( + + )} + {isOwner && ( + + )} +
+ + {/* Chapters */} +
+
+

Chapters

+ {isOwner && ( + + )} +
+ +
+ + {/* Comments */} +
+ +
+
+ + {/* Sidebar */} +
+ {/* Story info */} +
+

Story Info

+
+
+ Status + {story.status} +
+
+ Chapters + {story.total_chapters} +
+
+ Likes + {story.total_likes.toLocaleString()} +
+
+ Views + {story.total_views.toLocaleString()} +
+
+ Comments + {story.total_comments} +
+
+ Published + {new Date(story.created_at).toLocaleDateString()} +
+
+
+ + {/* Collaborators */} + {storyCollabs.length > 0 && ( +
+
+ +

Collaborators

+
+
+ {storyCollabs.map(c => ( +
+ +
+

@{c.username}

+

{c.role}

+
+
+ ))} +
+
+ )} +
+
+ + {/* Reading list modal */} + setListModalOpen(false)} title="Save to Reading List"> +
+ {myLists.length > 0 ? ( + <> +

Select a list:

+ {myLists.map(list => ( + + ))} +
+

Or create a new list:

+
+ setNewListName(e.target.value)} + placeholder="List name..." + className="flex-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:border-indigo-500" + /> + +
+
+ + ) : ( +
+

You don't have any reading lists yet. Create one:

+
+ setNewListName(e.target.value)} + placeholder="My Favorites..." + className="flex-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:border-indigo-500" + /> + +
+
+ )} +
+ +
+ ) +}