Details redesign tweaks and refactoring (#3995)

* Move loadStickyHeader to src/hooks
* intl stashIDs
* Scroll to top on component mount
* Add id to gallery cover image and tweak merge functions
* Add useTitleProps hook
* Also scroll to top on list pages
* Refactor loaders and tabs
* Use classnames
* Add DetailImage

ui/v2.5/src/components/Shared/DetailImage.tsx

@@ -0,0 +1,38 @@
+import { useLayoutEffect, useRef } from "react";
+
+const DEFAULT_WIDTH = "200";
+
+// Props used by the <img> element
+type IDetailImageProps = JSX.IntrinsicElements["img"];
+
+export const DetailImage = (props: IDetailImageProps) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  function fixWidth() {
+    const img = imgRef.current;
+    if (!img) return;
+
+    // prevent SVG's w/o intrinsic size from rendering as 0x0
+    if (img.naturalWidth === 0) {
+      // If the naturalWidth is zero, it means the image either hasn't loaded yet
+      // or we're on Firefox and it is an SVG w/o an intrinsic size.
+      // So set the width to our fallback width.
+      img.setAttribute("width", DEFAULT_WIDTH);
+    } else {
+      // If we have a `naturalWidth`, this could either be the actual intrinsic width
+      // of the image, or the image is an SVG w/o an intrinsic size and we're on Chrome or Safari,
+      // which seem to return a size calculated in some browser-specific way.
+      // Worse yet, once rendered, Safari will then return the value of `img.width` as `img.naturalWidth`,
+      // so we need to clone the image to disconnect it from the DOM, and then get the `naturalWidth` of the clone,
+      // in order to always return the same `naturalWidth` for a given src.
+      const i = img.cloneNode() as HTMLImageElement;
+      img.setAttribute("width", (i.naturalWidth || DEFAULT_WIDTH).toString());
+    }
+  }
+
+  useLayoutEffect(() => {
+    fixWidth();
+  }, [props.src]);
+
+  return <img ref={imgRef} onLoad={() => fixWidth()} {...props} />;
+};

ui/v2.5/src/components/Shared/GridCard.tsx

@@ -34,8 +34,6 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
     if (props.selecting) {
       props.onSelectedChanged(!props.selected, shiftKey);
       event.preventDefault();
-    } else {
-      window.scrollTo(0, 0);
     }
   }
 

ui/v2.5/src/components/Shared/constants.ts

@@ -1 +0,0 @@
-export const TITLE_SUFFIX = " | Stash";