Various improvements

frontend/src/components/collections/CollectionForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { searchApi, tagApi } from '../../lib/api';
+import { searchApi, tagApi, getImageUrl } from '../../lib/api';
 import { Story, Tag } from '../../types/api';
 import { Input } from '../ui/Input';
 import Button from '../ui/Button';
@@ -239,7 +239,7 @@ export default function CollectionForm({
               {(coverImagePreview || initialData?.coverImagePath) && (
                 <div className="w-20 h-24 rounded overflow-hidden bg-gray-100">
                   <img
-                    src={coverImagePreview || (initialData?.coverImagePath ? `/images/${initialData.coverImagePath}` : '')}
+                    src={coverImagePreview || (initialData?.coverImagePath ? getImageUrl(initialData.coverImagePath) : '')}
                     alt="Cover preview"
                     className="w-full h-full object-cover"
                   />

frontend/src/components/collections/CollectionReadingView.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { StoryWithCollectionContext } from '../../types/api';
-import { storyApi } from '../../lib/api';
+import { storyApi, getImageUrl } from '../../lib/api';
 import Button from '../ui/Button';
 import TagDisplay from '../tags/TagDisplay';
 import Link from 'next/link';
@@ -212,7 +212,7 @@ export default function CollectionReadingView({
           {story.coverPath && (
             <div className="flex-shrink-0">
               <img
-                src={`/images/${story.coverPath}`}
+                src={getImageUrl(story.coverPath)}
                 alt={`${story.title} cover`}
                 className="w-32 h-40 object-cover rounded-lg mx-auto md:mx-0"
               />

frontend/src/components/library/LibrarySettings.tsx

@@ -6,6 +6,7 @@ import Button from '../ui/Button';
 import { Input } from '../ui/Input';
 import LibrarySwitchLoader from '../ui/LibrarySwitchLoader';
 import { useLibrarySwitch } from '../../hooks/useLibrarySwitch';
+import { setCurrentLibraryId, clearLibraryCache } from '../../lib/api';
 
 interface Library {
   id: string;
@@ -65,6 +66,8 @@ export default function LibrarySettings() {
       if (response.ok) {
         const data = await response.json();
         setCurrentLibrary(data);
+        // Set the library ID for image URL generation
+        setCurrentLibraryId(data.id);
       }
     } catch (error) {
       console.error('Failed to load current library:', error);
@@ -87,6 +90,8 @@ export default function LibrarySettings() {
   };
 
   const handleSwitchComplete = () => {
+    // Clear the library cache so images use the new library
+    clearLibraryCache();
     // Refresh the page to reload with new library context
     router.refresh();
     window.location.reload();