Performer tags (#1132)

* Add scraping support for performer tags
* Add performer count to tag cards
* Refactor sqlite test setup
* Add performer tag filtering in gallery and image
* Add bulk update performer
* Add Performers tab to tag page
* Add count filters and sort bys for tags
* Move scene count to icon in performer card #1148

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -1,9 +1,17 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { FormattedNumber, FormattedPlural, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { NavUtils, TextUtils } from "src/utils";
-import { BasicCard, CountryFlag, TruncatedText } from "src/components/Shared";
+import {
+  BasicCard,
+  CountryFlag,
+  HoverPopover,
+  Icon,
+  TagLink,
+  TruncatedText,
+} from "src/components/Shared";
+import { Button, ButtonGroup } from "react-bootstrap";
 
 interface IPerformerCardProps {
   performer: GQL.PerformerDataFragment;
@@ -34,6 +42,50 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
     );
   }
 
+  function maybeRenderScenesPopoverButton() {
+    if (!performer.scene_count) return;
+
+    return (
+      <Link to={NavUtils.makePerformerScenesUrl(performer)}>
+        <Button className="minimal">
+          <Icon icon="play-circle" />
+          <span>{performer.scene_count}</span>
+        </Button>
+      </Link>
+    );
+  }
+
+  function maybeRenderTagPopoverButton() {
+    if (performer.tags.length <= 0) return;
+
+    const popoverContent = performer.tags.map((tag) => (
+      <TagLink key={tag.id} tagType="performer" tag={tag} />
+    ));
+
+    return (
+      <HoverPopover placement="bottom" content={popoverContent}>
+        <Button className="minimal">
+          <Icon icon="tag" />
+          <span>{performer.tags.length}</span>
+        </Button>
+      </HoverPopover>
+    );
+  }
+
+  function maybeRenderPopoverButtonGroup() {
+    if (performer.scene_count || performer.tags.length > 0) {
+      return (
+        <>
+          <hr />
+          <ButtonGroup className="card-popovers">
+            {maybeRenderScenesPopoverButton()}
+            {maybeRenderTagPopoverButton()}
+          </ButtonGroup>
+        </>
+      );
+    }
+  }
+
   return (
     <BasicCard
       className="performer-card"
@@ -57,19 +109,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
           <Link to={NavUtils.makePerformersCountryUrl(performer)}>
             <CountryFlag country={performer.country} />
           </Link>
-          <div className="text-muted">
-            Stars in&nbsp;
-            <FormattedNumber value={performer.scene_count ?? 0} />
-            &nbsp;
-            <Link to={NavUtils.makePerformerScenesUrl(performer)}>
-              <FormattedPlural
-                value={performer.scene_count ?? 0}
-                one="scene"
-                other="scenes"
-              />
-            </Link>
-            .
-          </div>
+          {maybeRenderPopoverButtonGroup()}
         </>
       }
       selected={selected}