add birthdate to performer select and restyle (#5076)

ui/v2.5/graphql/data/performer-slim.graphql

@@ -39,4 +39,6 @@ fragment SelectPerformerData on Performer {
   disambiguation
   alias_list
   image_path
+  birthdate
+  death_date
 }

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

@@ -28,6 +28,8 @@ import { useCompare } from "src/hooks/state";
 import { Link } from "react-router-dom";
 import { sortByRelevance } from "src/utils/query";
 import { PatchComponent, PatchFunction } from "src/patch";
+import { TruncatedText } from "../Shared/TruncatedText";
+import TextUtils from "src/utils/text";
 
 export type SelectObject = {
   id: string;
@@ -37,7 +39,13 @@ export type SelectObject = {
 
 export type Performer = Pick<
   GQL.Performer,
-  "id" | "name" | "alias_list" | "disambiguation" | "image_path"
+  | "id"
+  | "name"
+  | "alias_list"
+  | "disambiguation"
+  | "image_path"
+  | "birthdate"
+  | "death_date"
 >;
 type Option = SelectOption<Performer>;
 
@@ -112,7 +120,8 @@ const _PerformerSelect: React.FC<
     thisOptionProps = {
       ...optionProps,
       children: (
-        <span className="react-select-image-option performer-select-option">
+        <span className="performer-select-option">
+          <span className="performer-select-row">
             <Link
               to={`/performers/${object.id}`}
               target="_blank"
@@ -124,11 +133,36 @@ const _PerformerSelect: React.FC<
                 loading="lazy"
               />
             </Link>
-          <span>{name}</span>
+            <span className="performer-select-details">
-          {object.disambiguation && (
+              <TruncatedText
-            <span className="performer-disambiguation">{` (${object.disambiguation})`}</span>
+                className="performer-select-name"
+                text={
+                  <span>
+                    {name}
+                    {alias && (
+                      <span className="performer-select-alias">{` (${alias})`}</span>
                     )}
-          {alias && <span className="alias">{` (${alias})`}</span>}
+                  </span>
+                }
+                lineCount={1}
+              />
+
+              {object.disambiguation && (
+                <span className="performer-select-disambiguation">
+                  {object.disambiguation}
+                </span>
+              )}
+
+              {object.birthdate && (
+                <span className="performer-select-birthdate">{`${
+                  object.birthdate
+                } (${TextUtils.age(
+                  object.birthdate,
+                  object.death_date
+                )})`}</span>
+              )}
+            </span>
+          </span>
         </span>
       ),
     };

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

@@ -198,25 +198,47 @@
   }
 }
 
-.performer-select {
+.performer-select-option {
-  .performer-disambiguation {
+  .performer-select-row {
-    white-space: pre;
+    align-items: center;
-  }
+    display: flex;
-
+    width: 100%;
-  .performer-select-value .performer-disambiguation {
-    color: initial;
-  }
-
-  .alias {
-    font-weight: bold;
-    white-space: pre;
-  }
 
     .performer-select-image {
-    margin-right: 0.5em;
+      margin-right: 0.4em;
       max-height: 50px;
       max-width: 50px;
     }
+
+    .performer-select-details {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      max-height: 4.1rem;
+      overflow: hidden;
+
+      .performer-select-name {
+        flex-shrink: 0;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        .performer-select-alias {
+          font-size: 0.8rem;
+          font-weight: bold;
+        }
+      }
+
+      .performer-select-disambiguation,
+      .performer-select-birthdate {
+        color: $text-muted;
+        flex-shrink: 0;
+        font-size: 0.9rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
 }
 
 .edit-performers-dialog .modal-body {