From b4f9c5e510c36c0614fc01b5a345f48b6fbbfe5b Mon Sep 17 00:00:00 2001
From: Herpes3000 <61895715+randemgame@users.noreply.github.com>
Date: Sat, 16 Nov 2024 22:05:07 +0200
Subject: [PATCH] Remove unnecessary code and try event handling instead

Add JavaScript Key Event Handling: Capture the Enter key press within the title input field to insert a newline character.
---
 .../components/Scenes/SceneDetails/Scene.tsx  | 11 +--------
 .../Scenes/SceneDetails/SceneEditPanel.scss   |  0
 ui/v2.5/src/components/Scenes/styles.scss     | 16 +++++--------
 .../components/Shared/GridCard/GridCard.tsx   | 12 +---------
 .../components/Shared/GridCard/styles.scss    | 10 --------
 .../src/components/Shared/TitleDisplay.tsx    | 24 -------------------
 ui/v2.5/src/utils/form.tsx                    |  6 +----
 7 files changed, 9 insertions(+), 70 deletions(-)
 create mode 100644 ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.scss
 delete mode 100644 ui/v2.5/src/components/Shared/TitleDisplay.tsx

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index ca9758820..4a0c67ff1 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -50,7 +50,6 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
 import { lazyComponent } from "src/utils/lazyComponent";
 import cx from "classnames";
 import { TruncatedText } from "src/components/Shared/TruncatedText";
-import { TitleDisplay } from "src/components/Shared/TitleDisplay";
 
 const SubmitStashBoxDraft = lazyComponent(
   () => import("src/components/Dialogs/SubmitDraft")
@@ -585,15 +584,7 @@ const ScenePage: React.FC<IProps> = ({
               </h1>
             )}
             <h3 className={cx("scene-header", { "no-studio": !scene.studio })}>
-              <TruncatedText
-                lineCount={2}
-                text={
-                  <TitleDisplay
-                    text={String(title)}
-                    className="title-display"
-                  />
-                }
-              />
+              <TruncatedText lineCount={2} text={title} />
             </h3>
           </div>
 
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.scss b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index 792335d86..cd9f6fc79 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -23,6 +23,12 @@
   padding: 0.5rem 1rem 0 1rem;
 }
 
+input[type="text"] {
+  white-space: pre-wrap;
+  height: auto;
+  overflow-y: hidden;
+}
+
 .performer-tag-container,
 .group-tag-container {
   display: inline-block;
@@ -899,13 +905,3 @@ input[type="range"].blue-slider {
     word-break: break-all;
   }
 }
-
-.title-display {
-  width: 100%;
-
-  br {
-    content: "";
-    display: block;
-    margin: 2px 0;
-  }
-}
diff --git a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
index e1901a0fb..db35f83f9 100644
--- a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
+++ b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
@@ -13,7 +13,6 @@ import useResizeObserver from "@react-hook/resize-observer";
 import { Icon } from "../Icon";
 import { faGripLines } from "@fortawesome/free-solid-svg-icons";
 import { DragSide, useDragMoveSelect } from "./dragMoveSelect";
-import { TitleDisplay } from "src/components/Shared/TitleDisplay";
 
 interface ICardProps {
   className?: string;
@@ -229,16 +228,7 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
         <Link to={props.url} onClick={handleImageClick}>
           <h5 className="card-section-title flex-aligned">
             {props.pretitleIcon}
-            <TruncatedText
-              text={
-                typeof props.title === "string" ? (
-                  <TitleDisplay text={props.title} className="title-display" />
-                ) : (
-                  props.title
-                )
-              }
-              lineCount={2}
-            />
+            <TruncatedText text={props.title} lineCount={2} />
           </h5>
         </Link>
         {props.details}
diff --git a/ui/v2.5/src/components/Shared/GridCard/styles.scss b/ui/v2.5/src/components/Shared/GridCard/styles.scss
index 47789da3d..ece1f280a 100644
--- a/ui/v2.5/src/components/Shared/GridCard/styles.scss
+++ b/ui/v2.5/src/components/Shared/GridCard/styles.scss
@@ -82,13 +82,3 @@
 .card-drag-handle {
   filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
 }
-
-.title-display {
-  width: 100%;
-
-  br {
-    content: "";
-    display: block;
-    margin: 2px 0;
-  }
-}
diff --git a/ui/v2.5/src/components/Shared/TitleDisplay.tsx b/ui/v2.5/src/components/Shared/TitleDisplay.tsx
deleted file mode 100644
index 1f60b2a3a..000000000
--- a/ui/v2.5/src/components/Shared/TitleDisplay.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-
-interface ITitleDisplayProps {
-  text: string;
-  className?: string;
-}
-
-export const TitleDisplay: React.FC<ITitleDisplayProps> = ({
-  text,
-  className,
-}) => {
-  if (!text) return null;
-
-  return (
-    <div className={className}>
-      {text.split("\n").map((line, i) => (
-        <React.Fragment key={i}>
-          {line}
-          {i < text.split("\n").length - 1 && <br />}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-};
diff --git a/ui/v2.5/src/utils/form.tsx b/ui/v2.5/src/utils/form.tsx
index 316b1f328..f518d5700 100644
--- a/ui/v2.5/src/utils/form.tsx
+++ b/ui/v2.5/src/utils/form.tsx
@@ -189,11 +189,7 @@ export function formikUtils<V extends FormikValues>(
     props?: IProps
   ) {
     const title = intl.formatMessage({ id: messageID });
-    const control = renderFormControl(
-      field,
-      field === "title" ? "textarea" : type,
-      title
-    );
+    const control = renderFormControl(field, type, title);
 
     return renderField(field, title, control, props);
   }