UI: Add checkbox to scenes List view (#1642)

ui/v2.5/src/components/Changelog/versions/v090.md

@@ -9,6 +9,7 @@
 * Added not equals/greater than/less than modifiers for resolution criteria. ([#1568](https://github.com/stashapp/stash/pull/1568))
 
 ### 🎨 Improvements
+* Added checkboxes to scene list view. ([#1642](https://github.com/stashapp/stash/pull/1642))
 * Added keyboard shortcuts for scene queue navigation. ([#1635](https://github.com/stashapp/stash/pull/1635))
 * Made performer scrape menu scrollable. ([#1634](https://github.com/stashapp/stash/pull/1634))
 * Improve Studio UI. ([#1629](https://github.com/stashapp/stash/pull/1629))

ui/v2.5/src/components/Scenes/SceneList.tsx

@@ -217,7 +217,14 @@ export const SceneList: React.FC<ISceneList> = ({
     }
     if (filter.displayMode === DisplayMode.List) {
       return (
-        <SceneListTable scenes={result.data.findScenes.scenes} queue={queue} />
+        <SceneListTable
+          scenes={result.data.findScenes.scenes}
+          queue={queue}
+          selectedIds={selectedIds}
+          onSelectChange={(id, selected, shiftKey) =>
+            listData.onSelectChange(id, selected, shiftKey)
+          }
+        />
       );
     }
     if (filter.displayMode === DisplayMode.Wall) {

ui/v2.5/src/components/Scenes/SceneListTable.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from "react";
-import { Table, Button } from "react-bootstrap";
+import { Table, Button, Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import { NavUtils, TextUtils } from "src/utils";
@@ -11,6 +11,8 @@ import { FormattedMessage } from "react-intl";
 interface ISceneListTableProps {
   scenes: GQL.SlimSceneDataFragment[];
   queue?: SceneQueue;
+  selectedIds: Set<string>;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
 }
 
 export const SceneListTable: React.FC<ISceneListTableProps> = (
@@ -44,8 +46,29 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       ? props.queue.makeLink(scene.id, { sceneIndex: index })
       : `/scenes/${scene.id}`;
 
+    let shiftKey = false;
     return (
       <tr key={scene.id}>
+        <td>
+          <Form.Control
+            type="checkbox"
+            checked={props.selectedIds.has(scene.id)}
+            onChange={() =>
+              props.onSelectChange!(
+                scene.id,
+                !props.selectedIds.has(scene.id),
+                shiftKey
+              )
+            }
+            onClick={(
+              event: React.MouseEvent<HTMLInputElement, MouseEvent>
+            ) => {
+              // eslint-disable-next-line prefer-destructuring
+              shiftKey = event.shiftKey;
+              event.stopPropagation();
+            }}
+          />
+        </td>
         <td>
           <Link to={sceneLink}>
             <img
@@ -97,6 +120,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       <Table striped bordered>
         <thead>
           <tr>
+            <th />
             <th />
             <th className="text-left">
               <FormattedMessage id="title" />