fix: handle search results with collections (#3393)

* feat: handle search collection

* Update server/utils/typeHelpers.ts

Co-authored-by: Danshil Kokil Mungur <danshil.mungur@gmail.com>

* fix: modified title card to show collection instead of movies

---------

Co-authored-by: Danshil Kokil Mungur <danshil.mungur@gmail.com>
Co-authored-by: Brandon <cohbrandon@gmail.com>

src/components/Common/ListView/index.tsx

@@ -5,6 +5,7 @@ import useVerticalScroll from '@app/hooks/useVerticalScroll';
 import globalMessages from '@app/i18n/globalMessages';
 import type { WatchlistItem } from '@server/interfaces/api/discoverInterfaces';
 import type {
+  CollectionResult,
   MovieResult,
   PersonResult,
   TvResult,
@@ -12,7 +13,7 @@ import type {
 import { useIntl } from 'react-intl';
 
 type ListViewProps = {
-  items?: (TvResult | MovieResult | PersonResult)[];
+  items?: (TvResult | MovieResult | PersonResult | CollectionResult)[];
   plexItems?: WatchlistItem[];
   isEmpty?: boolean;
   isLoading?: boolean;
@@ -90,6 +91,18 @@ const ListView = ({
                 />
               );
               break;
+            case 'collection':
+              titleCard = (
+                <TitleCard
+                  id={title.id}
+                  image={title.posterPath}
+                  summary={title.overview}
+                  title={title.title}
+                  mediaType={title.mediaType}
+                  canExpand
+                />
+              );
+              break;
             case 'person':
               titleCard = (
                 <PersonCard

src/components/TitleCard/index.tsx

@@ -23,7 +23,7 @@ interface TitleCardProps {
   summary?: string;
   year?: string;
   title: string;
-  userScore: number;
+  userScore?: number;
   mediaType: MediaType;
   status?: MediaStatus;
   canExpand?: boolean;
@@ -73,7 +73,9 @@ const TitleCard = ({
   const showRequestButton = hasPermission(
     [
       Permission.REQUEST,
-      mediaType === 'movie' ? Permission.REQUEST_MOVIE : Permission.REQUEST_TV,
+      mediaType === 'movie' || mediaType === 'collection'
+        ? Permission.REQUEST_MOVIE
+        : Permission.REQUEST_TV,
     ],
     { type: 'or' }
   );
@@ -86,7 +88,13 @@ const TitleCard = ({
       <RequestModal
         tmdbId={id}
         show={showRequestModal}
-        type={mediaType === 'movie' ? 'movie' : 'tv'}
+        type={
+          mediaType === 'movie'
+            ? 'movie'
+            : mediaType === 'collection'
+            ? 'collection'
+            : 'tv'
+        }
         onComplete={requestComplete}
         onUpdating={requestUpdating}
         onCancel={closeModal}
@@ -130,7 +138,7 @@ const TitleCard = ({
           <div className="absolute left-0 right-0 flex items-center justify-between p-2">
             <div
               className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow-md ${
-                mediaType === 'movie'
+                mediaType === 'movie' || mediaType === 'collection'
                   ? 'border-blue-500 bg-blue-600'
                   : 'border-purple-600 bg-purple-600'
               }`}
@@ -138,6 +146,8 @@ const TitleCard = ({
               <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
                 {mediaType === 'movie'
                   ? intl.formatMessage(globalMessages.movie)
+                  : mediaType === 'collection'
+                  ? intl.formatMessage(globalMessages.collection)
                   : intl.formatMessage(globalMessages.tvshow)}
               </div>
             </div>
@@ -177,7 +187,15 @@ const TitleCard = ({
             leaveTo="opacity-0"
           >
             <div className="absolute inset-0 overflow-hidden rounded-xl">
-              <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
+              <Link
+                href={
+                  mediaType === 'movie'
+                    ? `/movie/${id}`
+                    : mediaType === 'collection'
+                    ? `/collection/${id}`
+                    : `/tv/${id}`
+                }
+              >
                 <a
                   className="absolute inset-0 h-full w-full cursor-pointer overflow-hidden text-left"
                   style={{

src/i18n/globalMessages.ts

@@ -16,6 +16,7 @@ const globalMessages = defineMessages({
   approved: 'Approved',
   movie: 'Movie',
   movies: 'Movies',
+  collection: 'Collection',
   tvshow: 'Series',
   tvshows: 'Series',
   cancel: 'Cancel',