From bea943adf8ee3544b8d82dce56dd596f3f37d48d Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Fri, 13 Dec 2024 19:16:44 +0200
Subject: [PATCH] New: Tooltip with extra genres on search and collections

---
 .../src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css   | 4 ++++
 .../src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js    | 7 +++----
 frontend/src/Collection/CollectionItemConnector.js         | 2 +-
 frontend/src/Collection/Overview/CollectionOverview.js     | 7 +++----
 frontend/src/Movie/Details/MovieDetails.js                 | 2 +-
 frontend/src/Movie/{Details => }/MovieGenres.tsx           | 0
 6 files changed, 12 insertions(+), 10 deletions(-)
 rename frontend/src/Movie/{Details => }/MovieGenres.tsx (100%)

diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css
index 63edbd447..7884dfd54 100644
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css
@@ -91,6 +91,10 @@
   margin-left: 5px;
 }
 
+.genres {
+  pointer-events: all;
+}
+
 .links {
   margin-left: 5px;
   pointer-events: all;
diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
index a17a9b9f6..5a97ad0eb 100644
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
@@ -10,6 +10,7 @@ import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import MovieStatusLabel from 'Movie/Details/MovieStatusLabel';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
+import MovieGenres from 'Movie/MovieGenres';
 import MoviePoster from 'Movie/MoviePoster';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import translate from 'Utilities/String/translate';
@@ -249,9 +250,7 @@ class AddNewMovieSearchResult extends Component {
                       name={icons.GENRE}
                       size={13}
                     />
-                    <span className={styles.genres}>
-                      {genres.slice(0, 3).join(', ')}
-                    </span>
+                    <MovieGenres className={styles.genres} genres={genres} />
                   </Label> :
                   null
               }
@@ -280,7 +279,7 @@ class AddNewMovieSearchResult extends Component {
                 }
                 canFlip={true}
                 kind={kinds.INVERSE}
-                position={tooltipPositions.BOTTOM}
+                position={tooltipPositions.TOP}
               />
 
               {
diff --git a/frontend/src/Collection/CollectionItemConnector.js b/frontend/src/Collection/CollectionItemConnector.js
index 64c8ca40a..715982a9d 100644
--- a/frontend/src/Collection/CollectionItemConnector.js
+++ b/frontend/src/Collection/CollectionItemConnector.js
@@ -22,7 +22,7 @@ function createMapStateToProps() {
       return {
         ...collection,
         movies: [...collection.movies].sort((a, b) => b.year - a.year),
-        genres: Array.from(new Set(allGenres)).slice(0, 3)
+        genres: Array.from(new Set(allGenres))
       };
     }
   );
diff --git a/frontend/src/Collection/Overview/CollectionOverview.js b/frontend/src/Collection/Overview/CollectionOverview.js
index cdba58080..18b1f7004 100644
--- a/frontend/src/Collection/Overview/CollectionOverview.js
+++ b/frontend/src/Collection/Overview/CollectionOverview.js
@@ -10,6 +10,7 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import { icons, sizes } from 'Helpers/Props';
+import MovieGenres from 'Movie/MovieGenres';
 import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
 import dimensions from 'Styles/Variables/dimensions';
 import fonts from 'Styles/Variables/fonts';
@@ -242,12 +243,10 @@ class CollectionOverview extends Component {
                         size={sizes.MEDIUM}
                       >
                         <Icon
-                          name={icons.PROFILE}
+                          name={icons.GENRE}
                           size={13}
                         />
-                        <span className={styles.genres}>
-                          {genres.join(', ')}
-                        </span>
+                        <MovieGenres className={styles.genres} genres={genres} />
                       </Label>
                   }
 
diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index ecae574dd..4ba7dda04 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -28,6 +28,7 @@ import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import getMovieStatusDetails from 'Movie/getMovieStatusDetails';
 import MovieHistoryModal from 'Movie/History/MovieHistoryModal';
 import MovieCollectionLabelConnector from 'Movie/MovieCollectionLabelConnector';
+import MovieGenres from 'Movie/MovieGenres';
 import MoviePoster from 'Movie/MoviePoster';
 import MovieInteractiveSearchModal from 'Movie/Search/MovieInteractiveSearchModal';
 import MovieFileEditorTable from 'MovieFile/Editor/MovieFileEditorTable';
@@ -42,7 +43,6 @@ import translate from 'Utilities/String/translate';
 import MovieCastPosters from './Credits/Cast/MovieCastPosters';
 import MovieCrewPosters from './Credits/Crew/MovieCrewPosters';
 import MovieDetailsLinks from './MovieDetailsLinks';
-import MovieGenres from './MovieGenres';
 import MovieReleaseDates from './MovieReleaseDates';
 import MovieStatusLabel from './MovieStatusLabel';
 import MovieTagsConnector from './MovieTagsConnector';
diff --git a/frontend/src/Movie/Details/MovieGenres.tsx b/frontend/src/Movie/MovieGenres.tsx
similarity index 100%
rename from frontend/src/Movie/Details/MovieGenres.tsx
rename to frontend/src/Movie/MovieGenres.tsx