Update dependencies (again) (#3442)

* Update dependencies
* Upgrade rollup
* Remove all index.ts reexport files

ui/v2.5/.stylelintrc

@@ -1,9 +1,7 @@
 {
   "plugins": ["stylelint-order"],
-  "extends": "stylelint-config-prettier",
   "customSyntax": "postcss-scss",
   "rules": {
-    "indentation": null,
     "at-rule-empty-line-before": [
       "always",
       {
@@ -13,14 +11,7 @@
     ],
     "at-rule-no-vendor-prefix": true,
     "selector-no-vendor-prefix": true,
-    "block-closing-brace-newline-after": "always",
-    "block-closing-brace-newline-before": "always-multi-line",
-    "block-closing-brace-space-before": "always-single-line",
     "block-no-empty": true,
-    "block-opening-brace-newline-after": "always-multi-line",
-    "block-opening-brace-space-after": "always-single-line",
-    "block-opening-brace-space-before": "always",
-    "color-hex-case": "lower",
     "color-hex-length": "short",
     "color-no-invalid-hex": true,
     "comment-empty-line-before": [
@@ -31,43 +22,18 @@
       }
     ],
     "comment-whitespace-inside": "always",
-    "declaration-bang-space-after": "never",
-    "declaration-bang-space-before": "always",
     "declaration-block-no-shorthand-property-overrides": true,
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "declaration-block-semicolon-space-after": "always-single-line",
-    "declaration-block-semicolon-space-before": "never",
     "declaration-block-single-line-max-declarations": 1,
-    "declaration-block-trailing-semicolon": "always",
-    "declaration-colon-space-after": "always-single-line",
-    "declaration-colon-space-before": "never",
     "declaration-no-important": true,
     "font-family-name-quotes": "always-where-recommended",
     "function-calc-no-unspaced-operator": true,
-    "function-comma-newline-after": "always-multi-line",
-    "function-comma-space-after": "always-single-line",
-    "function-comma-space-before": "never",
     "function-linear-gradient-no-nonstandard-direction": true,
-    "function-parentheses-newline-inside": "always-multi-line",
-    "function-parentheses-space-inside": "never-single-line",
     "function-url-quotes": "always",
-    "function-whitespace-after": "always",
     "length-zero-no-unit": true,
-    "max-empty-lines": 1,
     "max-nesting-depth": 4,
-    "media-feature-colon-space-after": "always",
-    "media-feature-colon-space-before": "never",
-    "media-feature-range-operator-space-after": "always",
-    "media-feature-range-operator-space-before": "always",
-    "media-query-list-comma-newline-after": "always-multi-line",
-    "media-query-list-comma-space-after": "always-single-line",
-    "media-query-list-comma-space-before": "never",
-    "media-feature-parentheses-space-inside": "never",
     "no-descending-specificity": null,
     "no-invalid-double-slash-comments": true,
-    "no-missing-end-of-source-newline": true,
     "number-max-precision": 3,
-    "number-no-trailing-zeros": true,
     "order/order": ["custom-properties", "declarations"],
     "order/properties-alphabetical-order": true,
     "rule-empty-line-before": [
@@ -80,17 +46,10 @@
     "selector-max-id": 1,
     "selector-max-type": 2,
     "selector-class-pattern": "^(\\.*[A-Z]*[a-z]+)+(-[a-z0-9]+)*$",
-    "selector-combinator-space-after": "always",
-    "selector-combinator-space-before": "always",
-    "selector-list-comma-newline-after": "always",
-    "selector-list-comma-space-before": "never",
     "selector-max-universal": 0,
     "selector-type-case": "lower",
     "selector-pseudo-element-colon-notation": "double",
     "string-no-newline": true,
-    "string-quotes": "double",
+    "time-min-milliseconds": 100
-    "time-min-milliseconds": 100,
-    "value-list-comma-space-after": "always-single-line",
-    "value-list-comma-space-before": "never"
   }
 }

ui/v2.5/package.json

@@ -22,18 +22,18 @@
   ],
   "dependencies": {
     "@ant-design/react-slick": "^1.0.0",
-    "@apollo/client": "^3.7.4",
+    "@apollo/client": "^3.7.8",
     "@formatjs/intl-getcanonicallocales": "^2.0.5",
     "@formatjs/intl-locale": "^3.0.11",
     "@formatjs/intl-numberformat": "^8.3.3",
     "@formatjs/intl-pluralrules": "^5.1.8",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "apollo-upload-client": "^17.0.0",
-    "axios": "^1.2.5",
+    "axios": "^1.3.3",
     "base64-blob": "^1.4.1",
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",
@@ -42,7 +42,7 @@
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
-    "graphql-ws": "^5.11.2",
+    "graphql-ws": "^5.11.3",
     "i18n-iso-countries": "^7.5.0",
     "intersection-observer": "^0.12.2",
     "localforage": "^1.10.0",
@@ -54,12 +54,12 @@
     "react-bootstrap": "^1.6.6",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-intl": "^6.2.6",
+    "react-intl": "^6.2.8",
     "react-markdown": "^8.0.5",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.3.4",
     "react-router-hash-link": "^2.4.3",
-    "react-select": "^5.6.1",
+    "react-select": "^5.7.0",
     "remark-gfm": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "slick-carousel": "^1.8.1",
@@ -70,49 +70,48 @@
     "videojs-mobile-ui": "^0.8.0",
     "videojs-seek-buttons": "^3.0.1",
     "videojs-vtt.js": "^0.15.4",
-    "yup": "^0.32.11"
+    "yup": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.12",
-    "@graphql-codegen/cli": "^2.16.4",
+    "@graphql-codegen/cli": "^3.0.0",
-    "@graphql-codegen/time": "^3.2.3",
+    "@graphql-codegen/time": "^4.0.0",
-    "@graphql-codegen/typescript": "^2.8.7",
+    "@graphql-codegen/typescript": "^3.0.0",
-    "@graphql-codegen/typescript-operations": "^2.5.12",
+    "@graphql-codegen/typescript-operations": "^3.0.0",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
     "@types/apollo-upload-client": "^17.0.2",
     "@types/lodash-es": "^4.17.6",
     "@types/mousetrap": "^1.6.11",
-    "@types/node": "^14.18.36",
+    "@types/node": "^18.13.0",
     "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
+    "@types/react-dom": "^17.0.19",
     "@types/react-helmet": "^6.1.6",
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-hash-link": "^2.4.5",
-    "@types/video.js": "^7.3.50",
+    "@types/video.js": "^7.3.51",
     "@types/videojs-mobile-ui": "^0.5.0",
     "@types/videojs-seek-buttons": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/parser": "^5.52.0",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@vitejs/plugin-react": "^3.1.0",
-    "eslint": "^8.32.0",
+    "eslint": "^8.34.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "extract-react-intl-messages": "^4.1.1",
     "postcss": "^8.4.21",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
-    "sass": "^1.57.1",
+    "sass": "^1.58.1",
-    "stylelint": "^14.16.1",
+    "stylelint": "^15.1.0",
-    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-order": "^6.0.2",
-    "stylelint-order": "^6.0.1",
     "ts-node": "^10.9.1",
     "typescript": "~4.8.4",
-    "vite": "^4.0.4",
+    "vite": "^4.1.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-tsconfig-paths": "^4.0.5"
   }

ui/v2.5/src/App.tsx

@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet";
 import cloneDeep from "lodash-es/cloneDeep";
 import mergeWith from "lodash-es/mergeWith";
 import { ToastProvider } from "src/hooks/Toast";
-import LightboxProvider from "src/hooks/Lightbox/context";
+import { LightboxProvider } from "src/hooks/Lightbox/context";
 import { initPolyfills } from "src/polyfills";
 
 import locales, { registerCountry } from "src/locales";
@@ -14,14 +14,15 @@ import {
   useConfigureUI,
   useSystemStatus,
 } from "src/core/StashService";
-import { flattenMessages } from "src/utils";
+import flattenMessages from "./utils/flattenMessages";
 import Mousetrap from "mousetrap";
 import MousetrapPause from "mousetrap-pause";
 import { ErrorBoundary } from "./components/ErrorBoundary";
 import { MainNavbar } from "./components/MainNavbar";
 import { PageNotFound } from "./components/PageNotFound";
 import * as GQL from "./core/generated-graphql";
-import { LoadingIndicator, TITLE_SUFFIX } from "./components/Shared";
+import { TITLE_SUFFIX } from "./components/Shared/constants";
+import { LoadingIndicator } from "./components/Shared/LoadingIndicator";
 
 import { ConfigurationProvider } from "./hooks/Config";
 import { ManualProvider } from "./components/Help/context";

ui/v2.5/src/components/Changelog/Changelog.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useChangelogStorage } from "src/hooks";
+import { useChangelogStorage } from "src/hooks/LocalForage";
 import Version from "./Version";
 import V010 from "src/docs/en/Changelog/v010.md";
 import V011 from "src/docs/en/Changelog/v011.md";

ui/v2.5/src/components/Changelog/Version.tsx

@@ -2,7 +2,7 @@ import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
 import React, { useState } from "react";
 import { Button, Card, Collapse } from "react-bootstrap";
 import { FormattedDate, FormattedMessage } from "react-intl";
-import { Icon } from "src/components/Shared";
+import { Icon } from "src/components/Shared/Icon";
 
 interface IVersionProps {
   version: string;

ui/v2.5/src/components/Dialogs/GenerateDialog.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Form, Button } from "react-bootstrap";
 import { mutateMetadataGenerate } from "src/core/StashService";
-import { Modal, Icon } from "src/components/Shared";
+import { ModalComponent } from "../Shared/Modal";
-import { useToast } from "src/hooks";
+import { Icon } from "src/components/Shared/Icon";
+import { useToast } from "src/hooks/Toast";
 import * as GQL from "src/core/generated-graphql";
 import { FormattedMessage, useIntl } from "react-intl";
 import { ConfigurationContext } from "src/hooks/Config";
 import { Manual } from "../Help/Manual";
-import { withoutTypename } from "src/utils";
+import { withoutTypename } from "src/utils/data";
 import { GenerateOptions } from "../Settings/Tasks/GenerateOptions";
 import { SettingSection } from "../Settings/SettingSection";
 import { faCogs, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
@@ -169,7 +170,7 @@ export const GenerateDialog: React.FC<ISceneGenerateDialog> = ({
   }
 
   return (
-    <Modal
+    <ModalComponent
       show
       modalProps={{ animation, size: "lg" }}
       icon={faCogs}
@@ -203,7 +204,7 @@ export const GenerateDialog: React.FC<ISceneGenerateDialog> = ({
           />
         </SettingSection>
       </Form>
-    </Modal>
+    </ModalComponent>
   );
 };
 

ui/v2.5/src/components/Dialogs/IdentifyDialog/FieldOptions.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Form, Button, Table } from "react-bootstrap";
-import { Icon } from "src/components/Shared";
+import { Icon } from "src/components/Shared/Icon";
 import * as GQL from "src/core/generated-graphql";
 import { FormattedMessage, useIntl } from "react-intl";
 import {

ui/v2.5/src/components/Dialogs/IdentifyDialog/IdentifyDialog.tsx

@@ -6,11 +6,13 @@ import {
   useConfigureDefaults,
   useListSceneScrapers,
 } from "src/core/StashService";
-import { Icon, Modal, OperationButton } from "src/components/Shared";
+import { Icon } from "src/components/Shared/Icon";
-import { useToast } from "src/hooks";
+import { ModalComponent } from "src/components/Shared/Modal";
+import { OperationButton } from "src/components/Shared/OperationButton";
+import { useToast } from "src/hooks/Toast";
 import * as GQL from "src/core/generated-graphql";
 import { FormattedMessage, useIntl } from "react-intl";
-import { withoutTypename } from "src/utils";
+import { withoutTypename } from "src/utils/data";
 import {
   SCRAPER_PREFIX,
   STASH_BOX_PREFIX,
@@ -403,7 +405,7 @@ export const IdentifyDialog: React.FC<IIdentifyDialogProps> = ({
   }
 
   return (
-    <Modal
+    <ModalComponent
       modalProps={{ animation, size: "lg" }}
       show
       icon={faCogs}
@@ -451,7 +453,7 @@ export const IdentifyDialog: React.FC<IIdentifyDialogProps> = ({
           setEditingField={(v) => setEditingField(v)}
         />
       </Form>
-    </Modal>
+    </ModalComponent>
   );
 };
 

ui/v2.5/src/components/Dialogs/IdentifyDialog/Sources.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Form, Button, ListGroup } from "react-bootstrap";
-import { Modal, Icon } from "src/components/Shared";
+import { ModalComponent } from "src/components/Shared/Modal";
+import { Icon } from "src/components/Shared/Icon";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { IScraperSource } from "./constants";
@@ -53,7 +54,7 @@ export const SourcesEditor: React.FC<ISourceEditor> = ({
   }
 
   return (
-    <Modal
+    <ModalComponent
       dialogClassName="identify-source-editor"
       modalProps={{ animation: false, size: "lg" }}
       show
@@ -107,7 +108,7 @@ export const SourcesEditor: React.FC<ISourceEditor> = ({
           defaultOptions={defaultOptions}
         />
       </Form>
-    </Modal>
+    </ModalComponent>
   );
 };
 

ui/v2.5/src/components/Dialogs/ReleaseNotesDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Form } from "react-bootstrap";
-import { Modal } from "src/components/Shared";
+import { ModalComponent } from "../Shared/Modal";
 import { faCogs } from "@fortawesome/free-solid-svg-icons";
 import { useIntl } from "react-intl";
 import { MarkdownPage } from "../Shared/MarkdownPage";
@@ -17,7 +17,7 @@ export const ReleaseNotesDialog: React.FC<IReleaseNotesDialog> = ({
   const intl = useIntl();
 
   return (
-    <Modal
+    <ModalComponent
       show
       icon={faCogs}
       header={intl.formatMessage({ id: "release_notes" })}
@@ -31,7 +31,7 @@ export const ReleaseNotesDialog: React.FC<IReleaseNotesDialog> = ({
           <MarkdownPage page={n} key={i} />
         ))}
       </Form>
-    </Modal>
+    </ModalComponent>
   );
 };
 

ui/v2.5/src/components/Dialogs/SubmitDraft.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { useMutation, DocumentNode } from "@apollo/client";
 import { Button, Form } from "react-bootstrap";
 import * as GQL from "src/core/generated-graphql";
-import { Modal } from "src/components/Shared";
+import { ModalComponent } from "src/components/Shared/Modal";
-import { getStashboxBase } from "src/utils";
+import { getStashboxBase } from "src/utils/stashbox";
 import { FormattedMessage, useIntl } from "react-intl";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 
@@ -78,7 +78,7 @@ export const SubmitStashBoxDraft: React.FC<IProps> = ({
     undefined;
 
   return (
-    <Modal
+    <ModalComponent
       icon={faPaperPlane}
       header={intl.formatMessage({ id: "actions.submit_stash_box" })}
       isRunning={loading}
@@ -153,7 +153,7 @@ export const SubmitStashBoxDraft: React.FC<IProps> = ({
           <div>{error.message}</div>
         </>
       )}
-    </Modal>
+    </ModalComponent>
   );
 };
 

ui/v2.5/src/components/FrontPage/FrontPage.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useConfigureUI } from "src/core/StashService";
-import { LoadingIndicator } from "src/components/Shared";
+import { LoadingIndicator } from "../Shared/LoadingIndicator";
 import { Button } from "react-bootstrap";
 import { FrontPageConfig } from "./FrontPageConfig";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { Control } from "./Control";
 import { ConfigurationContext } from "src/hooks/Config";
 import {

ui/v2.5/src/components/FrontPage/FrontPageConfig.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { FormattedMessage, IntlShape, useIntl } from "react-intl";
 import { useFindSavedFilters } from "src/core/StashService";
-import { LoadingIndicator } from "src/components/Shared";
+import { LoadingIndicator } from "../Shared/LoadingIndicator";
 import { Button, Form, Modal } from "react-bootstrap";
 import {
   FilterMode,

ui/v2.5/src/components/Galleries/DeleteGalleriesDialog.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { Form } from "react-bootstrap";
 import { useGalleryDestroy } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { Modal } from "src/components/Shared";
+import { ModalComponent } from "../Shared/Modal";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { ConfigurationContext } from "src/hooks/Config";
 import { FormattedMessage, useIntl } from "react-intl";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
@@ -119,7 +119,7 @@ export const DeleteGalleriesDialog: React.FC<IDeleteGalleryDialogProps> = (
   }
 
   return (
-    <Modal
+    <ModalComponent
       show
       icon={faTrashAlt}
       header={header}
@@ -155,6 +155,6 @@ export const DeleteGalleriesDialog: React.FC<IDeleteGalleryDialogProps> = (
           onChange={() => setDeleteGenerated(!deleteGenerated)}
         />
       </Form>
-    </Modal>
+    </ModalComponent>
   );
 };

ui/v2.5/src/components/Galleries/EditGalleriesDialog.tsx

@@ -4,10 +4,11 @@ import { FormattedMessage, useIntl } from "react-intl";
 import isEqual from "lodash-es/isEqual";
 import { useBulkGalleryUpdate } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { StudioSelect, Modal } from "src/components/Shared";
+import { StudioSelect } from "../Shared/Select";
-import { useToast } from "src/hooks";
+import { ModalComponent } from "../Shared/Modal";
-import { FormUtils } from "src/utils";
+import { useToast } from "src/hooks/Toast";
-import MultiSet from "../Shared/MultiSet";
+import FormUtils from "src/utils/form";
+import { MultiSet } from "../Shared/MultiSet";
 import { RatingSystem } from "../Shared/Rating/RatingSystem";
 import {
   getAggregateInputIDs,
@@ -226,7 +227,7 @@ export const EditGalleriesDialog: React.FC<IListOperationProps> = (
 
   function render() {
     return (
-      <Modal
+      <ModalComponent
         show
         icon={faPencilAlt}
         header={intl.formatMessage(
@@ -300,7 +301,7 @@ export const EditGalleriesDialog: React.FC<IListOperationProps> = (
             />
           </Form.Group>
         </Form>
-      </Modal>
+      </ModalComponent>
     );
   }
 

ui/v2.5/src/components/Galleries/Galleries.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
-import { TITLE_SUFFIX } from "src/components/Shared";
+import { TITLE_SUFFIX } from "../Shared/constants";
 import { PersistanceLevel } from "src/hooks/ListHook";
 import Gallery from "./GalleryDetails/Gallery";
 import GalleryCreate from "./GalleryDetails/GalleryCreate";

ui/v2.5/src/components/Galleries/GalleryCard.tsx

@@ -2,17 +2,15 @@ import { Button, ButtonGroup } from "react-bootstrap";
 import React from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
-import {
+import { GridCard } from "../Shared/GridCard";
-  GridCard,
+import { HoverPopover } from "../Shared/HoverPopover";
-  HoverPopover,
+import { Icon } from "../Shared/Icon";
-  Icon,
+import { TagLink } from "../Shared/TagLink";
-  TagLink,
+import { TruncatedText } from "../Shared/TruncatedText";
-  TruncatedText,
-} from "src/components/Shared";
-import { PopoverCountButton } from "src/components/Shared/PopoverCountButton";
-import { NavUtils } from "src/utils";
-import { ConfigurationContext } from "src/hooks/Config";
 import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
+import { PopoverCountButton } from "../Shared/PopoverCountButton";
+import NavUtils from "src/utils/navigation";
+import { ConfigurationContext } from "src/hooks/Config";
 import { RatingBanner } from "../Shared/RatingBanner";
 import { faBox, faPlayCircle, faTag } from "@fortawesome/free-solid-svg-icons";
 import { galleryTitle } from "src/core/galleries";

ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx

@@ -9,14 +9,12 @@ import {
   useFindGallery,
   useGalleryUpdate,
 } from "src/core/StashService";
-import {
+import { ErrorMessage } from "src/components/Shared/ErrorMessage";
-  ErrorMessage,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
+import { Icon } from "src/components/Shared/Icon";
-  Icon,
+import { Counter } from "src/components/Shared/Counter";
-  Counter,
-} from "src/components/Shared";
 import Mousetrap from "mousetrap";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { OrganizedButton } from "src/components/Scenes/SceneDetails/OrganizedButton";
 import { GalleryEditPanel } from "./GalleryEditPanel";
 import { GalleryDetailPanel } from "./GalleryDetailPanel";

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryAddPanel.tsx

@@ -5,7 +5,7 @@ import { ListFilterModel } from "src/models/list-filter/filter";
 import { ImageList } from "src/components/Images/ImageList";
 import { showWhenSelected } from "src/hooks/ListHook";
 import { mutateAddGalleryImages } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { useIntl } from "react-intl";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { galleryTitle } from "src/core/galleries";

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { FormattedDate, FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
-import { TagLink, TruncatedText } from "src/components/Shared";
+import { TagLink } from "src/components/Shared/TagLink";
+import { TruncatedText } from "src/components/Shared/TruncatedText";
 import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { sortPerformers } from "src/core/performers";

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx

@@ -25,13 +25,13 @@ import {
   TagSelect,
   SceneSelect,
   StudioSelect,
-  Icon,
+} from "src/components/Shared/Select";
-  LoadingIndicator,
+import { Icon } from "src/components/Shared/Icon";
-  URLField,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-} from "src/components/Shared";
+import { URLField } from "src/components/Shared/URLField";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { useFormik } from "formik";
-import { FormUtils } from "src/utils";
+import FormUtils from "src/utils/form";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { GalleryScrapeDialog } from "./GalleryScrapeDialog";
 import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo, useState } from "react";
 import { Accordion, Button, Card } from "react-bootstrap";
 import { FormattedMessage, FormattedTime } from "react-intl";
-import { TruncatedText } from "src/components/Shared";
+import { TruncatedText } from "src/components/Shared/TruncatedText";
-import DeleteFilesDialog from "src/components/Shared/DeleteFilesDialog";
+import { DeleteFilesDialog } from "src/components/Shared/DeleteFilesDialog";
 import * as GQL from "src/core/generated-graphql";
 import { mutateGallerySetPrimaryFile } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
 import { TextField, URLField } from "src/utils/field";
 
 interface IFileInfoPanelProps {

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryImagesPanel.tsx

@@ -5,7 +5,7 @@ import { ListFilterModel } from "src/models/list-filter/filter";
 import { ImageList } from "src/components/Images/ImageList";
 import { mutateRemoveGalleryImages } from "src/core/StashService";
 import { showWhenSelected, PersistanceLevel } from "src/hooks/ListHook";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { useIntl } from "react-intl";
 import { faMinus } from "@fortawesome/free-solid-svg-icons";
 import { galleryTitle } from "src/core/galleries";

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScrapeDialog.tsx

@@ -1,8 +1,11 @@
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { StudioSelect, PerformerSelect } from "src/components/Shared";
+import {
+  StudioSelect,
+  PerformerSelect,
+  TagSelect,
+} from "src/components/Shared/Select";
 import * as GQL from "src/core/generated-graphql";
-import { TagSelect } from "src/components/Shared/Select";
 import {
   ScrapeDialog,
   ScrapeDialogRow,
@@ -17,7 +20,7 @@ import {
   useTagCreate,
   makePerformerCreateInput,
 } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 
 function renderScrapedStudio(
   result: ScrapeResult<string>,

ui/v2.5/src/components/Galleries/GalleryList.tsx

@@ -8,8 +8,11 @@ import {
   FindGalleriesQueryResult,
   SlimGalleryDataFragment,
 } from "src/core/generated-graphql";
-import { useGalleriesList } from "src/hooks";
+import {
-import { showWhenSelected, PersistanceLevel } from "src/hooks/ListHook";
+  showWhenSelected,
+  PersistanceLevel,
+  useGalleriesList,
+} from "src/hooks/ListHook";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 import { queryFindGalleries } from "src/core/StashService";

ui/v2.5/src/components/Galleries/GalleryViewer.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
-import { useLightbox } from "src/hooks";
+import { useLightbox } from "src/hooks/Lightbox/hooks";
-import { LoadingIndicator } from "src/components/Shared";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import "flexbin/flexbin.css";
 import {
   CriterionModifier,

ui/v2.5/src/components/Galleries/GalleryWallCard.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
-import { TruncatedText } from "src/components/Shared";
+import { TruncatedText } from "src/components/Shared/TruncatedText";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
-import { useGalleryLightbox } from "src/hooks";
+import { useGalleryLightbox } from "src/hooks/Lightbox/hooks";
 import { galleryTitle } from "src/core/galleries";
 import { RatingSystem } from "../Shared/Rating/RatingSystem";
 

ui/v2.5/src/components/Images/DeleteImagesDialog.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { Form } from "react-bootstrap";
 import { useImagesDestroy } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { Modal } from "src/components/Shared";
+import { ModalComponent } from "src/components/Shared/Modal";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { ConfigurationContext } from "src/hooks/Config";
 import { FormattedMessage, useIntl } from "react-intl";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
@@ -112,7 +112,7 @@ export const DeleteImagesDialog: React.FC<IDeleteImageDialogProps> = (
   }
 
   return (
-    <Modal
+    <ModalComponent
       show
       icon={faTrashAlt}
       header={header}
@@ -146,6 +146,6 @@ export const DeleteImagesDialog: React.FC<IDeleteImageDialogProps> = (
           onChange={() => setDeleteGenerated(!deleteGenerated)}
         />
       </Form>
-    </Modal>
+    </ModalComponent>
   );
 };

ui/v2.5/src/components/Images/EditImagesDialog.tsx

@@ -4,10 +4,11 @@ import { FormattedMessage, useIntl } from "react-intl";
 import isEqual from "lodash-es/isEqual";
 import { useBulkImageUpdate } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { StudioSelect, Modal } from "src/components/Shared";
+import { StudioSelect } from "src/components/Shared/Select";
-import { useToast } from "src/hooks";
+import { ModalComponent } from "src/components/Shared/Modal";
-import { FormUtils } from "src/utils";
+import { useToast } from "src/hooks/Toast";
-import MultiSet from "../Shared/MultiSet";
+import FormUtils from "src/utils/form";
+import { MultiSet } from "../Shared/MultiSet";
 import { RatingSystem } from "../Shared/Rating/RatingSystem";
 import {
   getAggregateInputIDs,
@@ -216,7 +217,7 @@ export const EditImagesDialog: React.FC<IListOperationProps> = (
 
   function render() {
     return (
-      <Modal
+      <ModalComponent
         show
         icon={faPencilAlt}
         header={intl.formatMessage(
@@ -290,7 +291,7 @@ export const EditImagesDialog: React.FC<IListOperationProps> = (
             />
           </Form.Group>
         </Form>
-      </Modal>
+      </ModalComponent>
     );
   }
 

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -2,10 +2,13 @@ import React, { MouseEvent, useMemo } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
-import { Icon, TagLink, HoverPopover, SweatDrops } from "src/components/Shared";
+import { Icon } from "src/components/Shared/Icon";
-import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
+import { TagLink } from "src/components/Shared/TagLink";
-import { GridCard } from "../Shared/GridCard";
+import { HoverPopover } from "src/components/Shared/HoverPopover";
-import { RatingBanner } from "../Shared/RatingBanner";
+import { SweatDrops } from "src/components/Shared/SweatDrops";
+import { PerformerPopoverButton } from "src/components/Shared/PerformerPopoverButton";
+import { GridCard } from "src/components/Shared/GridCard";
+import { RatingBanner } from "src/components/Shared/RatingBanner";
 import {
   faBox,
   faImages,

ui/v2.5/src/components/Images/ImageDetails/Image.tsx

@@ -11,13 +11,11 @@ import {
   useImageUpdate,
   mutateMetadataScan,
 } from "src/core/StashService";
-import {
+import { ErrorMessage } from "src/components/Shared/ErrorMessage";
-  ErrorMessage,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
+import { Icon } from "src/components/Shared/Icon";
-  Icon,
+import { Counter } from "src/components/Shared/Counter";
-  Counter,
+import { useToast } from "src/hooks/Toast";
-} from "src/components/Shared";
-import { useToast } from "src/hooks";
 import * as Mousetrap from "mousetrap";
 import { OCounterButton } from "src/components/Scenes/SceneDetails/OCounterButton";
 import { OrganizedButton } from "src/components/Scenes/SceneDetails/OrganizedButton";

ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
-import { TagLink, TruncatedText } from "src/components/Shared";
+import { TagLink } from "src/components/Shared/TagLink";
+import { TruncatedText } from "src/components/Shared/TruncatedText";
 import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { sortPerformers } from "src/core/performers";

ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx

@@ -9,11 +9,11 @@ import {
   PerformerSelect,
   TagSelect,
   StudioSelect,
-  LoadingIndicator,
+} from "src/components/Shared/Select";
-  URLField,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-} from "src/components/Shared";
+import { URLField } from "src/components/Shared/URLField";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
-import { FormUtils } from "src/utils";
+import FormUtils from "src/utils/form";
 import { useFormik } from "formik";
 import { Prompt } from "react-router-dom";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";

ui/v2.5/src/components/Images/ImageDetails/ImageFileInfoPanel.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { Accordion, Button, Card } from "react-bootstrap";
 import { FormattedMessage, FormattedNumber, FormattedTime } from "react-intl";
-import { TruncatedText } from "src/components/Shared";
+import { TruncatedText } from "src/components/Shared/TruncatedText";
-import DeleteFilesDialog from "src/components/Shared/DeleteFilesDialog";
+import { DeleteFilesDialog } from "src/components/Shared/DeleteFilesDialog";
 import * as GQL from "src/core/generated-graphql";
 import { mutateImageSetPrimaryFile } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
 import { TextField, URLField } from "src/utils/field";
 
 interface IFileInfoPanelProps {

ui/v2.5/src/components/Images/ImageList.tsx

@@ -9,13 +9,14 @@ import {
 } from "src/core/generated-graphql";
 import * as GQL from "src/core/generated-graphql";
 import { queryFindImages } from "src/core/StashService";
-import { useImagesList, useLightbox } from "src/hooks";
+import { useLightbox } from "src/hooks/Lightbox/hooks";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 import {
   IListHookOperation,
   showWhenSelected,
   PersistanceLevel,
+  useImagesList,
 } from "src/hooks/ListHook";
 
 import { ImageCard } from "./ImageCard";

ui/v2.5/src/components/Images/Images.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
-import { TITLE_SUFFIX } from "src/components/Shared";
+import { TITLE_SUFFIX } from "../Shared/constants";
 import { PersistanceLevel } from "src/hooks/ListHook";
 import { Image } from "./ImageDetails/Image";
 import { ImageList } from "./ImageList";

ui/v2.5/src/components/List/AddFilterDialog.tsx

@@ -36,7 +36,7 @@ import { InputFilter } from "./Filters/InputFilter";
 import { DateFilter } from "./Filters/DateFilter";
 import { TimestampFilter } from "./Filters/TimestampFilter";
 import { CountryCriterion } from "src/models/list-filter/criteria/country";
-import { CountrySelect } from "../Shared";
+import { CountrySelect } from "../Shared/CountrySelect";
 import { StashIDCriterion } from "src/models/list-filter/criteria/stash-ids";
 import { StashIDFilter } from "./Filters/StashIDFilter";
 import { ConfigurationContext } from "src/hooks/Config";

ui/v2.5/src/components/List/FilterTags.tsx

@@ -5,7 +5,7 @@ import {
   CriterionValue,
 } from "src/models/list-filter/criteria/criterion";
 import { useIntl } from "react-intl";
-import { Icon } from "../Shared";
+import { Icon } from "../Shared/Icon";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 
 interface IFilterTagsProps {

ui/v2.5/src/components/List/Filters/DurationFilter.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Form } from "react-bootstrap";
 import { useIntl } from "react-intl";
-import { CriterionModifier } from "../../../core/generated-graphql";
+import { CriterionModifier } from "src/core/generated-graphql";
-import { DurationInput } from "../../Shared";
+import { DurationInput } from "src/components/Shared/DurationInput";
-import { INumberValue } from "../../../models/list-filter/types";
+import { INumberValue } from "src/models/list-filter/types";
-import { Criterion } from "../../../models/list-filter/criteria/criterion";
+import { Criterion } from "src/models/list-filter/criteria/criterion";
 
 interface IDurationFilterProps {
   criterion: Criterion<INumberValue>;

ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Form } from "react-bootstrap";
 import { defineMessages, MessageDescriptor, useIntl } from "react-intl";
-import { FilterSelect, ValidTypes } from "../../Shared";
+import { FilterSelect, ValidTypes } from "src/components/Shared/Select";
-import { Criterion } from "../../../models/list-filter/criteria/criterion";
+import { Criterion } from "src/models/list-filter/criteria/criterion";
-import { IHierarchicalLabelValue } from "../../../models/list-filter/types";
+import { IHierarchicalLabelValue } from "src/models/list-filter/types";
 
 interface IHierarchicalLabelValueFilterProps {
   criterion: Criterion<IHierarchicalLabelValue>;

ui/v2.5/src/components/List/Filters/LabeledIdFilter.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Form } from "react-bootstrap";
-import { FilterSelect, ValidTypes } from "../../Shared";
+import { FilterSelect, ValidTypes } from "src/components/Shared/Select";
-import { Criterion } from "../../../models/list-filter/criteria/criterion";
+import { Criterion } from "src/models/list-filter/criteria/criterion";
-import { ILabeledId } from "../../../models/list-filter/types";
+import { ILabeledId } from "src/models/list-filter/types";
 
 interface ILabeledIdFilterProps {
   criterion: Criterion<ILabeledId[]>;

ui/v2.5/src/components/List/ListFilter.tsx

@@ -17,9 +17,9 @@ import {
   Overlay,
 } from "react-bootstrap";
 
-import { Icon } from "src/components/Shared";
+import { Icon } from "../Shared/Icon";
 import { ListFilterModel } from "src/models/list-filter/filter";
-import { useFocus } from "src/utils";
+import useFocus from "src/utils/focus";
 import { ListFilterOptions } from "src/models/list-filter/filter-options";
 import { FormattedMessage, useIntl } from "react-intl";
 import { PersistanceLevel } from "src/hooks/ListHook";

ui/v2.5/src/components/List/ListOperationButtons.tsx

@@ -9,7 +9,7 @@ import {
 import Mousetrap from "mousetrap";
 import { FormattedMessage, useIntl } from "react-intl";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { Icon } from "../Shared";
+import { Icon } from "../Shared/Icon";
 import {
   faEllipsisH,
   faPencilAlt,

ui/v2.5/src/components/List/ListViewOptions.tsx

@@ -9,7 +9,7 @@ import {
 } from "react-bootstrap";
 import { DisplayMode } from "src/models/list-filter/types";
 import { useIntl } from "react-intl";
-import { Icon } from "../Shared";
+import { Icon } from "../Shared/Icon";
 import {
   faList,
   faSquare,

ui/v2.5/src/components/List/SavedFilterList.tsx

@@ -15,13 +15,13 @@ import {
   useSaveFilter,
   useSetDefaultFilter,
 } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { SavedFilterDataFragment } from "src/core/generated-graphql";
-import { LoadingIndicator } from "src/components/Shared";
+import { LoadingIndicator } from "../Shared/LoadingIndicator";
 import { PersistanceLevel } from "src/hooks/ListHook";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Icon } from "../Shared";
+import { Icon } from "../Shared/Icon";
 import { faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
 
 interface ISavedFilterListProps {

ui/v2.5/src/components/MainNavbar.tsx

@@ -11,8 +11,8 @@ import { LinkContainer } from "react-router-bootstrap";
 import { Link, NavLink, useLocation, useHistory } from "react-router-dom";
 import Mousetrap from "mousetrap";
 
-import { SessionUtils } from "src/utils";
+import SessionUtils from "src/utils/session";
-import Icon from "src/components/Shared/Icon";
+import { Icon } from "src/components/Shared/Icon";
 import { ConfigurationContext } from "src/hooks/Config";
 import { ManualStateContext } from "./Help/context";
 import { SettingsButton } from "./SettingsButton";

ui/v2.5/src/components/Movies/EditMoviesDialog.tsx

@@ -3,9 +3,10 @@ import { Form, Col, Row } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useBulkMovieUpdate } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { Modal, StudioSelect } from "src/components/Shared";
+import { ModalComponent } from "../Shared/Modal";
-import { useToast } from "src/hooks";
+import { StudioSelect } from "../Shared/Select";
-import { FormUtils } from "src/utils";
+import { useToast } from "src/hooks/Toast";
+import FormUtils from "src/utils/form";
 import { RatingSystem } from "../Shared/Rating/RatingSystem";
 import {
   getAggregateInputValue,
@@ -100,7 +101,7 @@ export const EditMoviesDialog: React.FC<IListOperationProps> = (
 
   function render() {
     return (
-      <Modal
+      <ModalComponent
         show
         icon={faPencilAlt}
         header={intl.formatMessage(
@@ -158,7 +159,7 @@ export const EditMoviesDialog: React.FC<IListOperationProps> = (
             />
           </Form.Group>
         </Form>
-      </Modal>
+      </ModalComponent>
     );
   }
 

ui/v2.5/src/components/Movies/MovieCard.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import * as GQL from "src/core/generated-graphql";
-import {
+import { GridCard } from "../Shared/GridCard";
-  GridCard,
+import { HoverPopover } from "../Shared/HoverPopover";
-  HoverPopover,
+import { Icon } from "../Shared/Icon";
-  Icon,
+import { TagLink } from "../Shared/TagLink";
-  TagLink,
+import { TruncatedText } from "../Shared/TruncatedText";
-  TruncatedText,
-} from "src/components/Shared";
 import { FormattedMessage } from "react-intl";
 import { RatingBanner } from "../Shared/RatingBanner";
 import { faPlayCircle } from "@fortawesome/free-solid-svg-icons";

ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx

@@ -9,13 +9,11 @@ import {
   useMovieDestroy,
 } from "src/core/StashService";
 import { useParams, useHistory } from "react-router-dom";
-import {
+import { DetailsEditNavbar } from "src/components/Shared/DetailsEditNavbar";
-  DetailsEditNavbar,
+import { ErrorMessage } from "src/components/Shared/ErrorMessage";
-  ErrorMessage,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
+import { ModalComponent } from "src/components/Shared/Modal";
-  Modal,
+import { useToast } from "src/hooks/Toast";
-} from "src/components/Shared";
-import { useToast } from "src/hooks";
 import { MovieScenesPanel } from "./MovieScenesPanel";
 import { MovieDetailsPanel } from "./MovieDetailsPanel";
 import { MovieEditPanel } from "./MovieEditPanel";
@@ -111,7 +109,7 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
 
   function renderDeleteAlert() {
     return (
-      <Modal
+      <ModalComponent
         show={isDeleteAlertOpen}
         icon={faTrashAlt}
         accept={{
@@ -131,7 +129,7 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
             }}
           />
         </p>
-      </Modal>
+      </ModalComponent>
     );
   }
 

ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx

@@ -2,8 +2,8 @@ import React, { useMemo, useState } from "react";
 import * as GQL from "src/core/generated-graphql";
 import { useMovieCreate } from "src/core/StashService";
 import { useHistory, useLocation } from "react-router-dom";
-import { LoadingIndicator } from "src/components/Shared";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { MovieEditPanel } from "./MovieEditPanel";
 
 const MovieCreate: React.FC = () => {

ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
-import { DurationUtils, TextUtils } from "src/utils";
+import DurationUtils from "src/utils/duration";
+import TextUtils from "src/utils/text";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { TextField, URLField } from "src/utils/field";
 

ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx

@@ -7,16 +7,16 @@ import {
   queryScrapeMovieURL,
   useListMovieScrapers,
 } from "src/core/StashService";
-import {
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
+import { StudioSelect } from "src/components/Shared/Select";
-  StudioSelect,
+import { DetailsEditNavbar } from "src/components/Shared/DetailsEditNavbar";
-  DetailsEditNavbar,
+import { DurationInput } from "src/components/Shared/DurationInput";
-  DurationInput,
+import { URLField } from "src/components/Shared/URLField";
-  URLField,
+import { useToast } from "src/hooks/Toast";
-} from "src/components/Shared";
-import { useToast } from "src/hooks";
 import { Modal as BSModal, Form, Button, Col, Row } from "react-bootstrap";
-import { DurationUtils, FormUtils, ImageUtils } from "src/utils";
+import DurationUtils from "src/utils/duration";
+import FormUtils from "src/utils/form";
+import ImageUtils from "src/utils/image";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { useFormik } from "formik";
 import { Prompt } from "react-router-dom";

ui/v2.5/src/components/Movies/MovieDetails/MovieScrapeDialog.tsx

@@ -9,10 +9,10 @@ import {
   ScrapeDialogRow,
   ScrapedTextAreaRow,
 } from "src/components/Shared/ScrapeDialog";
-import { StudioSelect } from "src/components/Shared";
+import { StudioSelect } from "src/components/Shared/Select";
-import { DurationUtils } from "src/utils";
+import DurationUtils from "src/utils/duration";
 import { useStudioCreate } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 
 function renderScrapedStudio(
   result: ScrapeResult<string>,

ui/v2.5/src/components/Movies/MovieList.tsx

@@ -16,7 +16,8 @@ import {
   useMoviesList,
   PersistanceLevel,
 } from "src/hooks/ListHook";
-import { ExportDialog, DeleteEntityDialog } from "src/components/Shared";
+import { ExportDialog } from "../Shared/ExportDialog";
+import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
 import { MovieCard } from "./MovieCard";
 import { EditMoviesDialog } from "./EditMoviesDialog";
 

ui/v2.5/src/components/Movies/Movies.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
-import { TITLE_SUFFIX } from "src/components/Shared";
+import { TITLE_SUFFIX } from "src/components/Shared/constants";
 import Movie from "./MovieDetails/Movie";
 import MovieCreate from "./MovieDetails/MovieCreate";
 import { MovieList } from "./MovieList";

ui/v2.5/src/components/Performers/EditPerformersDialog.tsx

@@ -3,9 +3,9 @@ import { Col, Form, Row } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useBulkPerformerUpdate } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { Modal } from "src/components/Shared";
+import { ModalComponent } from "../Shared/Modal";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
-import MultiSet from "../Shared/MultiSet";
+import { MultiSet } from "../Shared/MultiSet";
 import { RatingSystem } from "../Shared/Rating/RatingSystem";
 import {
   getAggregateInputValue,
@@ -20,7 +20,7 @@ import {
 import { IndeterminateCheckbox } from "../Shared/IndeterminateCheckbox";
 import { BulkUpdateTextInput } from "../Shared/BulkUpdateTextInput";
 import { faPencilAlt } from "@fortawesome/free-solid-svg-icons";
-import { FormUtils } from "../../utils";
+import FormUtils from "src/utils/form";
 
 interface IListOperationProps {
   selected: GQL.SlimPerformerDataFragment[];
@@ -181,7 +181,7 @@ export const EditPerformersDialog: React.FC<IListOperationProps> = (
 
   function render() {
     return (
-      <Modal
+      <ModalComponent
         show
         icon={faPencilAlt}
         header={intl.formatMessage(
@@ -317,7 +317,7 @@ export const EditPerformersDialog: React.FC<IListOperationProps> = (
             />
           </Form.Group>
         </Form>
-      </Modal>
+      </ModalComponent>
     );
   }
 

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -2,14 +2,13 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
-import { NavUtils, TextUtils } from "src/utils";
+import NavUtils from "src/utils/navigation";
-import {
+import TextUtils from "src/utils/text";
-  GridCard,
+import { GridCard } from "../Shared/GridCard";
-  CountryFlag,
+import { CountryFlag } from "../Shared/CountryFlag";
-  HoverPopover,
+import { HoverPopover } from "../Shared/HoverPopover";
-  Icon,
+import { Icon } from "../Shared/Icon";
-  TagLink,
+import { TagLink } from "../Shared/TagLink";
-} from "src/components/Shared";
 import { Button, ButtonGroup } from "react-bootstrap";
 import {
   Criterion,

ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx

@@ -12,17 +12,16 @@ import {
   usePerformerDestroy,
   mutateMetadataAutoTag,
 } from "src/core/StashService";
-import {
+import { Counter } from "src/components/Shared/Counter";
-  Counter,
+import { CountryFlag } from "src/components/Shared/CountryFlag";
-  CountryFlag,
+import { DetailsEditNavbar } from "src/components/Shared/DetailsEditNavbar";
-  DetailsEditNavbar,
+import { ErrorMessage } from "src/components/Shared/ErrorMessage";
-  ErrorMessage,
+import { Icon } from "src/components/Shared/Icon";
-  Icon,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
+import { useLightbox } from "src/hooks/Lightbox/hooks";
-} from "src/components/Shared";
+import { useToast } from "src/hooks/Toast";
-import { useLightbox, useToast } from "src/hooks";
 import { ConfigurationContext } from "src/hooks/Config";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { PerformerDetailsPanel } from "./PerformerDetailsPanel";
 import { PerformerScenesPanel } from "./PerformerScenesPanel";

ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { LoadingIndicator } from "src/components/Shared";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { PerformerEditPanel } from "./PerformerEditPanel";
 import { useLocation } from "react-router-dom";
 

ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { TagLink } from "src/components/Shared";
+import { TagLink } from "src/components/Shared/TagLink";
 import * as GQL from "src/core/generated-graphql";
-import { TextUtils, getStashboxBase, getCountryByISO } from "src/utils";
+import TextUtils from "src/utils/text";
+import { getStashboxBase } from "src/utils/stashbox";
+import { getCountryByISO } from "src/utils/country";
 import { TextField, URLField } from "src/utils/field";
 import { cmToImperial, kgToLbs } from "src/utils/units";
 

ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx

@@ -13,17 +13,17 @@ import {
   useTagCreate,
   queryScrapePerformerURL,
 } from "src/core/StashService";
-import {
+import { Icon } from "src/components/Shared/Icon";
-  Icon,
+import { ImageInput } from "src/components/Shared/ImageInput";
-  ImageInput,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
+import { CollapseButton } from "src/components/Shared/CollapseButton";
-  CollapseButton,
+import { TagSelect } from "src/components/Shared/Select";
-  TagSelect,
+import { CountrySelect } from "src/components/Shared/CountrySelect";
-  URLField,
+import { URLField } from "src/components/Shared/URLField";
-  CountrySelect,
+import ImageUtils from "src/utils/image";
-} from "src/components/Shared";
+import { getStashIDs } from "src/utils/stashIds";
-import { ImageUtils, getStashIDs } from "src/utils";
+import { stashboxDisplayName } from "src/utils/stashbox";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { Prompt, useHistory } from "react-router-dom";
 import { useFormik } from "formik";
 import {
@@ -32,7 +32,6 @@ import {
   stringToGender,
 } from "src/utils/gender";
 import { ConfigurationContext } from "src/hooks/Config";
-import { stashboxDisplayName } from "src/utils/stashbox";
 import { PerformerScrapeDialog } from "./PerformerScrapeDialog";
 import PerformerScrapeModal from "./PerformerScrapeModal";
 import PerformerStashBoxModal, { IStashBox } from "./PerformerStashBoxModal";
@@ -68,7 +67,7 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
 
   const isNew = performer.id === undefined;
 
-  // Editing state
+  // Editing stat
   const [scraper, setScraper] = useState<GQL.Scraper | IStashBox>();
   const [newTags, setNewTags] = useState<GQL.ScrapedTag[]>();
   const [isScraperModalOpen, setIsScraperModalOpen] = useState<boolean>(false);

ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx

@@ -12,8 +12,8 @@ import {
 } from "src/components/Shared/ScrapeDialog";
 import { useTagCreate } from "src/core/StashService";
 import { Form } from "react-bootstrap";
-import { TagSelect } from "src/components/Shared";
+import { TagSelect } from "src/components/Shared/Select";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import clone from "lodash-es/clone";
 import {
   genderStrings,

ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeModal.tsx

@@ -4,7 +4,8 @@ import { Button, Form } from "react-bootstrap";
 import { useIntl } from "react-intl";
 
 import * as GQL from "src/core/generated-graphql";
-import { Modal, LoadingIndicator } from "src/components/Shared";
+import { ModalComponent } from "src/components/Shared/Modal";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { useScrapePerformerList } from "src/core/StashService";
 
 const CLASSNAME = "PerformerScrapeModal";
@@ -39,7 +40,7 @@ const PerformerScrapeModal: React.FC<IProps> = ({
   useEffect(() => inputRef.current?.focus(), []);
 
   return (
-    <Modal
+    <ModalComponent
       show
       onHide={onHide}
       header={`Scrape performer from ${scraper.name}`}
@@ -77,7 +78,7 @@ const PerformerScrapeModal: React.FC<IProps> = ({
           </ul>
         )}
       </div>
-    </Modal>
+    </ModalComponent>
   );
 };
 

ui/v2.5/src/components/Performers/PerformerDetails/PerformerStashBoxModal.tsx

@@ -4,7 +4,8 @@ import { Button, Form } from "react-bootstrap";
 import { useIntl } from "react-intl";
 
 import * as GQL from "src/core/generated-graphql";
-import { Modal, LoadingIndicator } from "src/components/Shared";
+import { ModalComponent } from "src/components/Shared/Modal";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { stashboxDisplayName } from "src/utils/stashbox";
 
 const CLASSNAME = "PerformerScrapeModal";
@@ -50,7 +51,7 @@ const PerformerStashBoxModal: React.FC<IProps> = ({
   useEffect(() => inputRef.current?.focus(), []);
 
   return (
-    <Modal
+    <ModalComponent
       show
       onHide={onHide}
       header={`Scrape performer from ${stashboxDisplayName(
@@ -90,7 +91,7 @@ const PerformerStashBoxModal: React.FC<IProps> = ({
           query !== "" && <h5 className="text-center">No results found.</h5>
         )}
       </div>
-    </Modal>
+    </ModalComponent>
   );
 };
 

ui/v2.5/src/components/Performers/PerformerList.tsx

@@ -11,12 +11,16 @@ import {
   queryFindPerformers,
   usePerformersDestroy,
 } from "src/core/StashService";
-import { usePerformersList } from "src/hooks";
+import {
-import { showWhenSelected, PersistanceLevel } from "src/hooks/ListHook";
+  showWhenSelected,
+  PersistanceLevel,
+  usePerformersList,
+} from "src/hooks/ListHook";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
-import { PerformerTagger } from "src/components/Tagger";
+import { PerformerTagger } from "../Tagger/performers/PerformerTagger";
-import { ExportDialog, DeleteEntityDialog } from "src/components/Shared";
+import { ExportDialog } from "../Shared/ExportDialog";
+import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
 import { IPerformerCardExtraCriteria, PerformerCard } from "./PerformerCard";
 import { PerformerListTable } from "./PerformerListTable";
 import { EditPerformersDialog } from "./EditPerformersDialog";

ui/v2.5/src/components/Performers/PerformerListTable.tsx

@@ -5,8 +5,8 @@ import { useIntl } from "react-intl";
 import { Button, Table } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
-import { Icon } from "src/components/Shared";
+import { Icon } from "../Shared/Icon";
-import { NavUtils } from "src/utils";
+import NavUtils from "src/utils/navigation";
 import { faHeart } from "@fortawesome/free-solid-svg-icons";
 import { cmToImperial } from "src/utils/units";
 

ui/v2.5/src/components/Performers/Performers.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
-import { TITLE_SUFFIX } from "src/components/Shared";
+import { TITLE_SUFFIX } from "src/components/Shared/constants";
 import { PersistanceLevel } from "src/hooks/ListHook";
 import Performer from "./PerformerDetails/Performer";
 import PerformerCreate from "./PerformerDetails/PerformerCreate";

ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx

@@ -14,16 +14,14 @@ import { Link, useHistory } from "react-router-dom";
 import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
 
 import * as GQL from "src/core/generated-graphql";
-import {
+import { LoadingIndicator } from "../Shared/LoadingIndicator";
-  LoadingIndicator,
+import { ErrorMessage } from "../Shared/ErrorMessage";
-  ErrorMessage,
+import { HoverPopover } from "../Shared/HoverPopover";
-  HoverPopover,
+import { Icon } from "../Shared/Icon";
-  Icon,
+import { TagLink } from "../Shared/TagLink";
-  TagLink,
+import { SweatDrops } from "../Shared/SweatDrops";
-  SweatDrops,
-} from "src/components/Shared";
 import { Pagination } from "src/components/List/Pagination";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
 import { DeleteScenesDialog } from "src/components/Scenes/DeleteScenesDialog";
 import { EditScenesDialog } from "../Scenes/EditScenesDialog";
 import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";

ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx

@@ -9,8 +9,8 @@ import {
   useScenesUpdate,
 } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { LoadingIndicator } from "src/components/Shared";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { Pagination } from "src/components/List/Pagination";
 import { IParserInput, ParserInput } from "./ParserInput";
 import { ParserField } from "./ParserField";

ui/v2.5/src/components/SceneFilenameParser/SceneParserRow.tsx

@@ -10,7 +10,7 @@ import {
   PerformerSelect,
   TagSelect,
   StudioSelect,
-} from "src/components/Shared";
+} from "src/components/Shared/Select";
 import cx from "classnames";
 import { objectTitle } from "src/core/files";
 

ui/v2.5/src/components/SceneFilenameParser/ShowFields.tsx

@@ -7,7 +7,7 @@ import {
 import React, { useState } from "react";
 import { Button, Collapse } from "react-bootstrap";
 import { useIntl } from "react-intl";
-import { Icon } from "src/components/Shared";
+import { Icon } from "src/components/Shared/Icon";
 
 interface IShowFieldsProps {
   fields: Map<string, boolean>;

ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx

@@ -8,7 +8,7 @@ import React, {
 import { Button } from "react-bootstrap";
 import axios from "axios";
 import * as GQL from "src/core/generated-graphql";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
 import { WebVTT } from "videojs-vtt.js";
 
 interface IScenePlayerScrubberProps {

ui/v2.5/src/components/ScenePlayer/index.ts

@@ -1 +0,0 @@
-export * from "./ScenePlayer";

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

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { Form } from "react-bootstrap";
 import { useScenesDestroy } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { Modal } from "src/components/Shared";
+import { ModalComponent } from "src/components/Shared/Modal";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { ConfigurationContext } from "src/hooks/Config";
 import { FormattedMessage, useIntl } from "react-intl";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
@@ -126,7 +126,7 @@ export const DeleteScenesDialog: React.FC<IDeleteSceneDialogProps> = (
   }
 
   return (
-    <Modal
+    <ModalComponent
       show
       icon={faTrashAlt}
       header={header}
@@ -162,7 +162,7 @@ export const DeleteScenesDialog: React.FC<IDeleteSceneDialogProps> = (
           onChange={() => setDeleteGenerated(!deleteGenerated)}
         />
       </Form>
-    </Modal>
+    </ModalComponent>
   );
 };
 

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

@@ -4,10 +4,11 @@ import { FormattedMessage, useIntl } from "react-intl";
 import isEqual from "lodash-es/isEqual";
 import { useBulkSceneUpdate } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
-import { StudioSelect, Modal } from "src/components/Shared";
+import { StudioSelect } from "../Shared/Select";
-import { useToast } from "src/hooks";
+import { ModalComponent } from "../Shared/Modal";
-import { FormUtils } from "src/utils";
+import { MultiSet } from "../Shared/MultiSet";
-import MultiSet from "../Shared/MultiSet";
+import { useToast } from "src/hooks/Toast";
+import FormUtils from "src/utils/form";
 import { RatingSystem } from "../Shared/Rating/RatingSystem";
 import {
   getAggregateInputIDs,
@@ -241,7 +242,7 @@ export const EditScenesDialog: React.FC<IListOperationProps> = (
 
   function render() {
     return (
-      <Modal
+      <ModalComponent
         show
         icon={faPencilAlt}
         header={intl.formatMessage(
@@ -322,7 +323,7 @@ export const EditScenesDialog: React.FC<IListOperationProps> = (
             />
           </Form.Group>
         </Form>
-      </Modal>
+      </ModalComponent>
     );
   }
 

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

@@ -3,14 +3,13 @@ import { Button, ButtonGroup } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
-import {
+import { Icon } from "../Shared/Icon";
-  Icon,
+import { TagLink } from "../Shared/TagLink";
-  TagLink,
+import { HoverPopover } from "../Shared/HoverPopover";
-  HoverPopover,
+import { SweatDrops } from "../Shared/SweatDrops";
-  SweatDrops,
+import { TruncatedText } from "../Shared/TruncatedText";
-  TruncatedText,
+import NavUtils from "src/utils/navigation";
-} from "src/components/Shared";
+import TextUtils from "src/utils/text";
-import { NavUtils, TextUtils } from "src/utils";
 import { SceneQueue } from "src/models/sceneQueue";
 import { ConfigurationContext } from "src/hooks/Config";
 import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";

ui/v2.5/src/components/Scenes/SceneDetails/ExternalPlayerButton.tsx

@@ -2,7 +2,7 @@ import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import React from "react";
 import { Button } from "react-bootstrap";
 import { useIntl } from "react-intl";
-import Icon from "src/components/Shared/Icon";
+import { Icon } from "src/components/Shared/Icon";
 import { objectTitle } from "src/core/files";
 import { SceneDataFragment } from "src/core/generated-graphql";
 

ui/v2.5/src/components/Scenes/SceneDetails/OCounterButton.tsx

@@ -2,7 +2,9 @@ import { faBan, faMinus } from "@fortawesome/free-solid-svg-icons";
 import React, { useState } from "react";
 import { Button, ButtonGroup, Dropdown, DropdownButton } from "react-bootstrap";
 import { useIntl } from "react-intl";
-import { Icon, LoadingIndicator, SweatDrops } from "src/components/Shared";
+import { Icon } from "src/components/Shared/Icon";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
+import { SweatDrops } from "src/components/Shared/SweatDrops";
 
 export interface IOCounterButtonProps {
   value: number;

ui/v2.5/src/components/Scenes/SceneDetails/OrganizedButton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import cx from "classnames";
 import { Button, Spinner } from "react-bootstrap";
-import Icon from "src/components/Shared/Icon";
+import { Icon } from "src/components/Shared/Icon";
 import { defineMessages, useIntl } from "react-intl";
 import { faBox } from "@fortawesome/free-solid-svg-icons";
 

ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import cx from "classnames";
 import { Button, Form, Spinner } from "react-bootstrap";
-import Icon from "src/components/Shared/Icon";
+import { Icon } from "src/components/Shared/Icon";
 import { useIntl } from "react-intl";
 import {
   faChevronDown,

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -23,13 +23,11 @@ import {
   queryFindScenesByID,
 } from "src/core/StashService";
 
-import {
+import { ErrorMessage } from "src/components/Shared/ErrorMessage";
-  ErrorMessage,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
+import { Icon } from "src/components/Shared/Icon";
-  Icon,
+import { Counter } from "src/components/Shared/Counter";
-  Counter,
+import { useToast } from "src/hooks/Toast";
-} from "src/components/Shared";
-import { useToast } from "src/hooks";
 import SceneQueue, { QueuedScene } from "src/models/sceneQueue";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import Mousetrap from "mousetrap";

ui/v2.5/src/components/Scenes/SceneDetails/SceneCreate.tsx

@@ -3,8 +3,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useLocation } from "react-router-dom";
 import { SceneEditPanel } from "./SceneEditPanel";
 import { useFindScene } from "src/core/StashService";
-import { ImageUtils } from "src/utils";
+import ImageUtils from "src/utils/image";
-import { LoadingIndicator } from "src/components/Shared";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 
 const SceneCreate: React.FC = () => {
   const intl = useIntl();

ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx

@@ -4,7 +4,7 @@ import { FormattedDate, FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import TextUtils from "src/utils/text";
 import { TagLink } from "src/components/Shared/TagLink";
-import TruncatedText from "src/components/Shared/TruncatedText";
+import { TruncatedText } from "src/components/Shared/TruncatedText";
 import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { sortPerformers } from "src/core/performers";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";

ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx

@@ -26,14 +26,16 @@ import {
   TagSelect,
   StudioSelect,
   GallerySelect,
-  Icon,
+  MovieSelect,
-  LoadingIndicator,
+} from "src/components/Shared/Select";
-  ImageInput,
+import { Icon } from "src/components/Shared/Icon";
-  URLField,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-} from "src/components/Shared";
+import { ImageInput } from "src/components/Shared/ImageInput";
-import useToast from "src/hooks/Toast";
+import { URLField } from "src/components/Shared/URLField";
-import { ImageUtils, FormUtils, getStashIDs } from "src/utils";
+import { useToast } from "src/hooks/Toast";
-import { MovieSelect } from "src/components/Shared/Select";
+import ImageUtils from "src/utils/image";
+import FormUtils from "src/utils/form";
+import { getStashIDs } from "src/utils/stashIds";
 import { useFormik } from "formik";
 import { Prompt, useHistory } from "react-router-dom";
 import { ConfigurationContext } from "src/hooks/Config";

ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx

@@ -7,13 +7,15 @@ import {
   useIntl,
 } from "react-intl";
 import { useHistory } from "react-router-dom";
-import { TruncatedText } from "src/components/Shared";
+import { TruncatedText } from "src/components/Shared/TruncatedText";
-import DeleteFilesDialog from "src/components/Shared/DeleteFilesDialog";
+import { DeleteFilesDialog } from "src/components/Shared/DeleteFilesDialog";
-import ReassignFilesDialog from "src/components/Shared/ReassignFilesDialog";
+import { ReassignFilesDialog } from "src/components/Shared/ReassignFilesDialog";
 import * as GQL from "src/core/generated-graphql";
 import { mutateSceneSetPrimaryFile } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
-import { NavUtils, TextUtils, getStashboxBase } from "src/utils";
+import NavUtils from "src/utils/navigation";
+import TextUtils from "src/utils/text";
+import { getStashboxBase } from "src/utils/stashbox";
 import { TextField, URLField } from "src/utils/field";
 
 interface IFileInfoPanelProps {

ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx

@@ -8,13 +8,10 @@ import {
   useSceneMarkerUpdate,
   useSceneMarkerDestroy,
 } from "src/core/StashService";
-import {
+import { DurationInput } from "src/components/Shared/DurationInput";
-  DurationInput,
+import { TagSelect, MarkerTitleSuggest } from "src/components/Shared/Select";
-  TagSelect,
-  MarkerTitleSuggest,
-} from "src/components/Shared";
 import { getPlayerPosition } from "src/components/ScenePlayer/util";
-import useToast from "src/hooks/Toast";
+import { useToast } from "src/hooks/Toast";
 
 interface IFormFields {
   title: string;

ui/v2.5/src/components/Scenes/SceneDetails/SceneQueryModal.tsx

@@ -3,14 +3,12 @@ import { Badge, Button, Col, Form, InputGroup, Row } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import * as GQL from "src/core/generated-graphql";
-import {
+import { ModalComponent } from "src/components/Shared/Modal";
-  Modal,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
+import { TruncatedText } from "src/components/Shared/TruncatedText";
-  TruncatedText,
+import { Icon } from "src/components/Shared/Icon";
-  Icon,
-} from "src/components/Shared";
 import { queryScrapeSceneQuery } from "src/core/StashService";
-import useToast from "src/hooks/Toast";
+import { useToast } from "src/hooks/Toast";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 
 interface ISceneSearchResultDetailsProps {
@@ -187,7 +185,7 @@ export const SceneQueryModal: React.FC<IProps> = ({
   }
 
   return (
-    <Modal
+    <ModalComponent
       show
       onHide={onHide}
       modalProps={{ size: "lg", dialogClassName: "scrape-query-dialog" }}
@@ -233,7 +231,7 @@ export const SceneQueryModal: React.FC<IProps> = ({
           renderResults()
         )}
       </div>
-    </Modal>
+    </ModalComponent>
   );
 };
 

ui/v2.5/src/components/Scenes/SceneDetails/SceneScrapeDialog.tsx

@@ -1,7 +1,11 @@
 import React, { useMemo, useState } from "react";
-import { StudioSelect, PerformerSelect } from "src/components/Shared";
 import * as GQL from "src/core/generated-graphql";
-import { MovieSelect, TagSelect } from "src/components/Shared/Select";
+import {
+  MovieSelect,
+  TagSelect,
+  StudioSelect,
+  PerformerSelect,
+} from "src/components/Shared/Select";
 import {
   ScrapeDialog,
   ScrapeDialogRow,
@@ -19,7 +23,7 @@ import {
   useTagCreate,
   makePerformerCreateInput,
 } from "src/core/StashService";
-import useToast from "src/hooks/Toast";
+import { useToast } from "src/hooks/Toast";
 import DurationUtils from "src/utils/duration";
 import { useIntl } from "react-intl";
 

ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Form } from "react-bootstrap";
-import TruncatedText from "src/components/Shared/TruncatedText";
+import { TruncatedText } from "src/components/Shared/TruncatedText";
 import { VIDEO_PLAYER_ID } from "src/components/ScenePlayer/util";
 import * as GQL from "src/core/generated-graphql";
 

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

@@ -8,11 +8,14 @@ import {
   SlimSceneDataFragment,
 } from "src/core/generated-graphql";
 import { queryFindScenes } from "src/core/StashService";
-import { useScenesList } from "src/hooks";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
-import { showWhenSelected, PersistanceLevel } from "src/hooks/ListHook";
+import {
-import Tagger from "src/components/Tagger";
+  showWhenSelected,
+  PersistanceLevel,
+  useScenesList,
+} from "src/hooks/ListHook";
+import { Tagger } from "../Tagger/scenes/SceneTagger";
 import { IPlaySceneOptions, SceneQueue } from "src/models/sceneQueue";
 import { WallPanel } from "../Wall/WallPanel";
 import { SceneListTable } from "./SceneListTable";

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

@@ -4,8 +4,9 @@ import React from "react";
 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";
+import NavUtils from "src/utils/navigation";
-import { Icon } from "src/components/Shared";
+import TextUtils from "src/utils/text";
+import { Icon } from "src/components/Shared/Icon";
 import { FormattedMessage } from "react-intl";
 import { objectTitle } from "src/core/files";
 

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

@@ -3,13 +3,12 @@ import React from "react";
 import { useHistory } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
-import { TITLE_SUFFIX } from "src/components/Shared";
+import { TITLE_SUFFIX } from "src/components/Shared/constants";
 import Mousetrap from "mousetrap";
 import { FindSceneMarkersQueryResult } from "src/core/generated-graphql";
 import { queryFindSceneMarkers } from "src/core/StashService";
-import { NavUtils } from "src/utils";
+import NavUtils from "src/utils/navigation";
-import { useSceneMarkersList } from "src/hooks";
+import { PersistanceLevel, useSceneMarkersList } from "src/hooks/ListHook";
-import { PersistanceLevel } from "src/hooks/ListHook";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 import { WallPanel } from "../Wall/WallPanel";

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

@@ -1,18 +1,15 @@
-import { Form, Col, Row, Button, FormControl } from "react-bootstrap";
+import { Form, Col, Row, Button, FormControl, Modal } from "react-bootstrap";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import * as GQL from "src/core/generated-graphql";
-import {
+import { Icon } from "../Shared/Icon";
-  GallerySelect,
+import { LoadingIndicator } from "../Shared/LoadingIndicator";
-  Icon,
+import { StringListSelect, GallerySelect, SceneSelect } from "../Shared/Select";
-  LoadingIndicator,
+import FormUtils from "src/utils/form";
-  Modal,
+import ImageUtils from "src/utils/image";
-  SceneSelect,
+import TextUtils from "src/utils/text";
-  StringListSelect,
-} from "src/components/Shared";
-import { FormUtils, ImageUtils, TextUtils } from "src/utils";
 import { mutateSceneMerge, queryFindScenesByID } from "src/core/StashService";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
 import { faExchangeAlt, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import {
   hasScrapedValues,

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

@@ -2,7 +2,7 @@ import React, { lazy } from "react";
 import { Route, Switch } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
-import { TITLE_SUFFIX } from "src/components/Shared";
+import { TITLE_SUFFIX } from "src/components/Shared/constants";
 import { PersistanceLevel } from "src/hooks/ListHook";
 
 const SceneList = lazy(() => import("./SceneList"));

ui/v2.5/src/components/Settings/Inputs.tsx

@@ -2,7 +2,7 @@ import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import React, { PropsWithChildren, useState } from "react";
 import { Button, Collapse, Form, Modal, ModalProps } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Icon } from "../Shared";
+import { Icon } from "../Shared/Icon";
 import { StringListInput } from "../Shared/StringListInput";
 
 interface ISetting {

ui/v2.5/src/components/Settings/Settings.tsx

@@ -3,7 +3,7 @@ import { Tab, Nav, Row, Col } from "react-bootstrap";
 import { useHistory, useLocation } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
-import { TITLE_SUFFIX } from "src/components/Shared";
+import { TITLE_SUFFIX } from "src/components/Shared/constants";
 import { SettingsAboutPanel } from "./SettingsAboutPanel";
 import { SettingsConfigurationPanel } from "./SettingsSystemPanel";
 import { SettingsInterfacePanel } from "./SettingsInterfacePanel/SettingsInterfacePanel";

ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 import { Button, Form } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
-import {
+import { DurationInput } from "src/components/Shared/DurationInput";
-  DurationInput,
+import { PercentInput } from "src/components/Shared/PercentInput";
-  PercentInput,
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
-  LoadingIndicator,
-} from "src/components/Shared";
 import { CheckboxGroup } from "./CheckboxGroup";
 import { SettingSection } from "../SettingSection";
 import {
@@ -16,13 +14,13 @@ import {
   StringSetting,
 } from "../Inputs";
 import { SettingStateContext } from "../context";
-import { DurationUtils } from "src/utils";
+import DurationUtils from "src/utils/duration";
 import * as GQL from "src/core/generated-graphql";
 import {
   imageLightboxDisplayModeIntlMap,
   imageLightboxScrollModeIntlMap,
 } from "src/core/enums";
-import { useInterfaceLocalForage } from "src/hooks";
+import { useInterfaceLocalForage } from "src/hooks/LocalForage";
 import {
   ConnectionState,
   connectionStateLabel,

ui/v2.5/src/components/Settings/SettingsLibraryPanel.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Icon, LoadingIndicator } from "src/components/Shared";
+import { Icon } from "../Shared/Icon";
+import { LoadingIndicator } from "../Shared/LoadingIndicator";
 import { StashSetting } from "./StashConfiguration";
 import { SettingSection } from "./SettingSection";
 import { BooleanSetting, StringListSetting, StringSetting } from "./Inputs";

ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx

@@ -3,9 +3,11 @@ import { Button } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { mutateReloadPlugins, usePlugins } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
-import { CollapseButton, Icon, LoadingIndicator } from "src/components/Shared";
+import { CollapseButton } from "../Shared/CollapseButton";
+import { Icon } from "../Shared/Icon";
+import { LoadingIndicator } from "../Shared/LoadingIndicator";
 import { SettingSection } from "./SettingSection";
 import { Setting, SettingGroup } from "./Inputs";
 import { faLink, faSyncAlt } from "@fortawesome/free-solid-svg-icons";

ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx

@@ -8,9 +8,11 @@ import {
   useListSceneScrapers,
   useListGalleryScrapers,
 } from "src/core/StashService";
-import { useToast } from "src/hooks";
+import { useToast } from "src/hooks/Toast";
-import { TextUtils } from "src/utils";
+import TextUtils from "src/utils/text";
-import { CollapseButton, Icon, LoadingIndicator } from "src/components/Shared";
+import { CollapseButton } from "../Shared/CollapseButton";
+import { Icon } from "../Shared/Icon";
+import { LoadingIndicator } from "../Shared/LoadingIndicator";
 import { ScrapeType } from "src/core/generated-graphql";
 import { SettingSection } from "./SettingSection";
 import { BooleanSetting, StringListSetting, StringSetting } from "./Inputs";