rating display fix & directory mapping

frontend/src/components/stories/StoryCard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { Story } from '../../types/api';
@@ -49,6 +49,12 @@ export default function StoryCard({
   const [rating, setRating] = useState(story.rating || 0);
   const [updating, setUpdating] = useState(false);
 
+  // Sync rating state when a different story is rendered in the same component slot,
+  // or when the story's rating is updated externally (e.g. from the detail page).
+  useEffect(() => {
+    setRating(story.rating || 0);
+  }, [story.id, story.rating]);
+
   // Helper function to get tags from either tags array or tagNames array
   const getTags = () => {
     if (Array.isArray(story.tags) && story.tags.length > 0) {

frontend/src/components/stories/StoryRating.tsx

@@ -37,7 +37,7 @@ export default function StoryRating({
     }
   };
 
-  const displayRating = hoveredRating || rating;
+  const displayRating = hoveredRating || (rating || 0);
 
   return (
     <div className="flex items-center gap-1">