Upgraded SixLabors.ImageSharp to 3.1.11

ignore-downstream

Co-authored-by: Weblate <noreply@weblate.org>
Co-authored-by: wavybox <leeviervoemil@gmail.com>
Translate-URL: https://translate.servarr.com/projects/servarr/sonarr/
Translate-URL: https://translate.servarr.com/projects/servarr/sonarr/fi/
Translation: Servarr/Sonarr

.github/actions/build/action.yml

@@ -170,7 +170,7 @@ runs:
         framework="${{ inputs.framework }}"
         runtime="${{ inputs.runtime }}"
 
-        cp test.sh "_tests/$framework/$runtime/publish"
+        cp scripts/test.sh "_tests/$framework/$runtime/publish"
 
         rm -f _tests/$framework/$runtime/*.log.config
 

.github/workflows/api_docs.yml

@@ -33,7 +33,7 @@ jobs:
         id: setup-dotnet
 
       - name: Create openapi.json
-        run: ./docs.sh Linux x64
+        run: ./scripts/docs.sh Linux x64
 
       - name: Commit API Docs Change
         continue-on-error: true
@@ -50,3 +50,16 @@ jobs:
           else
             echo "No changes since last run"
           fi
+
+      - name: Notify
+        if: failure()
+        uses: tsickert/discord-webhook@v6.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          username: "GitHub Actions"
+          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+          embed-title: "${{ github.workflow }}: Failure"
+          embed-url: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+          embed-description: |
+            Failed to update API docs
+          embed-color: "15158332"

README.md

@@ -82,4 +82,4 @@ Thank you to [<img src="https://resources.jetbrains.com/storage/products/company
 ### Licenses
 
 - [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-- Copyright 2010-2024
+- Copyright 2010-2025

distribution/debian/install.sh

@@ -6,6 +6,7 @@
 ### Version V1.0.1 2024-01-02 - StevieTV - remove UTF8-BOM
 ### Version V1.0.2 2024-01-03 - markus101 - Get user input from /dev/tty
 ### Version V1.0.3 2024-01-06 - StevieTV - exit script when it is ran from install directory
+### Version V1.0.4 2025-04-05 - kaecyra - Allow user/group to be supplied via CLI, add unattended mode
 
 ### Boilerplate Warning
 #THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
@@ -16,8 +17,8 @@
 #OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 #WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-scriptversion="1.0.3"
-scriptdate="2024-01-06"
+scriptversion="1.0.4"
+scriptdate="2025-04-05"
 
 set -euo pipefail
 
@@ -49,18 +50,106 @@ if [ "$installdir" == "$(dirname -- "$( readlink -f -- "$0"; )")" ] || [ "$bindi
     exit
 fi
 
-# Prompt User
-read -r -p "What user should ${app^} run as? (Default: $app): " app_uid < /dev/tty
+show_help() {
+    cat <<EOF
+Usage: $(basename "$0") [OPTIONS]
+
+Options:
+  --user <name>       What user will $app run under?
+                      User will be created if it doesn't already exist.
+
+  --group <name>      What group will $app run under?
+                      Group will be created if it doesn't already exist.
+
+  -u                  Unattended mode
+                      The installer will not prompt or pause, making it suitable for automated installations.
+                      This option requires the use of --user and --group to supply those inputs for the script.
+
+  -h, --help          Show this help message and exit
+EOF
+}
+
+# Default values for command-line arguments
+arg_user=""
+arg_group=""
+arg_unattended=false
+
+# Parse command-line arguments
+while [[ $# -gt 0 ]]; do
+    case "$1" in
+        --user=*)
+            arg_user="${1#*=}"
+            shift
+            ;;
+        --user)
+            if [[ -n "$2" && "$2" != -* ]]; then
+                arg_user="$2"
+                shift 2
+            else
+                echo "Error: --user requires a value." >&2
+                exit 1
+            fi
+            ;;
+        --group=*)
+            arg_group="${1#*=}"
+            shift
+            ;;
+        --group)
+            if [[ -n "$2" && "$2" != -* ]]; then
+                arg_group="$2"
+                shift 2
+            else
+                echo "Error: --group requires a value." >&2
+                exit 1
+            fi
+            ;;
+        -u)
+            arg_unattended=true
+            shift
+            ;;
+        -h|--help)
+            show_help
+            exit 0
+            ;;
+        *)
+            echo "Unknown option: $1" >&2
+            echo "Use --help to see valid options." >&2
+            exit 1
+            ;;
+    esac
+done
+
+# If unattended mode is requested, require user and group
+if $arg_unattended; then
+    if [[ -z "$arg_user" || -z "$arg_group" ]]; then
+        echo "Error: --user and --group are required when using -u (unattended mode)." >&2
+        exit 1
+    fi
+fi
+
+# Prompt User if necessary
+if [ -n "$arg_user" ]; then
+    app_uid="$arg_user"
+else
+    read -r -p "What user should ${app^} run as? (Default: $app): " app_uid < /dev/tty
+fi
 app_uid=$(echo "$app_uid" | tr -d ' ')
 app_uid=${app_uid:-$app}
-# Prompt Group
-read -r -p "What group should ${app^} run as? (Default: media): " app_guid < /dev/tty
+
+# Prompt Group if necessary
+if [ -n "$arg_group" ]; then
+    app_guid="$arg_group"
+else
+    read -r -p "What group should ${app^} run as? (Default: media): " app_guid < /dev/tty
+fi
 app_guid=$(echo "$app_guid" | tr -d ' ')
 app_guid=${app_guid:-media}
 
 echo "This will install [${app^}] to [$bindir] and use [$datadir] for the AppData Directory"
 echo "${app^} will run as the user [$app_uid] and group [$app_guid]. By continuing, you've confirmed that the selected user and group will have READ and WRITE access to your Media Library and Download Client Completed Download directories"
-read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
+if ! $arg_unattended; then
+    read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
+fi
 
 # Create User / Group as needed
 if [ "$app_guid" != "$app_uid" ]; then

docker/tests/mono/startup.sh

@@ -7,9 +7,9 @@ cd /data/test
 
 runTest()
 {
-    bash test.sh Linux $1
+    bash scripts/test.sh Linux $1
     cp TestResult.xml /data/_tests_results/TestResult_$1.xml
 }
 
 runTest Integration
-runTest Unit
+runTest Unit

frontend/build/webpack.config.js

@@ -65,7 +65,7 @@ module.exports = (env) => {
 
     output: {
       path: distFolder,
-      publicPath: '/',
+      publicPath: 'auto',
       filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
       sourceMapFilename: '[file].map'
     },
@@ -176,7 +176,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: '3.39'
+                      corejs: '3.42'
                     }
                   ]
                 ]

frontend/src/Activity/History/Details/HistoryDetails.tsx

@@ -174,7 +174,7 @@ function HistoryDetails(props: HistoryDetailsProps) {
   }
 
   if (eventType === 'downloadFailed') {
-    const { message } = data as DownloadFailedHistory;
+    const { message, indexer } = data as DownloadFailedHistory;
 
     return (
       <DescriptionList>
@@ -188,6 +188,10 @@ function HistoryDetails(props: HistoryDetailsProps) {
           <DescriptionListItem title={translate('GrabId')} data={downloadId} />
         ) : null}
 
+        {indexer ? (
+          <DescriptionListItem title={translate('Indexer')} data={indexer} />
+        ) : null}
+
         {message ? (
           <DescriptionListItem title={translate('Message')} data={message} />
         ) : null}

frontend/src/Activity/Queue/QueueDetails.tsx

@@ -61,7 +61,7 @@ function QueueDetails(props: QueueDetailsProps) {
         anchor={progressBar!}
         title={`${state} - ${progress.toFixed(1)}%`}
         body={<div>{title}</div>}
-        position={tooltipPositions.LEFT}
+        position="bottom-start"
       />
     );
   }

frontend/src/Activity/Queue/RemoveQueueItemModal.tsx

@@ -1,7 +1,10 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
+import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -9,6 +12,8 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import { setQueueRemovalOption } from 'Store/Actions/queueActions';
+import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
 import styles from './RemoveQueueItemModal.css';
 
@@ -30,12 +35,6 @@ interface RemoveQueueItemModalProps {
   onModalClose: () => void;
 }
 
-type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore';
-type BlocklistMethod =
-  | 'doNotBlocklist'
-  | 'blocklistAndSearch'
-  | 'blocklistOnly';
-
 function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
   const {
     isOpen,
@@ -48,12 +47,13 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
     onModalClose,
   } = props;
 
+  const dispatch = useDispatch();
+
   const multipleSelected = selectedCount && selectedCount > 1;
 
-  const [removalMethod, setRemovalMethod] =
-    useState<RemovalMethod>('removeFromClient');
-  const [blocklistMethod, setBlocklistMethod] =
-    useState<BlocklistMethod>('doNotBlocklist');
+  const { removalMethod, blocklistMethod } = useSelector(
+    (state: AppState) => state.queue.removalOptions
+  );
 
   const { title, message } = useMemo(() => {
     if (!selectedCount) {
@@ -79,7 +79,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
   }, [sourceTitle, selectedCount]);
 
   const removalMethodOptions = useMemo(() => {
-    return [
+    const options: EnhancedSelectInputValue<string>[] = [
       {
         key: 'removeFromClient',
         value: translate('RemoveFromDownloadClient'),
@@ -106,10 +106,12 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
           : translate('IgnoreDownloadHint'),
       },
     ];
+
+    return options;
   }, [canChangeCategory, canIgnore, multipleSelected]);
 
   const blocklistMethodOptions = useMemo(() => {
-    return [
+    const options: EnhancedSelectInputValue<string>[] = [
       {
         key: 'doNotBlocklist',
         value: translate('DoNotBlocklist'),
@@ -131,20 +133,15 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
           : translate('BlocklistOnlyHint'),
       },
     ];
+
+    return options;
   }, [isPending, multipleSelected]);
 
-  const handleRemovalMethodChange = useCallback(
-    ({ value }: { value: RemovalMethod }) => {
-      setRemovalMethod(value);
+  const handleRemovalOptionInputChange = useCallback(
+    ({ name, value }: InputChanged) => {
+      dispatch(setQueueRemovalOption({ [name]: value }));
     },
-    [setRemovalMethod]
-  );
-
-  const handleBlocklistMethodChange = useCallback(
-    ({ value }: { value: BlocklistMethod }) => {
-      setBlocklistMethod(value);
-    },
-    [setBlocklistMethod]
+    [dispatch]
   );
 
   const handleConfirmRemove = useCallback(() => {
@@ -154,23 +151,11 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
       blocklist: blocklistMethod !== 'doNotBlocklist',
       skipRedownload: blocklistMethod === 'blocklistOnly',
     });
-
-    setRemovalMethod('removeFromClient');
-    setBlocklistMethod('doNotBlocklist');
-  }, [
-    removalMethod,
-    blocklistMethod,
-    setRemovalMethod,
-    setBlocklistMethod,
-    onRemovePress,
-  ]);
+  }, [removalMethod, blocklistMethod, onRemovePress]);
 
   const handleModalClose = useCallback(() => {
-    setRemovalMethod('removeFromClient');
-    setBlocklistMethod('doNotBlocklist');
-
     onModalClose();
-  }, [setRemovalMethod, setBlocklistMethod, onModalClose]);
+  }, [onModalClose]);
 
   return (
     <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={handleModalClose}>
@@ -193,7 +178,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
                 helpTextWarning={translate(
                   'RemoveQueueItemRemovalMethodHelpTextWarning'
                 )}
-                onChange={handleRemovalMethodChange}
+                onChange={handleRemovalOptionInputChange}
               />
             </FormGroup>
           )}
@@ -211,7 +196,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
               value={blocklistMethod}
               values={blocklistMethodOptions}
               helpText={translate('BlocklistReleaseHelpText')}
-              onChange={handleBlocklistMethodChange}
+              onChange={handleRemovalOptionInputChange}
             />
           </FormGroup>
         </ModalBody>

frontend/src/AddSeries/AddNewSeries/AddNewSeries.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { AddSeries } from 'App/State/AddSeriesAppState';
 import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
 import TextInput from 'Components/Form/TextInput';
@@ -10,7 +9,6 @@ import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
 import useDebounce from 'Helpers/Hooks/useDebounce';
 import useQueryParams from 'Helpers/Hooks/useQueryParams';
 import { icons, kinds } from 'Helpers/Props';
@@ -18,6 +16,7 @@ import { InputChanged } from 'typings/inputs';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
 import AddNewSeriesSearchResult from './AddNewSeriesSearchResult';
+import { useLookupSeries } from './useAddSeries';
 import styles from './AddNewSeries.css';
 
 function AddNewSeries() {
@@ -48,12 +47,7 @@ function AddNewSeries() {
     isFetching: isFetchingApi,
     error,
     data = [],
-  } = useApiQuery<AddSeries[]>({
-    path: `/series/lookup?term=${query}`,
-    queryOptions: {
-      enabled: !!query,
-    },
-  });
+  } = useLookupSeries(query);
 
   useEffect(() => {
     setIsFetching(isFetchingApi);
@@ -103,7 +97,9 @@ function AddNewSeries() {
         {!isFetching && !error && !!data.length ? (
           <div className={styles.searchResults}>
             {data.map((item) => {
-              return <AddNewSeriesSearchResult key={item.tvdbId} {...item} />;
+              return (
+                <AddNewSeriesSearchResult key={item.tvdbId} series={item} />
+              );
             })}
           </div>
         ) : null}

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.tsx

@@ -1,9 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
+import AddSeries from 'AddSeries/AddSeries';
+import {
+  AddSeriesOptions,
+  setAddSeriesOption,
+  useAddSeriesOptions,
+} from 'AddSeries/addSeriesOptionsStore';
 import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
 import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
-import { AddSeries } from 'App/State/AddSeriesAppState';
-import AppState from 'App/State/AppState';
 import CheckInput from 'Components/Form/CheckInput';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -17,46 +21,43 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import { SeriesType } from 'Series/Series';
 import SeriesPoster from 'Series/SeriesPoster';
-import { addSeries, setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import selectSettings from 'Store/Selectors/selectSettings';
 import useIsWindows from 'System/useIsWindows';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
+import { useAddSeries } from './useAddSeries';
 import styles from './AddNewSeriesModalContent.css';
 
-export interface AddNewSeriesModalContentProps
-  extends Pick<
-    AddSeries,
-    'tvdbId' | 'title' | 'year' | 'overview' | 'images' | 'folder'
-  > {
-  initialSeriesType: string;
+export interface AddNewSeriesModalContentProps {
+  series: AddSeries;
+  initialSeriesType: SeriesType;
   onModalClose: () => void;
 }
 
 function AddNewSeriesModalContent({
-  tvdbId,
-  title,
-  year,
-  overview,
-  images,
-  folder,
+  series,
   initialSeriesType,
   onModalClose,
 }: AddNewSeriesModalContentProps) {
-  const dispatch = useDispatch();
-  const { isAdding, addError, defaults } = useSelector(
-    (state: AppState) => state.addSeries
-  );
+  const { title, year, overview, images, folder } = series;
+  const options = useAddSeriesOptions();
   const { isSmallScreen } = useSelector(createDimensionsSelector());
   const isWindows = useIsWindows();
 
-  const { settings, validationErrors, validationWarnings } = useMemo(() => {
-    return selectSettings(defaults, {}, addError);
-  }, [defaults, addError]);
+  const {
+    isPending: isAdding,
+    error: addError,
+    mutate: addSeries,
+  } = useAddSeries();
 
-  const [seriesType, setSeriesType] = useState(
+  const { settings, validationErrors, validationWarnings } = useMemo(() => {
+    return selectSettings(options, {}, addError);
+  }, [options, addError]);
+
+  const [seriesType, setSeriesType] = useState<SeriesType>(
     initialSeriesType === 'standard'
       ? settings.seriesType.value
       : initialSeriesType
@@ -74,35 +75,33 @@ function AddNewSeriesModalContent({
   } = settings;
 
   const handleInputChange = useCallback(
-    ({ name, value }: InputChanged) => {
-      dispatch(setAddSeriesDefault({ [name]: value }));
+    ({ name, value }: InputChanged<string | number | boolean | number[]>) => {
+      setAddSeriesOption(name as keyof AddSeriesOptions, value);
     },
-    [dispatch]
+    []
   );
 
   const handleQualityProfileIdChange = useCallback(
     ({ value }: InputChanged<string | number>) => {
-      dispatch(setAddSeriesDefault({ qualityProfileId: value }));
+      setAddSeriesOption('qualityProfileId', value as number);
     },
-    [dispatch]
+    []
   );
 
   const handleAddSeriesPress = useCallback(() => {
-    dispatch(
-      addSeries({
-        tvdbId,
-        rootFolderPath: rootFolderPath.value,
-        monitor: monitor.value,
-        qualityProfileId: qualityProfileId.value,
-        seriesType,
-        seasonFolder: seasonFolder.value,
-        searchForMissingEpisodes: searchForMissingEpisodes.value,
-        searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
-        tags: tags.value,
-      })
-    );
+    addSeries({
+      ...series,
+      rootFolderPath: rootFolderPath.value,
+      monitor: monitor.value,
+      qualityProfileId: qualityProfileId.value,
+      seriesType,
+      seasonFolder: seasonFolder.value,
+      searchForMissingEpisodes: searchForMissingEpisodes.value,
+      searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
+      tags: tags.value,
+    });
   }, [
-    tvdbId,
+    series,
     seriesType,
     rootFolderPath,
     monitor,
@@ -111,7 +110,7 @@ function AddNewSeriesModalContent({
     searchForMissingEpisodes,
     searchForCutoffUnmetEpisodes,
     tags,
-    dispatch,
+    addSeries,
   ]);
 
   useEffect(() => {

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { AddSeries } from 'App/State/AddSeriesAppState';
+import AddSeries from 'AddSeries/AddSeries';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
@@ -16,24 +16,27 @@ import translate from 'Utilities/String/translate';
 import AddNewSeriesModal from './AddNewSeriesModal';
 import styles from './AddNewSeriesSearchResult.css';
 
-type AddNewSeriesSearchResultProps = AddSeries;
+interface AddNewSeriesSearchResultProps {
+  series: AddSeries;
+}
+
+function AddNewSeriesSearchResult({ series }: AddNewSeriesSearchResultProps) {
+  const {
+    tvdbId,
+    titleSlug,
+    title,
+    year,
+    network,
+    originalLanguage,
+    genres = [],
+    status,
+    statistics = {} as Statistics,
+    ratings,
+    overview,
+    seriesType,
+    images,
+  } = series;
 
-function AddNewSeriesSearchResult({
-  tvdbId,
-  titleSlug,
-  title,
-  year,
-  network,
-  originalLanguage,
-  genres = [],
-  status,
-  statistics = {} as Statistics,
-  ratings,
-  folder,
-  overview,
-  seriesType,
-  images,
-}: AddNewSeriesSearchResultProps) {
   const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
   const { isSmallScreen } = useSelector(createDimensionsSelector());
   const [isNewAddSeriesModalOpen, setIsNewAddSeriesModalOpen] = useState(false);
@@ -168,13 +171,8 @@ function AddNewSeriesSearchResult({
 
       <AddNewSeriesModal
         isOpen={isNewAddSeriesModalOpen && !isExistingSeries}
-        tvdbId={tvdbId}
-        title={title}
-        year={year}
-        overview={overview}
-        folder={folder}
+        series={series}
         initialSeriesType={seriesType}
-        images={images}
         onModalClose={handleAddSeriesModalClose}
       />
     </div>

frontend/src/AddSeries/AddNewSeries/useAddSeries.ts

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import AddSeries from 'AddSeries/AddSeries';
+import { AddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
+import useApiMutation from 'Helpers/Hooks/useApiMutation';
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+import Series from 'Series/Series';
+import { updateItem } from 'Store/Actions/baseActions';
+
+type AddSeriesPayload = AddSeries & AddSeriesOptions;
+
+export const useLookupSeries = (query: string) => {
+  return useApiQuery<AddSeries[]>({
+    path: '/series/lookup',
+    queryParams: {
+      term: query,
+    },
+    queryOptions: {
+      enabled: !!query,
+      // Disable refetch on window focus to prevent refetching when the user switch tabs
+      refetchOnWindowFocus: false,
+    },
+  });
+};
+
+export const useAddSeries = () => {
+  const dispatch = useDispatch();
+
+  const onAddSuccess = useCallback(
+    (data: Series) => {
+      dispatch(updateItem({ section: 'series', ...data }));
+    },
+    [dispatch]
+  );
+
+  return useApiMutation<Series, AddSeriesPayload>({
+    path: '/series',
+    method: 'POST',
+    mutationOptions: {
+      onSuccess: onAddSuccess,
+    },
+  });
+};

frontend/src/AddSeries/AddSeries.ts

@@ -0,0 +1,7 @@
+import Series from 'Series/Series';
+
+interface AddSeries extends Series {
+  folder: string;
+}
+
+export default AddSeries;

frontend/src/AddSeries/ImportSeries/Import/ImportSeries.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
+import {
+  setAddSeriesOption,
+  useAddSeriesOption,
+} from 'AddSeries/addSeriesOptionsStore';
 import { SelectProvider } from 'App/SelectContext';
 import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
@@ -8,7 +12,6 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import { kinds } from 'Helpers/Props';
-import { setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
 import { clearImportSeries } from 'Store/Actions/importSeriesActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import translate from 'Utilities/String/translate';
@@ -48,9 +51,7 @@ function ImportSeries() {
     (state: AppState) => state.settings.qualityProfiles.items
   );
 
-  const defaultQualityProfileId = useSelector(
-    (state: AppState) => state.addSeries.defaults.qualityProfileId
-  );
+  const defaultQualityProfileId = useAddSeriesOption('qualityProfileId');
 
   const scrollerRef = useRef<HTMLDivElement>(null);
 
@@ -76,9 +77,7 @@ function ImportSeries() {
       !defaultQualityProfileId ||
       !qualityProfiles.some((p) => p.id === defaultQualityProfileId)
     ) {
-      dispatch(
-        setAddSeriesDefault({ qualityProfileId: qualityProfiles[0].id })
-      );
+      setAddSeriesOption('qualityProfileId', qualityProfiles[0].id);
     }
   }, [defaultQualityProfileId, qualityProfiles, dispatch]);
 

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import {
+  AddSeriesOptions,
+  setAddSeriesOption,
+  useAddSeriesOptions,
+} from 'AddSeries/addSeriesOptionsStore';
 import { useSelect } from 'App/SelectContext';
 import AppState from 'App/State/AppState';
 import CheckInput from 'Components/Form/CheckInput';
@@ -12,7 +17,6 @@ import PageContentFooter from 'Components/Page/PageContentFooter';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
 import { SeriesMonitor, SeriesType } from 'Series/Series';
-import { setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
 import {
   cancelLookupSeries,
   importSeries,
@@ -33,7 +37,7 @@ function ImportSeriesFooter() {
     qualityProfileId: defaultQualityProfileId,
     seriesType: defaultSeriesType,
     seasonFolder: defaultSeasonFolder,
-  } = useSelector((state: AppState) => state.addSeries.defaults);
+  } = useAddSeriesOptions();
 
   const { isLookingUpSeries, isImporting, items, importError } = useSelector(
     (state: AppState) => state.importSeries
@@ -110,7 +114,7 @@ function ImportSeriesFooter() {
   ]);
 
   const handleInputChange = useCallback(
-    ({ name, value }: InputChanged) => {
+    ({ name, value }: InputChanged<string | number | boolean | number[]>) => {
       if (name === 'monitor') {
         setMonitor(value as SeriesMonitor);
       } else if (name === 'qualityProfileId') {
@@ -121,7 +125,7 @@ function ImportSeriesFooter() {
         setSeasonFolder(value as boolean);
       }
 
-      dispatch(setAddSeriesDefault({ [name]: value }));
+      setAddSeriesOption(name as keyof AddSeriesOptions, value);
 
       selectedIds.forEach((id) => {
         dispatch(

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRow.tsx

@@ -75,11 +75,6 @@ function ImportSeriesRow({ id }: ImportSeriesRowProps) {
     [selectDispatch]
   );
 
-  console.info(
-    '\x1b[36m[MarkTest] is selected\x1b[0m',
-    selectState.selectedState[id]
-  );
-
   return (
     <>
       <VirtualTableSelectCell

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTable.tsx

@@ -1,6 +1,7 @@
 import React, { RefObject, useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { useAddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
 import { useSelect } from 'App/SelectContext';
 import AppState from 'App/State/AppState';
 import { ImportSeries } from 'App/State/ImportSeriesAppState';
@@ -59,9 +60,8 @@ function ImportSeriesTable({
 }: ImportSeriesTableProps) {
   const dispatch = useDispatch();
 
-  const { monitor, qualityProfileId, seriesType, seasonFolder } = useSelector(
-    (state: AppState) => state.addSeries.defaults
-  );
+  const { monitor, qualityProfileId, seriesType, seasonFolder } =
+    useAddSeriesOptions();
 
   const items = useSelector((state: AppState) => state.importSeries.items);
   const { isSmallScreen } = useSelector(createDimensionsSelector());

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.tsx

@@ -1,5 +1,13 @@
-import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
-import { Manager, Popper, Reference } from 'react-popper';
+import {
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AppState from 'App/State/AppState';
 import FormInputButton from 'Components/Form/FormInputButton';
@@ -7,7 +15,6 @@ import TextInput from 'Components/Form/TextInput';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import Portal from 'Components/Portal';
 import { icons, kinds } from 'Helpers/Props';
 import {
   queueLookupSeries,
@@ -47,9 +54,6 @@ function ImportSeriesSelectSeries({
     // @ts-expect-error - ignoring this for now
   } = useSelector(createImportSeriesItemSelector(id, { id }));
 
-  const buttonId = useId();
-  const contentId = useId();
-  const updater = useRef<(() => void) | null>(null);
   const seriesLookupTimeout = useRef<ReturnType<typeof setTimeout>>();
 
   const [term, setTerm] = useState('');
@@ -57,37 +61,6 @@ function ImportSeriesSelectSeries({
 
   const errorMessage = getErrorMessage(error);
 
-  const handleWindowClick = useCallback(
-    (event: MouseEvent) => {
-      const button = document.getElementById(buttonId);
-      const content = document.getElementById(contentId);
-      const eventTarget = event.target as HTMLElement;
-
-      if (!button || !eventTarget.isConnected) {
-        return;
-      }
-
-      if (
-        !button.contains(eventTarget) &&
-        content &&
-        !content.contains(eventTarget) &&
-        isOpen
-      ) {
-        setIsOpen(false);
-        window.removeEventListener('click', handleWindowClick);
-      }
-    },
-    [isOpen, buttonId, contentId, setIsOpen]
-  );
-
-  const addListener = useCallback(() => {
-    window.addEventListener('click', handleWindowClick);
-  }, [handleWindowClick]);
-
-  const removeListener = useCallback(() => {
-    window.removeEventListener('click', handleWindowClick);
-  }, [handleWindowClick]);
-
   const handlePress = useCallback(() => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
   }, []);
@@ -147,157 +120,139 @@ function ImportSeriesSelectSeries({
     [id, items, dispatch, onInputChange]
   );
 
-  useEffect(() => {
-    if (updater.current) {
-      updater.current();
-    }
-  });
-
-  useEffect(() => {
-    if (isOpen) {
-      addListener();
-    } else {
-      removeListener();
-    }
-
-    return removeListener;
-  }, [isOpen, addListener, removeListener]);
-
   useEffect(() => {
     setTerm(itemTerm);
   }, [itemTerm]);
 
+  const { refs, context, floatingStyles } = useFloating({
+    middleware: [
+      flip({
+        crossAxis: false,
+        mainAxis: true,
+      }),
+    ],
+    open: isOpen,
+    placement: 'bottom',
+    whileElementsMounted: autoUpdate,
+    onOpenChange: setIsOpen,
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    dismiss,
+  ]);
+
   return (
-    <Manager>
-      <Reference>
-        {({ ref }) => (
-          <div ref={ref} id={buttonId}>
-            <Link
-              // ref={ref}
-              className={styles.button}
-              component="div"
-              onPress={handlePress}
-            >
-              {isLookingUpSeries && isQueued && !isPopulated ? (
-                <LoadingIndicator className={styles.loading} size={20} />
-              ) : null}
+    <>
+      <div ref={refs.setReference} {...getReferenceProps()}>
+        <Link className={styles.button} component="div" onPress={handlePress}>
+          {isLookingUpSeries && isQueued && !isPopulated ? (
+            <LoadingIndicator className={styles.loading} size={20} />
+          ) : null}
 
-              {isPopulated && selectedSeries && isExistingSeries ? (
-                <Icon
-                  className={styles.warningIcon}
-                  name={icons.WARNING}
-                  kind={kinds.WARNING}
-                />
-              ) : null}
+          {isPopulated && selectedSeries && isExistingSeries ? (
+            <Icon
+              className={styles.warningIcon}
+              name={icons.WARNING}
+              kind={kinds.WARNING}
+            />
+          ) : null}
 
-              {isPopulated && selectedSeries ? (
-                <ImportSeriesTitle
-                  title={selectedSeries.title}
-                  year={selectedSeries.year}
-                  network={selectedSeries.network}
-                  isExistingSeries={isExistingSeries}
-                />
-              ) : null}
+          {isPopulated && selectedSeries ? (
+            <ImportSeriesTitle
+              title={selectedSeries.title}
+              year={selectedSeries.year}
+              network={selectedSeries.network}
+              isExistingSeries={isExistingSeries}
+            />
+          ) : null}
 
-              {isPopulated && !selectedSeries ? (
-                <div>
-                  <Icon
-                    className={styles.warningIcon}
-                    name={icons.WARNING}
-                    kind={kinds.WARNING}
-                  />
+          {isPopulated && !selectedSeries ? (
+            <div>
+              <Icon
+                className={styles.warningIcon}
+                name={icons.WARNING}
+                kind={kinds.WARNING}
+              />
 
-                  {translate('NoMatchFound')}
-                </div>
-              ) : null}
+              {translate('NoMatchFound')}
+            </div>
+          ) : null}
 
-              {!isFetching && !!error ? (
-                <div>
-                  <Icon
-                    className={styles.warningIcon}
-                    title={errorMessage}
-                    name={icons.WARNING}
-                    kind={kinds.WARNING}
-                  />
+          {!isFetching && !!error ? (
+            <div>
+              <Icon
+                className={styles.warningIcon}
+                title={errorMessage}
+                name={icons.WARNING}
+                kind={kinds.WARNING}
+              />
 
-                  {translate('SearchFailedError')}
-                </div>
-              ) : null}
+              {translate('SearchFailedError')}
+            </div>
+          ) : null}
 
-              <div className={styles.dropdownArrowContainer}>
-                <Icon name={icons.CARET_DOWN} />
-              </div>
-            </Link>
+          <div className={styles.dropdownArrowContainer}>
+            <Icon name={icons.CARET_DOWN} />
           </div>
-        )}
-      </Reference>
-
-      <Portal>
-        <Popper
-          placement="bottom"
-          modifiers={{
-            preventOverflow: {
-              boundariesElement: 'viewport',
-            },
-          }}
-        >
-          {({ ref, style, scheduleUpdate }) => {
-            updater.current = scheduleUpdate;
-
-            return (
-              <div
-                ref={ref}
-                id={contentId}
-                className={styles.contentContainer}
-                style={style}
-              >
-                {isOpen ? (
-                  <div className={styles.content}>
-                    <div className={styles.searchContainer}>
-                      <div className={styles.searchIconContainer}>
-                        <Icon name={icons.SEARCH} />
-                      </div>
-
-                      <TextInput
-                        className={styles.searchInput}
-                        name={`${name}_textInput`}
-                        value={term}
-                        onChange={handleSearchInputChange}
-                      />
-
-                      <FormInputButton
-                        kind={kinds.DEFAULT}
-                        spinnerIcon={icons.REFRESH}
-                        canSpin={true}
-                        isSpinning={isFetching}
-                        onPress={handleRefreshPress}
-                      >
-                        <Icon name={icons.REFRESH} />
-                      </FormInputButton>
-                    </div>
-
-                    <div className={styles.results}>
-                      {items.map((item) => {
-                        return (
-                          <ImportSeriesSearchResult
-                            key={item.tvdbId}
-                            tvdbId={item.tvdbId}
-                            title={item.title}
-                            year={item.year}
-                            network={item.network}
-                            onPress={handleSeriesSelect}
-                          />
-                        );
-                      })}
-                    </div>
+        </Link>
+      </div>
+      {isOpen ? (
+        <FloatingPortal id="portal-root">
+          <div
+            ref={refs.setFloating}
+            className={styles.contentContainer}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          >
+            {isOpen ? (
+              <div className={styles.content}>
+                <div className={styles.searchContainer}>
+                  <div className={styles.searchIconContainer}>
+                    <Icon name={icons.SEARCH} />
                   </div>
-                ) : null}
+
+                  <TextInput
+                    className={styles.searchInput}
+                    name={`${name}_textInput`}
+                    value={term}
+                    onChange={handleSearchInputChange}
+                  />
+
+                  <FormInputButton
+                    kind={kinds.DEFAULT}
+                    spinnerIcon={icons.REFRESH}
+                    canSpin={true}
+                    isSpinning={isFetching}
+                    onPress={handleRefreshPress}
+                  >
+                    <Icon name={icons.REFRESH} />
+                  </FormInputButton>
+                </div>
+
+                <div className={styles.results}>
+                  {items.map((item) => {
+                    return (
+                      <ImportSeriesSearchResult
+                        key={item.tvdbId}
+                        tvdbId={item.tvdbId}
+                        title={item.title}
+                        year={item.year}
+                        network={item.network}
+                        onPress={handleSeriesSelect}
+                      />
+                    );
+                  })}
+                </div>
               </div>
-            );
-          }}
-        </Popper>
-      </Portal>
-    </Manager>
+            ) : null}
+          </div>
+        </FloatingPortal>
+      ) : null}
+    </>
   );
 }
 

frontend/src/AddSeries/addSeriesOptionsStore.ts

@@ -0,0 +1,49 @@
+import { createPersist } from 'Helpers/createPersist';
+import { SeriesMonitor, SeriesType } from 'Series/Series';
+
+export interface AddSeriesOptions {
+  rootFolderPath: string;
+  monitor: SeriesMonitor;
+  qualityProfileId: number;
+  seriesType: SeriesType;
+  seasonFolder: boolean;
+  searchForMissingEpisodes: boolean;
+  searchForCutoffUnmetEpisodes: boolean;
+  tags: number[];
+}
+
+const addSeriesOptionsStore = createPersist<AddSeriesOptions>(
+  'add_series_options',
+  () => {
+    return {
+      rootFolderPath: '',
+      monitor: 'all',
+      qualityProfileId: 0,
+      seriesType: 'standard',
+      seasonFolder: true,
+      searchForMissingEpisodes: false,
+      searchForCutoffUnmetEpisodes: false,
+      tags: [],
+    };
+  }
+);
+
+export const useAddSeriesOptions = () => {
+  return addSeriesOptionsStore((state) => state);
+};
+
+export const useAddSeriesOption = <K extends keyof AddSeriesOptions>(
+  key: K
+) => {
+  return addSeriesOptionsStore((state) => state[key]);
+};
+
+export const setAddSeriesOption = <K extends keyof AddSeriesOptions>(
+  key: K,
+  value: AddSeriesOptions[K]
+) => {
+  addSeriesOptionsStore.setState((state) => ({
+    ...state,
+    [key]: value,
+  }));
+};

frontend/src/App/AppUpdatedModalContent.tsx

@@ -11,6 +11,7 @@ import usePrevious from 'Helpers/Hooks/usePrevious';
 import { kinds } from 'Helpers/Props';
 import { fetchUpdates } from 'Store/Actions/systemActions';
 import UpdateChanges from 'System/Updates/UpdateChanges';
+import useUpdates from 'System/Updates/useUpdates';
 import Update from 'typings/Update';
 import translate from 'Utilities/String/translate';
 import AppState from './State/AppState';
@@ -65,14 +66,12 @@ interface AppUpdatedModalContentProps {
 function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
   const dispatch = useDispatch();
   const { version, prevVersion } = useSelector((state: AppState) => state.app);
-  const { isPopulated, error, items } = useSelector(
-    (state: AppState) => state.system.updates
-  );
+  const { isFetched, error, data } = useUpdates();
   const previousVersion = usePrevious(version);
 
   const { onModalClose } = props;
 
-  const update = mergeUpdates(items, version, prevVersion);
+  const update = mergeUpdates(data, version, prevVersion);
 
   const handleSeeChangesPress = useCallback(() => {
     window.location.href = `${window.Sonarr.urlBase}/system/updates`;
@@ -100,7 +99,7 @@ function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
           />
         </div>
 
-        {isPopulated && !error && !!update ? (
+        {isFetched && !error && !!update ? (
           <div>
             {update.changes ? (
               <div className={styles.maintenance}>
@@ -126,7 +125,7 @@ function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
           </div>
         ) : null}
 
-        {!isPopulated && !error ? <LoadingIndicator /> : null}
+        {!isFetched && !error ? <LoadingIndicator /> : null}
       </ModalBody>
 
       <ModalFooter>

frontend/src/App/ApplyTheme.tsx

@@ -1,20 +1,9 @@
 import { useCallback, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
+import useTheme from 'Helpers/Hooks/useTheme';
 import themes from 'Styles/Themes';
-import AppState from './State/AppState';
-
-function createThemeSelector() {
-  return createSelector(
-    (state: AppState) => state.settings.ui.item.theme || window.Sonarr.theme,
-    (theme) => {
-      return theme;
-    }
-  );
-}
 
 function ApplyTheme() {
-  const theme = useSelector(createThemeSelector());
+  const theme = useTheme();
 
   const updateCSSVariables = useCallback(() => {
     Object.entries(themes[theme]).forEach(([key, value]) => {

frontend/src/App/State/AddSeriesAppState.ts

@@ -1,25 +0,0 @@
-import AppSectionState, { Error } from 'App/State/AppSectionState';
-import Series, { SeriesMonitor, SeriesType } from 'Series/Series';
-
-export interface AddSeries extends Series {
-  folder: string;
-}
-
-interface AddSeriesAppState extends AppSectionState<AddSeries> {
-  isAdding: boolean;
-  isAdded: boolean;
-  addError: Error | undefined;
-
-  defaults: {
-    rootFolderPath: string;
-    monitor: SeriesMonitor;
-    qualityProfileId: number;
-    seriesType: SeriesType;
-    seasonFolder: boolean;
-    tags: number[];
-    searchForMissingEpisodes: boolean;
-    searchForCutoffUnmetEpisodes: boolean;
-  };
-}
-
-export default AddSeriesAppState;

frontend/src/App/State/AppState.ts

@@ -1,7 +1,6 @@
 import ModelBase from 'App/ModelBase';
 import { FilterBuilderTypes } from 'Helpers/Props/filterBuilderTypes';
 import { DateFilterValue, FilterType } from 'Helpers/Props/filterTypes';
-import AddSeriesAppState from './AddSeriesAppState';
 import { Error } from './AppSectionState';
 import BlocklistAppState from './BlocklistAppState';
 import CalendarAppState from './CalendarAppState';
@@ -50,7 +49,6 @@ export interface PropertyFilter {
 export interface Filter {
   key: string;
   label: string | (() => string);
-  type: string;
   filters: PropertyFilter[];
 }
 
@@ -83,7 +81,6 @@ export interface AppSectionState {
 }
 
 interface AppState {
-  addSeries: AddSeriesAppState;
   app: AppSectionState;
   blocklist: BlocklistAppState;
   calendar: CalendarAppState;

frontend/src/App/State/LogsAppState.ts

@@ -1,14 +0,0 @@
-import AppSectionState, {
-  AppSectionFilterState,
-  PagedAppSectionState,
-  TableAppSectionState,
-} from 'App/State/AppSectionState';
-import LogEvent from 'typings/LogEvent';
-
-interface LogsAppState
-  extends AppSectionState<LogEvent>,
-    AppSectionFilterState<LogEvent>,
-    PagedAppSectionState,
-    TableAppSectionState {}
-
-export default LogsAppState;

frontend/src/App/State/QueueAppState.ts

@@ -32,6 +32,17 @@ export interface QueuePagedAppState
   removeError: Error;
 }
 
+export type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore';
+export type BlocklistMethod =
+  | 'doNotBlocklist'
+  | 'blocklistAndSearch'
+  | 'blocklistOnly';
+
+interface RemovalOptions {
+  removalMethod: RemovalMethod;
+  blocklistMethod: BlocklistMethod;
+}
+
 interface QueueAppState {
   status: AppSectionItemState<QueueStatus>;
   details: QueueDetailsAppState;
@@ -39,6 +50,7 @@ interface QueueAppState {
   options: {
     includeUnknownSeriesItems: boolean;
   };
+  removalOptions: RemovalOptions;
 }
 
 export default QueueAppState;

frontend/src/App/State/SystemAppState.ts

@@ -3,28 +3,23 @@ import Health from 'typings/Health';
 import LogFile from 'typings/LogFile';
 import SystemStatus from 'typings/SystemStatus';
 import Task from 'typings/Task';
-import Update from 'typings/Update';
 import AppSectionState, { AppSectionItemState } from './AppSectionState';
 import BackupAppState from './BackupAppState';
-import LogsAppState from './LogsAppState';
 
 export type DiskSpaceAppState = AppSectionState<DiskSpace>;
 export type HealthAppState = AppSectionState<Health>;
 export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
 export type TaskAppState = AppSectionState<Task>;
 export type LogFilesAppState = AppSectionState<LogFile>;
-export type UpdateAppState = AppSectionState<Update>;
 
 interface SystemAppState {
   backups: BackupAppState;
   diskSpace: DiskSpaceAppState;
   health: HealthAppState;
   logFiles: LogFilesAppState;
-  logs: LogsAppState;
   status: SystemStatusAppState;
   tasks: TaskAppState;
   updateLogFiles: LogFilesAppState;
-  updates: UpdateAppState;
 }
 
 export default SystemAppState;

frontend/src/Calendar/Events/CalendarEventGroup.tsx

@@ -22,9 +22,9 @@ function createIsDownloadingSelector(episodeIds: number[]) {
   return createSelector(
     (state: AppState) => state.queue.details,
     (details) => {
-      return details.items.some((item) => {
-        return !!(item.episodeId && episodeIds.includes(item.episodeId));
-      });
+      return details.items.some(
+        (item) => item.episodeId && episodeIds.includes(item.episodeId)
+      );
     }
   );
 }
@@ -61,10 +61,10 @@ function CalendarEventGroup({
   const endTime = moment(lastEpisode.airDateUtc).add(series.runtime, 'minutes');
   const seasonNumber = firstEpisode.seasonNumber;
 
-  const { allDownloaded, anyQueued, anyMonitored, allAbsoluteEpisodeNumbers } =
+  const { allDownloaded, anyGrabbed, anyMonitored, allAbsoluteEpisodeNumbers } =
     useMemo(() => {
       let files = 0;
-      let queued = 0;
+      let grabbed = 0;
       let monitored = 0;
       let absoluteEpisodeNumbers = 0;
 
@@ -73,8 +73,8 @@ function CalendarEventGroup({
           files++;
         }
 
-        if (event.queued) {
-          queued++;
+        if (event.grabbed) {
+          grabbed++;
         }
 
         if (series.monitored && event.monitored) {
@@ -88,13 +88,13 @@ function CalendarEventGroup({
 
       return {
         allDownloaded: files === events.length,
-        anyQueued: queued > 0,
+        anyGrabbed: grabbed > 0,
         anyMonitored: monitored > 0,
         allAbsoluteEpisodeNumbers: absoluteEpisodeNumbers === events.length,
       };
     }, [series, events]);
 
-  const anyDownloading = isDownloading || anyQueued;
+  const anyDownloading = isDownloading || anyGrabbed;
 
   const statusStyle = getStatusStyle(
     allDownloaded,

frontend/src/Calendar/iCal/CalendarLinkModalContent.tsx

@@ -22,7 +22,12 @@ interface CalendarLinkModalContentProps {
 function CalendarLinkModalContent({
   onModalClose,
 }: CalendarLinkModalContentProps) {
-  const [state, setState] = useState({
+  const [state, setState] = useState<{
+    unmonitored: boolean;
+    premieresOnly: boolean;
+    asAllDay: boolean;
+    tags: number[];
+  }>({
     unmonitored: false,
     premieresOnly: false,
     asAllDay: false,

frontend/src/Components/Form/AutoSuggestInput.tsx

@@ -1,3 +1,4 @@
+import { autoUpdate, flip, size, useFloating } from '@floating-ui/react-dom';
 import classNames from 'classnames';
 import React, {
   FocusEvent,
@@ -19,8 +20,6 @@ import Autosuggest, {
   RenderInputComponentProps,
   RenderSuggestionsContainerParams,
 } from 'react-autosuggest';
-import { Manager, Popper, Reference } from 'react-popper';
-import Portal from 'Components/Portal';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import { InputChanged } from 'typings/inputs';
 import styles from './AutoSuggestInput.css';
@@ -37,7 +36,6 @@ interface AutoSuggestInputProps<T>
   hasError?: boolean;
   hasWarning?: boolean;
   enforceMaxHeight?: boolean;
-  minHeight?: number;
   maxHeight?: number;
   renderInputComponent?: (
     inputProps: RenderInputComponentProps,
@@ -70,7 +68,6 @@ function AutoSuggestInput<T = any>(props: AutoSuggestInputProps<T>) {
     enforceMaxHeight = true,
     hasError,
     hasWarning,
-    minHeight = 50,
     maxHeight = 200,
     getSuggestionValue,
     renderSuggestion,
@@ -89,95 +86,60 @@ function AutoSuggestInput<T = any>(props: AutoSuggestInputProps<T>) {
   const updater = useRef<(() => void) | null>(null);
   const previousSuggestions = usePrevious(suggestions);
 
-  const handleComputeMaxHeight = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (data: any) => {
-      const { top, bottom, width } = data.offsets.reference;
-
-      if (enforceMaxHeight) {
-        data.styles.maxHeight = maxHeight;
-      } else {
-        const windowHeight = window.innerHeight;
-
-        if (/^botton/.test(data.placement)) {
-          data.styles.maxHeight = windowHeight - bottom;
-        } else {
-          data.styles.maxHeight = top;
-        }
-      }
-
-      data.styles.width = width;
-
-      return data;
-    },
-    [enforceMaxHeight, maxHeight]
-  );
+  const { refs, floatingStyles } = useFloating({
+    middleware: [
+      flip({
+        crossAxis: false,
+        mainAxis: true,
+      }),
+      size({
+        apply({ availableHeight, elements, rects }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+            maxHeight: `${Math.max(0, availableHeight)}px`,
+          });
+        },
+      }),
+    ],
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+  });
 
   const createRenderInputComponent = useCallback(
     (inputProps: RenderInputComponentProps) => {
-      return (
-        <Reference>
-          {({ ref }) => {
-            if (renderInputComponent) {
-              return renderInputComponent(inputProps, ref);
-            }
+      if (renderInputComponent) {
+        return renderInputComponent(inputProps, refs.setReference);
+      }
 
-            return (
-              <div ref={ref}>
-                <input {...inputProps} />
-              </div>
-            );
-          }}
-        </Reference>
+      return (
+        <div ref={refs.setReference}>
+          <input {...inputProps} />
+        </div>
       );
     },
-    [renderInputComponent]
+    [refs.setReference, renderInputComponent]
   );
 
   const renderSuggestionsContainer = useCallback(
     ({ containerProps, children }: RenderSuggestionsContainerParams) => {
       return (
-        <Portal>
-          <Popper
-            placement="bottom-start"
-            modifiers={{
-              computeMaxHeight: {
-                order: 851,
-                enabled: true,
-                fn: handleComputeMaxHeight,
-              },
-              flip: {
-                padding: minHeight,
-              },
+        <div
+          ref={refs.setFloating}
+          style={floatingStyles}
+          className={children ? styles.suggestionsContainerOpen : undefined}
+        >
+          <div
+            {...containerProps}
+            style={{
+              maxHeight: enforceMaxHeight ? maxHeight : undefined,
             }}
           >
-            {({ ref: popperRef, style, scheduleUpdate }) => {
-              updater.current = scheduleUpdate;
-
-              return (
-                <div
-                  ref={popperRef}
-                  style={style}
-                  className={
-                    children ? styles.suggestionsContainerOpen : undefined
-                  }
-                >
-                  <div
-                    {...containerProps}
-                    style={{
-                      maxHeight: style.maxHeight,
-                    }}
-                  >
-                    {children}
-                  </div>
-                </div>
-              );
-            }}
-          </Popper>
-        </Portal>
+            {children}
+          </div>
+        </div>
       );
     },
-    [minHeight, handleComputeMaxHeight]
+    [enforceMaxHeight, floatingStyles, maxHeight, refs.setFloating]
   );
 
   const handleInputKeyDown = useCallback(
@@ -236,23 +198,21 @@ function AutoSuggestInput<T = any>(props: AutoSuggestInputProps<T>) {
   }, [suggestions, previousSuggestions]);
 
   return (
-    <Manager>
-      <Autosuggest
-        {...otherProps}
-        ref={forwardedRef}
-        id={name}
-        inputProps={inputProps}
-        theme={theme}
-        suggestions={suggestions}
-        getSuggestionValue={getSuggestionValue}
-        renderInputComponent={createRenderInputComponent}
-        renderSuggestionsContainer={renderSuggestionsContainer}
-        renderSuggestion={renderSuggestion}
-        onSuggestionSelected={onSuggestionSelected}
-        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
-        onSuggestionsClearRequested={onSuggestionsClearRequested}
-      />
-    </Manager>
+    <Autosuggest
+      {...otherProps}
+      ref={forwardedRef}
+      id={name}
+      inputProps={inputProps}
+      theme={theme}
+      suggestions={suggestions}
+      getSuggestionValue={getSuggestionValue}
+      renderInputComponent={createRenderInputComponent}
+      renderSuggestionsContainer={renderSuggestionsContainer}
+      renderSuggestion={renderSuggestion}
+      onSuggestionSelected={onSuggestionSelected}
+      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+      onSuggestionsClearRequested={onSuggestionsClearRequested}
+    />
   );
 }
 

frontend/src/Components/Form/FormInputGroup.tsx

@@ -139,11 +139,11 @@ type PickProps<V, C extends InputType> = C extends 'text'
   ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
     EnhancedSelectInputProps<any, V>
   : C extends 'seriesTag'
-  ? SeriesTagInputProps
+  ? SeriesTagInputProps<V>
   : C extends 'seriesTypeSelect'
   ? SeriesTypeSelectInputProps
   : C extends 'tag'
-  ? SeriesTagInputProps
+  ? SeriesTagInputProps<V>
   : C extends 'tagSelect'
   ? TagSelectInputProps
   : C extends 'text'
@@ -222,7 +222,7 @@ function FormInputGroup<T, C extends InputType>(
     <div className={containerClassName}>
       <div className={className}>
         <div className={styles.inputContainer}>
-          {/* @ts-expect-error - tpyes are validated already */}
+          {/* @ts-expect-error - types are validated already */}
           <InputComponent
             className={inputClassName}
             helpText={helpText}

frontend/src/Components/Form/ProviderFieldFormGroup.tsx

@@ -120,7 +120,7 @@ function ProviderFieldFormGroup<T>({
         helpTextWarning={helpTextWarning}
         helpLink={helpLink}
         placeholder={placeholder}
-        // @ts-expect-error - this isn;'t available on all types
+        // @ts-expect-error - this isn't available on all types
         selectOptionsProviderAction={selectOptionsProviderAction}
         value={value}
         values={selectValues}

frontend/src/Components/Form/Select/EnhancedSelectInput.css

@@ -42,15 +42,10 @@
   color: var(--disabledInputColor);
 }
 
-.optionsContainer {
-  z-index: $popperZIndex;
-  max-height: vh(50);
-  width: auto;
-}
-
 .options {
   composes: scroller from '~Components/Scroller/Scroller.css';
 
+  z-index: $popperZIndex;
   border: 1px solid var(--inputBorderColor);
   border-radius: 4px;
   background-color: var(--inputBackgroundColor);

frontend/src/Components/Form/Select/EnhancedSelectInput.css.d.ts

@@ -13,7 +13,6 @@ interface CssExports {
   'mobileCloseButton': string;
   'mobileCloseButtonContainer': string;
   'options': string;
-  'optionsContainer': string;
   'optionsInnerModalBody': string;
   'optionsModal': string;
   'optionsModalBody': string;

frontend/src/Components/Form/Select/EnhancedSelectInput.tsx

@@ -1,3 +1,13 @@
+import {
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  size,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react';
 import classNames from 'classnames';
 import React, {
   ElementType,
@@ -6,31 +16,24 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
-import { Manager, Popper, Reference } from 'react-popper';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
-import Portal from 'Components/Portal';
 import Scroller from 'Components/Scroller/Scroller';
-import useMeasure from 'Helpers/Hooks/useMeasure';
 import { icons } from 'Helpers/Props';
 import ArrayElement from 'typings/Helpers/ArrayElement';
 import { EnhancedSelectInputChanged, InputChanged } from 'typings/inputs';
 import { isMobile as isMobileUtil } from 'Utilities/browser';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
-import getUniqueElementId from 'Utilities/getUniqueElementId';
 import TextInput from '../TextInput';
 import HintedSelectInputOption from './HintedSelectInputOption';
 import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
 import styles from './EnhancedSelectInput.css';
 
-const MINIMUM_DISTANCE_FROM_EDGE = 30;
-
 function isArrowKey(keyCode: number) {
   return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
 }
@@ -162,10 +165,6 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     onOpen,
   } = props;
 
-  const [measureRef, { width }] = useMeasure();
-  const updater = useRef<(() => void) | null>(null);
-  const buttonId = useMemo(() => getUniqueElementId(), []);
-  const optionsId = useMemo(() => getUniqueElementId(), []);
   const [selectedIndex, setSelectedIndex] = useState(
     getSelectedIndex(value, values)
   );
@@ -175,6 +174,38 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
   const isMultiSelect = Array.isArray(value);
   const selectedOption = getSelectedOption(selectedIndex, values);
 
+  const { refs, context, floatingStyles } = useFloating({
+    middleware: [
+      flip({
+        crossAxis: false,
+        mainAxis: true,
+      }),
+      size({
+        apply({ availableHeight, elements, rects }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+            maxHeight: `${Math.max(
+              0,
+              Math.min(window.innerHeight / 2, availableHeight)
+            )}px`,
+          });
+        },
+      }),
+    ],
+    open: isOpen,
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    onOpenChange: setIsOpen,
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    dismiss,
+  ]);
+
   const selectedValue = useMemo(() => {
     if (values.length) {
       return value;
@@ -189,59 +220,9 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     return '';
   }, [value, values, isMultiSelect]);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleComputeMaxHeight = useCallback((data: any) => {
-    const { top, bottom } = data.offsets.reference;
-    const windowHeight = window.innerHeight;
-
-    if (/^bottom/.test(data.placement)) {
-      data.styles.maxHeight =
-        windowHeight - bottom - MINIMUM_DISTANCE_FROM_EDGE;
-    } else {
-      data.styles.maxHeight = top - MINIMUM_DISTANCE_FROM_EDGE;
-    }
-
-    return data;
-  }, []);
-
-  const handleWindowClick = useCallback(
-    (event: MouseEvent) => {
-      const button = document.getElementById(buttonId);
-      const options = document.getElementById(optionsId);
-      const eventTarget = event.target as HTMLElement;
-
-      if (!button || !eventTarget.isConnected || isMobile) {
-        return;
-      }
-
-      if (
-        !button.contains(eventTarget) &&
-        options &&
-        !options.contains(eventTarget) &&
-        isOpen
-      ) {
-        setIsOpen(false);
-        window.removeEventListener('click', handleWindowClick);
-      }
-    },
-    [isMobile, isOpen, buttonId, optionsId, setIsOpen]
-  );
-
-  const addListener = useCallback(() => {
-    window.addEventListener('click', handleWindowClick);
-  }, [handleWindowClick]);
-
-  const removeListener = useCallback(() => {
-    window.removeEventListener('click', handleWindowClick);
-  }, [handleWindowClick]);
-
   const handlePress = useCallback(() => {
-    if (!isOpen && onOpen) {
-      onOpen();
-    }
-
-    setIsOpen(!isOpen);
-  }, [isOpen, setIsOpen, onOpen]);
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+  }, []);
 
   const handleSelect = useCallback(
     (newValue: ArrayElement<V>) => {
@@ -298,10 +279,9 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
 
   const handleFocus = useCallback(() => {
     if (isOpen) {
-      removeListener();
       setIsOpen(false);
     }
-  }, [isOpen, setIsOpen, removeListener]);
+  }, [isOpen, setIsOpen]);
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLButtonElement>) => {
@@ -395,172 +375,122 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     [onChange]
   );
 
-  useEffect(() => {
-    if (updater.current) {
-      updater.current();
-    }
-  });
-
   useEffect(() => {
     if (isOpen) {
-      addListener();
-    } else {
-      removeListener();
+      onOpen?.();
     }
-
-    return removeListener;
-  }, [isOpen, addListener, removeListener]);
+  }, [isOpen, onOpen]);
 
   return (
-    <div>
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <div ref={ref} id={buttonId}>
-              <div ref={measureRef}>
-                {isEditable && typeof value === 'string' ? (
-                  <div className={styles.editableContainer}>
-                    <TextInput
-                      className={className}
-                      name={name}
-                      value={value}
-                      readOnly={isDisabled}
-                      hasError={hasError}
-                      hasWarning={hasWarning}
-                      onFocus={handleFocus}
-                      onBlur={handleBlur}
-                      onChange={handleEditChange}
-                    />
-                    <Link
-                      className={classNames(
-                        styles.dropdownArrowContainerEditable,
-                        isDisabled
-                          ? styles.dropdownArrowContainerDisabled
-                          : styles.dropdownArrowContainer
-                      )}
-                      onPress={handlePress}
-                    >
-                      {isFetching ? (
-                        <LoadingIndicator
-                          className={styles.loading}
-                          size={20}
-                        />
-                      ) : null}
+    <>
+      <div ref={refs.setReference} {...getReferenceProps()}>
+        {isEditable && typeof value === 'string' ? (
+          <div className={styles.editableContainer}>
+            <TextInput
+              className={className}
+              name={name}
+              value={value}
+              readOnly={isDisabled}
+              hasError={hasError}
+              hasWarning={hasWarning}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onChange={handleEditChange}
+            />
+            <Link
+              className={classNames(
+                styles.dropdownArrowContainerEditable,
+                isDisabled
+                  ? styles.dropdownArrowContainerDisabled
+                  : styles.dropdownArrowContainer
+              )}
+              onPress={handlePress}
+            >
+              {isFetching ? (
+                <LoadingIndicator className={styles.loading} size={20} />
+              ) : null}
 
-                      {isFetching ? null : <Icon name={icons.CARET_DOWN} />}
-                    </Link>
-                  </div>
-                ) : (
-                  <Link
-                    className={classNames(
-                      className,
-                      hasError && styles.hasError,
-                      hasWarning && styles.hasWarning,
-                      isDisabled && disabledClassName
-                    )}
-                    isDisabled={isDisabled}
-                    onBlur={handleBlur}
-                    onKeyDown={handleKeyDown}
-                    onPress={handlePress}
-                  >
-                    <SelectedValueComponent
-                      values={values}
-                      {...selectedValueOptions}
-                      selectedValue={selectedValue}
-                      isDisabled={isDisabled}
-                      isMultiSelect={isMultiSelect}
-                    >
-                      {selectedOption ? selectedOption.value : selectedValue}
-                    </SelectedValueComponent>
-
-                    <div
-                      className={
-                        isDisabled
-                          ? styles.dropdownArrowContainerDisabled
-                          : styles.dropdownArrowContainer
-                      }
-                    >
-                      {isFetching ? (
-                        <LoadingIndicator
-                          className={styles.loading}
-                          size={20}
-                        />
-                      ) : null}
-
-                      {isFetching ? null : <Icon name={icons.CARET_DOWN} />}
-                    </div>
-                  </Link>
-                )}
-              </div>
-            </div>
-          )}
-        </Reference>
-        <Portal>
-          <Popper
-            placement="bottom-start"
-            modifiers={{
-              computeMaxHeight: {
-                order: 851,
-                enabled: true,
-                fn: handleComputeMaxHeight,
-              },
-            }}
+              {isFetching ? null : <Icon name={icons.CARET_DOWN} />}
+            </Link>
+          </div>
+        ) : (
+          <Link
+            className={classNames(
+              className,
+              hasError && styles.hasError,
+              hasWarning && styles.hasWarning,
+              isDisabled && disabledClassName
+            )}
+            isDisabled={isDisabled}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            onPress={handlePress}
           >
-            {({ ref, style, scheduleUpdate }) => {
-              updater.current = scheduleUpdate;
+            <SelectedValueComponent
+              values={values}
+              {...selectedValueOptions}
+              selectedValue={selectedValue}
+              isDisabled={isDisabled}
+              isMultiSelect={isMultiSelect}
+            >
+              {selectedOption ? selectedOption.value : selectedValue}
+            </SelectedValueComponent>
+
+            <div
+              className={
+                isDisabled
+                  ? styles.dropdownArrowContainerDisabled
+                  : styles.dropdownArrowContainer
+              }
+            >
+              {isFetching ? (
+                <LoadingIndicator className={styles.loading} size={20} />
+              ) : null}
+
+              {isFetching ? null : <Icon name={icons.CARET_DOWN} />}
+            </div>
+          </Link>
+        )}
+      </div>
+
+      {!isMobile && isOpen ? (
+        <FloatingPortal id="portal-root">
+          <Scroller
+            ref={refs.setFloating}
+            className={styles.options}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          >
+            {values.map((v, index) => {
+              const hasParent = v.parentKey !== undefined;
+              const depth = hasParent ? 1 : 0;
+              const parentSelected =
+                v.parentKey !== undefined &&
+                Array.isArray(value) &&
+                value.includes(v.parentKey);
+
+              const { key, ...other } = v;
 
               return (
-                <div
-                  ref={ref}
-                  id={optionsId}
-                  className={styles.optionsContainer}
-                  style={{
-                    ...style,
-                    minWidth: width,
-                  }}
+                <OptionComponent
+                  key={v.key}
+                  id={v.key}
+                  depth={depth}
+                  isSelected={isSelectedItem(index, value, values)}
+                  isDisabled={parentSelected}
+                  isMultiSelect={isMultiSelect}
+                  {...valueOptions}
+                  {...other}
+                  isMobile={false}
+                  onSelect={handleSelect}
                 >
-                  {isOpen && !isMobile ? (
-                    <Scroller
-                      className={styles.options}
-                      style={{
-                        maxHeight: style.maxHeight,
-                      }}
-                    >
-                      {values.map((v, index) => {
-                        const hasParent = v.parentKey !== undefined;
-                        const depth = hasParent ? 1 : 0;
-                        const parentSelected =
-                          v.parentKey !== undefined &&
-                          Array.isArray(value) &&
-                          value.includes(v.parentKey);
-
-                        const { key, ...other } = v;
-
-                        return (
-                          <OptionComponent
-                            key={v.key}
-                            id={v.key}
-                            depth={depth}
-                            isSelected={isSelectedItem(index, value, values)}
-                            isDisabled={parentSelected}
-                            isMultiSelect={isMultiSelect}
-                            {...valueOptions}
-                            {...other}
-                            isMobile={false}
-                            onSelect={handleSelect}
-                          >
-                            {v.value}
-                          </OptionComponent>
-                        );
-                      })}
-                    </Scroller>
-                  ) : null}
-                </div>
+                  {v.value}
+                </OptionComponent>
               );
-            }}
-          </Popper>
-        </Portal>
-      </Manager>
+            })}
+          </Scroller>
+        </FloatingPortal>
+      ) : null}
 
       {isMobile ? (
         <Modal
@@ -615,7 +545,7 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
           </ModalBody>
         </Modal>
       ) : null}
-    </div>
+    </>
   );
 }
 

frontend/src/Components/Form/Select/HintedSelectInputOption.tsx

@@ -19,7 +19,6 @@ function HintedSelectInputOption(props: HintedSelectInputOptionProps) {
     hint,
     depth,
     isSelected = false,
-    isMultiSelect,
     isMobile,
     ...otherProps
   } = props;

frontend/src/Components/Form/Select/QualityProfileSelectInput.tsx

@@ -88,13 +88,10 @@ function QualityProfileSelectInput({
   );
 
   const handleChange = useCallback(
-    ({ value: newValue }: EnhancedSelectInputChanged<string | number>) => {
-      onChange({
-        name,
-        value: newValue === 'noChange' ? value : newValue,
-      });
+    ({ value }: EnhancedSelectInputChanged<string | number>) => {
+      onChange({ name, value });
     },
-    [name, value, onChange]
+    [name, onChange]
   );
 
   useEffect(() => {

frontend/src/Components/Form/Select/RootFolderSelectInput.tsx

@@ -21,6 +21,7 @@ const ADD_NEW_KEY = 'addNew';
 
 export interface RootFolderSelectInputValue
   extends EnhancedSelectInputValue<string> {
+  freeSpace?: number;
   isMissing?: boolean;
 }
 
@@ -42,66 +43,58 @@ function createRootFolderOptionsSelector(
   includeNoChange: boolean,
   includeNoChangeDisabled: boolean
 ) {
-  return createSelector(
-    createRootFoldersSelector(),
-
-    (rootFolders) => {
-      const values: RootFolderSelectInputValue[] = rootFolders.items.map(
-        (rootFolder) => {
-          return {
-            key: rootFolder.path,
-            value: rootFolder.path,
-            freeSpace: rootFolder.freeSpace,
-            isMissing: false,
-          };
-        }
-      );
-
-      if (includeNoChange) {
-        values.unshift({
-          key: 'noChange',
-          get value() {
-            return translate('NoChange');
-          },
-          isDisabled: includeNoChangeDisabled,
+  return createSelector(createRootFoldersSelector(), (rootFolders) => {
+    const values: RootFolderSelectInputValue[] = rootFolders.items.map(
+      (rootFolder) => {
+        return {
+          key: rootFolder.path,
+          value: rootFolder.path,
+          freeSpace: rootFolder.freeSpace,
           isMissing: false,
-        });
+        };
       }
+    );
 
-      if (!values.length) {
-        values.push({
-          key: '',
-          value: '',
-          isDisabled: true,
-          isHidden: true,
-        });
-      }
-
-      if (
-        includeMissingValue &&
-        value &&
-        !values.find((v) => v.key === value)
-      ) {
-        values.push({
-          key: value,
-          value,
-          isMissing: true,
-          isDisabled: true,
-        });
-      }
-
-      values.push({
-        key: ADD_NEW_KEY,
-        value: translate('AddANewPath'),
+    if (includeNoChange) {
+      values.unshift({
+        key: 'noChange',
+        get value() {
+          return translate('NoChange');
+        },
+        isDisabled: includeNoChangeDisabled,
+        isMissing: false,
       });
-
-      return {
-        values,
-        isSaving: rootFolders.isSaving,
-        saveError: rootFolders.saveError,
-      };
     }
-  );
+
+    if (!values.length) {
+      values.push({
+        key: '',
+        value: '',
+        isDisabled: true,
+        isHidden: true,
+      });
+    }
+
+    if (includeMissingValue && value && !values.find((v) => v.key === value)) {
+      values.push({
+        key: value,
+        value,
+        isMissing: true,
+        isDisabled: true,
+      });
+    }
+
+    values.push({
+      key: ADD_NEW_KEY,
+      value: translate('AddANewPath'),
+    });
+
+    return {
+      values,
+      isSaving: rootFolders.isSaving,
+      saveError: rootFolders.saveError,
+    };
+  });
 }
 
 function RootFolderSelectInput({

frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx

@@ -18,18 +18,16 @@ interface RootFolderSelectInputOptionProps
   isWindows?: boolean;
 }
 
-function RootFolderSelectInputOption(props: RootFolderSelectInputOptionProps) {
-  const {
-    id,
-    value,
-    freeSpace,
-    isMissing,
-    seriesFolder,
-    isMobile,
-    isWindows,
-    ...otherProps
-  } = props;
-
+function RootFolderSelectInputOption({
+  id,
+  value,
+  freeSpace,
+  isMissing,
+  seriesFolder,
+  isMobile,
+  isWindows,
+  ...otherProps
+}: RootFolderSelectInputOptionProps) {
   const slashCharacter = isWindows ? '\\' : '/';
 
   return (

frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css

@@ -30,3 +30,11 @@
   text-align: right;
   font-size: $smallFontSize;
 }
+
+.isMissing {
+  flex: 0 0 auto;
+  margin-left: 15px;
+  color: var(--dangerColor);
+  text-align: right;
+  font-size: $smallFontSize;
+}

frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'freeSpace': string;
+  'isMissing': string;
   'path': string;
   'pathContainer': string;
   'selectedValue': string;

frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx

@@ -8,27 +8,23 @@ import styles from './RootFolderSelectInputSelectedValue.css';
 interface RootFolderSelectInputSelectedValueProps {
   selectedValue: string;
   values: RootFolderSelectInputValue[];
-  freeSpace?: number;
   seriesFolder?: string;
   isWindows?: boolean;
   includeFreeSpace?: boolean;
 }
 
-function RootFolderSelectInputSelectedValue(
-  props: RootFolderSelectInputSelectedValueProps
-) {
-  const {
-    selectedValue,
-    values,
-    freeSpace,
-    seriesFolder,
-    includeFreeSpace = true,
-    isWindows,
-    ...otherProps
-  } = props;
-
+function RootFolderSelectInputSelectedValue({
+  selectedValue,
+  values,
+  seriesFolder,
+  includeFreeSpace = true,
+  isWindows,
+  ...otherProps
+}: RootFolderSelectInputSelectedValueProps) {
   const slashCharacter = isWindows ? '\\' : '/';
-  const value = values.find((v) => v.key === selectedValue)?.value;
+  const { value, freeSpace, isMissing } =
+    values.find((v) => v.key === selectedValue) ||
+    ({} as RootFolderSelectInputValue);
 
   return (
     <EnhancedSelectInputSelectedValue
@@ -53,6 +49,10 @@ function RootFolderSelectInputSelectedValue(
           })}
         </div>
       ) : null}
+
+      {isMissing ? (
+        <div className={styles.isMissing}>{translate('Missing')}</div>
+      ) : null}
     </EnhancedSelectInputSelectedValue>
   );
 }

frontend/src/Components/Form/Select/UMaskInput.tsx

@@ -2,10 +2,12 @@
 import React, { SyntheticEvent } from 'react';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
-import EnhancedSelectInput from './EnhancedSelectInput';
+import EnhancedSelectInput, {
+  EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
 import styles from './UMaskInput.css';
 
-const umaskOptions = [
+const umaskOptions: EnhancedSelectInputValue<string>[] = [
   {
     key: '755',
     get value() {

frontend/src/Components/Form/SelectInput.tsx

@@ -1,9 +1,15 @@
 import classNames from 'classnames';
-import React, { ChangeEvent, SyntheticEvent, useCallback } from 'react';
+import React, {
+  ChangeEvent,
+  ComponentProps,
+  SyntheticEvent,
+  useCallback,
+} from 'react';
 import { InputChanged } from 'typings/inputs';
 import styles from './SelectInput.css';
 
-interface SelectInputOption {
+export interface SelectInputOption
+  extends Pick<ComponentProps<'option'>, 'disabled'> {
   key: string | number;
   value: string | number | (() => string | number);
 }

frontend/src/Components/Form/Tag/SeriesTagInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { addTag } from 'Store/Actions/tagActions';
@@ -12,10 +12,10 @@ interface SeriesTag extends TagBase {
   name: string;
 }
 
-export interface SeriesTagInputProps {
+export interface SeriesTagInputProps<V> {
   name: string;
-  value: number[];
-  onChange: (change: InputChanged<number[]>) => void;
+  value: V;
+  onChange: (change: InputChanged<V>) => void;
 }
 
 const VALID_TAG_REGEX = new RegExp('[^-_a-z0-9]', 'i');
@@ -59,28 +59,48 @@ function createSeriesTagsSelector(tags: number[]) {
   });
 }
 
-export default function SeriesTagInput({
+export default function SeriesTagInput<V extends number | number[]>({
   name,
   value,
   onChange,
-}: SeriesTagInputProps) {
+}: SeriesTagInputProps<V>) {
   const dispatch = useDispatch();
+  const isArray = Array.isArray(value);
+
+  const arrayValue = useMemo(() => {
+    if (isArray) {
+      return value as number[];
+    }
+
+    return value === 0 ? [] : [value as number];
+  }, [isArray, value]);
 
   const { tags, tagList, allTags } = useSelector(
-    createSeriesTagsSelector(value)
+    createSeriesTagsSelector(arrayValue)
   );
 
   const handleTagCreated = useCallback(
     (tag: SeriesTag) => {
-      onChange({ name, value: [...value, tag.id] });
+      if (isArray) {
+        onChange({ name, value: [...value, tag.id] as V });
+      } else {
+        onChange({
+          name,
+          value: tag.id as V,
+        });
+      }
     },
-    [name, value, onChange]
+    [name, value, isArray, onChange]
   );
 
   const handleTagAdd = useCallback(
     (newTag: SeriesTag) => {
       if (newTag.id) {
-        onChange({ name, value: [...value, newTag.id] });
+        if (isArray) {
+          onChange({ name, value: [...value, newTag.id] as V });
+        } else {
+          onChange({ name, value: newTag.id as V });
+        }
 
         return;
       }
@@ -96,17 +116,21 @@ export default function SeriesTagInput({
         );
       }
     },
-    [name, value, allTags, handleTagCreated, onChange, dispatch]
+    [name, value, isArray, allTags, handleTagCreated, onChange, dispatch]
   );
 
   const handleTagDelete = useCallback(
     ({ index }: { index: number }) => {
-      const newValue = value.slice();
-      newValue.splice(index, 1);
+      if (isArray) {
+        const newValue = value.slice();
+        newValue.splice(index, 1);
 
-      onChange({ name, value: newValue });
+        onChange({ name, value: newValue as V });
+      } else {
+        onChange({ name, value: 0 as V });
+      }
     },
-    [name, value, onChange]
+    [name, value, isArray, onChange]
   );
 
   return (

frontend/src/Components/Form/Tag/TagInput.tsx

@@ -14,7 +14,7 @@ import {
   RenderSuggestion,
   SuggestionsFetchRequestedParams,
 } from 'react-autosuggest';
-import useDebouncedCallback from 'Helpers/Hooks/useDebouncedCallback';
+import { useDebouncedCallback } from 'use-debounce';
 import { Kind } from 'Helpers/Props/kinds';
 import { InputChanged } from 'typings/inputs';
 import AutoSuggestInput from '../AutoSuggestInput';

frontend/src/Components/Menu/Menu.tsx

@@ -1,41 +1,22 @@
+import {
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react';
 import React, {
   ReactElement,
   useCallback,
   useEffect,
   useId,
-  useRef,
   useState,
 } from 'react';
-import { Manager, Popper, PopperProps, Reference } from 'react-popper';
-import Portal from 'Components/Portal';
 import styles from './Menu.css';
 
-const sharedPopperOptions = {
-  modifiers: {
-    preventOverflow: {
-      padding: 0,
-    },
-    flip: {
-      padding: 0,
-    },
-  },
-};
-
-const popperOptions: {
-  right: Partial<PopperProps>;
-  left: Partial<PopperProps>;
-} = {
-  right: {
-    ...sharedPopperOptions,
-    placement: 'bottom-end',
-  },
-
-  left: {
-    ...sharedPopperOptions,
-    placement: 'bottom-start',
-  },
-};
-
 interface MenuProps {
   className?: string;
   children: React.ReactNode;
@@ -49,9 +30,7 @@ function Menu({
   alignMenu = 'left',
   enforceMaxHeight = true,
 }: MenuProps) {
-  const updater = useRef<(() => void) | null>(null);
   const menuButtonId = useId();
-  const menuContentId = useId();
   const [maxHeight, setMaxHeight] = useState(0);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -70,45 +49,14 @@ function Menu({
     setMaxHeight(height);
   }, [menuButtonId]);
 
-  const handleWindowClick = useCallback(
-    (event: MouseEvent) => {
-      const menuButton = document.getElementById(menuButtonId);
+  const handleMenuButtonPress = useCallback(() => {
+    setIsMenuOpen((isOpen) => !isOpen);
+  }, []);
 
-      if (!menuButton) {
-        return;
-      }
-
-      if (!menuButton.contains(event.target as Node)) {
-        setIsMenuOpen(false);
-      }
-    },
-    [menuButtonId]
-  );
-
-  const handleTouchStart = useCallback(
-    (event: TouchEvent) => {
-      const menuButton = document.getElementById(menuButtonId);
-      const menuContent = document.getElementById(menuContentId);
-
-      if (!menuButton || !menuContent) {
-        return;
-      }
-
-      if (event.targetTouches.length !== 1) {
-        return;
-      }
-
-      const target = event.targetTouches[0].target;
-
-      if (
-        !menuButton.contains(target as Node) &&
-        !menuContent.contains(target as Node)
-      ) {
-        setIsMenuOpen(false);
-      }
-    },
-    [menuButtonId, menuContentId]
-  );
+  const childrenArray = React.Children.toArray(children);
+  const button = React.cloneElement(childrenArray[0] as ReactElement, {
+    onPress: handleMenuButtonPress,
+  });
 
   const handleWindowResize = useCallback(() => {
     updateMaxHeight();
@@ -120,32 +68,15 @@ function Menu({
     }
   }, [isMenuOpen, updateMaxHeight]);
 
-  const handleMenuButtonPress = useCallback(() => {
-    setIsMenuOpen((isOpen) => !isOpen);
-  }, []);
-
-  const childrenArray = React.Children.toArray(children);
-  const button = React.cloneElement(childrenArray[0] as ReactElement, {
-    onPress: handleMenuButtonPress,
-  });
-
   useEffect(() => {
     if (enforceMaxHeight) {
       updateMaxHeight();
     }
   }, [enforceMaxHeight, updateMaxHeight]);
 
-  useEffect(() => {
-    if (updater.current && isMenuOpen) {
-      updater.current();
-    }
-  }, [isMenuOpen]);
-
   useEffect(() => {
     // Listen to resize events on the window and scroll events
     // on all elements to ensure the menu is the best size possible.
-    // Listen for click events on the window to support closing the
-    // menu on clicks outside.
 
     if (!isMenuOpen) {
       return;
@@ -153,52 +84,88 @@ function Menu({
 
     window.addEventListener('resize', handleWindowResize);
     window.addEventListener('scroll', handleWindowScroll, { capture: true });
-    window.addEventListener('click', handleWindowClick);
-    window.addEventListener('touchstart', handleTouchStart);
 
     return () => {
       window.removeEventListener('resize', handleWindowResize);
       window.removeEventListener('scroll', handleWindowScroll, {
         capture: true,
       });
-      window.removeEventListener('click', handleWindowClick);
-      window.removeEventListener('touchstart', handleTouchStart);
     };
-  }, [
-    isMenuOpen,
-    handleWindowResize,
-    handleWindowScroll,
-    handleWindowClick,
-    handleTouchStart,
+  }, [isMenuOpen, handleWindowResize, handleWindowScroll]);
+
+  const { refs, context, floatingStyles } = useFloating({
+    middleware: [
+      flip({
+        crossAxis: false,
+        mainAxis: true,
+      }),
+      // offset({ mainAxis: 10 }),
+      shift(),
+    ],
+    open: isMenuOpen,
+    placement: alignMenu === 'left' ? 'bottom-start' : 'bottom-end',
+    whileElementsMounted: autoUpdate,
+    onOpenChange: setIsMenuOpen,
+  });
+
+  const handleFloaterPress = useCallback(
+    (event: MouseEvent) => {
+      if (
+        refs.reference &&
+        (refs.reference.current as HTMLElement).contains(
+          event.target as HTMLElement
+        )
+      ) {
+        return false;
+      }
+
+      // TODO: Menu items should handle closing when they are clicked.
+      // This is handled before the menu item click event is handled, so wait 100ms before closing.
+      setTimeout(() => {
+        setIsMenuOpen(false);
+      }, 100);
+
+      return true;
+    },
+    [refs.reference]
+  );
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'click',
+    outsidePress: handleFloaterPress,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    dismiss,
   ]);
 
   return (
-    <Manager>
-      <Reference>
-        {({ ref }) => (
-          <div ref={ref} id={menuButtonId} className={className}>
-            {button}
-          </div>
-        )}
-      </Reference>
+    <>
+      <div
+        ref={refs.setReference}
+        {...getReferenceProps()}
+        id={menuButtonId}
+        className={className}
+      >
+        {button}
+      </div>
 
-      <Portal>
-        <Popper {...popperOptions[alignMenu]}>
-          {({ ref, style, scheduleUpdate }) => {
-            updater.current = scheduleUpdate;
-
-            return React.cloneElement(childrenArray[1] as ReactElement, {
-              forwardedRef: ref,
-              style: {
-                ...style,
-                maxHeight,
-              },
-              isOpen: isMenuOpen,
-            });
-          }}
-        </Popper>
-      </Portal>
-    </Manager>
+      {isMenuOpen ? (
+        <FloatingPortal id="portal-root">
+          {React.cloneElement(childrenArray[1] as ReactElement, {
+            forwardedRef: refs.setFloating,
+            style: {
+              maxHeight,
+              ...floatingStyles,
+            },
+            isOpen: isMenuOpen,
+            ...getFloatingProps(),
+          })}
+        </FloatingPortal>
+      ) : null}
+    </>
   );
 }
 

frontend/src/Components/Modal/Modal.css

@@ -88,13 +88,6 @@
 }
 
 @media only screen and (max-width: $breakpointMedium) {
-  .modal.small,
-  .modal.medium {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: $breakpointSmall) {
   .modalContainer {
     position: fixed;
   }

frontend/src/Components/Page/Header/SeriesSearchInput.tsx

@@ -13,10 +13,10 @@ import React, {
 import Autosuggest from 'react-autosuggest';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
+import { useDebouncedCallback } from 'use-debounce';
 import { Tag } from 'App/State/TagsAppState';
 import Icon from 'Components/Icon';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import useDebouncedCallback from 'Helpers/Hooks/useDebouncedCallback';
 import useKeyboardShortcuts from 'Helpers/Hooks/useKeyboardShortcuts';
 import { icons } from 'Helpers/Props';
 import Series from 'Series/Series';
@@ -316,7 +316,7 @@ function SeriesSearchInput() {
         return;
       }
 
-      // If an suggestion is not selected go to the first series,
+      // If a suggestion is not selected go to the first series,
       // otherwise go to the selected series.
 
       const selectedSuggestion =

frontend/src/Components/Page/Sidebar/PageSidebar.tsx

@@ -359,34 +359,37 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
     });
   }, []);
 
-  const handleTouchEnd = useCallback((event: TouchEvent) => {
-    const touches = event.changedTouches;
-    const currentTouch = touches[0].pageX;
+  const handleTouchEnd = useCallback(
+    (event: TouchEvent) => {
+      const touches = event.changedTouches;
+      const currentTouch = touches[0].pageX;
 
-    if (!touchStartX.current) {
-      return;
-    }
+      if (!touchStartX.current) {
+        return;
+      }
 
-    if (currentTouch > touchStartX.current && currentTouch > 50) {
-      setSidebarTransform({
-        transition: 'none',
-        transform: 0,
-      });
-    } else if (currentTouch < touchStartX.current && currentTouch < 80) {
-      setSidebarTransform({
-        transition: 'transform 50ms ease-in-out',
-        transform: SIDEBAR_WIDTH * -1,
-      });
-    } else {
-      setSidebarTransform({
-        transition: 'none',
-        transform: 0,
-      });
-    }
+      if (currentTouch > touchStartX.current && currentTouch > 50) {
+        setSidebarTransform({
+          transition: 'none',
+          transform: 0,
+        });
+      } else if (currentTouch < touchStartX.current && currentTouch < 80) {
+        setSidebarTransform({
+          transition: 'transform 50ms ease-in-out',
+          transform: SIDEBAR_WIDTH * -1,
+        });
+      } else {
+        setSidebarTransform({
+          transition: 'none',
+          transform: isSidebarVisible ? 0 : SIDEBAR_WIDTH * -1,
+        });
+      }
 
-    touchStartX.current = null;
-    touchStartY.current = null;
-  }, []);
+      touchStartX.current = null;
+      touchStartY.current = null;
+    },
+    [isSidebarVisible]
+  );
 
   const handleTouchCancel = useCallback(() => {
     touchStartX.current = null;

frontend/src/Components/Page/Sidebar/PageSidebarItem.css

@@ -24,6 +24,7 @@
   composes: link;
 
   padding: 10px 24px;
+  padding-left: 35px;
 }
 
 .isActiveLink {
@@ -41,10 +42,6 @@
   text-align: center;
 }
 
-.noIcon {
-  margin-left: 25px;
-}
-
 .status {
   float: right;
 }

frontend/src/Components/Page/Sidebar/PageSidebarItem.css.d.ts

@@ -8,7 +8,6 @@ interface CssExports {
   'isActiveParentLink': string;
   'item': string;
   'link': string;
-  'noIcon': string;
   'status': string;
 }
 export const cssExports: CssExports;

frontend/src/Components/Page/Sidebar/PageSidebarItem.tsx

@@ -54,9 +54,7 @@ function PageSidebarItem({
           </span>
         )}
 
-        <span className={isChildItem ? styles.noIcon : undefined}>
-          {typeof title === 'function' ? title() : title}
-        </span>
+        {typeof title === 'function' ? title() : title}
 
         {!!StatusComponent && (
           <span className={styles.status}>

frontend/src/Components/Page/Toolbar/PageToolbarButton.css

@@ -22,11 +22,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   height: 24px;
 }
 
 .label {
   padding: 0 3px;
+  max-width: 100%;
+  max-height: 100%;
   color: var(--toolbarLabelColor);
   font-size: $extraSmallFontSize;
   line-height: calc($extraSmallFontSize + 1px);

frontend/src/Components/Page/Toolbar/PageToolbarButton.tsx

@@ -31,6 +31,7 @@ function PageToolbarButton({
         isDisabled && styles.isDisabled
       )}
       isDisabled={isDisabled || isSpinning}
+      title={label}
       {...otherProps}
     >
       <Icon

frontend/src/Components/Page/Toolbar/PageToolbarSection.tsx

@@ -80,8 +80,12 @@ function PageToolbarSection({
     if (buttonCount - 1 === maxButtons) {
       const overflowItems: PageToolbarButtonProps[] = [];
 
+      const buttonsWithoutSeparators = validChildren.filter(
+        (child) => Object.keys(child.props).length > 0
+      );
+
       return {
-        buttons: validChildren,
+        buttons: buttonsWithoutSeparators,
         buttonCount,
         overflowItems,
       };

frontend/src/Components/Table/Cells/TableRowCell.css

@@ -4,7 +4,7 @@
   line-height: 1.52857143;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .cell {
     white-space: nowrap;
   }

frontend/src/Components/Table/Cells/VirtualTableRowCell.css

@@ -7,7 +7,7 @@
   white-space: nowrap;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .cell {
     white-space: nowrap;
   }

frontend/src/Components/Table/Column.ts

@@ -8,7 +8,7 @@ interface Column {
   name: string;
   label: string | PropertyFunction<string> | React.ReactNode;
   className?: string;
-  columnLabel?: string;
+  columnLabel?: string | PropertyFunction<string>;
   isSortable?: boolean;
   fixedSortDirection?: SortDirection;
   isVisible: boolean;

frontend/src/Components/Table/Table.css

@@ -10,7 +10,7 @@
   border-collapse: collapse;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .tableContainer {
     min-width: 100%;
     width: fit-content;

frontend/src/Components/Table/TableHeaderCell.css

@@ -9,7 +9,7 @@
   margin-left: 10px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .headerCell {
     white-space: nowrap;
   }

frontend/src/Components/Table/TablePager.css

@@ -60,7 +60,7 @@
   height: 25px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .pager {
     flex-wrap: wrap;
   }

frontend/src/Components/Table/TablePager.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { useCallback, useMemo, useState } from 'react';
-import SelectInput from 'Components/Form/SelectInput';
+import SelectInput, { SelectInputOption } from 'Components/Form/SelectInput';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -14,10 +14,10 @@ interface TablePagerProps {
   totalPages?: number;
   totalRecords?: number;
   isFetching?: boolean;
-  onFirstPagePress: () => void;
-  onPreviousPagePress: () => void;
-  onNextPagePress: () => void;
-  onLastPagePress: () => void;
+  onFirstPagePress?: () => void;
+  onPreviousPagePress?: () => void;
+  onNextPagePress?: () => void;
+  onLastPagePress?: () => void;
   onPageSelect: (page: number) => void;
 }
 
@@ -26,10 +26,6 @@ function TablePager({
   totalPages,
   totalRecords = 0,
   isFetching,
-  onFirstPagePress,
-  onPreviousPagePress,
-  onNextPagePress,
-  onLastPagePress,
   onPageSelect,
 }: TablePagerProps) {
   const [isShowingPageSelect, setIsShowingPageSelect] = useState(false);
@@ -38,7 +34,7 @@ function TablePager({
   const isLastPage = page === totalPages;
 
   const pages = useMemo(() => {
-    return Array.from(new Array(totalPages), (_x, i) => {
+    return Array.from(new Array(totalPages), (_x, i): SelectInputOption => {
       const pageNumber = i + 1;
 
       return {
@@ -64,6 +60,34 @@ function TablePager({
     setIsShowingPageSelect(false);
   }, []);
 
+  const handleFirstPagePress = useCallback(() => {
+    onPageSelect(1);
+  }, [onPageSelect]);
+
+  const onPreviousPagePress = useCallback(() => {
+    if (!page) {
+      return;
+    }
+
+    onPageSelect(page - 1);
+  }, [onPageSelect, page]);
+
+  const onNextPagePress = useCallback(() => {
+    if (!page) {
+      return;
+    }
+
+    onPageSelect(page + 1);
+  }, [onPageSelect, page]);
+
+  const onLastPagePress = useCallback(() => {
+    if (!totalPages) {
+      return;
+    }
+
+    onPageSelect(totalPages);
+  }, [onPageSelect, totalPages]);
+
   if (!page) {
     return null;
   }
@@ -84,7 +108,7 @@ function TablePager({
               isFirstPage && styles.disabledPageButton
             )}
             isDisabled={isFirstPage}
-            onPress={onFirstPagePress}
+            onPress={handleFirstPagePress}
           >
             <Icon name={icons.PAGE_FIRST} />
           </Link>

frontend/src/Components/Table/VirtualTableHeaderCell.css

@@ -9,7 +9,7 @@
   margin-left: 10px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .headerCell {
     white-space: nowrap;
   }

frontend/src/Components/Tooltip/Tooltip.css

@@ -1,6 +1,5 @@
 .tooltipContainer {
   z-index: $popperZIndex;
-  margin: 10px;
 }
 
 .tooltip {
@@ -18,174 +17,24 @@
   }
 }
 
-.arrow,
-.arrow::after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-width: 11px;
-  border-style: solid;
-  border-color: transparent;
-}
-
-.arrowDisabled {
-  display: none;
-}
-
-.arrow::after {
-  border-width: 10px;
-  content: '';
-}
-
-.top {
-  bottom: -11px;
-  margin-left: -11px;
-  border-bottom-width: 0;
-
-  &::after {
-    bottom: 1px;
-    margin-left: -10px;
-    border-bottom-width: 0;
-    content: ' ';
-
-    &.default {
-      border-top-color: var(--popoverArrowBorderColor);
-    }
-
-    &.inverse {
-      border-top-color: var(--popoverArrowBorderInverseColor);
-    }
-  }
-
-  &.default {
-    border-top-color: var(--popoverArrowBorderColor);
-  }
-
-  &.inverse {
-    border-top-color: var(--popoverArrowBorderInverseColor);
-  }
-}
-
-.right {
-  left: -11px;
-  margin-top: -11px;
-  border-left-width: 0;
-
-  &::after {
-    bottom: -10px;
-    left: 1px;
-    border-left-width: 0;
-    content: ' ';
-
-    &.default {
-      border-right-color: var(--popoverArrowBorderColor);
-    }
-
-    &.inverse {
-      border-right-color: var(--popoverArrowBorderInverseColor);
-    }
-  }
-
-  &.default {
-    border-right-color: var(--popoverArrowBorderColor);
-  }
-
-  &.inverse {
-    border-right-color: var(--popoverArrowBorderInverseColor);
-  }
-}
-
-.bottom {
-  top: -11px;
-  margin-left: -11px;
-  border-top-width: 0;
-
-  &::after {
-    top: 1px;
-    margin-left: -10px;
-    border-top-width: 0;
-    content: ' ';
-
-    &.default {
-      border-bottom-color: var(--popoverArrowBorderColor);
-    }
-
-    &.inverse {
-      border-bottom-color: var(--popoverArrowBorderInverseColor);
-    }
-  }
-
-  &.default {
-    border-bottom-color: var(--popoverArrowBorderColor);
-  }
-
-  &.inverse {
-    border-bottom-color: var(--popoverArrowBorderInverseColor);
-  }
-}
-
-.left {
-  right: -11px;
-  margin-top: -11px;
-  border-right-width: 0;
-
-  &::after {
-    right: 1px;
-    bottom: -10px;
-    border-right-width: 0;
-    content: ' ';
-
-    &.default {
-      border-left-color: var(--popoverArrowBorderColor);
-    }
-
-    &.inverse {
-      border-left-color: var(--popoverArrowBorderInverseColor);
-    }
-  }
-
-  &.default {
-    border-left-color: var(--popoverArrowBorderColor);
-  }
-
-  &.inverse {
-    border-left-color: var(--popoverArrowBorderInverseColor);
-  }
-}
-
 .body {
   padding: 5px;
 }
 
-.verticalContainer {
-  max-height: 300px;
-}
-
-.horizontalContainer {
-  max-width: calc($breakpointExtraSmall - 20px);
-}
-
 @media only screen and (min-width: $breakpointExtraSmall) {
-  .horizontalContainer {
+  .tooltip {
     max-width: calc($breakpointSmall * 0.8);
   }
 }
 
 @media only screen and (min-width: $breakpointSmall) {
-  .horizontalContainer {
+  .tooltip {
     max-width: calc($breakpointMedium * 0.8);
   }
 }
 
 @media only screen and (min-width: $breakpointMedium) {
-  .horizontalContainer {
+  .tooltip {
     max-width: calc($breakpointLarge * 0.8);
   }
 }
-
-/* @media only screen and (max-width: $breakpointLarge) {
-  .horizontalContainer {
-    max-width: calc($breakpointLarge * 0.8);
-  }
-} */

frontend/src/Components/Tooltip/Tooltip.css.d.ts

@@ -1,19 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'arrow': string;
-  'arrowDisabled': string;
   'body': string;
-  'bottom': string;
   'default': string;
-  'horizontalContainer': string;
   'inverse': string;
-  'left': string;
-  'right': string;
   'tooltip': string;
   'tooltipContainer': string;
-  'top': string;
-  'verticalContainer': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Components/Tooltip/Tooltip.tsx

@@ -1,17 +1,25 @@
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  FloatingPortal,
+  offset,
+  Placement,
+  safePolygon,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useHover,
+  useInteractions,
+} from '@floating-ui/react';
 import classNames from 'classnames';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { Manager, Popper, Reference } from 'react-popper';
-import Portal from 'Components/Portal';
-import { kinds, tooltipPositions } from 'Helpers/Props';
+import React, { useRef, useState } from 'react';
+import { useThemeColor } from 'Helpers/Hooks/useTheme';
+import { kinds } from 'Helpers/Props';
 import { Kind } from 'Helpers/Props/kinds';
-import dimensions from 'Styles/Variables/dimensions';
-import { isMobile as isMobileUtil } from 'Utilities/browser';
+import { isMobile } from 'Utilities/browser';
 import styles from './Tooltip.css';
 
 export interface TooltipProps {
@@ -19,8 +27,8 @@ export interface TooltipProps {
   bodyClassName?: string;
   anchor: React.ReactNode;
   tooltip: string | React.ReactNode;
-  kind?: Extract<Kind, keyof typeof styles>;
-  position?: (typeof tooltipPositions.all)[number];
+  kind?: Extract<Kind, 'default' | 'inverse'>;
+  position?: Placement;
   canFlip?: boolean;
 }
 function Tooltip(props: TooltipProps) {
@@ -30,196 +38,76 @@ function Tooltip(props: TooltipProps) {
     anchor,
     tooltip,
     kind = kinds.DEFAULT,
-    position = tooltipPositions.TOP,
-    canFlip = false,
+    position,
+    canFlip = true,
   } = props;
 
-  const closeTimeout = useRef<ReturnType<typeof setTimeout>>();
-  const updater = useRef<(() => void) | null>(null);
+  const arrowColor = useThemeColor(
+    kind === 'inverse'
+      ? 'popoverArrowBorderInverseColor'
+      : 'popoverArrowBorderColor'
+  );
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleClick = useCallback(() => {
-    if (!isMobileUtil()) {
-      return;
-    }
+  const arrowRef = useRef(null);
 
-    setIsOpen((isOpen) => {
-      return !isOpen;
-    });
-  }, [setIsOpen]);
-
-  const handleMouseEnterAnchor = useCallback(() => {
-    // Mobile will fire mouse enter and click events rapidly,
-    // this causes the tooltip not to open on the first press.
-    // Ignore the mouse enter event on mobile.
-
-    if (isMobileUtil()) {
-      return;
-    }
-
-    if (closeTimeout.current) {
-      clearTimeout(closeTimeout.current);
-    }
-
-    setIsOpen(true);
-  }, [setIsOpen]);
-
-  const handleMouseEnterTooltip = useCallback(() => {
-    if (closeTimeout.current) {
-      clearTimeout(closeTimeout.current);
-    }
-
-    setIsOpen(true);
-  }, [setIsOpen]);
-
-  const handleMouseLeave = useCallback(() => {
-    // Still listen for mouse leave on mobile to allow clicks outside to close the tooltip.
-
-    clearTimeout(closeTimeout.current);
-    closeTimeout.current = setTimeout(() => {
-      setIsOpen(false);
-    }, 100);
-  }, [setIsOpen]);
-
-  const maxWidth = useMemo(() => {
-    const windowWidth = window.innerWidth;
-
-    if (windowWidth >= parseInt(dimensions.breakpointLarge)) {
-      return 800;
-    } else if (windowWidth >= parseInt(dimensions.breakpointMedium)) {
-      return 650;
-    } else if (windowWidth >= parseInt(dimensions.breakpointSmall)) {
-      return 500;
-    }
-
-    return 450;
-  }, []);
-
-  const computeMaxSize = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (data: any) => {
-      const { top, right, bottom, left } = data.offsets.reference;
-
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
-
-      if (/^top/.test(data.placement)) {
-        data.styles.maxHeight = top - 20;
-      } else if (/^bottom/.test(data.placement)) {
-        data.styles.maxHeight = windowHeight - bottom - 20;
-      } else if (/^right/.test(data.placement)) {
-        data.styles.maxWidth = Math.min(maxWidth, windowWidth - right - 20);
-        data.styles.maxHeight = top - 20;
-      } else {
-        data.styles.maxWidth = Math.min(maxWidth, left - 20);
-        data.styles.maxHeight = top - 20;
-      }
-
-      return data;
-    },
-    [maxWidth]
-  );
-
-  useEffect(() => {
-    if (updater.current && isOpen) {
-      updater.current();
-    }
+  const { refs, context, floatingStyles } = useFloating({
+    middleware: [
+      arrow({
+        element: arrowRef,
+      }),
+      flip({
+        crossAxis: canFlip,
+        mainAxis: canFlip,
+      }),
+      offset({ mainAxis: 10 }),
+      shift(),
+    ],
+    open: isOpen,
+    placement: position,
+    whileElementsMounted: autoUpdate,
+    onOpenChange: setIsOpen,
   });
 
-  useEffect(() => {
-    return () => {
-      if (closeTimeout.current) {
-        clearTimeout(closeTimeout.current);
-      }
-    };
-  }, []);
+  const click = useClick(context, {
+    enabled: isMobile(),
+  });
+  const dismiss = useDismiss(context);
+  const hover = useHover(context, {
+    handleClose: safePolygon(),
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    dismiss,
+    hover,
+  ]);
 
   return (
-    <Manager>
-      <Reference>
-        {({ ref }) => (
-          <span
-            ref={ref}
-            className={className}
-            onClick={handleClick}
-            onMouseEnter={handleMouseEnterAnchor}
-            onMouseLeave={handleMouseLeave}
+    <>
+      <span
+        ref={refs.setReference}
+        {...getReferenceProps()}
+        className={className}
+      >
+        {anchor}
+      </span>
+      {isOpen ? (
+        <FloatingPortal id="portal-root">
+          <div
+            ref={refs.setFloating}
+            className={styles.tooltipContainer}
+            style={floatingStyles}
+            {...getFloatingProps()}
           >
-            {anchor}
-          </span>
-        )}
-      </Reference>
-
-      <Portal>
-        <Popper
-          // @ts-expect-error - PopperJS types are not in sync with our position types.
-          placement={position}
-          // Disable events to improve performance when many tooltips
-          // are shown (Quality Definitions for example).
-          eventsEnabled={false}
-          modifiers={{
-            computeMaxHeight: {
-              order: 851,
-              enabled: true,
-              fn: computeMaxSize,
-            },
-            preventOverflow: {
-              // Fixes positioning for tooltips in the queue
-              // and likely others.
-              escapeWithReference: false,
-            },
-            flip: {
-              enabled: canFlip,
-            },
-          }}
-        >
-          {({ ref, style, placement, arrowProps, scheduleUpdate }) => {
-            updater.current = scheduleUpdate;
-
-            const popperPlacement = placement
-              ? placement.split('-')[0]
-              : position;
-            const vertical =
-              popperPlacement === 'top' || popperPlacement === 'bottom';
-
-            return (
-              <div
-                ref={ref}
-                className={classNames(
-                  styles.tooltipContainer,
-                  vertical
-                    ? styles.verticalContainer
-                    : styles.horizontalContainer
-                )}
-                style={style}
-                onMouseEnter={handleMouseEnterTooltip}
-                onMouseLeave={handleMouseLeave}
-              >
-                <div
-                  ref={arrowProps.ref}
-                  className={
-                    isOpen
-                      ? classNames(
-                          styles.arrow,
-                          styles[kind],
-                          // @ts-expect-error - is a string that may not exist in styles
-                          styles[popperPlacement]
-                        )
-                      : styles.arrowDisabled
-                  }
-                  style={arrowProps.style}
-                />
-                {isOpen ? (
-                  <div className={classNames(styles.tooltip, styles[kind])}>
-                    <div className={bodyClassName}>{tooltip}</div>
-                  </div>
-                ) : null}
-              </div>
-            );
-          }}
-        </Popper>
-      </Portal>
-    </Manager>
+            <FloatingArrow ref={arrowRef} context={context} fill={arrowColor} />
+            <div className={classNames(styles.tooltip, styles[kind])}>
+              <div className={bodyClassName}>{tooltip}</div>
+            </div>
+          </div>
+        </FloatingPortal>
+      ) : null}
+    </>
   );
 }
 

frontend/src/Episode/Episode.ts

@@ -22,10 +22,6 @@ interface Episode extends ModelBase {
   monitored: boolean;
   grabbed?: boolean;
   unverifiedSceneNumbering: boolean;
-  endTime?: string;
-  grabDate?: string;
-  seriesTitle?: string;
-  queued?: boolean;
   series?: Series;
   finaleType?: string;
 }

frontend/src/Episode/Summary/EpisodeSummary.tsx

@@ -11,7 +11,7 @@ import useEpisodeFile from 'EpisodeFile/useEpisodeFile';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import Series from 'Series/Series';
 import useSeries from 'Series/useSeries';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileName';
+import QualityProfileName from 'Settings/Profiles/Quality/QualityProfileName';
 import {
   deleteEpisodeFile,
   fetchEpisodeFile,
@@ -128,7 +128,7 @@ function EpisodeSummary(props: EpisodeSummaryProps) {
         <span className={styles.infoTitle}>{translate('QualityProfile')}</span>
 
         <Label kind={kinds.PRIMARY} size={sizes.MEDIUM}>
-          <QualityProfileNameConnector qualityProfileId={qualityProfileId} />
+          <QualityProfileName qualityProfileId={qualityProfileId} />
         </Label>
       </div>
 

frontend/src/Episode/Summary/MediaInfo.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import MediaInfoProps from 'typings/MediaInfo';
+import formatBitrate from 'Utilities/Number/formatBitrate';
 import getEntries from 'Utilities/Object/getEntries';
 
 function MediaInfo(props: MediaInfoProps) {
@@ -16,9 +17,19 @@ function MediaInfo(props: MediaInfoProps) {
           return null;
         }
 
-        return (
-          <DescriptionListItem key={key} title={title} data={props[key]} />
-        );
+        if (key === 'audioBitrate' || key === 'videoBitrate') {
+          return (
+            <DescriptionListItem
+              key={key}
+              title={title}
+              data={
+                <span title={value.toString()}>{formatBitrate(value)}</span>
+              }
+            />
+          );
+        }
+
+        return <DescriptionListItem key={key} title={title} data={value} />;
       })}
     </DescriptionList>
   );

frontend/src/Helpers/Hooks/useApiMutation.ts

@@ -0,0 +1,34 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { Error } from 'App/State/AppSectionState';
+import fetchJson, {
+  apiRoot,
+  FetchJsonOptions,
+} from 'Utilities/Fetch/fetchJson';
+
+interface MutationOptions<T, TData>
+  extends Omit<FetchJsonOptions<TData>, 'method'> {
+  method: 'POST' | 'PUT' | 'DELETE';
+  mutationOptions?: Omit<UseMutationOptions<T, Error, TData>, 'mutationFn'>;
+}
+
+function useApiMutation<T, TData>(options: MutationOptions<T, TData>) {
+  const requestOptions = useMemo(() => {
+    return {
+      ...options,
+      path: apiRoot + options.path,
+      headers: {
+        ...options.headers,
+        'X-Api-Key': window.Sonarr.apiKey,
+      },
+    };
+  }, [options]);
+
+  return useMutation<T, Error, TData>({
+    ...options.mutationOptions,
+    mutationFn: async (data: TData) =>
+      fetchJson<T, TData>({ ...requestOptions, body: data }),
+  });
+}
+
+export default useApiMutation;

frontend/src/Helpers/Hooks/useApiQuery.ts

@@ -1,46 +1,26 @@
 import { UndefinedInitialDataOptions, useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
+import fetchJson, {
+  ApiError,
+  FetchJsonOptions,
+} from 'Utilities/Fetch/fetchJson';
+import getQueryPath from 'Utilities/Fetch/getQueryPath';
+import getQueryString, { QueryParams } from 'Utilities/Fetch/getQueryString';
 
-interface ApiErrorResponse {
-  message: string;
-  details: string;
-}
-
-export class ApiError extends Error {
-  public statusCode: number;
-  public statusText: string;
-  public statusBody?: ApiErrorResponse;
-
-  public constructor(
-    path: string,
-    statusCode: number,
-    statusText: string,
-    statusBody?: ApiErrorResponse
-  ) {
-    super(`Request Error: (${statusCode}) ${path}`);
-
-    this.statusCode = statusCode;
-    this.statusText = statusText;
-    this.statusBody = statusBody;
-
-    Object.setPrototypeOf(this, new.target.prototype);
-  }
-}
-
-interface QueryOptions<T> {
-  path: string;
-  headers?: HeadersInit;
+export interface QueryOptions<T> extends FetchJsonOptions<unknown> {
+  queryParams?: QueryParams;
   queryOptions?:
     | Omit<UndefinedInitialDataOptions<T, ApiError>, 'queryKey' | 'queryFn'>
     | undefined;
 }
 
-const apiRoot = '/api/v5'; // window.Sonarr.apiRoot;
+const useApiQuery = <T>(options: QueryOptions<T>) => {
+  const requestOptions = useMemo(() => {
+    const { path: path, queryOptions, queryParams, ...otherOptions } = options;
 
-function useApiQuery<T>(options: QueryOptions<T>) {
-  const { path, headers } = useMemo(() => {
     return {
-      path: apiRoot + options.path,
+      ...otherOptions,
+      path: getQueryPath(path) + getQueryString(queryParams),
       headers: {
         ...options.headers,
         'X-Api-Key': window.Sonarr.apiKey,
@@ -50,29 +30,10 @@ function useApiQuery<T>(options: QueryOptions<T>) {
 
   return useQuery({
     ...options.queryOptions,
-    queryKey: [path, headers],
-    queryFn: async ({ signal }) => {
-      const response = await fetch(path, {
-        headers,
-        signal,
-      });
-
-      if (!response.ok) {
-        // eslint-disable-next-line init-declarations
-        let body;
-
-        try {
-          body = (await response.json()) as ApiErrorResponse;
-        } catch {
-          throw new ApiError(path, response.status, response.statusText);
-        }
-
-        throw new ApiError(path, response.status, response.statusText, body);
-      }
-
-      return response.json() as T;
-    },
+    queryKey: [requestOptions.path],
+    queryFn: async ({ signal }) =>
+      fetchJson<T, unknown>({ ...requestOptions, signal }),
   });
-}
+};
 
 export default useApiQuery;

frontend/src/Helpers/Hooks/useDebouncedCallback.tsx

@@ -1,16 +0,0 @@
-import { debounce, DebouncedFunc, DebounceSettings } from 'lodash';
-import { useCallback } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function useDebouncedCallback<T extends (...args: any) => any>(
-  callback: T,
-  delay: number,
-  options?: DebounceSettings
-): DebouncedFunc<T> {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useCallback(debounce(callback, delay, options), [
-    callback,
-    delay,
-    options,
-  ]);
-}

frontend/src/Helpers/Hooks/usePage.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useHistory } from 'react-router';
+import { create } from 'zustand';
+
+interface PageStore {
+  events: number;
+}
+
+const pageStore = create<PageStore>(() => ({
+  events: 1,
+}));
+
+const usePage = (kind: keyof PageStore) => {
+  const { action } = useHistory();
+
+  const goToPage = (page: number) => {
+    pageStore.setState({ [kind]: page });
+  };
+
+  useEffect(() => {
+    if (action === 'POP') {
+      pageStore.setState({ [kind]: 1 });
+    }
+  }, [action, kind]);
+
+  return {
+    page: pageStore((state) => state[kind]),
+    goToPage,
+  };
+};
+
+export default usePage;
+
+export const resetPage = (kind: keyof PageStore) => {
+  pageStore.setState({ [kind]: 1 });
+};

frontend/src/Helpers/Hooks/usePagedApiQuery.ts

@@ -0,0 +1,81 @@
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { PropertyFilter } from 'App/State/AppState';
+import { SortDirection } from 'Helpers/Props/sortDirections';
+import fetchJson from 'Utilities/Fetch/fetchJson';
+import getQueryPath from 'Utilities/Fetch/getQueryPath';
+import getQueryString from 'Utilities/Fetch/getQueryString';
+import { QueryOptions } from './useApiQuery';
+
+interface PagedQueryOptions<T> extends QueryOptions<PagedQueryResponse<T>> {
+  page: number;
+  pageSize: number;
+  sortKey?: string;
+  sortDirection?: SortDirection;
+  filters?: PropertyFilter[];
+}
+
+interface PagedQueryResponse<T> {
+  page: number;
+  pageSize: number;
+  sortKey: string;
+  sortDirection: string;
+  totalRecords: number;
+  totalPages: number;
+  records: T[];
+}
+
+const usePagedApiQuery = <T>(options: PagedQueryOptions<T>) => {
+  const requestOptions = useMemo(() => {
+    const {
+      path,
+      page,
+      pageSize,
+      sortKey,
+      sortDirection,
+      filters,
+      queryParams,
+      queryOptions,
+      ...otherOptions
+    } = options;
+
+    return {
+      ...otherOptions,
+      path:
+        getQueryPath(path) +
+        getQueryString({
+          ...queryParams,
+          page,
+          pageSize,
+          sortKey,
+          sortDirection,
+          filters,
+        }),
+      headers: {
+        ...options.headers,
+        'X-Api-Key': window.Sonarr.apiKey,
+      },
+    };
+  }, [options]);
+
+  return useQuery({
+    ...options.queryOptions,
+    queryKey: [requestOptions.path],
+    queryFn: async ({ signal }) => {
+      const response = await fetchJson<PagedQueryResponse<T>, unknown>({
+        ...requestOptions,
+        signal,
+      });
+
+      return {
+        ...response,
+        totalPages: Math.max(
+          Math.ceil(response.totalRecords / options.pageSize),
+          1
+        ),
+      };
+    },
+  });
+};
+
+export default usePagedApiQuery;

frontend/src/Helpers/Hooks/useTheme.ts

@@ -0,0 +1,27 @@
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import themes from 'Styles/Themes';
+
+function createThemeSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.ui.item.theme || window.Sonarr.theme,
+    (theme) => {
+      return theme;
+    }
+  );
+}
+
+const useTheme = () => {
+  return useSelector(createThemeSelector());
+};
+
+export default useTheme;
+
+export const useThemeColor = (color: string) => {
+  const theme = useTheme();
+  const themeVariables = themes[theme];
+
+  // @ts-expect-error - themeVariables is a string indexable type
+  return themeVariables[color];
+};

frontend/src/Helpers/createPersist.ts

@@ -0,0 +1,74 @@
+import { create, type StateCreator } from 'zustand';
+import { persist, type PersistOptions } from 'zustand/middleware';
+import Column from 'Components/Table/Column';
+
+export const createPersist = <T>(
+  name: string,
+  state: StateCreator<T>,
+  options: Omit<PersistOptions<T>, 'name' | 'storage'> = {}
+) => {
+  const instanceName =
+    window.Sonarr.instanceName.toLowerCase().replace(/ /g, '_') ?? 'sonarr';
+
+  const finalName = `${instanceName}_${name}`;
+
+  return create(
+    persist<T>(state, {
+      ...options,
+      name: finalName,
+    })
+  );
+};
+
+export const mergeColumns = <T extends { columns: Column[] }>(
+  persistedState: unknown,
+  currentState: T
+) => {
+  const currentColumns = currentState.columns;
+  const persistedColumns = (persistedState as T).columns;
+  const columns: Column[] = [];
+
+  // Add persisted columns in the same order they're currently in
+  // as long as they haven't been removed.
+
+  persistedColumns.forEach((persistedColumn) => {
+    const column = currentColumns.find((i) => i.name === persistedColumn.name);
+
+    if (column) {
+      const newColumn: Partial<Column> = {};
+
+      // We can't use a spread operator or Object.assign to clone the column
+      // or any accessors are lost and can break translations.
+      for (const prop of Object.keys(column)) {
+        const attributes = Object.getOwnPropertyDescriptor(column, prop);
+
+        if (!attributes) {
+          return;
+        }
+
+        Object.defineProperty(newColumn, prop, attributes);
+      }
+
+      newColumn.isVisible = persistedColumn.isVisible;
+
+      columns.push(newColumn as Column);
+    }
+  });
+
+  // Add any columns added to the app in the initial position.
+  currentColumns.forEach((currentColumn, index) => {
+    const persistedColumnIndex = persistedColumns.findIndex(
+      (i) => i.name === currentColumn.name
+    );
+    const column = Object.assign({}, currentColumn);
+
+    if (persistedColumnIndex === -1) {
+      columns.splice(index, 0, column);
+    }
+  });
+
+  return {
+    ...(persistedState as T),
+    columns,
+  };
+};

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
 import * as commandNames from 'Commands/commandNames';
-import SelectInput from 'Components/Form/SelectInput';
+import SelectInput, { SelectInputOption } from 'Components/Form/SelectInput';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
@@ -164,7 +164,7 @@ const COLUMNS = [
   },
 ];
 
-const importModeOptions = [
+const importModeOptions: SelectInputOption[] = [
   {
     key: 'chooseImportMode',
     value: () => translate('ChooseImportMode'),
@@ -343,7 +343,7 @@ function InteractiveImportModalContent(
       }
     );
 
-    const options = [
+    const options: SelectInputOption[] = [
       {
         key: 'select',
         value: translate('SelectDropdown'),

frontend/src/InteractiveImport/Quality/SelectQualityModalContent.tsx

@@ -7,6 +7,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
+import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -69,7 +70,7 @@ function SelectQualityModalContent(props: SelectQualityModalContentProps) {
   );
 
   const qualityOptions = useMemo(() => {
-    return items.map(({ id, name }) => {
+    return items.map(({ id, name }): EnhancedSelectInputValue<number> => {
       return {
         key: id,
         value: name,

frontend/src/RootFolder/RootFolderRow.tsx

@@ -82,9 +82,9 @@ function RootFolderRow(props: RootFolderRowProps) {
       <ConfirmModal
         isOpen={isDeleteModalOpen}
         kind={kinds.DANGER}
-        title={translate('DeleteRootFolder')}
-        message={translate('DeleteRootFolderMessageText', { path })}
-        confirmLabel={translate('Delete')}
+        title={translate('RemoveRootFolder')}
+        message={translate('RemoveRootFolderWithSeriesMessageText', { path })}
+        confirmLabel={translate('Remove')}
         onConfirm={onConfirmDelete}
         onCancel={onDeleteModalClose}
       />

frontend/src/Series/Delete/DeleteSeriesModalContent.tsx

@@ -50,7 +50,9 @@ function DeleteSeriesModalContent({
     dispatch(
       deleteSeries({ id: seriesId, deleteFiles, addImportListExclusion })
     );
-  }, [seriesId, addImportListExclusion, deleteFiles, dispatch]);
+
+    onModalClose();
+  }, [seriesId, addImportListExclusion, deleteFiles, dispatch, onModalClose]);
 
   const handleDeleteOptionChange = useCallback(
     ({ name, value }: CheckInputChanged) => {

frontend/src/Series/Details/SeriesDetails.css

@@ -5,7 +5,6 @@
 .header {
   position: relative;
   width: 100%;
-  height: 425px;
 }
 
 .backdrop {
@@ -30,20 +29,18 @@
   width: 100%;
   height: 100%;
   color: var(--white);
+  gap: 35px;
 }
 
 .poster {
   flex-shrink: 0;
-  margin-right: 35px;
   width: 250px;
   height: 368px;
 }
 
 .info {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
   overflow: hidden;
+  width: 100%;
 }
 
 .titleRow {
@@ -59,10 +56,13 @@
 }
 
 .title {
+  overflow: auto;
+  max-height: calc(3 * 50px);
   text-wrap: balance;
   font-weight: 300;
   font-size: 50px;
   line-height: 50px;
+  line-clamp: 3;
 }
 
 .toggleMonitoredContainer {
@@ -153,6 +153,13 @@
   padding: 20px;
 }
 
+.seriesProgressLabel {
+  composes: label from '~Components/Label.css';
+
+  margin: 0;
+  font-size: 17px;
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .contentContainer {
     padding: 20px 0;
@@ -163,6 +170,8 @@
   }
 
   .title {
+    overflow: hidden;
+    max-height: calc(3 * 30px);
     font-weight: 300;
     font-size: 30px;
     line-height: 30px;

frontend/src/Series/Details/SeriesDetails.css.d.ts

@@ -24,6 +24,7 @@ interface CssExports {
   'runtime': string;
   'seriesNavigationButton': string;
   'seriesNavigationButtons': string;
+  'seriesProgressLabel': string;
   'sizeOnDisk': string;
   'statusName': string;
   'tags': string;

frontend/src/Series/Details/SeriesDetails.tsx

@@ -1,7 +1,6 @@
 import moment from 'moment';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import TextTruncate from 'react-text-truncate';
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
@@ -21,7 +20,6 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import Popover from 'Components/Tooltip/Popover';
 import Tooltip from 'Components/Tooltip/Tooltip';
-import useMeasure from 'Helpers/Hooks/useMeasure';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import {
   align,
@@ -41,7 +39,8 @@ import { Image, Statistics } from 'Series/Series';
 import SeriesGenres from 'Series/SeriesGenres';
 import SeriesPoster from 'Series/SeriesPoster';
 import { getSeriesStatusDetails } from 'Series/SeriesStatus';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileName';
+import useSeries from 'Series/useSeries';
+import QualityProfileName from 'Settings/Profiles/Quality/QualityProfileName';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
 import {
@@ -55,7 +54,6 @@ import {
 import { toggleSeriesMonitored } from 'Store/Actions/seriesActions';
 import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
-import fonts from 'Styles/Variables/fonts';
 import sortByProp from 'Utilities/Array/sortByProp';
 import { findCommand, isCommandExecuting } from 'Utilities/Command';
 import formatBytes from 'Utilities/Number/formatBytes';
@@ -70,12 +68,10 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import SeriesAlternateTitles from './SeriesAlternateTitles';
 import SeriesDetailsLinks from './SeriesDetailsLinks';
 import SeriesDetailsSeason from './SeriesDetailsSeason';
+import SeriesProgressLabel from './SeriesProgressLabel';
 import SeriesTags from './SeriesTags';
 import styles from './SeriesDetails.css';
 
-const defaultFontSize = parseInt(fonts.defaultFontSize);
-const lineHeight = parseFloat(fonts.lineHeight);
-
 function getFanartUrl(images: Image[]) {
   return images.find((image) => image.coverType === 'fanart')?.url;
 }
@@ -124,40 +120,6 @@ function createEpisodeFilesSelector() {
   );
 }
 
-function createSeriesSelector(seriesId: number) {
-  return createSelector(createAllSeriesSelector(), (allSeries) => {
-    const sortedSeries = [...allSeries].sort(sortByProp('sortTitle'));
-    const seriesIndex = sortedSeries.findIndex(
-      (series) => series.id === seriesId
-    );
-
-    if (seriesIndex === -1) {
-      return {
-        series: undefined,
-        nextSeries: undefined,
-        previousSeries: undefined,
-      };
-    }
-
-    const series = sortedSeries[seriesIndex];
-    const nextSeries = sortedSeries[seriesIndex + 1] ?? sortedSeries[0];
-    const previousSeries =
-      sortedSeries[seriesIndex - 1] ?? sortedSeries[sortedSeries.length - 1];
-
-    return {
-      series,
-      nextSeries: {
-        title: nextSeries.title,
-        titleSlug: nextSeries.titleSlug,
-      },
-      previousSeries: {
-        title: previousSeries.title,
-        titleSlug: previousSeries.titleSlug,
-      },
-    };
-  });
-}
-
 interface ExpandedState {
   allExpanded: boolean;
   allCollapsed: boolean;
@@ -170,9 +132,10 @@ interface SeriesDetailsProps {
 
 function SeriesDetails({ seriesId }: SeriesDetailsProps) {
   const dispatch = useDispatch();
-  const { series, nextSeries, previousSeries } = useSelector(
-    createSeriesSelector(seriesId)
-  );
+
+  const series = useSeries(seriesId);
+  const allSeries = useSelector(createAllSeriesSelector());
+
   const {
     isEpisodesFetching,
     isEpisodesPopulated,
@@ -188,22 +151,23 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
   } = useSelector(createEpisodeFilesSelector());
 
   const commands = useSelector(createCommandsSelector());
-  const isSaving = useSelector((state: AppState) => state.series.isSaving);
 
   const { isRefreshing, isRenaming, isSearching } = useMemo(() => {
-    const isSeriesRefreshing = isCommandExecuting(
-      findCommand(commands, {
-        name: commandNames.REFRESH_SERIES,
-        seriesId,
-      })
-    );
     const seriesRefreshingCommand = findCommand(commands, {
       name: commandNames.REFRESH_SERIES,
     });
 
+    const isSeriesRefreshingCommandExecuting = isCommandExecuting(
+      seriesRefreshingCommand
+    );
+
     const allSeriesRefreshing =
-      isCommandExecuting(seriesRefreshingCommand) &&
-      !seriesRefreshingCommand?.body.seriesId;
+      isSeriesRefreshingCommandExecuting &&
+      !seriesRefreshingCommand?.body.seriesIds?.length;
+
+    const isSeriesRefreshing =
+      isSeriesRefreshingCommandExecuting &&
+      seriesRefreshingCommand?.body.seriesIds?.includes(seriesId);
 
     const isSearchingExecuting = isCommandExecuting(
       findCommand(commands, {
@@ -234,6 +198,35 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
     };
   }, [seriesId, commands]);
 
+  const { nextSeries, previousSeries } = useMemo(() => {
+    const sortedSeries = [...allSeries].sort(sortByProp('sortTitle'));
+    const seriesIndex = sortedSeries.findIndex(
+      (series) => series.id === seriesId
+    );
+
+    if (seriesIndex === -1) {
+      return {
+        nextSeries: undefined,
+        previousSeries: undefined,
+      };
+    }
+
+    const nextSeries = sortedSeries[seriesIndex + 1] ?? sortedSeries[0];
+    const previousSeries =
+      sortedSeries[seriesIndex - 1] ?? sortedSeries[sortedSeries.length - 1];
+
+    return {
+      nextSeries: {
+        title: nextSeries.title,
+        titleSlug: nextSeries.titleSlug,
+      },
+      previousSeries: {
+        title: previousSeries.title,
+        titleSlug: previousSeries.titleSlug,
+      },
+    };
+  }, [seriesId, allSeries]);
+
   const [isOrganizeModalOpen, setIsOrganizeModalOpen] = useState(false);
   const [isManageEpisodesOpen, setIsManageEpisodesOpen] = useState(false);
   const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
@@ -247,7 +240,6 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
     allCollapsed: false,
     seasons: {},
   });
-  const [overviewRef, { height: overviewHeight }] = useMeasure();
   const wasRefreshing = usePrevious(isRefreshing);
   const wasRenaming = usePrevious(isRenaming);
 
@@ -396,7 +388,7 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
   }, [populate]);
 
   useEffect(() => {
-    registerPagePopulator(populate);
+    registerPagePopulator(populate, ['seriesUpdated']);
 
     return () => {
       unregisterPagePopulator(populate);
@@ -437,9 +429,15 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
     genres,
     tags,
     year,
+    isSaving = false,
   } = series;
 
-  const { episodeFileCount = 0, sizeOnDisk = 0, lastAired } = statistics;
+  const {
+    episodeCount = 0,
+    episodeFileCount = 0,
+    sizeOnDisk = 0,
+    lastAired,
+  } = statistics;
 
   const statusDetails = getSeriesStatusDetails(status);
   const runningYears =
@@ -518,7 +516,7 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
           <PageToolbarSeparator />
 
           <PageToolbarButton
-            label={translate('SeriesMonitoring')}
+            label={translate('EpisodeMonitoring')}
             iconName={icons.MONITORED}
             onPress={handleMonitorOptionsPress}
           />
@@ -602,25 +600,29 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
                 </div>
 
                 <div className={styles.seriesNavigationButtons}>
-                  <IconButton
-                    className={styles.seriesNavigationButton}
-                    name={icons.ARROW_LEFT}
-                    size={30}
-                    title={translate('SeriesDetailsGoTo', {
-                      title: previousSeries.title,
-                    })}
-                    to={`/series/${previousSeries.titleSlug}`}
-                  />
+                  {previousSeries ? (
+                    <IconButton
+                      className={styles.seriesNavigationButton}
+                      name={icons.ARROW_LEFT}
+                      size={30}
+                      title={translate('SeriesDetailsGoTo', {
+                        title: previousSeries.title,
+                      })}
+                      to={`/series/${previousSeries.titleSlug}`}
+                    />
+                  ) : null}
 
-                  <IconButton
-                    className={styles.seriesNavigationButton}
-                    name={icons.ARROW_RIGHT}
-                    size={30}
-                    title={translate('SeriesDetailsGoTo', {
-                      title: nextSeries.title,
-                    })}
-                    to={`/series/${nextSeries.titleSlug}`}
-                  />
+                  {nextSeries ? (
+                    <IconButton
+                      className={styles.seriesNavigationButton}
+                      name={icons.ARROW_RIGHT}
+                      size={30}
+                      title={translate('SeriesDetailsGoTo', {
+                        title: nextSeries.title,
+                      })}
+                      to={`/series/${nextSeries.titleSlug}`}
+                    />
+                  ) : null}
                 </div>
               </div>
 
@@ -679,9 +681,7 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
                   <div>
                     <Icon name={icons.PROFILE} size={17} />
                     <span className={styles.qualityProfileName}>
-                      <QualityProfileNameConnector
-                        qualityProfileId={qualityProfileId}
-                      />
+                      <QualityProfileName qualityProfileId={qualityProfileId} />
                     </span>
                   </div>
                 </Label>
@@ -779,19 +779,18 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
                     position={tooltipPositions.BOTTOM}
                   />
                 ) : null}
-              </div>
 
-              <div ref={overviewRef} className={styles.overview}>
-                <TextTruncate
-                  line={
-                    Math.floor(
-                      overviewHeight / (defaultFontSize * lineHeight)
-                    ) - 1
-                  }
-                  text={overview}
+                <SeriesProgressLabel
+                  className={styles.seriesProgressLabel}
+                  seriesId={seriesId}
+                  monitored={monitored}
+                  episodeCount={episodeCount}
+                  episodeFileCount={episodeFileCount}
                 />
               </div>
 
+              <div className={styles.overview}>{overview}</div>
+
               <MetadataAttribution />
             </div>
           </div>

frontend/src/Series/Details/SeriesDetailsPage.tsx

@@ -19,7 +19,11 @@ function SeriesDetailsPage() {
   const previousIndex = usePrevious(seriesIndex);
 
   useEffect(() => {
-    if (seriesIndex === -1 && previousIndex !== -1) {
+    if (
+      seriesIndex === -1 &&
+      previousIndex !== -1 &&
+      previousIndex !== undefined
+    ) {
       history.push(`${window.Sonarr.urlBase}/`);
     }
   }, [seriesIndex, previousIndex, history]);

frontend/src/Series/Details/SeriesDetailsSeason.tsx

@@ -562,6 +562,7 @@ function SeriesDetailsSeason({
 
       <SeasonInteractiveSearchModal
         isOpen={isInteractiveSearchModalOpen}
+        episodeCount={totalEpisodeCount}
         seriesId={seriesId}
         seasonNumber={seasonNumber}
         onModalClose={handleInteractiveSearchModalClose}

frontend/src/Series/Details/SeriesProgressLabel.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Label from 'Components/Label';
+import { kinds, sizes } from 'Helpers/Props';
+import createSeriesQueueItemsDetailsSelector, {
+  SeriesQueueDetails,
+} from 'Series/Index/createSeriesQueueDetailsSelector';
+
+function getEpisodeCountKind(
+  monitored: boolean,
+  episodeFileCount: number,
+  episodeCount: number,
+  isDownloading: boolean
+) {
+  if (isDownloading) {
+    return kinds.PURPLE;
+  }
+
+  if (episodeFileCount === episodeCount && episodeCount > 0) {
+    return kinds.SUCCESS;
+  }
+
+  if (!monitored) {
+    return kinds.WARNING;
+  }
+
+  return kinds.DANGER;
+}
+
+interface SeriesProgressLabelProps {
+  className: string;
+  seriesId: number;
+  monitored: boolean;
+  episodeCount: number;
+  episodeFileCount: number;
+}
+
+function SeriesProgressLabel({
+  className,
+  seriesId,
+  monitored,
+  episodeCount,
+  episodeFileCount,
+}: SeriesProgressLabelProps) {
+  const queueDetails: SeriesQueueDetails = useSelector(
+    createSeriesQueueItemsDetailsSelector(seriesId)
+  );
+
+  const newDownloads = queueDetails.count - queueDetails.episodesWithFiles;
+  const text = newDownloads
+    ? `${episodeFileCount} + ${newDownloads} / ${episodeCount}`
+    : `${episodeFileCount} / ${episodeCount}`;
+
+  return (
+    <Label
+      className={className}
+      kind={getEpisodeCountKind(
+        monitored,
+        episodeFileCount,
+        episodeCount,
+        queueDetails.count > 0
+      )}
+      size={sizes.LARGE}
+    >
+      <span>{text}</span>
+    </Label>
+  );
+}
+
+export default SeriesProgressLabel;

frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx

@@ -4,6 +4,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
+import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
 import Button from 'Components/Link/Button';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
@@ -14,7 +15,7 @@ import { setSeriesOverviewOption } from 'Store/Actions/seriesIndexActions';
 import translate from 'Utilities/String/translate';
 import selectOverviewOptions from '../selectOverviewOptions';
 
-const posterSizeOptions = [
+const posterSizeOptions: EnhancedSelectInputValue<string>[] = [
   {
     key: 'small',
     get value() {

frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx

@@ -92,7 +92,7 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
     dispatch(
       executeCommand({
         name: REFRESH_SERIES,
-        seriesId,
+        seriesIds: [seriesId],
       })
     );
   }, [seriesId, dispatch]);

frontend/src/Series/Index/Overview/SeriesIndexOverviews.css

@@ -1,11 +0,0 @@
-.grid {
-  flex: 1 0 auto;
-}
-
-.container {
-  &:hover {
-    .content {
-      background-color: var(--tableRowHoverBackgroundColor);
-    }
-  }
-}

frontend/src/Series/Index/Overview/SeriesIndexOverviews.tsx

@@ -80,17 +80,17 @@ function SeriesIndexOverviews(props: SeriesIndexOverviewsProps) {
   const [size, setSize] = useState({ width: 0, height: 0 });
 
   const posterWidth = useMemo(() => {
-    const maxiumPosterWidth = isSmallScreen ? 152 : 162;
+    const maximumPosterWidth = isSmallScreen ? 152 : 162;
 
     if (posterSize === 'large') {
-      return maxiumPosterWidth;
+      return maximumPosterWidth;
     }
 
     if (posterSize === 'medium') {
-      return Math.floor(maxiumPosterWidth * 0.75);
+      return Math.floor(maximumPosterWidth * 0.75);
     }
 
-    return Math.floor(maxiumPosterWidth * 0.5);
+    return Math.floor(maximumPosterWidth * 0.5);
   }, [posterSize, isSmallScreen]);
 
   const posterHeight = useMemo(() => {

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContent.tsx

@@ -4,6 +4,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
+import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
 import Button from 'Components/Link/Button';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
@@ -14,7 +15,7 @@ import selectPosterOptions from 'Series/Index/Posters/selectPosterOptions';
 import { setSeriesPosterOption } from 'Store/Actions/seriesIndexActions';
 import translate from 'Utilities/String/translate';
 
-const posterSizeOptions = [
+const posterSizeOptions: EnhancedSelectInputValue<string>[] = [
   {
     key: 'small',
     get value() {

frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx

@@ -83,7 +83,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
     dispatch(
       executeCommand({
         name: REFRESH_SERIES,
-        seriesId,
+        seriesIds: [seriesId],
       })
     );
   }, [seriesId, dispatch]);

frontend/src/Series/Index/Select/Edit/EditSeriesModalContent.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
+import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
 import Button from 'Components/Link/Button';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
@@ -31,7 +32,7 @@ interface EditSeriesModalContentProps {
 
 const NO_CHANGE = 'noChange';
 
-const monitoredOptions = [
+const monitoredOptions: EnhancedSelectInputValue<string>[] = [
   {
     key: NO_CHANGE,
     get value() {
@@ -53,7 +54,7 @@ const monitoredOptions = [
   },
 ];
 
-const seasonFolderOptions = [
+const seasonFolderOptions: EnhancedSelectInputValue<string>[] = [
   {
     key: NO_CHANGE,
     get value() {

frontend/src/Series/Index/Select/SeasonPass/ChangeMonitoringModalContent.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -11,7 +12,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
-import { icons, inputTypes, tooltipPositions } from 'Helpers/Props';
+import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './ChangeMonitoringModalContent.css';
 
@@ -46,9 +47,12 @@ function ChangeMonitoringModalContent(
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>{translate('MonitorSeries')}</ModalHeader>
+      <ModalHeader>{translate('MonitorEpisodes')}</ModalHeader>
 
       <ModalBody>
+        <Alert kind={kinds.INFO}>
+          <div>{translate('MonitorEpisodesModalInfo')}</div>
+        </Alert>
         <Form {...otherProps}>
           <FormGroup>
             <FormLabel>

frontend/src/Series/Index/Select/Tags/TagsModalContent.tsx

@@ -6,6 +6,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
+import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
 import Label from 'Components/Label';
 import Button from 'Components/Link/Button';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -66,7 +67,7 @@ function TagsModalContent(props: TagsModalContentProps) {
     onApplyTagsPress(tags, applyTags);
   }, [tags, applyTags, onApplyTagsPress]);
 
-  const applyTagsOptions = [
+  const applyTagsOptions: EnhancedSelectInputValue<string>[] = [
     {
       key: 'add',
       value: translate('Add'),

frontend/src/Series/Index/Table/SeriesIndexRow.tsx

@@ -97,7 +97,7 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
     dispatch(
       executeCommand({
         name: REFRESH_SERIES,
-        seriesId,
+        seriesIds: [seriesId],
       })
     );
   }, [seriesId, dispatch]);

frontend/src/Series/Index/createSeriesIndexItemSelector.ts

@@ -15,7 +15,8 @@ function createSeriesIndexItemSelector(seriesId: number) {
     (series: Series, qualityProfile, executingCommands: Command[]) => {
       const isRefreshingSeries = executingCommands.some((command) => {
         return (
-          command.name === REFRESH_SERIES && command.body.seriesId === seriesId
+          command.name === REFRESH_SERIES &&
+          command.body.seriesIds?.includes(series.id)
         );
       });
 

frontend/src/Series/MonitoringOptions/MonitoringOptionsModalContent.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
 import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -15,7 +16,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
 import usePrevious from 'Helpers/Hooks/usePrevious';
-import { icons, tooltipPositions } from 'Helpers/Props';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import { updateSeriesMonitor } from 'Store/Actions/seriesActions';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
@@ -66,9 +67,12 @@ function MonitoringOptionsModalContent({
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>{translate('MonitorSeries')}</ModalHeader>
+      <ModalHeader>{translate('MonitorEpisodes')}</ModalHeader>
 
       <ModalBody>
+        <Alert kind={kinds.INFO}>
+          <div>{translate('MonitorEpisodesModalInfo')}</div>
+        </Alert>
         <Form>
           <FormGroup>
             <FormLabel>

frontend/src/Series/Search/SeasonInteractiveSearchModal.tsx

@@ -6,19 +6,19 @@ import {
   cancelFetchReleases,
   clearReleases,
 } from 'Store/Actions/releaseActions';
-import SeasonInteractiveSearchModalContent from './SeasonInteractiveSearchModalContent';
+import SeasonInteractiveSearchModalContent, {
+  SeasonInteractiveSearchModalContentProps,
+} from './SeasonInteractiveSearchModalContent';
 
-interface SeasonInteractiveSearchModalProps {
+interface SeasonInteractiveSearchModalProps
+  extends SeasonInteractiveSearchModalContentProps {
   isOpen: boolean;
-  seriesId: number;
-  seasonNumber: number;
-  onModalClose(): void;
 }
 
 function SeasonInteractiveSearchModal(
   props: SeasonInteractiveSearchModalProps
 ) {
-  const { isOpen, seriesId, seasonNumber, onModalClose } = props;
+  const { isOpen, episodeCount, seriesId, seasonNumber, onModalClose } = props;
 
   const dispatch = useDispatch();
 
@@ -44,6 +44,7 @@ function SeasonInteractiveSearchModal(
       onModalClose={handleModalClose}
     >
       <SeasonInteractiveSearchModalContent
+        episodeCount={episodeCount}
         seriesId={seriesId}
         seasonNumber={seasonNumber}
         onModalClose={handleModalClose}