Story Collections Feature
This commit is contained in:
Stefan Hardegger
201
frontend/src/components/collections/AddToCollectionModal.tsx
Normal file
201
frontend/src/components/collections/AddToCollectionModal.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { collectionApi, searchApi } from '../../lib/api';
|
||||
import { Collection, Story } from '../../types/api';
|
||||
import Button from '../ui/Button';
|
||||
import { Input } from '../ui/Input';
|
||||
import LoadingSpinner from '../ui/LoadingSpinner';
|
||||
|
||||
interface AddToCollectionModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
collection: Collection;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export default function AddToCollectionModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
collection,
|
||||
onUpdate
|
||||
}: AddToCollectionModalProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [availableStories, setAvailableStories] = useState<Story[]>([]);
|
||||
const [selectedStoryIds, setSelectedStoryIds] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
// Get IDs of stories already in the collection
|
||||
const existingStoryIds = collection.collectionStories?.map(cs => cs.story.id) || [];
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadStories();
|
||||
}
|
||||
}, [isOpen, searchQuery]);
|
||||
|
||||
const loadStories = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const result = await searchApi.search({
|
||||
query: searchQuery || '*',
|
||||
page: 0,
|
||||
size: 50,
|
||||
});
|
||||
|
||||
// Filter out stories already in the collection
|
||||
const filteredStories = result.results.filter(
|
||||
story => !existingStoryIds.includes(story.id)
|
||||
);
|
||||
|
||||
setAvailableStories(filteredStories);
|
||||
} catch (error) {
|
||||
console.error('Failed to load stories:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleStorySelection = (storyId: string) => {
|
||||
setSelectedStoryIds(prev =>
|
||||
prev.includes(storyId)
|
||||
? prev.filter(id => id !== storyId)
|
||||
: [...prev, storyId]
|
||||
);
|
||||
};
|
||||
|
||||
const handleAddStories = async () => {
|
||||
if (selectedStoryIds.length === 0) return;
|
||||
|
||||
try {
|
||||
setAdding(true);
|
||||
await collectionApi.addStoriesToCollection(collection.id, selectedStoryIds);
|
||||
onUpdate();
|
||||
onClose();
|
||||
setSelectedStoryIds([]);
|
||||
} catch (error) {
|
||||
console.error('Failed to add stories to collection:', error);
|
||||
} finally {
|
||||
setAdding(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (!adding) {
|
||||
setSelectedStoryIds([]);
|
||||
setSearchQuery('');
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="theme-card max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b theme-border">
|
||||
<h2 className="text-xl font-semibold theme-header">
|
||||
Add Stories to "{collection.name}"
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
disabled={adding}
|
||||
className="text-gray-500 hover:text-gray-700 disabled:opacity-50"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="p-6 border-b theme-border">
|
||||
<Input
|
||||
type="search"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search stories to add..."
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Stories List */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<LoadingSpinner size="md" />
|
||||
</div>
|
||||
) : availableStories.length === 0 ? (
|
||||
<div className="text-center py-8 theme-text opacity-70">
|
||||
{searchQuery ? 'No stories found matching your search.' : 'All stories are already in this collection.'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{availableStories.map((story) => {
|
||||
const isSelected = selectedStoryIds.includes(story.id);
|
||||
return (
|
||||
<div
|
||||
key={story.id}
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-colors ${
|
||||
isSelected
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'theme-border hover:border-gray-400'
|
||||
}`}
|
||||
onClick={() => toggleStorySelection(story.id)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => toggleStorySelection(story.id)}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium theme-text truncate">
|
||||
{story.title}
|
||||
</h3>
|
||||
<p className="text-sm theme-text opacity-70 truncate">
|
||||
by {story.authorName}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-1 text-xs theme-text opacity-60">
|
||||
<span>{story.wordCount?.toLocaleString()} words</span>
|
||||
{story.rating && (
|
||||
<span className="flex items-center">
|
||||
★ {story.rating}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between p-6 border-t theme-border">
|
||||
<div className="text-sm theme-text opacity-70">
|
||||
{selectedStoryIds.length} stories selected
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleClose}
|
||||
disabled={adding}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleAddStories}
|
||||
disabled={selectedStoryIds.length === 0 || adding}
|
||||
>
|
||||
{adding ? <LoadingSpinner size="sm" /> : `Add ${selectedStoryIds.length} Stories`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
203
frontend/src/components/collections/CollectionCard.tsx
Normal file
203
frontend/src/components/collections/CollectionCard.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
'use client';
|
||||
|
||||
import { Collection } from '../../types/api';
|
||||
import { getImageUrl } from '../../lib/api';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface CollectionCardProps {
|
||||
collection: Collection;
|
||||
viewMode: 'grid' | 'list';
|
||||
onUpdate?: () => void;
|
||||
}
|
||||
|
||||
export default function CollectionCard({ collection, viewMode, onUpdate }: CollectionCardProps) {
|
||||
const formatReadingTime = (minutes: number): string => {
|
||||
if (minutes < 60) {
|
||||
return `${minutes}m`;
|
||||
}
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const remainingMinutes = minutes % 60;
|
||||
return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
|
||||
};
|
||||
|
||||
const renderRatingStars = (rating?: number) => {
|
||||
if (!rating) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<span
|
||||
key={star}
|
||||
className={`text-sm ${
|
||||
star <= rating ? 'text-yellow-400' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (viewMode === 'grid') {
|
||||
return (
|
||||
<Link href={`/collections/${collection.id}`}>
|
||||
<div className="theme-card p-4 hover:border-gray-400 transition-colors cursor-pointer">
|
||||
{/* Cover Image or Placeholder */}
|
||||
<div className="aspect-[3/4] mb-3 relative overflow-hidden rounded-lg bg-gray-100">
|
||||
{collection.coverImagePath ? (
|
||||
<img
|
||||
src={getImageUrl(collection.coverImagePath)}
|
||||
alt={`${collection.name} cover`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100">
|
||||
<div className="text-center p-4">
|
||||
<div className="text-2xl font-bold theme-text mb-1">
|
||||
{collection.storyCount}
|
||||
</div>
|
||||
<div className="text-xs theme-text opacity-60">
|
||||
{collection.storyCount === 1 ? 'story' : 'stories'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{collection.isArchived && (
|
||||
<div className="absolute top-2 right-2 bg-yellow-500 text-white px-2 py-1 rounded text-xs">
|
||||
Archived
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Collection Info */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold theme-header line-clamp-2">
|
||||
{collection.name}
|
||||
</h3>
|
||||
|
||||
{collection.description && (
|
||||
<p className="text-sm theme-text opacity-70 line-clamp-2">
|
||||
{collection.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between text-xs theme-text opacity-60">
|
||||
<span>{collection.storyCount} stories</span>
|
||||
<span>{collection.estimatedReadingTime ? formatReadingTime(collection.estimatedReadingTime) : '—'}</span>
|
||||
</div>
|
||||
|
||||
{collection.rating && (
|
||||
<div className="flex justify-center">
|
||||
{renderRatingStars(collection.rating)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{collection.tags && collection.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{collection.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="inline-block px-2 py-1 text-xs rounded-full theme-accent-bg text-white"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
{collection.tags.length > 3 && (
|
||||
<span className="text-xs theme-text opacity-60">
|
||||
+{collection.tags.length - 3} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
// List view
|
||||
return (
|
||||
<Link href={`/collections/${collection.id}`}>
|
||||
<div className="theme-card p-4 hover:border-gray-400 transition-colors cursor-pointer">
|
||||
<div className="flex gap-4">
|
||||
{/* Cover Image */}
|
||||
<div className="w-16 h-20 flex-shrink-0 rounded overflow-hidden bg-gray-100">
|
||||
{collection.coverImagePath ? (
|
||||
<img
|
||||
src={getImageUrl(collection.coverImagePath)}
|
||||
alt={`${collection.name} cover`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100">
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-bold theme-text">
|
||||
{collection.storyCount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Collection Details */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold theme-header line-clamp-1">
|
||||
{collection.name}
|
||||
{collection.isArchived && (
|
||||
<span className="ml-2 inline-block bg-yellow-500 text-white px-2 py-1 rounded text-xs">
|
||||
Archived
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
|
||||
{collection.description && (
|
||||
<p className="text-sm theme-text opacity-70 line-clamp-2 mt-1">
|
||||
{collection.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 mt-2 text-sm theme-text opacity-60">
|
||||
<span>{collection.storyCount} stories</span>
|
||||
<span>{collection.estimatedReadingTime ? formatReadingTime(collection.estimatedReadingTime) : '—'} reading</span>
|
||||
{collection.averageStoryRating && collection.averageStoryRating > 0 && (
|
||||
<span>★ {collection.averageStoryRating.toFixed(1)} avg</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{collection.tags && collection.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{collection.tags.slice(0, 5).map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="inline-block px-2 py-1 text-xs rounded-full theme-accent-bg text-white"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
{collection.tags.length > 5 && (
|
||||
<span className="text-xs theme-text opacity-60">
|
||||
+{collection.tags.length - 5} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{collection.rating && (
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
{renderRatingStars(collection.rating)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
360
frontend/src/components/collections/CollectionDetailView.tsx
Normal file
360
frontend/src/components/collections/CollectionDetailView.tsx
Normal file
@@ -0,0 +1,360 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Collection } from '../../types/api';
|
||||
import { collectionApi, getImageUrl } from '../../lib/api';
|
||||
import Button from '../ui/Button';
|
||||
import StoryReorderList from './StoryReorderList';
|
||||
import AddToCollectionModal from './AddToCollectionModal';
|
||||
import LoadingSpinner from '../ui/LoadingSpinner';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface CollectionDetailViewProps {
|
||||
collection: Collection;
|
||||
onUpdate: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
export default function CollectionDetailView({
|
||||
collection,
|
||||
onUpdate,
|
||||
onDelete
|
||||
}: CollectionDetailViewProps) {
|
||||
const router = useRouter();
|
||||
const [showAddStories, setShowAddStories] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editName, setEditName] = useState(collection.name);
|
||||
const [editDescription, setEditDescription] = useState(collection.description || '');
|
||||
const [editRating, setEditRating] = useState(collection.rating || '');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
||||
|
||||
const formatReadingTime = (minutes: number): string => {
|
||||
if (minutes < 60) {
|
||||
return `${minutes} minutes`;
|
||||
}
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const remainingMinutes = minutes % 60;
|
||||
return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours} hours`;
|
||||
};
|
||||
|
||||
const renderRatingStars = (rating?: number) => {
|
||||
if (!rating) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<span
|
||||
key={star}
|
||||
className={`text-lg ${
|
||||
star <= rating ? 'text-yellow-400' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const handleSaveEdits = async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
await collectionApi.updateCollection(collection.id, {
|
||||
name: editName.trim(),
|
||||
description: editDescription.trim() || undefined,
|
||||
rating: editRating ? parseInt(editRating.toString()) : undefined,
|
||||
});
|
||||
setIsEditing(false);
|
||||
onUpdate();
|
||||
} catch (error) {
|
||||
console.error('Failed to update collection:', error);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setEditName(collection.name);
|
||||
setEditDescription(collection.description || '');
|
||||
setEditRating(collection.rating || '');
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleArchive = async () => {
|
||||
const action = collection.isArchived ? 'unarchive' : 'archive';
|
||||
if (confirm(`Are you sure you want to ${action} this collection?`)) {
|
||||
try {
|
||||
setActionLoading('archive');
|
||||
await collectionApi.archiveCollection(collection.id, !collection.isArchived);
|
||||
onUpdate();
|
||||
} catch (error) {
|
||||
console.error(`Failed to ${action} collection:`, error);
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (confirm('Are you sure you want to delete this collection? This cannot be undone. Stories will not be deleted.')) {
|
||||
try {
|
||||
setActionLoading('delete');
|
||||
await collectionApi.deleteCollection(collection.id);
|
||||
onDelete();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete collection:', error);
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const startReading = () => {
|
||||
if (collection.collectionStories && collection.collectionStories.length > 0) {
|
||||
const firstStory = collection.collectionStories[0].story;
|
||||
router.push(`/collections/${collection.id}/read/${firstStory.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header Section */}
|
||||
<div className="theme-card p-6">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Cover Image */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-48 h-64 rounded-lg overflow-hidden bg-gray-100 mx-auto lg:mx-0">
|
||||
{collection.coverImagePath ? (
|
||||
<img
|
||||
src={getImageUrl(collection.coverImagePath)}
|
||||
alt={`${collection.name} cover`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100">
|
||||
<div className="text-center p-4">
|
||||
<div className="text-3xl font-bold theme-text mb-2">
|
||||
{collection.storyCount}
|
||||
</div>
|
||||
<div className="text-sm theme-text opacity-60">
|
||||
{collection.storyCount === 1 ? 'story' : 'stories'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Collection Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
{isEditing ? (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
className="text-3xl font-bold theme-header bg-transparent border-b-2 border-gray-300 focus:border-blue-500 focus:outline-none w-full"
|
||||
/>
|
||||
<textarea
|
||||
value={editDescription}
|
||||
onChange={(e) => setEditDescription(e.target.value)}
|
||||
placeholder="Add a description..."
|
||||
rows={3}
|
||||
className="w-full theme-text bg-transparent border border-gray-300 rounded-lg p-2 focus:border-blue-500 focus:outline-none resize-none"
|
||||
/>
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="text-sm font-medium theme-text">Rating:</label>
|
||||
<select
|
||||
value={editRating}
|
||||
onChange={(e) => setEditRating(e.target.value)}
|
||||
className="px-3 py-1 border border-gray-300 rounded theme-text focus:border-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="">No rating</option>
|
||||
{[1, 2, 3, 4, 5].map(num => (
|
||||
<option key={num} value={num}>{num} star{num > 1 ? 's' : ''}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold theme-header mb-2 break-words">
|
||||
{collection.name}
|
||||
{collection.isArchived && (
|
||||
<span className="ml-3 inline-block bg-yellow-500 text-white px-3 py-1 rounded text-sm font-normal">
|
||||
Archived
|
||||
</span>
|
||||
)}
|
||||
</h1>
|
||||
{collection.description && (
|
||||
<p className="theme-text text-lg mb-4 whitespace-pre-wrap">
|
||||
{collection.description}
|
||||
</p>
|
||||
)}
|
||||
{collection.rating && (
|
||||
<div className="mb-4">
|
||||
{renderRatingStars(collection.rating)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Edit Controls */}
|
||||
<div className="flex gap-2 ml-4">
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSaveEdits}
|
||||
disabled={saving || !editName.trim()}
|
||||
>
|
||||
{saving ? <LoadingSpinner size="sm" /> : 'Save'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCancelEdit}
|
||||
disabled={saving}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(true)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Statistics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold theme-text">
|
||||
{collection.storyCount}
|
||||
</div>
|
||||
<div className="text-sm theme-text opacity-60">
|
||||
{collection.storyCount === 1 ? 'Story' : 'Stories'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold theme-text">
|
||||
{collection.estimatedReadingTime ? formatReadingTime(collection.estimatedReadingTime) : '—'}
|
||||
</div>
|
||||
<div className="text-sm theme-text opacity-60">Reading Time</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold theme-text">
|
||||
{collection.totalWordCount ? collection.totalWordCount.toLocaleString() : '0'}
|
||||
</div>
|
||||
<div className="text-sm theme-text opacity-60">Total Words</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold theme-text">
|
||||
{collection.averageStoryRating && collection.averageStoryRating > 0 ? collection.averageStoryRating.toFixed(1) : '—'}
|
||||
</div>
|
||||
<div className="text-sm theme-text opacity-60">Avg Rating</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button
|
||||
onClick={startReading}
|
||||
disabled={collection.storyCount === 0}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
Read Collection
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.push(`/collections/${collection.id}/edit`)}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
Edit Collection
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setShowAddStories(true)}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
Add Stories
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleArchive}
|
||||
disabled={actionLoading === 'archive'}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{actionLoading === 'archive' ? <LoadingSpinner size="sm" /> : (collection.isArchived ? 'Unarchive' : 'Archive')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleDelete}
|
||||
disabled={actionLoading === 'delete'}
|
||||
className="flex-shrink-0 text-red-600 hover:text-red-800"
|
||||
>
|
||||
{actionLoading === 'delete' ? <LoadingSpinner size="sm" /> : 'Delete'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{collection.tags && collection.tags.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<h3 className="text-sm font-medium theme-text mb-2">Tags:</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{collection.tags.map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="inline-block px-3 py-1 text-sm rounded-full theme-accent-bg text-white"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stories Section */}
|
||||
<div className="theme-card p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold theme-header">
|
||||
Stories ({collection.storyCount})
|
||||
</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowAddStories(true)}
|
||||
>
|
||||
Add Stories
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<StoryReorderList
|
||||
collection={collection}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Add Stories Modal */}
|
||||
<AddToCollectionModal
|
||||
isOpen={showAddStories}
|
||||
onClose={() => setShowAddStories(false)}
|
||||
collection={collection}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
415
frontend/src/components/collections/CollectionForm.tsx
Normal file
415
frontend/src/components/collections/CollectionForm.tsx
Normal file
@@ -0,0 +1,415 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { searchApi, tagApi } from '../../lib/api';
|
||||
import { Story, Tag } from '../../types/api';
|
||||
import { Input } from '../ui/Input';
|
||||
import Button from '../ui/Button';
|
||||
import LoadingSpinner from '../ui/LoadingSpinner';
|
||||
|
||||
interface CollectionFormProps {
|
||||
initialData?: {
|
||||
name: string;
|
||||
description?: string;
|
||||
tags?: string[];
|
||||
storyIds?: string[];
|
||||
coverImagePath?: string;
|
||||
};
|
||||
onSubmit: (data: {
|
||||
name: string;
|
||||
description?: string;
|
||||
tags?: string[];
|
||||
storyIds?: string[];
|
||||
coverImage?: File;
|
||||
}) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
loading?: boolean;
|
||||
submitLabel?: string;
|
||||
}
|
||||
|
||||
export default function CollectionForm({
|
||||
initialData,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
loading = false,
|
||||
submitLabel = 'Save Collection'
|
||||
}: CollectionFormProps) {
|
||||
const [name, setName] = useState(initialData?.name || '');
|
||||
const [description, setDescription] = useState(initialData?.description || '');
|
||||
const [tagInput, setTagInput] = useState('');
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>(initialData?.tags || []);
|
||||
const [tagSuggestions, setTagSuggestions] = useState<string[]>([]);
|
||||
const [selectedStoryIds, setSelectedStoryIds] = useState<string[]>(initialData?.storyIds || []);
|
||||
const [coverImage, setCoverImage] = useState<File | null>(null);
|
||||
const [coverImagePreview, setCoverImagePreview] = useState<string | null>(null);
|
||||
|
||||
// Story selection state
|
||||
const [storySearchQuery, setStorySearchQuery] = useState('');
|
||||
const [availableStories, setAvailableStories] = useState<Story[]>([]);
|
||||
const [selectedStories, setSelectedStories] = useState<Story[]>([]);
|
||||
const [loadingStories, setLoadingStories] = useState(false);
|
||||
const [showStorySelection, setShowStorySelection] = useState(false);
|
||||
|
||||
// Load tag suggestions when typing
|
||||
useEffect(() => {
|
||||
if (tagInput.length > 1) {
|
||||
const loadSuggestions = async () => {
|
||||
try {
|
||||
const suggestions = await tagApi.getTagAutocomplete(tagInput);
|
||||
setTagSuggestions(suggestions.filter(tag => !selectedTags.includes(tag)));
|
||||
} catch (error) {
|
||||
console.error('Failed to load tag suggestions:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const debounceTimer = setTimeout(loadSuggestions, 300);
|
||||
return () => clearTimeout(debounceTimer);
|
||||
} else {
|
||||
setTagSuggestions([]);
|
||||
}
|
||||
}, [tagInput, selectedTags]);
|
||||
|
||||
// Load stories for selection
|
||||
useEffect(() => {
|
||||
if (showStorySelection) {
|
||||
const loadStories = async () => {
|
||||
try {
|
||||
setLoadingStories(true);
|
||||
const result = await searchApi.search({
|
||||
query: storySearchQuery || '*',
|
||||
page: 0,
|
||||
size: 50,
|
||||
});
|
||||
setAvailableStories(result.results || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to load stories:', error);
|
||||
} finally {
|
||||
setLoadingStories(false);
|
||||
}
|
||||
};
|
||||
|
||||
const debounceTimer = setTimeout(loadStories, 300);
|
||||
return () => clearTimeout(debounceTimer);
|
||||
}
|
||||
}, [storySearchQuery, showStorySelection]);
|
||||
|
||||
// Load selected stories data on mount
|
||||
useEffect(() => {
|
||||
if (selectedStoryIds.length > 0) {
|
||||
const loadSelectedStories = async () => {
|
||||
try {
|
||||
const result = await searchApi.search({
|
||||
query: '*',
|
||||
page: 0,
|
||||
size: 100,
|
||||
});
|
||||
const stories = result.results.filter(story => selectedStoryIds.includes(story.id));
|
||||
setSelectedStories(stories);
|
||||
} catch (error) {
|
||||
console.error('Failed to load selected stories:', error);
|
||||
}
|
||||
};
|
||||
loadSelectedStories();
|
||||
}
|
||||
}, [selectedStoryIds]);
|
||||
|
||||
const handleTagInputKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && tagInput.trim()) {
|
||||
e.preventDefault();
|
||||
const newTag = tagInput.trim();
|
||||
if (!selectedTags.includes(newTag)) {
|
||||
setSelectedTags(prev => [...prev, newTag]);
|
||||
}
|
||||
setTagInput('');
|
||||
setTagSuggestions([]);
|
||||
}
|
||||
};
|
||||
|
||||
const addTag = (tag: string) => {
|
||||
if (!selectedTags.includes(tag)) {
|
||||
setSelectedTags(prev => [...prev, tag]);
|
||||
}
|
||||
setTagInput('');
|
||||
setTagSuggestions([]);
|
||||
};
|
||||
|
||||
const removeTag = (tagToRemove: string) => {
|
||||
setSelectedTags(prev => prev.filter(tag => tag !== tagToRemove));
|
||||
};
|
||||
|
||||
const handleCoverImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setCoverImage(file);
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
setCoverImagePreview(e.target?.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleStorySelection = (story: Story) => {
|
||||
const isSelected = selectedStoryIds.includes(story.id);
|
||||
if (isSelected) {
|
||||
setSelectedStoryIds(prev => prev.filter(id => id !== story.id));
|
||||
setSelectedStories(prev => prev.filter(s => s.id !== story.id));
|
||||
} else {
|
||||
setSelectedStoryIds(prev => [...prev, story.id]);
|
||||
setSelectedStories(prev => [...prev, story]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeSelectedStory = (storyId: string) => {
|
||||
setSelectedStoryIds(prev => prev.filter(id => id !== storyId));
|
||||
setSelectedStories(prev => prev.filter(s => s.id !== storyId));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!name.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
await onSubmit({
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
tags: selectedTags,
|
||||
storyIds: selectedStoryIds,
|
||||
coverImage: coverImage || undefined,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Basic Information */}
|
||||
<div className="theme-card p-6">
|
||||
<h2 className="text-lg font-semibold theme-header mb-4">Basic Information</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium theme-text mb-1">
|
||||
Collection Name *
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter collection name"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium theme-text mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Describe this collection (optional)"
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border theme-border rounded-lg theme-card theme-text focus:outline-none focus:ring-2 focus:ring-theme-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Cover Image Upload */}
|
||||
<div>
|
||||
<label htmlFor="coverImage" className="block text-sm font-medium theme-text mb-1">
|
||||
Cover Image
|
||||
</label>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
id="coverImage"
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
onChange={handleCoverImageChange}
|
||||
className="w-full px-3 py-2 border theme-border rounded-lg theme-card theme-text focus:outline-none focus:ring-2 focus:ring-theme-accent"
|
||||
/>
|
||||
<p className="text-xs theme-text opacity-60 mt-1">
|
||||
JPG, PNG, or WebP. Max 800x1200px.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{(coverImagePreview || initialData?.coverImagePath) && (
|
||||
<div className="w-20 h-24 rounded overflow-hidden bg-gray-100">
|
||||
<img
|
||||
src={coverImagePreview || (initialData?.coverImagePath ? `/images/${initialData.coverImagePath}` : '')}
|
||||
alt="Cover preview"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="theme-card p-6">
|
||||
<h2 className="text-lg font-semibold theme-header mb-4">Tags</h2>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyDown={handleTagInputKeyDown}
|
||||
placeholder="Type tags and press Enter"
|
||||
className="w-full"
|
||||
/>
|
||||
|
||||
{tagSuggestions.length > 0 && (
|
||||
<div className="absolute z-10 top-full left-0 right-0 mt-1 bg-white border theme-border rounded-lg shadow-lg max-h-32 overflow-y-auto">
|
||||
{tagSuggestions.map((suggestion) => (
|
||||
<button
|
||||
key={suggestion}
|
||||
type="button"
|
||||
onClick={() => addTag(suggestion)}
|
||||
className="w-full px-3 py-2 text-left hover:bg-gray-100 theme-text"
|
||||
>
|
||||
{suggestion}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedTags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center px-3 py-1 text-sm rounded-full theme-accent-bg text-white"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeTag(tag)}
|
||||
className="ml-2 hover:text-red-200"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Story Selection */}
|
||||
<div className="theme-card p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold theme-header">Stories</h2>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowStorySelection(!showStorySelection)}
|
||||
>
|
||||
{showStorySelection ? 'Hide' : 'Add'} Stories
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Selected Stories */}
|
||||
{selectedStories.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h3 className="text-sm font-medium theme-text mb-2">
|
||||
Selected Stories ({selectedStories.length})
|
||||
</h3>
|
||||
<div className="space-y-2 max-h-32 overflow-y-auto">
|
||||
{selectedStories.map((story) => (
|
||||
<div key={story.id} className="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium theme-text truncate">{story.title}</p>
|
||||
<p className="text-xs theme-text opacity-60">{story.authorName}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeSelectedStory(story.id)}
|
||||
className="ml-2 text-red-600 hover:text-red-800"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Story Selection Interface */}
|
||||
{showStorySelection && (
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
type="search"
|
||||
value={storySearchQuery}
|
||||
onChange={(e) => setStorySearchQuery(e.target.value)}
|
||||
placeholder="Search stories to add..."
|
||||
className="w-full"
|
||||
/>
|
||||
|
||||
{loadingStories ? (
|
||||
<div className="flex justify-center py-4">
|
||||
<LoadingSpinner size="sm" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-64 overflow-y-auto space-y-2">
|
||||
{availableStories.map((story) => {
|
||||
const isSelected = selectedStoryIds.includes(story.id);
|
||||
return (
|
||||
<div
|
||||
key={story.id}
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-colors ${
|
||||
isSelected
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'theme-border hover:border-gray-400'
|
||||
}`}
|
||||
onClick={() => toggleStorySelection(story)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => toggleStorySelection(story)}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium theme-text truncate">{story.title}</p>
|
||||
<p className="text-sm theme-text opacity-60">{story.authorName}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading || !name.trim()}
|
||||
>
|
||||
{loading ? <LoadingSpinner size="sm" /> : submitLabel}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
42
frontend/src/components/collections/CollectionGrid.tsx
Normal file
42
frontend/src/components/collections/CollectionGrid.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
'use client';
|
||||
|
||||
import { Collection } from '../../types/api';
|
||||
import CollectionCard from './CollectionCard';
|
||||
|
||||
interface CollectionGridProps {
|
||||
collections: Collection[];
|
||||
viewMode: 'grid' | 'list';
|
||||
onUpdate?: () => void;
|
||||
}
|
||||
|
||||
export default function CollectionGrid({ collections, viewMode, onUpdate }: CollectionGridProps) {
|
||||
if (collections.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-20">
|
||||
<div className="theme-text text-lg mb-4">
|
||||
No collections found
|
||||
</div>
|
||||
<p className="theme-text opacity-70">
|
||||
Create your first collection to organize your stories
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={
|
||||
viewMode === 'grid'
|
||||
? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'
|
||||
: 'space-y-4'
|
||||
}>
|
||||
{collections.map((collection) => (
|
||||
<CollectionCard
|
||||
key={collection.id}
|
||||
collection={collection}
|
||||
viewMode={viewMode}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
218
frontend/src/components/collections/CollectionReadingView.tsx
Normal file
218
frontend/src/components/collections/CollectionReadingView.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
'use client';
|
||||
|
||||
import { StoryWithCollectionContext } from '../../types/api';
|
||||
import Button from '../ui/Button';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface CollectionReadingViewProps {
|
||||
data: StoryWithCollectionContext;
|
||||
onNavigate: (storyId: string) => void;
|
||||
onBackToCollection: () => void;
|
||||
}
|
||||
|
||||
export default function CollectionReadingView({
|
||||
data,
|
||||
onNavigate,
|
||||
onBackToCollection
|
||||
}: CollectionReadingViewProps) {
|
||||
const { story, collection } = data;
|
||||
|
||||
const handlePrevious = () => {
|
||||
if (collection.previousStoryId) {
|
||||
onNavigate(collection.previousStoryId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (collection.nextStoryId) {
|
||||
onNavigate(collection.nextStoryId);
|
||||
}
|
||||
};
|
||||
|
||||
const renderRatingStars = (rating?: number) => {
|
||||
if (!rating) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<span
|
||||
key={star}
|
||||
className={`text-sm ${
|
||||
star <= rating ? 'text-yellow-400' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Collection Context Header */}
|
||||
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={onBackToCollection}
|
||||
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
|
||||
title="Back to Collection"
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
<div>
|
||||
<h2 className="font-semibold text-blue-900 dark:text-blue-100">
|
||||
Reading from: {collection.name}
|
||||
</h2>
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300">
|
||||
Story {collection.currentPosition} of {collection.totalStories}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-32 bg-blue-200 dark:bg-blue-800 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${(collection.currentPosition / collection.totalStories) * 100}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-blue-700 dark:text-blue-300 font-mono">
|
||||
{collection.currentPosition}/{collection.totalStories}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Story Header */}
|
||||
<div className="theme-card p-6 mb-6">
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
{/* Story Cover */}
|
||||
{story.coverPath && (
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src={`/images/${story.coverPath}`}
|
||||
alt={`${story.title} cover`}
|
||||
className="w-32 h-40 object-cover rounded-lg mx-auto md:mx-0"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Story Info */}
|
||||
<div className="flex-1">
|
||||
<h1 className="text-3xl font-bold theme-header mb-2">
|
||||
{story.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 mb-4 text-sm theme-text opacity-70">
|
||||
<Link
|
||||
href={`/stories/${story.id}`}
|
||||
className="hover:underline"
|
||||
>
|
||||
by {story.authorName}
|
||||
</Link>
|
||||
<span>{story.wordCount?.toLocaleString()} words</span>
|
||||
{story.rating && (
|
||||
<div className="flex items-center gap-1">
|
||||
{renderRatingStars(story.rating)}
|
||||
</div>
|
||||
)}
|
||||
{story.seriesName && (
|
||||
<span>
|
||||
{story.seriesName}
|
||||
{story.volume && ` #${story.volume}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{story.summary && (
|
||||
<p className="theme-text mb-4 italic">
|
||||
{story.summary}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{story.tags && story.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{story.tags.map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="inline-block px-2 py-1 text-xs rounded-full theme-accent-bg text-white"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handlePrevious}
|
||||
disabled={!collection.previousStoryId}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
← Previous Story
|
||||
</Button>
|
||||
|
||||
<div className="text-sm theme-text opacity-70">
|
||||
Story {collection.currentPosition} of {collection.totalStories}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleNext}
|
||||
disabled={!collection.nextStoryId}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Next Story →
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Story Content */}
|
||||
<div className="theme-card p-8">
|
||||
<div
|
||||
className="prose prose-lg max-w-none theme-text"
|
||||
dangerouslySetInnerHTML={{ __html: story.contentHtml }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<div className="flex justify-between items-center mt-8 p-4 theme-card">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handlePrevious}
|
||||
disabled={!collection.previousStoryId}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
← Previous
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={onBackToCollection}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Back to Collection
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleNext}
|
||||
disabled={!collection.nextStoryId}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Next →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
264
frontend/src/components/collections/StoryReorderList.tsx
Normal file
264
frontend/src/components/collections/StoryReorderList.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Collection, Story } from '../../types/api';
|
||||
import { collectionApi, getImageUrl } from '../../lib/api';
|
||||
import Link from 'next/link';
|
||||
import Button from '../ui/Button';
|
||||
|
||||
interface StoryReorderListProps {
|
||||
collection: Collection;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export default function StoryReorderList({ collection, onUpdate }: StoryReorderListProps) {
|
||||
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
|
||||
const [reordering, setReordering] = useState(false);
|
||||
const [localStories, setLocalStories] = useState(collection.collectionStories || []);
|
||||
|
||||
// Update local stories when collection changes
|
||||
useEffect(() => {
|
||||
setLocalStories(collection.collectionStories || []);
|
||||
}, [collection.collectionStories]);
|
||||
|
||||
const stories = localStories;
|
||||
|
||||
const handleDragStart = (e: React.DragEvent, index: number) => {
|
||||
setDraggedIndex(index);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/html', '');
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggedIndex(null);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
};
|
||||
|
||||
const handleDrop = async (e: React.DragEvent, dropIndex: number) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (draggedIndex === null || draggedIndex === dropIndex || reordering) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Optimistic update - update local state immediately
|
||||
const newStories = [...stories];
|
||||
const [draggedStory] = newStories.splice(draggedIndex, 1);
|
||||
newStories.splice(dropIndex, 0, draggedStory);
|
||||
setLocalStories(newStories);
|
||||
|
||||
try {
|
||||
setReordering(true);
|
||||
|
||||
// Create reorder request with new positions
|
||||
const storyOrders = newStories.map((storyItem, index) => ({
|
||||
storyId: storyItem.story.id,
|
||||
position: index + 1,
|
||||
}));
|
||||
|
||||
await collectionApi.reorderStories(collection.id, storyOrders);
|
||||
// Don't call onUpdate() to avoid page reload - the local state is already correct
|
||||
} catch (error) {
|
||||
console.error('Failed to reorder stories:', error);
|
||||
// On error, refresh to get the correct order
|
||||
onUpdate();
|
||||
} finally {
|
||||
setReordering(false);
|
||||
setDraggedIndex(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveStory = async (storyId: string) => {
|
||||
if (confirm('Remove this story from the collection?')) {
|
||||
try {
|
||||
await collectionApi.removeStoryFromCollection(collection.id, storyId);
|
||||
onUpdate();
|
||||
} catch (error) {
|
||||
console.error('Failed to remove story:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const moveStoryUp = async (index: number) => {
|
||||
if (index === 0 || reordering) return;
|
||||
|
||||
// Optimistic update - update local state immediately
|
||||
const newStories = [...stories];
|
||||
[newStories[index - 1], newStories[index]] = [newStories[index], newStories[index - 1]];
|
||||
setLocalStories(newStories);
|
||||
|
||||
try {
|
||||
setReordering(true);
|
||||
|
||||
const storyOrders = newStories.map((storyItem, idx) => ({
|
||||
storyId: storyItem.story.id,
|
||||
position: idx + 1,
|
||||
}));
|
||||
|
||||
await collectionApi.reorderStories(collection.id, storyOrders);
|
||||
// Don't call onUpdate() to avoid page reload
|
||||
} catch (error) {
|
||||
console.error('Failed to reorder stories:', error);
|
||||
// On error, refresh to get the correct order
|
||||
onUpdate();
|
||||
} finally {
|
||||
setReordering(false);
|
||||
}
|
||||
};
|
||||
|
||||
const moveStoryDown = async (index: number) => {
|
||||
if (index === stories.length - 1 || reordering) return;
|
||||
|
||||
// Optimistic update - update local state immediately
|
||||
const newStories = [...stories];
|
||||
[newStories[index], newStories[index + 1]] = [newStories[index + 1], newStories[index]];
|
||||
setLocalStories(newStories);
|
||||
|
||||
try {
|
||||
setReordering(true);
|
||||
|
||||
const storyOrders = newStories.map((storyItem, idx) => ({
|
||||
storyId: storyItem.story.id,
|
||||
position: idx + 1,
|
||||
}));
|
||||
|
||||
await collectionApi.reorderStories(collection.id, storyOrders);
|
||||
// Don't call onUpdate() to avoid page reload
|
||||
} catch (error) {
|
||||
console.error('Failed to reorder stories:', error);
|
||||
// On error, refresh to get the correct order
|
||||
onUpdate();
|
||||
} finally {
|
||||
setReordering(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (stories.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 theme-text opacity-70">
|
||||
<p className="mb-4">No stories in this collection yet.</p>
|
||||
<p className="text-sm">Add stories to start building your collection.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{stories.map((storyItem, index) => {
|
||||
const story = storyItem.story;
|
||||
const isDragging = draggedIndex === index;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${story.id}-${index}`}
|
||||
draggable={!reordering}
|
||||
onDragStart={(e) => handleDragStart(e, index)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, index)}
|
||||
className={`
|
||||
flex items-center gap-4 p-4 theme-card rounded-lg border transition-all duration-200
|
||||
${isDragging ? 'opacity-50 scale-95' : 'hover:border-gray-400'}
|
||||
${reordering ? 'pointer-events-none' : 'cursor-move'}
|
||||
`}
|
||||
>
|
||||
{/* Drag Handle */}
|
||||
<div className="flex flex-col items-center text-gray-400 hover:text-gray-600">
|
||||
<div className="text-xs font-mono bg-gray-100 px-2 py-1 rounded mb-1">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="w-3 h-1 bg-gray-300 rounded"></div>
|
||||
<div className="w-3 h-1 bg-gray-300 rounded"></div>
|
||||
<div className="w-3 h-1 bg-gray-300 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Story Cover */}
|
||||
<div className="w-12 h-16 flex-shrink-0 rounded overflow-hidden bg-gray-100">
|
||||
{story.coverPath ? (
|
||||
<img
|
||||
src={getImageUrl(story.coverPath)}
|
||||
alt={`${story.title} cover`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100">
|
||||
<span className="text-xs font-bold text-gray-600">
|
||||
{story.title.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Story Details */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<Link
|
||||
href={`/stories/${story.id}`}
|
||||
className="block hover:underline"
|
||||
>
|
||||
<h3 className="font-medium theme-header truncate">
|
||||
{story.title}
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="text-sm theme-text opacity-70 truncate">
|
||||
by {story.authorName}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-1 text-xs theme-text opacity-60">
|
||||
<span>{story.wordCount?.toLocaleString()} words</span>
|
||||
{story.rating && (
|
||||
<span className="flex items-center">
|
||||
★ {story.rating}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<button
|
||||
onClick={() => moveStoryUp(index)}
|
||||
disabled={index === 0 || reordering}
|
||||
className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="Move up"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
onClick={() => moveStoryDown(index)}
|
||||
disabled={index === stories.length - 1 || reordering}
|
||||
className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="Move down"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Remove Button */}
|
||||
<button
|
||||
onClick={() => handleRemoveStory(story.id)}
|
||||
disabled={reordering}
|
||||
className="p-2 text-red-500 hover:text-red-700 disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="Remove from collection"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{reordering && (
|
||||
<div className="text-center py-4 theme-text opacity-70">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
|
||||
Reordering stories...
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user