New: Sort by tags on movie index

frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx

@@ -189,6 +189,15 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
         >
           {translate('OriginalLanguage')}
         </SortMenuItem>
+
+        <SortMenuItem
+          name="tags"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Tags')}
+        </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -82,7 +82,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     certification,
     originalTitle,
     originalLanguage,
-    tags,
+    tags = [],
   } = movie;
 
   const { sizeOnDisk = 0 } = statistics;
@@ -317,9 +317,11 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         certification={certification}
         originalTitle={originalTitle}
         originalLanguage={originalLanguage}
+        tags={tags}
         showTmdbRating={showTmdbRating}
         showImdbRating={showImdbRating}
         showRottenTomatoesRating={showRottenTomatoesRating}
+        showTags={showTags}
       />
 
       <EditMovieModalConnector

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css

@@ -9,3 +9,11 @@
 
   composes: info;
 }
+
+.tags {
+  composes: tags from '~./MovieIndexPoster.css';
+}
+
+.tagsList {
+  composes: tagsList from '~./MovieIndexPoster.css';
+}

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css.d.ts

@@ -2,6 +2,8 @@
 // Please do not change this file!
 interface CssExports {
   'info': string;
+  'tags': string;
+  'tagsList': string;
   'title': string;
 }
 export const cssExports: CssExports;

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
+import TagListConnector from 'Components/TagListConnector';
 import TmdbRating from 'Components/TmdbRating';
 import { icons } from 'Helpers/Props';
 import Language from 'Language/Language';
@@ -28,6 +29,7 @@ interface MovieIndexPosterInfoProps {
   originalTitle: string;
   originalLanguage: Language;
   sizeOnDisk?: number;
+  tags: number[];
   sortKey: string;
   showRelativeDates: boolean;
   showCinemaRelease: boolean;
@@ -38,6 +40,7 @@ interface MovieIndexPosterInfoProps {
   showTmdbRating: boolean;
   showImdbRating: boolean;
   showRottenTomatoesRating: boolean;
+  showTags: boolean;
 }
 
 function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
@@ -56,6 +59,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     originalTitle,
     originalLanguage,
     sizeOnDisk,
+    tags = [],
     sortKey,
     showRelativeDates,
     showCinemaRelease,
@@ -66,6 +70,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     showTmdbRating,
     showImdbRating,
     showRottenTomatoesRating,
+    showTags,
   } = props;
 
   if (sortKey === 'studio' && studio) {
@@ -199,6 +204,16 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
+  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')}>

frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx

@@ -237,6 +237,11 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
           heights.push(19);
         }
         break;
+      case 'tags':
+        if (!showTags) {
+          heights.push(21);
+        }
+        break;
       default:
       // No need to add a height of 0
     }