From 1662521d40f558d19360a078ad881bc8cbbbeb27 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Wed, 17 Jul 2024 17:41:40 +0300
Subject: [PATCH] Fixed: Display tag list when sort by tags on series Posters

---
 .../Series/Index/Posters/SeriesIndexPoster.tsx | 18 ++++++++++--------
 .../Index/Posters/SeriesIndexPosterInfo.css    |  8 ++++++++
 .../Posters/SeriesIndexPosterInfo.css.d.ts     |  2 ++
 .../Index/Posters/SeriesIndexPosterInfo.tsx    | 15 +++++++++++++++
 .../Index/Posters/SeriesIndexPosters.tsx       |  5 +++++
 5 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
index 474a226d9..a5d5d4978 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
@@ -211,14 +211,6 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         </div>
       ) : null}
 
-      {showTags && tags.length ? (
-        <div className={styles.tags}>
-          <div className={styles.tagsList}>
-            <TagListConnector tags={tags} />
-          </div>
-        </div>
-      ) : null}
-
       {nextAiring ? (
         <div
           className={styles.nextAiring}
@@ -238,6 +230,14 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         </div>
       ) : null}
 
+      {showTags && tags.length ? (
+        <div className={styles.tags}>
+          <div className={styles.tagsList}>
+            <TagListConnector tags={tags} />
+          </div>
+        </div>
+      ) : null}
+
       <SeriesIndexPosterInfo
         originalLanguage={originalLanguage}
         network={network}
@@ -253,6 +253,8 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         shortDateFormat={shortDateFormat}
         longDateFormat={longDateFormat}
         timeFormat={timeFormat}
+        tags={tags}
+        showTags={showTags}
       />
 
       <EditSeriesModalConnector
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css
index 17741773d..1163d7549 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css
@@ -3,3 +3,11 @@
   text-align: center;
   font-size: $smallFontSize;
 }
+
+.tags {
+  composes: tags from '~./SeriesIndexPoster.css';
+}
+
+.tagsList {
+  composes: tagsList from '~./SeriesIndexPoster.css';
+}
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css.d.ts b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css.d.ts
index 062365d36..54504816d 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css.d.ts
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css.d.ts
@@ -2,6 +2,8 @@
 // Please do not change this file!
 interface CssExports {
   'info': string;
+  'tags': string;
+  'tagsList': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
index 9a4265324..559ee9532 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import TagListConnector from 'Components/TagListConnector';
 import Language from 'Language/Language';
 import QualityProfile from 'typings/QualityProfile';
 import formatDateTime from 'Utilities/Date/formatDateTime';
@@ -17,11 +18,13 @@ interface SeriesIndexPosterInfoProps {
   seasonCount: number;
   path: string;
   sizeOnDisk?: number;
+  tags: number[];
   sortKey: string;
   showRelativeDates: boolean;
   shortDateFormat: string;
   longDateFormat: string;
   timeFormat: string;
+  showTags: boolean;
 }
 
 function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
@@ -35,11 +38,13 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     seasonCount,
     path,
     sizeOnDisk,
+    tags,
     sortKey,
     showRelativeDates,
     shortDateFormat,
     longDateFormat,
     timeFormat,
+    showTags,
   } = props;
 
   if (sortKey === 'network' && network) {
@@ -122,6 +127,16 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     return <div className={styles.info}>{seasons}</div>;
   }
 
+  if (!showTags && sortKey === 'tags' && tags.length) {
+    return (
+      <div className={styles.tags}>
+        <div className={styles.tagsList}>
+          <TagListConnector tags={tags} />
+        </div>
+      </div>
+    );
+  }
+
   if (sortKey === 'path') {
     return (
       <div className={styles.info} title={translate('Path')}>
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx
index 32b238a6c..055685216 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx
@@ -183,6 +183,11 @@ export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
           heights.push(19);
         }
         break;
+      case 'tags':
+        if (!showTags) {
+          heights.push(21);
+        }
+        break;
       default:
       // No need to add a height of 0
     }