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" + /> +
+
+ +