Merge branch 'master' into resize-refactor

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-# github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: stashapp
 # patreon: # Replace with a single Patreon username
 open_collective: stashapp
 # ko_fi: # Replace with a single Ko-fi username

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
 
     services:
       postgres:
-        image: postgres:14.2
+        image: postgres:16.1
         env:
           POSTGRES_DB: postgres
           POSTGRES_PASSWORD: postgres
@@ -47,12 +47,12 @@ jobs:
     - name: Install Go
       uses: actions/setup-go@v3
       with:
-        go-version: 1.20.x
+        go-version: 1.22.x
 
     - name: Install Node
       uses: actions/setup-node@v2
       with:
-        node-version: '16'
+        node-version: '20'
 
     - name: Cache node modules
       uses: actions/cache@v2

.github/workflows/golangci-lint.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   golangci:
     name: lint
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     steps:
       - name: Checkout
@@ -15,7 +15,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v3
         with:
-          go-version: 1.18.x
+          go-version: 1.22.x
 
       - name: Run golangci-lint
         uses: golangci/golangci-lint-action@v3

.golangci.yml

@@ -48,6 +48,8 @@ linters-settings:
         enabled: true
       - name: increment-decrement
       - name: var-naming
+        arguments:
+          - ["IDS"] # AllowList
       - name: var-declaration
       - name: package-comments
       - name: range

Makefile

@@ -73,7 +73,8 @@ generate-dataloaders:
 		go run github.com/vektah/dataloaden BodyModificationsLoader github.com/gofrs/uuid.UUID "[]*github.com/stashapp/stash-box/pkg/models.BodyModification"; \
 		go run github.com/vektah/dataloaden TagCategoryLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.TagCategory"; \
 		go run github.com/vektah/dataloaden SiteLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.Site"; \
-		go run github.com/vektah/dataloaden StudioLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.Studio";
+		go run github.com/vektah/dataloaden StudioLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.Studio"; \
+		go run github.com/vektah/dataloaden BoolsLoader github.com/gofrs/uuid.UUID "bool";
 
 test:
 	go test ./...

frontend/package.json

@@ -44,13 +44,13 @@
     "globule": "^1.3.4",
     "prettier": "2.8.4",
     "rollup-plugin-analyzer": "^4.0.0",
-    "sass": "~1.58.3",
-    "stylelint": "^15.2.0",
-    "stylelint-config-standard": "^30.0.1",
-    "stylelint-config-standard-scss": "^7.0.1",
-    "stylelint-scss": "^4.4.0",
+    "sass": "~1.63.6",
+    "stylelint": "^15.10.1",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-scss": "^5.0.1",
     "typescript": "~4.9.5",
-    "vite": "^4.1.4",
+    "vite": "^4.5.2",
     "vite-tsconfig-paths": "^4.0.5"
   },
   "dependencies": {
@@ -65,14 +65,14 @@
     "bootstrap": "^5.2.3",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
-    "graphql": "^16.6.0",
+    "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "i18n-iso-countries": "^7.5.0",
     "lodash-es": "^4.17.21",
     "p-debounce": "^4.0.0",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.7.2",
+    "react-bootstrap": "^2.8.0",
     "react-bootstrap-typeahead": "^6.0.2",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",

frontend/src/App.scss

@@ -65,6 +65,9 @@ div.react-select__menu {
 .LoginPrompt {
   height: 70vh;
   width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
 
   a {
     color: $link-color;

frontend/src/Login.tsx

@@ -28,7 +28,7 @@ const Login: FC = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const [loginError, setLoginError] = useState("");
-  const msg = new URLSearchParams(location.search.substr(1)).get("msg");
+  const msg = new URLSearchParams(location.search).get("msg");
   const Auth = useContext<ContextType>(AuthContext);
   const {
     register,
@@ -55,7 +55,7 @@ const Login: FC = () => {
   };
 
   return (
-    <div className="LoginPrompt mx-auto d-flex">
+    <div className="LoginPrompt">
       <Form
         className="align-self-center col-4 mx-auto"
         onSubmit={handleSubmit(onSubmit)}

frontend/src/components/editCard/ModifyEdit.tsx

@@ -34,6 +34,13 @@ type Details = EditFragment["details"];
 type OldDetails = EditFragment["old_details"];
 type Options = EditFragment["options"];
 
+type Image = {
+  height: number;
+  id: string;
+  url: string;
+  width: number;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 type StartingWith<T, K extends string> = T extends `${K}${infer _}` ? T : never;
 type TargetOldDetails<T> = Omit<
@@ -95,11 +102,6 @@ type BodyMod = {
   description?: string | null;
 };
 
-type Image = {
-  id: string;
-  url: string;
-};
-
 export interface PerformerDetails {
   name?: string | null;
   gender?: GenderEnum | null;
@@ -123,8 +125,8 @@ export interface PerformerDetails {
   removed_piercings?: BodyMod[] | null;
   added_aliases?: string[] | null;
   removed_aliases?: string[] | null;
-  added_images?: NullableImage[] | null;
-  removed_images?: NullableImage[] | null;
+  added_images?: (Image | null)[] | null;
+  removed_images?: (Image | null)[] | null;
   added_urls?: URL[] | null;
   removed_urls?: URL[] | null;
   draft_id?: string | null;
@@ -303,8 +305,6 @@ type ScenePerformance = {
   >;
 };
 
-type NullableImage = Image | null;
-
 export interface SceneDetails {
   title?: string | null;
   date?: string | null;
@@ -318,8 +318,8 @@ export interface SceneDetails {
   } | null;
   added_performers?: ScenePerformance[] | null;
   removed_performers?: ScenePerformance[] | null;
-  added_images?: NullableImage[] | null;
-  removed_images?: NullableImage[] | null;
+  added_images?: (Image | null)[] | null;
+  removed_images?: (Image | null)[] | null;
   added_urls?: URL[] | null;
   removed_urls?: URL[] | null;
   added_tags?:
@@ -464,8 +464,8 @@ export interface StudioDetails {
     id: string;
     name: string;
   } | null;
-  added_images?: NullableImage[] | null;
-  removed_images?: NullableImage[] | null;
+  added_images?: (Image | null)[] | null;
+  removed_images?: (Image | null)[] | null;
   added_urls?: URL[] | null;
   removed_urls?: URL[] | null;
 }

frontend/src/components/editCard/VoteBar.tsx

@@ -62,18 +62,16 @@ const VoteBar: FC<Props> = ({ edit }) => {
     <div className={CLASSNAME}>
       <div className={CLASSNAME_SAVE}>
         {currentVote}
-        {vote &&
-          vote !== userVote?.vote &&
-          (userVote || vote !== VoteTypeEnum.ABSTAIN) && (
-            <Button
-              variant="secondary"
-              onClick={handleSave}
-              disabled={savingVote}
-            >
-              <span className="me-2">Save</span>
-              <Icon icon={faCheck} color="green" />
-            </Button>
-          )}
+        {vote && vote !== userVote?.vote && (
+          <Button
+            variant="secondary"
+            onClick={handleSave}
+            disabled={savingVote}
+          >
+            <span className="me-2">Save</span>
+            <Icon icon={faCheck} color="green" />
+          </Button>
+        )}
       </div>
       <Form.Group
         controlId={`${edit.id}-vote-yes`}

frontend/src/components/editImages/editImages.tsx

@@ -5,7 +5,7 @@ import type { Control } from "react-hook-form";
 import { faImages } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
 
-import { useAddImage } from "src/graphql";
+import { ImageFragment as Image, useAddImage } from "src/graphql";
 import { Image as ImageInput } from "src/components/form";
 import { Icon, LoadingIndicator } from "src/components/fragments";
 
@@ -18,11 +18,6 @@ const CLASSNAME_PLACEHOLDER = `${CLASSNAME}-placeholder`;
 const CLASSNAME_IMAGE = `${CLASSNAME}-image`;
 const CLASSNAME_UPLOADING = `${CLASSNAME_IMAGE}-uploading`;
 
-type Image = {
-  id: string;
-  url: string;
-};
-
 type ControlType =
   | Control<{ images?: Image[] | undefined }, "images">
   | undefined;
@@ -35,7 +30,7 @@ interface EditImagesProps {
   maxImages?: number;
   /** Whether to allow svg/png image input */
   allowLossless?: boolean;
-  original?: { id: string; url: string }[] | undefined;
+  original?: Image[] | undefined;
 }
 
 const EditImages: FC<EditImagesProps> = ({

frontend/src/components/fragments/SearchHint.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
+import { Icon, Tooltip } from "src/components/fragments";
+
+export const SearchHint: React.FC = () => (
+  <Tooltip text='Add " to the end to include all words, or paste in a Stash ID'>
+    <div className="SearchHint">
+      <Icon icon={faCircleQuestion} color="black" />
+    </div>
+  </Tooltip>
+);

frontend/src/components/fragments/Tooltip.tsx

@@ -20,7 +20,11 @@ const Tooltip: FC<Props> = ({
 }) => (
   <OverlayTrigger
     delay={{ show: delay, hide: 0 }}
-    overlay={<BSTooltip id="tooltip">{text}</BSTooltip>}
+    overlay={
+      <BSTooltip className="Tooltip" id="tooltip">
+        {text}
+      </BSTooltip>
+    }
     show={text ? undefined : false}
     placement={placement}
     trigger={["hover", "focus"]}

frontend/src/components/fragments/index.ts

@@ -9,3 +9,4 @@ export { default as Help } from "./Help";
 export { default as Tooltip } from "./Tooltip";
 export { FavoriteStar } from "./Favorite";
 export { Thumbnail } from "./Thumbnail";
+export { SearchHint } from "./SearchHint";

frontend/src/components/fragments/styles.scss

@@ -118,3 +118,12 @@
     box-shadow: none;
   }
 }
+
+.SearchHint {
+  margin-left: 10px;
+  cursor: help;
+}
+
+.Tooltip {
+  position: absolute !important;
+}

frontend/src/components/imageChangeRow/ImageChangeRow.tsx

@@ -1,53 +1,35 @@
-import { FC, useState } from "react";
+import { FC } from "react";
 import { Col, Row } from "react-bootstrap";
 
-import { ImageFragment as Image } from "src/graphql";
+type Image = {
+  height: number;
+  id: string;
+  url: string;
+  width: number;
+};
 
 const CLASSNAME = "ImageChangeRow";
 const CLASSNAME_IMAGE = `${CLASSNAME}-image`;
 
 export interface ImageChangeRowProps {
-  newImages?: (Pick<Image, "id" | "url"> | null)[] | null;
-  oldImages?: (Pick<Image, "id" | "url"> | null)[] | null;
+  newImages?: (Image | null)[] | null;
+  oldImages?: (Image | null)[] | null;
   showDiff?: boolean;
 }
 
 const Images: FC<{
-  images: (Pick<Image, "id" | "url"> | null)[] | null | undefined;
+  images: (Image | null)[] | null | undefined;
 }> = ({ images }) => {
-  const [imgDimensions, setImgDimensions] = useState<{
-    [key: string]: { height: number; width: number };
-  }>({});
-
-  const onImgLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-    setImgDimensions({
-      ...imgDimensions,
-      [event.currentTarget.src]: {
-        height: event.currentTarget.naturalHeight,
-        width: event.currentTarget.naturalWidth,
-      },
-    });
-  };
-
   return (
     <>
       {(images ?? []).map((image, i) =>
         image === null ? (
           <img className={CLASSNAME_IMAGE} alt="Deleted" key={`deleted-${i}`} />
         ) : (
           <div key={image.id}>
-            <img
-              src={image.url}
-              className={CLASSNAME_IMAGE}
-              alt=""
-              onLoad={onImgLoad}
-            />
+            <img src={image.url} className={CLASSNAME_IMAGE} alt="" />
             <div className={"text-center"}>
-              {imgDimensions && imgDimensions[image.url]
-                ? `${imgDimensions[image.url].width} x ${
-                    imgDimensions[image.url].height
-                  }`
-                : ""}
+              {image.width} x {image.height}
             </div>
           </div>
         )