feat: resolve images by anime id instead of title slug

src/services/image-utils.ts

@@ -2,21 +2,16 @@ export function getCdnUrl(): string {
   return 'https://cdn.weeb.vip';
 }
 
+/**
+ * Build a CDN URL for an image key.
+ *
+ * `src` is a record id — anime, character, staff. Images used to be keyed by a
+ * slug derived from the title, which meant lowercasing, underscoring and
+ * escaping it here to match how the sync services stored it. Ids need none of
+ * that.
+ */
 export function getSafeImageUrl(src: string, path?: string): string {
   const cdnUrl = getCdnUrl();
-  console.log("src", src, path);
-  // Replace %20 with + to match React SafeImage behavior exactly
-  const encodedSrc = src.toLowerCase().replace(/%20/g, "+");
-  // Path handling - add trailing slash if path exists
   const pathPrefix = path ? `${path}/` : "";
-
-  // Return the properly encoded URL - only single encodeURIComponent like React
-  return `${cdnUrl}/${pathPrefix}${encodeURIComponent(escapeUri(encodedSrc))}`;
-}
-
-function escapeUri(str: string): string {
-  return encodeURIComponent(str)
-    .replace(/[!'()*]/g, char =>
-      '%' + char.charCodeAt(0).toString(16).toUpperCase()
-    );
+  return `${cdnUrl}/${pathPrefix}${encodeURIComponent(src)}`;
 }

src/views/index.tsx

@@ -179,11 +179,11 @@ function Index() {
                 <h3 className="font-medium text-gray-900 mb-3">Selected Anime</h3>
                 <div className="flex space-x-4">
                   <img
-                    src={getSafeImageUrl(selectedMALAnime.title_en || selectedMALAnime.title_jp, 'weeb')}
+                    src={getSafeImageUrl(selectedMALAnime.id, 'weeb')}
                     alt={selectedMALAnime.title_en}
                     className="w-20 h-28 object-cover rounded"
 
-                    data-raw-src={getSafeImageUrl(selectedMALAnime.title_en || selectedMALAnime.title_jp, 'weeb')}
+                    data-raw-src={getSafeImageUrl(selectedMALAnime.id, 'weeb')}
                     onError={({currentTarget}) => {
                       currentTarget.onerror = null;
                       currentTarget.src = "/assets/not found.jpg";

src/views/seasonal-linking/index.tsx

@@ -144,7 +144,7 @@ function SeasonalLinking() {
         <td className="px-4 py-3">
           <div className="flex items-center space-x-3">
             <img
-              src={anime.imageUrl || getSafeImageUrl(anime.titleEn || anime.titleJp, 'weeb')}
+              src={anime.imageUrl || getSafeImageUrl(anime.id, 'weeb')}
               alt={anime.titleEn}
               className="w-10 h-14 object-cover rounded"
               onError={({currentTarget}) => {