inital working version

frontend/src/app/stories/[id]/detail/page.tsx

@@ -0,0 +1,319 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import Image from 'next/image';
+import { storyApi, seriesApi, getImageUrl } from '../../../../lib/api';
+import { Story } from '../../../../types/api';
+import AppLayout from '../../../../components/layout/AppLayout';
+import Button from '../../../../components/ui/Button';
+import LoadingSpinner from '../../../../components/ui/LoadingSpinner';
+
+export default function StoryDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const storyId = params.id as string;
+  
+  const [story, setStory] = useState<Story | null>(null);
+  const [seriesStories, setSeriesStories] = useState<Story[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [updating, setUpdating] = useState(false);
+
+  useEffect(() => {
+    const loadStoryData = async () => {
+      try {
+        setLoading(true);
+        const storyData = await storyApi.getStory(storyId);
+        setStory(storyData);
+        
+        // Load series stories if this story is part of a series
+        if (storyData.seriesId) {
+          const seriesData = await seriesApi.getSeriesStories(storyData.seriesId);
+          setSeriesStories(seriesData);
+        }
+      } catch (error) {
+        console.error('Failed to load story data:', error);
+        router.push('/library');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (storyId) {
+      loadStoryData();
+    }
+  }, [storyId, router]);
+
+  const handleRatingClick = async (newRating: number) => {
+    if (updating || !story) return;
+    
+    try {
+      setUpdating(true);
+      await storyApi.updateRating(story.id, newRating);
+      setStory(prev => prev ? { ...prev, rating: newRating } : null);
+    } catch (error) {
+      console.error('Failed to update rating:', error);
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+
+  const estimateReadingTime = (wordCount: number) => {
+    const wordsPerMinute = 200; // Average reading speed
+    const minutes = Math.ceil(wordCount / wordsPerMinute);
+    return minutes;
+  };
+
+  if (loading) {
+    return (
+      <AppLayout>
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  if (!story) {
+    return (
+      <AppLayout>
+        <div className="text-center py-20">
+          <h1 className="text-2xl font-bold theme-header mb-4">Story Not Found</h1>
+          <Button href="/library">Back to Library</Button>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <div className="max-w-6xl mx-auto">
+        {/* Header Actions */}
+        <div className="flex justify-between items-center mb-6">
+          <Button href="/library" variant="ghost">
+            ← Back to Library
+          </Button>
+          <div className="flex gap-2">
+            <Button href={`/stories/${story.id}`}>
+              Read Story
+            </Button>
+            <Button href={`/stories/${story.id}/edit`} variant="ghost">
+              Edit
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
+          {/* Left Column - Cover */}
+          <div className="md:col-span-4 lg:col-span-3">
+            {/* Cover Image */}
+            <div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden max-w-sm mx-auto">
+              {story.coverPath ? (
+                <Image
+                  src={getImageUrl(story.coverPath)}
+                  alt={story.title}
+                  width={300}
+                  height={400}
+                  className="w-full h-full object-cover"
+                  unoptimized
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center theme-text text-6xl">
+                  📖
+                </div>
+              )}
+            </div>
+
+          </div>
+
+          {/* Right Column - Story Details */}
+          <div className="md:col-span-8 lg:col-span-9 space-y-6">
+            {/* Title and Author */}
+            <div>
+              <h1 className="text-4xl font-bold theme-header mb-2">
+                {story.title}
+              </h1>
+              <Link
+                href={`/authors/${story.authorId}`}
+                className="text-xl theme-accent hover:underline"
+              >
+                by {story.authorName}
+              </Link>
+            </div>
+
+            {/* Quick Stats and Rating */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {/* Quick Stats */}
+              <div className="theme-card theme-shadow rounded-lg p-4 space-y-3">
+                <h3 className="font-semibold theme-header mb-3">Details</h3>
+                <div className="flex justify-between items-center">
+                  <span className="theme-text">Word Count:</span>
+                  <span className="font-medium theme-header">
+                    {story.wordCount.toLocaleString()}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="theme-text">Reading Time:</span>
+                  <span className="font-medium theme-header">
+                    ~{estimateReadingTime(story.wordCount)} min
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="theme-text">Added:</span>
+                  <span className="font-medium theme-header">
+                    {formatDate(story.createdAt)}
+                  </span>
+                </div>
+                {story.updatedAt !== story.createdAt && (
+                  <div className="flex justify-between items-center">
+                    <span className="theme-text">Updated:</span>
+                    <span className="font-medium theme-header">
+                      {formatDate(story.updatedAt)}
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              {/* Rating */}
+              <div className="theme-card theme-shadow rounded-lg p-4">
+                <h3 className="font-semibold theme-header mb-3">Your Rating</h3>
+                <div className="flex gap-1">
+                  {[1, 2, 3, 4, 5].map((star) => (
+                    <button
+                      key={star}
+                      onClick={() => handleRatingClick(star)}
+                      className={`text-3xl transition-colors ${
+                        star <= (story.rating || 0)
+                          ? 'text-yellow-400'
+                          : 'text-gray-300 dark:text-gray-600 hover:text-yellow-300'
+                      } ${updating ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+                      disabled={updating}
+                    >
+                      ★
+                    </button>
+                  ))}
+                </div>
+                {story.rating && (
+                  <p className="text-sm theme-text mt-2">
+                    {story.rating}/5 stars
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Series Info */}
+            {story.seriesName && (
+              <div className="theme-card theme-shadow rounded-lg p-4">
+                <h3 className="font-semibold theme-header mb-2">Part of Series</h3>
+                <p className="theme-text">
+                  <strong>{story.seriesName}</strong>
+                  {story.volume && ` - Volume ${story.volume}`}
+                </p>
+                
+                {/* Series Navigation */}
+                {seriesStories.length > 1 && (
+                  <div className="mt-4">
+                    <h4 className="text-sm font-medium theme-header mb-2">
+                      Other stories in this series:
+                    </h4>
+                    <div className="space-y-1">
+                      {seriesStories
+                        .filter(s => s.id !== story.id)
+                        .slice(0, 5)
+                        .map((seriesStory) => (
+                          <Link
+                            key={seriesStory.id}
+                            href={`/stories/${seriesStory.id}/detail`}
+                            className="block text-sm theme-accent hover:underline"
+                          >
+                            {seriesStory.volume && `${seriesStory.volume}. `}
+                            {seriesStory.title}
+                          </Link>
+                        ))}
+                      {seriesStories.length > 6 && (
+                        <p className="text-sm theme-text">
+                          +{seriesStories.length - 6} more stories
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Summary */}
+            {story.summary && (
+              <div className="theme-card theme-shadow rounded-lg p-6">
+                <h3 className="text-xl font-semibold theme-header mb-4">Summary</h3>
+                <div className="theme-text prose prose-gray dark:prose-invert max-w-none">
+                  <p className="whitespace-pre-wrap leading-relaxed">
+                    {story.summary}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Tags */}
+            {story.tags && story.tags.length > 0 && (
+              <div className="theme-card theme-shadow rounded-lg p-4">
+                <h3 className="font-semibold theme-header mb-3">Tags</h3>
+                <div className="flex flex-wrap gap-2">
+                  {story.tags.map((tag) => (
+                    <span
+                      key={tag.id}
+                      className="px-3 py-1 text-sm rounded-full theme-accent-bg text-white"
+                    >
+                      {tag.name}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Source URL */}
+            {story.sourceUrl && (
+              <div className="theme-card theme-shadow rounded-lg p-4">
+                <h3 className="font-semibold theme-header mb-2">Source</h3>
+                <a
+                  href={story.sourceUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="theme-accent hover:underline break-all"
+                >
+                  {story.sourceUrl}
+                </a>
+              </div>
+            )}
+
+            {/* Action Buttons */}
+            <div className="flex gap-4 pt-6">
+              <Button
+                href={`/stories/${story.id}`}
+                className="flex-1"
+                size="lg"
+              >
+                📚 Start Reading
+              </Button>
+              <Button
+                href={`/stories/${story.id}/edit`}
+                variant="ghost"
+                size="lg"
+              >
+                ✏️ Edit Story
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

frontend/src/app/stories/[id]/edit/page.tsx

@@ -0,0 +1,371 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import AppLayout from '../../../../components/layout/AppLayout';
+import { Input, Textarea } from '../../../../components/ui/Input';
+import Button from '../../../../components/ui/Button';
+import TagInput from '../../../../components/stories/TagInput';
+import RichTextEditor from '../../../../components/stories/RichTextEditor';
+import ImageUpload from '../../../../components/ui/ImageUpload';
+import LoadingSpinner from '../../../../components/ui/LoadingSpinner';
+import { storyApi } from '../../../../lib/api';
+import { Story } from '../../../../types/api';
+
+export default function EditStoryPage() {
+  const params = useParams();
+  const router = useRouter();
+  const storyId = params.id as string;
+  
+  const [story, setStory] = useState<Story | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  
+  const [formData, setFormData] = useState({
+    title: '',
+    summary: '',
+    authorName: '',
+    contentHtml: '',
+    sourceUrl: '',
+    tags: [] as string[],
+    seriesName: '',
+    volume: '',
+  });
+  
+  const [coverImage, setCoverImage] = useState<File | null>(null);
+
+  useEffect(() => {
+    const loadStory = async () => {
+      try {
+        setLoading(true);
+        const storyData = await storyApi.getStory(storyId);
+        setStory(storyData);
+        
+        // Initialize form with story data
+        setFormData({
+          title: storyData.title,
+          summary: storyData.summary || '',
+          authorName: storyData.authorName,
+          contentHtml: storyData.contentHtml,
+          sourceUrl: storyData.sourceUrl || '',
+          tags: storyData.tags?.map(tag => tag.name) || [],
+          seriesName: storyData.seriesName || '',
+          volume: storyData.volume?.toString() || '',
+        });
+      } catch (error) {
+        console.error('Failed to load story:', error);
+        router.push('/library');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (storyId) {
+      loadStory();
+    }
+  }, [storyId, router]);
+
+  const handleInputChange = (field: string) => (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: e.target.value
+    }));
+    
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: '' }));
+    }
+  };
+
+  const handleContentChange = (html: string) => {
+    setFormData(prev => ({ ...prev, contentHtml: html }));
+    if (errors.contentHtml) {
+      setErrors(prev => ({ ...prev, contentHtml: '' }));
+    }
+  };
+
+  const handleTagsChange = (tags: string[]) => {
+    setFormData(prev => ({ ...prev, tags }));
+  };
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.title.trim()) {
+      newErrors.title = 'Title is required';
+    }
+    
+    if (!formData.authorName.trim()) {
+      newErrors.authorName = 'Author name is required';
+    }
+    
+    if (!formData.contentHtml.trim()) {
+      newErrors.contentHtml = 'Story content is required';
+    }
+
+    if (formData.seriesName && !formData.volume) {
+      newErrors.volume = 'Volume number is required when series is specified';
+    }
+    
+    if (formData.volume && !formData.seriesName.trim()) {
+      newErrors.seriesName = 'Series name is required when volume is specified';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!validateForm() || !story) {
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      // Update the story with JSON data
+      const updateData = {
+        title: formData.title,
+        summary: formData.summary || undefined,
+        contentHtml: formData.contentHtml,
+        sourceUrl: formData.sourceUrl || undefined,
+        volume: formData.seriesName ? parseInt(formData.volume) : undefined,
+        authorId: story.authorId, // Keep existing author ID
+        seriesId: story.seriesId, // Keep existing series ID for now
+        tagNames: formData.tags,
+      };
+
+      const updatedStory = await storyApi.updateStory(storyId, updateData);
+      
+      // If there's a new cover image, upload it separately
+      if (coverImage) {
+        await storyApi.uploadCover(storyId, coverImage);
+      }
+
+      router.push(`/stories/${storyId}`);
+    } catch (error: any) {
+      console.error('Failed to update story:', error);
+      const errorMessage = error.response?.data?.message || 'Failed to update story';
+      setErrors({ submit: errorMessage });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!story || !confirm('Are you sure you want to delete this story? This action cannot be undone.')) {
+      return;
+    }
+
+    try {
+      setSaving(true);
+      await storyApi.deleteStory(storyId);
+      router.push('/library');
+    } catch (error) {
+      console.error('Failed to delete story:', error);
+      setErrors({ submit: 'Failed to delete story' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <AppLayout>
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  if (!story) {
+    return (
+      <AppLayout>
+        <div className="text-center py-20">
+          <h1 className="text-2xl font-bold theme-header mb-4">Story Not Found</h1>
+          <Button href="/library">Back to Library</Button>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <div className="max-w-4xl mx-auto">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold theme-header">Edit Story</h1>
+          <p className="theme-text mt-2">
+            Make changes to &quot;{story.title}&quot;
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Title */}
+          <Input
+            label="Title *"
+            value={formData.title}
+            onChange={handleInputChange('title')}
+            placeholder="Enter the story title"
+            error={errors.title}
+            required
+          />
+
+          {/* Author - Display only, not editable in edit mode for simplicity */}
+          <Input
+            label="Author *"
+            value={formData.authorName}
+            onChange={handleInputChange('authorName')}
+            placeholder="Enter the author's name"
+            error={errors.authorName}
+            disabled
+          />
+          <p className="text-sm theme-text mt-1">
+            Author changes should be done through Author management
+          </p>
+
+          {/* Summary */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Summary
+            </label>
+            <Textarea
+              value={formData.summary}
+              onChange={handleInputChange('summary')}
+              placeholder="Brief summary or description of the story..."
+              rows={3}
+            />
+            <p className="text-sm theme-text mt-1">
+              Optional summary that will be displayed on the story detail page
+            </p>
+          </div>
+
+          {/* Cover Image Upload */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Cover Image
+            </label>
+            <ImageUpload
+              onImageSelect={setCoverImage}
+              accept="image/jpeg,image/png,image/webp"
+              maxSizeMB={5}
+              aspectRatio="3:4"
+              placeholder="Drop a new cover image here or click to select"
+            />
+            {story.coverPath && !coverImage && (
+              <p className="text-sm theme-text mt-2">
+                Current cover will be kept unless you upload a new one.
+              </p>
+            )}
+          </div>
+
+          {/* Content */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Story Content *
+            </label>
+            <RichTextEditor
+              value={formData.contentHtml}
+              onChange={handleContentChange}
+              placeholder="Edit your story content here..."
+              error={errors.contentHtml}
+            />
+          </div>
+
+          {/* Tags */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Tags
+            </label>
+            <TagInput
+              tags={formData.tags}
+              onChange={handleTagsChange}
+              placeholder="Edit tags to categorize your story..."
+            />
+          </div>
+
+          {/* Series and Volume */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Input
+                label="Series (optional)"
+                value={formData.seriesName}
+                onChange={handleInputChange('seriesName')}
+                placeholder="Enter series name if part of a series"
+                error={errors.seriesName}
+                disabled
+              />
+              <p className="text-sm theme-text mt-1">
+                Series changes not yet supported in edit mode
+              </p>
+            </div>
+            
+            <Input
+              label="Volume/Part (optional)"
+              type="number"
+              min="1"
+              value={formData.volume}
+              onChange={handleInputChange('volume')}
+              placeholder="Enter volume/part number"
+              error={errors.volume}
+              disabled={!formData.seriesName}
+            />
+          </div>
+
+          {/* Source URL */}
+          <Input
+            label="Source URL (optional)"
+            type="url"
+            value={formData.sourceUrl}
+            onChange={handleInputChange('sourceUrl')}
+            placeholder="https://example.com/original-story-url"
+          />
+
+          {/* Submit Error */}
+          {errors.submit && (
+            <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+              <p className="text-red-800 dark:text-red-200">{errors.submit}</p>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-between pt-6">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={handleDelete}
+              disabled={saving}
+              className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+            >
+              Delete Story
+            </Button>
+            
+            <div className="flex gap-4">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => router.push(`/stories/${storyId}`)}
+                disabled={saving}
+              >
+                Cancel
+              </Button>
+              
+              <Button
+                type="submit"
+                loading={saving}
+                disabled={!formData.title || !formData.authorName || !formData.contentHtml}
+              >
+                Save Changes
+              </Button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </AppLayout>
+  );
+}

frontend/src/app/stories/[id]/page.tsx

@@ -0,0 +1,274 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { storyApi, seriesApi } from '../../../lib/api';
+import { Story } from '../../../types/api';
+import LoadingSpinner from '../../../components/ui/LoadingSpinner';
+import Button from '../../../components/ui/Button';
+import StoryRating from '../../../components/stories/StoryRating';
+import DOMPurify from 'dompurify';
+
+export default function StoryReadingPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [story, setStory] = useState<Story | null>(null);
+  const [seriesStories, setSeriesStories] = useState<Story[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [readingProgress, setReadingProgress] = useState(0);
+
+  const storyId = params.id as string;
+
+  useEffect(() => {
+    const loadStory = async () => {
+      try {
+        setLoading(true);
+        const storyData = await storyApi.getStory(storyId);
+        setStory(storyData);
+
+        // Load series stories if part of a series
+        if (storyData.seriesId) {
+          const seriesData = await seriesApi.getSeriesStories(storyData.seriesId);
+          setSeriesStories(seriesData);
+        }
+      } catch (err: any) {
+        console.error('Failed to load story:', err);
+        setError(err.response?.data?.message || 'Failed to load story');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (storyId) {
+      loadStory();
+    }
+  }, [storyId]);
+
+  // Track reading progress
+  useEffect(() => {
+    const handleScroll = () => {
+      const article = document.querySelector('[data-reading-content]') as HTMLElement;
+      if (article) {
+        const scrolled = window.scrollY;
+        const articleTop = article.offsetTop;
+        const articleHeight = article.scrollHeight;
+        const windowHeight = window.innerHeight;
+        
+        const progress = Math.min(100, Math.max(0, 
+          ((scrolled - articleTop + windowHeight) / articleHeight) * 100
+        ));
+        
+        setReadingProgress(progress);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [story]);
+
+  const handleRatingUpdate = async (newRating: number) => {
+    if (!story) return;
+    
+    try {
+      await storyApi.updateRating(story.id, newRating);
+      setStory(prev => prev ? { ...prev, rating: newRating } : null);
+    } catch (error) {
+      console.error('Failed to update rating:', error);
+    }
+  };
+
+  const findNextStory = (): Story | null => {
+    if (!story?.seriesId || seriesStories.length <= 1) return null;
+    
+    const currentIndex = seriesStories.findIndex(s => s.id === story.id);
+    return currentIndex < seriesStories.length - 1 ? seriesStories[currentIndex + 1] : null;
+  };
+
+  const findPreviousStory = (): Story | null => {
+    if (!story?.seriesId || seriesStories.length <= 1) return null;
+    
+    const currentIndex = seriesStories.findIndex(s => s.id === story.id);
+    return currentIndex > 0 ? seriesStories[currentIndex - 1] : null;
+  };
+
+  const nextStory = findNextStory();
+  const previousStory = findPreviousStory();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen theme-bg flex items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  if (error || !story) {
+    return (
+      <div className="min-h-screen theme-bg flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold theme-header mb-4">
+            {error || 'Story not found'}
+          </h1>
+          <Button href="/library">
+            Return to Library
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const sanitizedContent = DOMPurify.sanitize(story.contentHtml);
+
+  return (
+    <div className="min-h-screen theme-bg">
+      {/* Progress Bar */}
+      <div className="fixed top-0 left-0 right-0 h-1 bg-gray-200 dark:bg-gray-700 z-50">
+        <div 
+          className="h-full theme-accent-bg transition-all duration-200 ease-out"
+          style={{ width: `${readingProgress}%` }}
+        />
+      </div>
+
+      {/* Header */}
+      <header className="sticky top-1 z-40 theme-card theme-shadow">
+        <div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Link href="/library" className="theme-text hover:theme-accent">
+              ← Library
+            </Link>
+            <Link href={`/stories/${story.id}/detail`} className="theme-text hover:theme-accent">
+              📄 Details
+            </Link>
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <StoryRating
+              rating={story.rating || 0}
+              onRatingChange={handleRatingUpdate}
+            />
+            
+            <Link href={`/stories/${story.id}/edit`}>
+              <Button size="sm" variant="ghost">
+                Edit
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      {/* Story Content */}
+      <main className="max-w-4xl mx-auto px-4 py-8">
+        <article data-reading-content>
+
+          {/* Title and Metadata */}
+          <header className="mb-8 text-center">
+            <h1 className="text-4xl font-bold theme-header mb-4">
+              {story.title}
+            </h1>
+            
+            <div className="space-y-2">
+              <Link 
+                href={`/authors/${story.authorId}`}
+                className="text-xl theme-accent hover:underline"
+              >
+                by {story.authorName}
+              </Link>
+              
+              <div className="flex justify-center items-center gap-4 text-sm theme-text">
+                <span>{story.wordCount.toLocaleString()} words</span>
+                <span>•</span>
+                <span>{new Date(story.createdAt).toLocaleDateString()}</span>
+                {story.seriesName && (
+                  <>
+                    <span>•</span>
+                    <span>{story.seriesName} #{story.volume}</span>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Tags */}
+            {story.tags && story.tags.length > 0 && (
+              <div className="flex flex-wrap justify-center gap-2 mt-4">
+                {story.tags.map((tag) => (
+                  <span
+                    key={tag.id}
+                    className="px-3 py-1 text-sm theme-accent-bg text-white rounded-full"
+                  >
+                    {tag.name}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {/* Source URL */}
+            {story.sourceUrl && (
+              <div className="mt-4">
+                <a
+                  href={story.sourceUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm theme-accent hover:underline"
+                >
+                  Original Source ↗
+                </a>
+              </div>
+            )}
+          </header>
+
+          {/* Story Content */}
+          <div
+            className="reading-content"
+            dangerouslySetInnerHTML={{ __html: sanitizedContent }}
+          />
+        </article>
+
+        {/* Series Navigation */}
+        {(previousStory || nextStory) && (
+          <nav className="mt-12 pt-8 border-t theme-border">
+            <h3 className="text-lg font-semibold theme-header mb-4 text-center">
+              Continue Reading in {story.seriesName}
+            </h3>
+            
+            <div className="flex justify-between items-center">
+              {previousStory ? (
+                <Link
+                  href={`/stories/${previousStory.id}`}
+                  className="flex-1 max-w-md p-4 theme-card theme-shadow rounded-lg hover:shadow-lg transition-shadow"
+                >
+                  <div className="text-sm theme-text mb-1">← Previous</div>
+                  <div className="font-semibold theme-header">{previousStory.title}</div>
+                  <div className="text-sm theme-text">Part {previousStory.volume}</div>
+                </Link>
+              ) : (
+                <div className="flex-1 max-w-md"></div>
+              )}
+
+              {nextStory ? (
+                <Link
+                  href={`/stories/${nextStory.id}`}
+                  className="flex-1 max-w-md p-4 theme-card theme-shadow rounded-lg hover:shadow-lg transition-shadow text-right"
+                >
+                  <div className="text-sm theme-text mb-1">Next →</div>
+                  <div className="font-semibold theme-header">{nextStory.title}</div>
+                  <div className="text-sm theme-text">Part {nextStory.volume}</div>
+                </Link>
+              ) : (
+                <div className="flex-1 max-w-md"></div>
+              )}
+            </div>
+          </nav>
+        )}
+
+        {/* Back to Library */}
+        <div className="text-center mt-12">
+          <Button href="/library" variant="ghost">
+            ← Return to Library
+          </Button>
+        </div>
+      </main>
+    </div>
+  );
+}