Fix GIF preview display in dictionary word cards

Problem: GIFs were created successfully but not displaying in the dictionary listing.

Root cause: WordCard component was using raw relative URLs for GIF images:
- Before: src={gifMedia.url} → Browser requested from frontend domain
- After: src={getVideoUrl(gifMedia.url)} → Correctly requests from backend

Changes:
- Import getVideoUrl helper from videoPlaylist.ts
- Use getVideoUrl() to convert relative GIF URLs to absolute backend URLs
- Add null check to handle cases where getVideoUrl returns null

This matches the pattern used in VideoUpload.tsx which was already working correctly.

Result: GIF previews now display properly in dictionary word cards.

Co-Authored-By: Auggie

packages/frontend/src/components/dictionary/WordCard.tsx

@@ -2,6 +2,7 @@ import { Info, Plus, Video } from 'lucide-react';
 import { Term, CefrLevel } from '../../types/term';
 import { Button } from '../ui/button';
 import { wordTypeColors, wordTypeLabels } from '../../lib/wordTypeColors';
+import { getVideoUrl } from '../../lib/videoPlaylist';
 
 interface WordCardProps {
   term: Term;
@@ -37,9 +38,9 @@ export function WordCard({ term, onInfo, onAddToSentence }: WordCardProps) {
 
       {/* Icon/Image/GIF Preview */}
       <div className="flex-1 flex items-center justify-center mb-4 min-h-[120px]">
-        {gifMedia ? (
+        {gifMedia && getVideoUrl(gifMedia.url) ? (
           <img
-            src={gifMedia.url}
+            src={getVideoUrl(gifMedia.url) || ''}
             alt={term.wordText}
             className="max-h-[120px] max-w-full object-contain rounded"
             title="Video preview"