From 129dd0ffcc4747b2d6fed6b73c761792ad253fc0 Mon Sep 17 00:00:00 2001
From: GlitchGal <glitchygal@proton.me>
Date: Wed, 11 Sep 2024 03:56:17 +0200
Subject: [PATCH] ImageDetailPanel Patch Component (#5245)

---
 .../Images/ImageDetails/ImageDetailPanel.tsx  | 232 +++++++++---------
 ui/v2.5/src/docs/en/Manual/UIPluginApi.md     |   1 +
 2 files changed, 119 insertions(+), 114 deletions(-)

diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
index 65cce87de64..a2044fcffe4 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
@@ -6,131 +6,135 @@ import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { sortPerformers } from "src/core/performers";
 import { FormattedMessage, useIntl } from "react-intl";
 import { PhotographerLink } from "src/components/Shared/Link";
+import { PatchComponent } from "../../../patch";
 interface IImageDetailProps {
   image: GQL.ImageDataFragment;
 }
 
-export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
-  const intl = useIntl();
+export const ImageDetailPanel: React.FC<IImageDetailProps> = PatchComponent(
+  "ImageDetailPanel",
+  (props) => {
+    const intl = useIntl();
 
-  function renderDetails() {
-    if (!props.image.details) return;
-    return (
-      <>
-        <h6>
-          <FormattedMessage id="details" />:{" "}
-        </h6>
-        <p className="pre">{props.image.details}</p>
-      </>
-    );
-  }
+    function renderDetails() {
+      if (!props.image.details) return;
+      return (
+        <>
+          <h6>
+            <FormattedMessage id="details" />:{" "}
+          </h6>
+          <p className="pre">{props.image.details}</p>
+        </>
+      );
+    }
 
-  function renderTags() {
-    if (props.image.tags.length === 0) return;
-    const tags = props.image.tags.map((tag) => (
-      <TagLink key={tag.id} tag={tag} linkType="image" />
-    ));
-    return (
-      <>
-        <h6>
-          <FormattedMessage
-            id="countables.tags"
-            values={{ count: props.image.tags.length }}
-          />
-        </h6>
-        {tags}
-      </>
-    );
-  }
+    function renderTags() {
+      if (props.image.tags.length === 0) return;
+      const tags = props.image.tags.map((tag) => (
+        <TagLink key={tag.id} tag={tag} linkType="image" />
+      ));
+      return (
+        <>
+          <h6>
+            <FormattedMessage
+              id="countables.tags"
+              values={{ count: props.image.tags.length }}
+            />
+          </h6>
+          {tags}
+        </>
+      );
+    }
 
-  function renderPerformers() {
-    if (props.image.performers.length === 0) return;
-    const performers = sortPerformers(props.image.performers);
-    const cards = performers.map((performer) => (
-      <PerformerCard
-        key={performer.id}
-        performer={performer}
-        ageFromDate={props.image.date ?? undefined}
-      />
-    ));
+    function renderPerformers() {
+      if (props.image.performers.length === 0) return;
+      const performers = sortPerformers(props.image.performers);
+      const cards = performers.map((performer) => (
+        <PerformerCard
+          key={performer.id}
+          performer={performer}
+          ageFromDate={props.image.date ?? undefined}
+        />
+      ));
 
-    return (
-      <>
-        <h6>
-          <FormattedMessage
-            id="countables.performers"
-            values={{ count: props.image.performers.length }}
-          />
-        </h6>
-        <div className="row justify-content-center image-performers">
-          {cards}
-        </div>
-      </>
-    );
-  }
+      return (
+        <>
+          <h6>
+            <FormattedMessage
+              id="countables.performers"
+              values={{ count: props.image.performers.length }}
+            />
+          </h6>
+          <div className="row justify-content-center image-performers">
+            {cards}
+          </div>
+        </>
+      );
+    }
+
+    function renderGalleries() {
+      if (props.image.galleries.length === 0) return;
+      const galleries = props.image.galleries.map((gallery) => (
+        <GalleryLink key={gallery.id} gallery={gallery} />
+      ));
+      return (
+        <>
+          <h6>
+            <FormattedMessage
+              id="countables.galleries"
+              values={{ count: props.image.galleries.length }}
+            />
+          </h6>
+          {galleries}
+        </>
+      );
+    }
+
+    // filename should use entire row if there is no studio
+    const imageDetailsWidth = props.image.studio ? "col-9" : "col-12";
 
-  function renderGalleries() {
-    if (props.image.galleries.length === 0) return;
-    const galleries = props.image.galleries.map((gallery) => (
-      <GalleryLink key={gallery.id} gallery={gallery} />
-    ));
     return (
       <>
-        <h6>
-          <FormattedMessage
-            id="countables.galleries"
-            values={{ count: props.image.galleries.length }}
-          />
-        </h6>
-        {galleries}
+        <div className="row">
+          <div className={`${imageDetailsWidth} col-12 image-details`}>
+            {renderGalleries()}
+            {
+              <h6>
+                {" "}
+                <FormattedMessage id="created_at" />:{" "}
+                {TextUtils.formatDateTime(intl, props.image.created_at)}{" "}
+              </h6>
+            }
+            {
+              <h6>
+                <FormattedMessage id="updated_at" />:{" "}
+                {TextUtils.formatDateTime(intl, props.image.updated_at)}{" "}
+              </h6>
+            }
+            {props.image.code && (
+              <h6>
+                <FormattedMessage id="scene_code" />: {props.image.code}{" "}
+              </h6>
+            )}
+            {props.image.photographer && (
+              <h6>
+                <FormattedMessage id="photographer" />:{" "}
+                <PhotographerLink
+                  photographer={props.image.photographer}
+                  linkType="image"
+                />
+              </h6>
+            )}
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-12">
+            {renderDetails()}
+            {renderTags()}
+            {renderPerformers()}
+          </div>
+        </div>
       </>
     );
   }
-
-  // filename should use entire row if there is no studio
-  const imageDetailsWidth = props.image.studio ? "col-9" : "col-12";
-
-  return (
-    <>
-      <div className="row">
-        <div className={`${imageDetailsWidth} col-12 image-details`}>
-          {renderGalleries()}
-          {
-            <h6>
-              {" "}
-              <FormattedMessage id="created_at" />:{" "}
-              {TextUtils.formatDateTime(intl, props.image.created_at)}{" "}
-            </h6>
-          }
-          {
-            <h6>
-              <FormattedMessage id="updated_at" />:{" "}
-              {TextUtils.formatDateTime(intl, props.image.updated_at)}{" "}
-            </h6>
-          }
-          {props.image.code && (
-            <h6>
-              <FormattedMessage id="scene_code" />: {props.image.code}{" "}
-            </h6>
-          )}
-          {props.image.photographer && (
-            <h6>
-              <FormattedMessage id="photographer" />:{" "}
-              <PhotographerLink
-                photographer={props.image.photographer}
-                linkType="image"
-              />
-            </h6>
-          )}
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-12">
-          {renderDetails()}
-          {renderTags()}
-          {renderPerformers()}
-        </div>
-      </div>
-    </>
-  );
-};
+);
diff --git a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
index 1357e86cc28..7d267d1b1e9 100644
--- a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
+++ b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
@@ -151,6 +151,7 @@ Returns `void`.
 - `GallerySelect`
 - `GallerySelect.sort`
 - `Icon`
+- `ImageDetailPanel`
 - `ModalSetting`
 - `MovieIDSelect`
 - `MovieSelect`