fix loop

frontend/src/app/library/page.tsx

@@ -93,12 +93,15 @@ export default function LibraryPage() {
 
   // Enrich existing tags when fullTags are loaded
   useEffect(() => {
-    if (fullTags.length > 0 && tags.length > 0) {
+    if (fullTags.length > 0) {
+      // Use functional update to get the current tags state
+      setTags(currentTags => {
+        if (currentTags.length > 0) {
           // Check if tags already have color data to avoid infinite loops
-      const hasColors = tags.some(tag => tag.color);
+          const hasColors = currentTags.some(tag => tag.color);
           if (!hasColors) {
             // Re-enrich existing tags with color data
-        const enrichedTags = tags.map(tag => {
+            return currentTags.map(tag => {
               const fullTag = fullTags.find(ft => ft.name.toLowerCase() === tag.name.toLowerCase());
               return {
                 ...tag,
@@ -110,10 +113,12 @@ export default function LibraryPage() {
                 id: fullTag?.id || tag.id
               };
             });
-        setTags(enrichedTags);
           }
         }
-  }, [fullTags, tags]); // Run when fullTags or tags change
+        return currentTags; // Return unchanged if no enrichment needed
+      });
+    }
+  }, [fullTags]); // Only run when fullTags change
   
   // Debounce search to avoid too many API calls
   useEffect(() => {

frontend/src/components/stories/StoryCard.tsx

@@ -29,7 +29,6 @@ export default function StoryCard({
   const [updating, setUpdating] = useState(false);
 
   const handleRatingClick = async (e: React.MouseEvent, newRating: number) => {
-    console.log('Rating click:', newRating, 'for story:', story.title);
     // Prevent default and stop propagation to avoid triggering navigation
     e.preventDefault();
     e.stopPropagation();
@@ -58,10 +57,7 @@ export default function StoryCard({
 
   if (viewMode === 'list') {
     return (
-      <div 
+      <div className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow">
-        className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow"
-        onClick={(e) => console.log('Story card clicked (list view):', story.title, 'Target:', e.target)}
-      >
         <div className="flex gap-4">
           {/* Cover Image */}
           <div className="flex-shrink-0">
@@ -176,10 +172,7 @@ export default function StoryCard({
 
   // Grid view
   return (
-    <div 
+    <div className="theme-card theme-shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow group">
-      className="theme-card theme-shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow group"
-      onClick={(e) => console.log('Story card clicked (grid view):', story.title, 'Target:', e.target)}
-    >
       {/* Cover Image */}
       <Link href={`/stories/${story.id}`}>
         <div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 overflow-hidden">

frontend/src/components/stories/StoryMultiSelect.tsx

@@ -21,15 +21,7 @@ export default function StoryMultiSelect({
   const [selectedStoryIds, setSelectedStoryIds] = useState<string[]>([]);
   const [isSelectionMode, setIsSelectionMode] = useState(false);
 
-  console.log('StoryMultiSelect render:', { 
-    storiesCount: stories.length, 
-    isSelectionMode, 
-    selectedCount: selectedStoryIds.length,
-    allowMultiSelect 
-  });
-
   const handleStorySelect = (storyId: string) => {
-    console.log('Story selection triggered:', storyId, 'Selection mode:', isSelectionMode);
     setSelectedStoryIds(prev => {
       if (prev.includes(storyId)) {
         const newSelection = prev.filter(id => id !== storyId);