Add tag recommendation row (#2673)

ui/v2.5/src/components/FrontPage/Control.tsx

@@ -14,6 +14,7 @@ import { MovieRecommendationRow } from "../Movies/MovieRecommendationRow";
 import { PerformerRecommendationRow } from "../Performers/PerformerRecommendationRow";
 import { SceneRecommendationRow } from "../Scenes/SceneRecommendationRow";
 import { StudioRecommendationRow } from "../Studios/StudioRecommendationRow";
+import { TagRecommendationRow } from "../Tags/TagRecommendationRow";
 
 interface IFilter {
   mode: GQL.FilterMode;
@@ -77,6 +78,14 @@ const RecommendationRow: React.FC<IFilter> = ({ mode, filter, header }) => {
           header={header}
         />
       );
+    case GQL.FilterMode.Tags:
+      return (
+        <TagRecommendationRow
+          isTouch={isTouch}
+          filter={filter}
+          header={header}
+        />
+      );
     default:
       return <></>;
   }

ui/v2.5/src/components/FrontPage/styles.scss

@@ -72,7 +72,8 @@
 .recommendations-container .studio-card hr,
 .recommendations-container .movie-card hr,
 .recommendations-container .gallery-card hr,
-.recommendations-container .image-card hr {
+.recommendations-container .image-card hr,
+.recommendations-container .tag-card hr {
   margin-top: auto;
 }
 
@@ -163,6 +164,18 @@
   }
 }
 
+.tag-skeleton {
+  max-width: 240px;
+  min-height: 365px;
+  min-width: 240px;
+
+  @media (max-width: 576px) {
+    max-width: 16rem;
+    min-height: 26rem;
+    min-width: 16rem;
+  }
+}
+
 /* Slider */
 .slick-slider {
   box-sizing: border-box;

ui/v2.5/src/components/Tags/TagRecommendationRow.tsx

@@ -0,0 +1,52 @@
+import React, { FunctionComponent } from "react";
+import { useFindTags } from "src/core/StashService";
+import Slider from "react-slick";
+import { TagCard } from "./TagCard";
+import { ListFilterModel } from "src/models/list-filter/filter";
+import { getSlickSliderSettings } from "src/core/recommendations";
+import { RecommendationRow } from "../FrontPage/RecommendationRow";
+import { FormattedMessage } from "react-intl";
+
+interface IProps {
+  isTouch: boolean;
+  filter: ListFilterModel;
+  header: String;
+}
+
+export const TagRecommendationRow: FunctionComponent<IProps> = (
+  props: IProps
+) => {
+  const result = useFindTags(props.filter);
+  const cardCount = result.data?.findTags.count;
+
+  if (!result.loading && !cardCount) {
+    return null;
+  }
+
+  return (
+    <RecommendationRow
+      className="tag-recommendations"
+      header={props.header}
+      link={
+        <a href={`/tags?${props.filter.makeQueryParameters()}`}>
+          <FormattedMessage id="view_all" />
+        </a>
+      }
+    >
+      <Slider
+        {...getSlickSliderSettings(
+          cardCount ? cardCount : props.filter.itemsPerPage,
+          props.isTouch
+        )}
+      >
+        {result.loading
+          ? [...Array(props.filter.itemsPerPage)].map((i) => (
+              <div key={i} className="tag-skeleton skeleton-card"></div>
+            ))
+          : result.data?.findTags.tags.map((p) => (
+              <TagCard key={p.id} tag={p} zoomIndex={0} />
+            ))}
+      </Slider>
+    </RecommendationRow>
+  );
+};