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,23 +120,49 @@ const _PerformerSelect: React.FC<
     thisOptionProps = {
       ...optionProps,
       children: (
-        <span className="react-select-image-option performer-select-option">
+        <span className="performer-select-option">
-          <Link
+          <span className="performer-select-row">
-            to={`/performers/${object.id}`}
+            <Link
-            target="_blank"
+              to={`/performers/${object.id}`}
-            className="performer-select-image-link"
+              target="_blank"
-          >
+              className="performer-select-image-link"
-            <img
+            >
-              className="performer-select-image"
+              <img
-              src={object.image_path ?? ""}
+                className="performer-select-image"
-              loading="lazy"
+                src={object.image_path ?? ""}
-            />
+                loading="lazy"
-          </Link>
+              />
-          <span>{name}</span>
+            </Link>
-          {object.disambiguation && (
+            <span className="performer-select-details">
-            <span className="performer-disambiguation">{` (${object.disambiguation})`}</span>
+              <TruncatedText
-          )}
+                className="performer-select-name"
-          {alias && <span className="alias">{` (${alias})`}</span>}
+                text={
+                  <span>
+                    {name}
+                    {alias && (
+                      <span className="performer-select-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,24 +198,46 @@
   }
 }
 
-.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 {
+    .performer-select-image {
-    color: initial;
+      margin-right: 0.4em;
-  }
+      max-height: 50px;
+      max-width: 50px;
+    }
 
-  .alias {
+    .performer-select-details {
-    font-weight: bold;
+      display: flex;
-    white-space: pre;
+      flex-direction: column;
-  }
+      justify-content: flex-start;
+      max-height: 4.1rem;
+      overflow: hidden;
 
-  .performer-select-image {
+      .performer-select-name {
-    margin-right: 0.5em;
+        flex-shrink: 0;
-    max-height: 50px;
+        white-space: pre-wrap;
-    max-width: 50px;
+        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;
+      }
+    }
   }
 }