Improve request handling and qBittorrent categories

frontend/app/requests/[id]/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'
@@ -33,6 +34,7 @@ type ReleaseOption = {
   seeders?: number
   leechers?: number
   protocol?: string
+  publishDate?: string
   infoUrl?: string
   downloadUrl?: string
 }
@@ -123,7 +125,7 @@ const friendlyState = (value: string) => {
   const map: Record<string, string> = {
     REQUESTED: 'Waiting for approval',
     APPROVED: 'Approved and queued',
-    NEEDS_ADD: 'Needs adding to the library',
+    NEEDS_ADD: 'Push to Sonarr/Radarr',
     ADDED_TO_ARR: 'Added to the library queue',
     SEARCHING: 'Searching for releases',
     GRABBED: 'Download queued',
@@ -155,7 +157,7 @@ const friendlyTimelineStatus = (service: string, status: string) => {
   }
   if (service === 'Sonarr/Radarr') {
     const map: Record<string, string> = {
-      missing: 'Not added yet',
+      missing: 'Push to Sonarr/Radarr',
       added: 'Added to the library queue',
       searching: 'Searching for releases',
       available: 'Ready to watch',
@@ -250,7 +252,7 @@ export default function RequestTimelinePage({ params }: { params: { id: string }
     }
 
     load()
-  }, [params.id])
+  }, [params.id, router])
 
   if (loading) {
     return (
@@ -274,9 +276,11 @@ export default function RequestTimelinePage({ params }: { params: { id: string }
   const downloadHop = snapshot.timeline.find((hop) => hop.service === 'qBittorrent')
   const downloadState = downloadHop?.details?.summary ?? downloadHop?.status ?? 'Unknown'
   const jellyfinAvailable = Boolean(snapshot.raw?.jellyfin?.available)
+  const arrStageLabel =
+    snapshot.state === 'NEEDS_ADD' ? 'Push to Sonarr/Radarr' : 'Library queue'
   const pipelineSteps = [
     { key: 'Jellyseerr', label: 'Jellyseerr' },
-    { key: 'Sonarr/Radarr', label: 'Library queue' },
+    { key: 'Sonarr/Radarr', label: arrStageLabel },
     { key: 'Prowlarr', label: 'Search' },
     { key: 'qBittorrent', label: 'Download' },
     { key: 'Jellyfin', label: 'Jellyfin' },
@@ -308,11 +312,14 @@ export default function RequestTimelinePage({ params }: { params: { id: string }
       <div className="request-header">
         <div className="request-header-main">
           {resolvedPoster && (
-            <img
+            <Image
               className="request-poster"
               src={resolvedPoster}
               alt={`${snapshot.title} poster`}
-              loading="lazy"
+              width={90}
+              height={135}
+              sizes="90px"
+              unoptimized
             />
           )}
           <div>
@@ -592,6 +599,12 @@ export default function RequestTimelinePage({ params }: { params: { id: string }
                               indexerId: release.indexerId,
                               indexerName: release.indexer,
                               downloadUrl: release.downloadUrl,
+                              title: release.title,
+                              size: release.size,
+                              protocol: release.protocol,
+                              publishDate: release.publishDate,
+                              seeders: release.seeders,
+                              leechers: release.leechers,
                             }),
                           }
                         )