Index: chapterx-frontend/src/App.tsx =================================================================== --- chapterx-frontend/src/App.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/App.tsx (revision acf690c1403ecbecd948a46d950278f177f2d408) @@ -1,6 +1,7 @@ -import React, { Suspense, lazy, ReactNode } from 'react' +import React, { Suspense, lazy, ReactNode, useEffect } from 'react' import { Routes, Route, Navigate } from 'react-router-dom' import { useAuthStore } from './store/authStore' import { useUIStore } from './store/uiStore' +import { useStoryStore } from './store/storyStore' import { UserRole } from './types' import { Navbar } from './components/layout/Navbar' @@ -67,4 +68,12 @@ function App() { + const { fetchStories, fetchChapters, fetchReadingLists } = useStoryStore() + + useEffect(() => { + fetchStories() + fetchChapters() + fetchReadingLists() + }, []) + return (
Index: chapterx-frontend/src/components/writer/StoryCreationAIPanel.tsx =================================================================== --- chapterx-frontend/src/components/writer/StoryCreationAIPanel.tsx (revision acf690c1403ecbecd948a46d950278f177f2d408) +++ chapterx-frontend/src/components/writer/StoryCreationAIPanel.tsx (revision acf690c1403ecbecd948a46d950278f177f2d408) @@ -0,0 +1,123 @@ +import React, { useMemo, useImperativeHandle, forwardRef } from 'react' +import { Sparkles, Lightbulb } from 'lucide-react' + +interface StoryCreationAIPanelProps { + title: string + description: string + content: string + genres: string[] +} + +export interface StoryCreationAIPanelRef { + getSuggestions: () => Array<{ originalText: string; suggestedText: string }> +} + +interface Tip { + type: 'plot' | 'style' | 'character' | 'grammar' | 'pacing' + label: string + original: string + suggested: string +} + +const typeColors: Record = { + plot: 'bg-amber-500/20 text-amber-300 border-amber-500/30', + style: 'bg-violet-500/20 text-violet-300 border-violet-500/30', + character: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30', + grammar: 'bg-blue-500/20 text-blue-300 border-blue-500/30', + pacing: 'bg-pink-500/20 text-pink-300 border-pink-500/30', +} + +function buildTips(title: string, description: string, content: string, genres: string[]): Tip[] { + const tips: Tip[] = [] + const wordCount = content.trim().split(/\s+/).filter(Boolean).length + + if (!title.trim()) { + tips.push({ type: 'style', label: 'Title', original: '(no title)', suggested: 'Add a title that hints at the core conflict or world without giving it away.' }) + } else if (title.length < 5) { + tips.push({ type: 'style', label: 'Title', original: title, suggested: 'Consider a more evocative title — even 3–4 punchy words can create intrigue.' }) + } + + if (!description.trim()) { + tips.push({ type: 'plot', label: 'Description', original: '(no description)', suggested: 'Introduce the protagonist, hint at the conflict, and end with a hook that makes readers want more.' }) + } else if (description.length < 60) { + tips.push({ type: 'plot', label: 'Description', original: description, suggested: 'Expand your description — give readers a taste of the stakes and what your protagonist stands to lose.' }) + } + + if (!content.trim()) { + tips.push({ type: 'character', label: 'Opening', original: '(no content)', suggested: 'Start in the middle of action or a compelling character moment. Avoid opening with backstory dumps.' }) + } else if (wordCount < 50) { + tips.push({ type: 'pacing', label: 'Content length', original: `${wordCount} words`, suggested: 'Give readers more to engage with — the opening sets tone and world before the story begins.' }) + } else if (wordCount > 200) { + tips.push({ type: 'pacing', label: 'Pacing', original: content.slice(0, 80) + '...', suggested: 'Great start! Keep momentum — each paragraph should make the reader want to continue.' }) + } + + if (genres.length === 0) { + tips.push({ type: 'plot', label: 'Genres', original: '(none selected)', suggested: 'Select genres to help readers discover your story. Pick the ones that best match tone and setting.' }) + } + + if (genres.includes('Fantasy') || genres.includes('Sci-Fi')) { + tips.push({ type: 'character', label: 'World-building', original: content.slice(0, 60) || '(content)', suggested: 'Weave world-building into scenes naturally — show the world through your character\'s eyes, not info-dumps.' }) + } + + if (genres.includes('Romance')) { + tips.push({ type: 'character', label: 'Chemistry', original: description || '(description)', suggested: 'Establish your characters\' desires and flaws early so their connection feels earned.' }) + } + + if (genres.includes('Thriller') || genres.includes('Mystery')) { + tips.push({ type: 'plot', label: 'Tension', original: content.slice(0, 60) || '(opening)', suggested: 'Plant an unanswered question in your opening. Thriller/mystery readers stay for the unresolved "why".' }) + } + + if (genres.includes('Horror')) { + tips.push({ type: 'pacing', label: 'Atmosphere', original: content.slice(0, 60) || '(opening)', suggested: 'Build dread gradually — horror works best when the reader senses something is wrong before the characters do.' }) + } + + return tips.slice(0, 5) +} + +export const StoryCreationAIPanel = forwardRef( + ({ title, description, content, genres }, ref) => { + const tips = useMemo( + () => buildTips(title, description, content, genres), + [title, description, content, genres.join(',')] + ) + + useImperativeHandle(ref, () => ({ + getSuggestions: () => tips.map(t => ({ originalText: t.original, suggestedText: t.suggested })), + })) + + return ( +
+
+ +

AI Writing Tips

+ {tips.length} suggestions +
+ + {tips.length === 0 ? ( +
+ +

Looking great! No suggestions right now.

+
+ ) : ( +
+ {tips.map((tip, i) => ( +
+ +
+
+ + {tip.type} + + {tip.label} +
+

"{tip.original}"

+

{tip.suggested}

+
+
+ ))} +
+ )} +
+ ) + } +) 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 acf690c1403ecbecd948a46d950278f177f2d408) @@ -1,3 +1,3 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import { useNavigate } from 'react-router-dom' import { Plus, BookOpen, Lock, Globe, Trash2, X } from 'lucide-react' @@ -12,5 +12,9 @@ const navigate = useNavigate() const { currentUser } = useAuthStore() - const { readingLists, createReadingList, deleteReadingList, removeStoryFromList } = useStoryStore() + const { readingLists, fetchReadingLists, createReadingList, deleteReadingList, removeStoryFromList } = useStoryStore() + + useEffect(() => { + fetchReadingLists() + }, []) const { addToast } = useUIStore() const [createOpen, setCreateOpen] = useState(false) @@ -31,17 +35,22 @@ const myLists = readingLists.filter(l => l.user_id === currentUser.user_id) - const handleCreate = () => { + const handleCreate = async () => { 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!`) + try { + await 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!`) + } catch (err: any) { + addToast(err?.response?.data?.message || 'Failed to create list.', 'error') + return + } setNewListName('') setNewListDesc('') @@ -100,5 +109,5 @@