Bugfixes and Improvements Tag Management

frontend/src/components/stories/StoryCard.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import { Story } from '../../types/api';
 import { storyApi, getImageUrl } from '../../lib/api';
 import Button from '../ui/Button';
+import TagDisplay from '../tags/TagDisplay';
 
 interface StoryCardProps {
   story: Story;
@@ -27,7 +28,10 @@ export default function StoryCard({
   const [rating, setRating] = useState(story.rating || 0);
   const [updating, setUpdating] = useState(false);
 
-  const handleRatingClick = async (newRating: number) => {
+  const handleRatingClick = async (e: React.MouseEvent, newRating: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
     if (updating) return;
     
     try {
@@ -106,12 +110,12 @@ export default function StoryCard({
                 {Array.isArray(story.tags) && story.tags.length > 0 && (
                   <div className="flex flex-wrap gap-1 mt-2">
                     {story.tags.slice(0, 3).map((tag) => (
-                      <span
+                      <TagDisplay
                         key={tag.id}
-                        className="px-2 py-1 text-xs rounded theme-accent-bg text-white"
-                      >
-                        {tag.name}
-                      </span>
+                        tag={tag}
+                        size="sm"
+                        clickable={false}
+                      />
                     ))}
                     {story.tags.length > 3 && (
                       <span className="px-2 py-1 text-xs theme-text">
@@ -129,7 +133,7 @@ export default function StoryCard({
                   {[1, 2, 3, 4, 5].map((star) => (
                     <button
                       key={star}
-                      onClick={() => handleRatingClick(star)}
+                      onClick={(e) => handleRatingClick(e, star)}
                       className={`text-lg ${
                         star <= rating
                           ? 'text-yellow-400'
@@ -207,7 +211,7 @@ export default function StoryCard({
           {[1, 2, 3, 4, 5].map((star) => (
             <button
               key={star}
-              onClick={() => handleRatingClick(star)}
+              onClick={(e) => handleRatingClick(e, star)}
               className={`text-sm ${
                 star <= rating
                   ? 'text-yellow-400'
@@ -237,12 +241,12 @@ export default function StoryCard({
         {Array.isArray(story.tags) && story.tags.length > 0 && (
           <div className="flex flex-wrap gap-1 mt-2">
             {story.tags.slice(0, 2).map((tag) => (
-              <span
+              <TagDisplay
                 key={tag.id}
-                className="px-2 py-1 text-xs rounded theme-accent-bg text-white"
-              >
-                {tag.name}
-              </span>
+                tag={tag}
+                size="sm"
+                clickable={false}
+              />
             ))}
             {story.tags.length > 2 && (
               <span className="px-2 py-1 text-xs theme-text">