From 1cc983fb5ba10a16351b0d55a484d19c8ee12acf Mon Sep 17 00:00:00 2001
From: melon-scientist <149206247+melon-scientist@users.noreply.github.com>
Date: Sun, 9 Nov 2025 17:33:15 -0700
Subject: [PATCH] Add O-Count to performer page (#6171)

---
 .../Performers/PerformerDetails/Performer.tsx | 23 ++++++++++++++-----
 ui/v2.5/src/components/Performers/styles.scss | 21 +++++++++++++++++
 .../components/Shared/Rating/RatingStars.tsx  | 13 ++++-------
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
index ab584e90d..0a1535068 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -42,6 +42,7 @@ import {
 import { DetailTitle } from "src/components/Shared/DetailsPage/DetailTitle";
 import { ExpandCollapseButton } from "src/components/Shared/CollapseButton";
 import { FavoriteIcon } from "src/components/Shared/FavoriteIcon";
+import { SweatDrops } from "src/components/Shared/SweatDrops";
 import { AliasList } from "src/components/Shared/DetailsPage/AliasList";
 import { HeaderImage } from "src/components/Shared/DetailsPage/HeaderImage";
 import { LightboxLink } from "src/hooks/Lightbox/LightboxLink";
@@ -423,12 +424,22 @@ const PerformerPage: React.FC<IProps> = PatchComponent(
                   </span>
                 </DetailTitle>
                 <AliasList aliases={performer.alias_list} />
-                <RatingSystem
-                  value={performer.rating100}
-                  onSetRating={(value) => setRating(value)}
-                  clickToRate
-                  withoutContext
-                />
+                <div className="quality-group">
+                  <RatingSystem
+                    value={performer.rating100}
+                    onSetRating={(value) => setRating(value)}
+                    clickToRate
+                    withoutContext
+                  />
+                  {!!performer.o_counter && (
+                    <span className="o-counter">
+                      <span className="fa-icon">
+                        <SweatDrops />
+                      </span>
+                      <span>{performer.o_counter}</span>
+                    </span>
+                  )}
+                </div>
                 {!isEditing && (
                   <PerformerDetailsPanel
                     performer={performer}
diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
index f76816f05..3769bc44b 100644
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -35,12 +35,33 @@
     .rating-number .form-control {
       width: inherit;
     }
+
+    // The following min-width declarations prevent
+    // the performer's O-Count from moving around
+    // when hovering over rating stars
+    .rating-stars-precision-full .star-rating-number {
+      min-width: 0.75rem;
+    }
+
+    .rating-stars-precision-half .star-rating-number,
+    .rating-stars-precision-tenth .star-rating-number {
+      min-width: 1.45rem;
+    }
+
+    .rating-stars-precision-quarter .star-rating-number {
+      min-width: 2rem;
+    }
   }
 
   .alias {
     font-weight: bold;
   }
 
+  .quality-group {
+    display: inline-flex;
+    margin-top: 0.25rem;
+  }
+
   // the detail element ids are the same as field type name
   // which don't follow the correct convention
   /* stylelint-disable selector-class-pattern */
diff --git a/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx b/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx
index 5339044a1..f83c556fc 100644
--- a/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx
+++ b/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx
@@ -228,21 +228,16 @@ export const RatingStars = PatchComponent(
       );
     };
 
-    const maybeRenderStarRatingNumber = () => {
+    const maybeGetStarRatingNumber = () => {
       const ratingFraction = getCurrentSelectedRating();
       if (
         !ratingFraction ||
         (ratingFraction.rating == 0 && ratingFraction.fraction == 0)
       ) {
-        return;
+        return "";
       }
 
-      return (
-        <span className="star-rating-number">
-          {ratingFraction.rating + ratingFraction.fraction}
-          {suffix}
-        </span>
-      );
+      return ratingFraction.rating + ratingFraction.fraction + suffix;
     };
 
     const precisionClassName = `rating-stars-precision-${props.precision}`;
@@ -252,7 +247,7 @@ export const RatingStars = PatchComponent(
         {Array.from(Array(max)).map((value, index) =>
           renderRatingButton(index + 1)
         )}
-        {maybeRenderStarRatingNumber()}
+        <span className="star-rating-number">{maybeGetStarRatingNumber()}</span>
       </div>
     );
   }