notification bell shows poster thumbnails instead of icons

src/components/layout/AppHeader.tsx

@@ -16,7 +16,7 @@ import {
   Tv,
 } from '../../lib/icons'
 import { isTauri } from '../../lib/tauri'
-import { jellyfinClient, getItemsApi } from '../../api/jellyfin'
+import { jellyfinClient, getItemsApi, getImageUrl, getStoredServerUrl } from '../../api/jellyfin'
 
 /**
  * The single chrome bar at the top of the in-app shell. Replaces the
@@ -87,7 +87,7 @@ export default function AppHeader({ pinned, onTogglePin }: Props) {
             limit: 10,
             recursive: true,
             includeItemTypes: ['Movie'],
-            fields: ['DateCreated', 'PrimaryImageAspectRatio'],
+            fields: ['DateCreated', 'PrimaryImageAspectRatio', 'ImageTags'],
           } as any),
           getItemsApi(api!).getItems({
             userId: auth.userId,
@@ -96,7 +96,7 @@ export default function AppHeader({ pinned, onTogglePin }: Props) {
             limit: 50,
             recursive: true,
             includeItemTypes: ['Episode'],
-            fields: ['DateCreated', 'PrimaryImageAspectRatio', 'SeriesName', 'SeriesId', 'ParentIndexNumber', 'IndexNumber'],
+            fields: ['DateCreated', 'PrimaryImageAspectRatio', 'ImageTags', 'SeriesName', 'SeriesId', 'SeriesPrimaryImageTag', 'ParentIndexNumber', 'IndexNumber'],
           } as any),
         ])
         const movies = (movieRes.data.Items || []) as any[]
@@ -364,6 +364,20 @@ export default function AppHeader({ pinned, onTogglePin }: Props) {
                       const epLabel = isEpisode && (season != null || epNum != null)
                         ? `S${season ?? '?'}E${epNum ?? '?'}${entry.Name ? ` · ${entry.Name}` : ''}`
                         : null
+
+                      // Poster thumbnail: series poster for episodes, movie poster for movies
+                      const serverUrl = getStoredServerUrl()
+                      const posterUrl = (() => {
+                        if (!serverUrl) return null
+                        if (isEpisode && entry.SeriesId && entry.SeriesPrimaryImageTag) {
+                          return getImageUrl(serverUrl, entry.SeriesId, 'Primary', 160, entry.SeriesPrimaryImageTag)
+                        }
+                        if (entry.ImageTags?.Primary) {
+                          return getImageUrl(serverUrl, entry.Id, 'Primary', 160, entry.ImageTags.Primary)
+                        }
+                        return null
+                      })()
+
                       return (
                         <button
                           key={entry.Id}
@@ -373,9 +387,16 @@ export default function AppHeader({ pinned, onTogglePin }: Props) {
                               setNotifsOpen(false)
                             }
                           }}
-                          className={`w-full text-left px-3 py-2.5 text-[11.5px] border-b border-white/5 last:border-0 hover:bg-white/4 transition-colors flex items-start gap-2.5 ${isUnread ? 'bg-white/[0.03]' : ''}`}
+                          className={`w-full text-left px-3 py-2.5 text-[11.5px] border-b border-white/5 last:border-0 hover:bg-white/4 transition-colors flex items-start gap-3 ${isUnread ? 'bg-white/[0.03]' : ''}`}
                         >
-                          {isEpisode ? (
+                          {posterUrl ? (
+                            <img
+                              src={posterUrl}
+                              alt=""
+                              className="w-8 aspect-[2/3] rounded object-cover shrink-0 bg-void"
+                              loading="lazy"
+                            />
+                          ) : isEpisode ? (
                             <Tv size={13} className="text-accent shrink-0 mt-0.5" />
                           ) : (
                             <Film size={13} className="text-accent shrink-0 mt-0.5" />