Index: chapterx-frontend/src/components/writer/AISuggestionPanel.tsx =================================================================== --- chapterx-frontend/src/components/writer/AISuggestionPanel.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/writer/AISuggestionPanel.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,182 @@ +import React, { useState, useEffect } from 'react' +import { Sparkles, Check, X, Clock, ChevronDown, ChevronUp } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { useUIStore } from '../../store/uiStore' +import { AISuggestion, SuggestionType } from '../../types' +import { Button } from '../ui/Button' + +interface AISuggestionPanelProps { + chapterId: number + storyId?: number +} + +const typeColors: Record = { + grammar: 'bg-blue-500/20 text-blue-300 border-blue-500/30', + style: 'bg-violet-500/20 text-violet-300 border-violet-500/30', + plot: 'bg-amber-500/20 text-amber-300 border-amber-500/30', + character: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30', + pacing: 'bg-pink-500/20 text-pink-300 border-pink-500/30', +} + +const SuggestionCard: React.FC<{ + suggestion: AISuggestion + onAccept: () => void + onReject: () => void +}> = ({ suggestion, onAccept, onReject }) => { + const [expanded, setExpanded] = useState(false) + + return ( +
+
+
+ + {suggestion.suggestion_type} + + {suggestion.accepted === true && ( + + Accepted + + )} + {suggestion.accepted === false && ( + + Rejected + + )} + {suggestion.accepted === null && ( + + Pending + + )} +
+ +
+ +
+
+

Original:

+

+ "{suggestion.original_text}" +

+
+
+

Suggested:

+

+ "{suggestion.suggested_text}" +

+
+ + {expanded && ( +
+

Explanation:

+

{suggestion.explanation}

+ {suggestion.applied_at && ( +

+ Applied: {new Date(suggestion.applied_at).toLocaleString()} +

+ )} +
+ )} + + {suggestion.accepted === null && ( +
+ + +
+ )} +
+
+ ) +} + +export const AISuggestionPanel: React.FC = ({ chapterId, storyId }) => { + const { aiSuggestions, acceptSuggestion, rejectSuggestion, fetchSuggestions } = useStoryStore() + const { addToast } = useUIStore() + const [tab, setTab] = useState<'pending' | 'accepted' | 'rejected'>('pending') + const [loading, setLoading] = useState(false) + + useEffect(() => { + setLoading(true) + fetchSuggestions().finally(() => setLoading(false)) + }, [chapterId]) + + // Filter by storyId if available (backend), else fall back to chapterId (mock) + const chapterSuggestions = aiSuggestions.filter(s => + storyId ? (s as any).story_id === storyId : s.chapter_id === chapterId + ) + const pending = chapterSuggestions.filter(s => s.accepted === null) + const accepted = chapterSuggestions.filter(s => s.accepted === true) + const rejected = chapterSuggestions.filter(s => s.accepted === false) + + const currentList = tab === 'pending' ? pending : tab === 'accepted' ? accepted : rejected + + return ( +
+
+ +

AI Writing Suggestions

+ {chapterSuggestions.length} total +
+ + {/* Tabs */} +
+ {([ + { key: 'pending', label: 'Pending', count: pending.length }, + { key: 'accepted', label: 'Accepted', count: accepted.length }, + { key: 'rejected', label: 'Rejected', count: rejected.length }, + ] as const).map(t => ( + + ))} +
+ + {/* Suggestions */} +
+ {loading ? ( +
+ + Loading suggestions... +
+ ) : currentList.length === 0 ? ( +
+ + No {tab} suggestions +
+ ) : ( + currentList.map(s => ( + { await acceptSuggestion(s.suggestion_id); addToast('Suggestion accepted!') }} + onReject={async () => { await rejectSuggestion(s.suggestion_id); addToast('Suggestion rejected', 'info') }} + /> + )) + )} +
+
+ ) +} Index: chapterx-frontend/src/components/writer/CollaboratorManager.tsx =================================================================== --- chapterx-frontend/src/components/writer/CollaboratorManager.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/writer/CollaboratorManager.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,190 @@ +import React, { useState } from 'react' +import { Users, Trash2, UserPlus, Shield } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { useAuthStore } from '../../store/authStore' +import { useNotificationStore } from '../../store/notificationStore' +import { useUIStore } from '../../store/uiStore' +import { Collaboration, CollaboratorRole, PermissionLevel } from '../../types' +import { Button } from '../ui/Button' +import { Avatar } from '../ui/Avatar' +import { Modal } from '../ui/Modal' + +interface CollaboratorManagerProps { + storyId: number + storyTitle: string + ownerId: number +} + +const roles: CollaboratorRole[] = ['co-author', 'editor', 'proofreader', 'beta-reader'] + +const permissionLabels: Record = { + 1: 'View Only', + 2: 'Comment', + 3: 'Edit Chapters', + 4: 'Manage Story', + 5: 'Full Access', +} + +export const CollaboratorManager: React.FC = ({ + storyId, + storyTitle, + ownerId, +}) => { + const { collaborations, addCollaboration, removeCollaboration, updateCollaborationPermission } = useStoryStore() + const { allUsers } = useAuthStore() + const { addNotification } = useNotificationStore() + const { addToast } = useUIStore() + + const [inviteOpen, setInviteOpen] = useState(false) + const [selectedUser, setSelectedUser] = useState('') + const [selectedRole, setSelectedRole] = useState('editor') + const [selectedLevel, setSelectedLevel] = useState(3) + + const storyCollabs = collaborations.filter(c => c.story_id === storyId) + const collabUserIds = new Set(storyCollabs.map(c => c.user_id)) + const availableUsers = allUsers.filter(u => u.user_id !== ownerId && !collabUserIds.has(u.user_id)) + + const handleInvite = () => { + const user = availableUsers.find(u => u.username === selectedUser) + if (!user) { addToast('User not found', 'error'); return } + + const newCollab: Collaboration = { + collab_id: Date.now(), + story_id: storyId, + story_title: storyTitle, + user_id: user.user_id, + username: user.username, + name: user.name, + role: selectedRole, + permission_level: selectedLevel, + joined_at: new Date().toISOString(), + } + addCollaboration(newCollab) + addNotification({ + user_id: user.user_id, + type: 'collaboration', + title: 'Collaboration Invite', + message: `You've been invited to collaborate on "${storyTitle}" as ${selectedRole}.`, + link: `/story/${storyId}`, + }) + addToast(`${user.username} added as collaborator!`) + setInviteOpen(false) + setSelectedUser('') + } + + const handleRemove = (collab: Collaboration) => { + removeCollaboration(collab.user_id, storyId) + addToast(`${collab.username} removed from collaborators`, 'info') + } + + return ( +
+
+
+ +

Collaborators

+ ({storyCollabs.length}) +
+ +
+ + {storyCollabs.length === 0 ? ( +
+ + No collaborators yet +
+ ) : ( +
+ {storyCollabs.map(collab => ( +
+ +
+

@{collab.username}

+
+ {collab.role} + · + + Level {collab.permission_level}: {permissionLabels[collab.permission_level]} +
+
+
+ + +
+
+ ))} +
+ )} + + {/* Invite Modal */} + setInviteOpen(false)} title="Invite Collaborator"> +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ ) +} Index: chapterx-frontend/src/components/writer/StoryAnalytics.tsx =================================================================== --- chapterx-frontend/src/components/writer/StoryAnalytics.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/writer/StoryAnalytics.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,95 @@ +import React from 'react' +import { + LineChart, + Line, + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, +} from 'recharts' +import { Eye, Heart, MessageCircle, TrendingUp, Clock, BarChart2 } from 'lucide-react' +import { mockAnalytics } from '../../data/mockData' + +const StatCard: React.FC<{ icon: React.ReactNode; label: string; value: string | number; color: string }> = ({ + icon, label, value, color, +}) => ( +
+
+ {icon} +
+

{value.toLocaleString()}

+

{label}

+
+) + +const CustomTooltip = ({ active, payload, label }: any) => { + if (active && payload && payload.length) { + return ( +
+

{label}

+ {payload.map((p: any) => ( +

+ {p.name}: {p.value.toLocaleString()} +

+ ))} +
+ ) + } + return null +} + +export const StoryAnalytics: React.FC = () => { + const analytics = mockAnalytics + const viewsData = analytics.views_over_time.filter((_, i) => i % 5 === 0) + const likesData = analytics.likes_over_time.filter((_, i) => i % 5 === 0) + + return ( +
+ {/* Stat cards */} +
+ } label="Total Views" value={analytics.total_views} color="bg-blue-500/20" /> + } label="Total Likes" value={analytics.total_likes} color="bg-rose-500/20" /> + } label="Comments" value={analytics.total_comments} color="bg-violet-500/20" /> + } label="Avg Read (min)" value={analytics.avg_read_time} color="bg-amber-500/20" /> + } label="Completion %" value={`${analytics.completion_rate}%`} color="bg-emerald-500/20" /> +
+ + {/* Views chart */} +
+
+ +

Views Over Time

+
+ + + + + + } /> + + + +
+ + {/* Likes chart */} +
+
+ +

Likes Over Time

+
+ + + + + + } /> + + + +
+
+ ) +}