Don't publish v5 builds yet

Closes #7594

.github/actions/build/action.yml

@@ -21,7 +21,7 @@ runs:
   using: "composite"
   steps:
     - name: Setup .NET
-      uses: actions/setup-dotnet@v5
+      uses: actions/setup-dotnet@v4
 
     - name: Setup Environment Variables
       id: variables
@@ -170,7 +170,7 @@ runs:
         framework="${{ inputs.framework }}"
         runtime="${{ inputs.runtime }}"
 
-        cp scripts/test.sh "_tests/$framework/$runtime/publish"
+        cp test.sh "_tests/$framework/$runtime/publish"
 
         rm -f _tests/$framework/$runtime/*.log.config
 

.github/actions/test/action.yml

@@ -4,8 +4,6 @@ description: Runs unit/integration tests
 inputs:
   use_postgres:
     description: 'Whether postgres should be used for the database'
-  postgres-version:
-    description: 'Which postgres version should be used for the database'
   os:
     description: 'OS that the tests are running on'
     required: true
@@ -29,18 +27,16 @@ runs:
   using: 'composite'
   steps:
     - name: Setup .NET
-      uses: actions/setup-dotnet@v5
+      uses: actions/setup-dotnet@v4
 
     - name: Setup Postgres
       if: ${{ inputs.use_postgres }}
-      uses: ikalnytskyi/action-setup-postgres@v7
-      with:
-        postgres-version: ${{ inputs.postgres-version }}
+      uses: ikalnytskyi/action-setup-postgres@v4
 
     - name: Setup Test Variables
       shell: bash
       run: |
-        echo "RESULTS_NAME=${{ inputs.integration_tests && 'integation-' || 'unit-' }}${{ inputs.artifact }}${{ inputs.use_postgres && '-postgres' }}${{ inputs.use_postgres && inputs.postgres-version && inputs.postgres-version }}" >> "$GITHUB_ENV"
+        echo "RESULTS_NAME=${{ inputs.integration_tests && 'integation-' || 'unit-' }}${{ inputs.artifact }}${{ inputs.use_postgres && '-postgres' }}" >> "$GITHUB_ENV"
 
     - name: Setup Postgres Environment Variables
       if: ${{ inputs.use_postgres }}
@@ -52,14 +48,14 @@ runs:
         echo "Sonarr__Postgres__Password=postgres" >> "$GITHUB_ENV"
 
     - name: Download Artifact
-      uses: actions/download-artifact@v5
+      uses: actions/download-artifact@v4
       with:
         name: ${{ inputs.artifact }}
         path: _tests
 
     - name: Download Binary Artifact
       if: ${{ inputs.integration_tests }}
-      uses: actions/download-artifact@v5
+      uses: actions/download-artifact@v4
       with:
         name: ${{ inputs.binary_artifact }}
         path: _output

.github/workflows/api_docs.yml

@@ -33,7 +33,7 @@ jobs:
         id: setup-dotnet
 
       - name: Create openapi.json
-        run: ./scripts/docs.sh Linux x64
+        run: ./docs.sh Linux x64
 
       - name: Commit API Docs Change
         continue-on-error: true
@@ -50,16 +50,3 @@ 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"

.github/workflows/build_v5.yml

@@ -82,7 +82,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Build
         uses: ./.github/actions/build
@@ -97,7 +97,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Volta
         uses: volta-cli/action@v4
@@ -139,7 +139,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test
@@ -152,13 +152,9 @@ jobs:
   unit_test_postgres:
     needs: backend
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        postgres-version: [16, 17]
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test
@@ -168,7 +164,6 @@ jobs:
           pattern: Sonarr.*.Test.dll
           filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
           use_postgres: true
-          postgres-version: ${{ matrix.postgres-version }}
 
   integration_test:
     needs: [prepare, backend]
@@ -195,7 +190,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test

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-2025
+- Copyright 2010-2024

distribution/debian/install.sh

@@ -6,8 +6,6 @@
 ### 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
-### Version V1.0.5 2025-07-08 - bparkin1283 - use systemctl instead of service for stopping app
 
 ### Boilerplate Warning
 #THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
@@ -18,8 +16,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.4"
-scriptdate="2025-04-05"
+scriptversion="1.0.3"
+scriptdate="2024-01-06"
 
 set -euo pipefail
 
@@ -51,106 +49,18 @@ if [ "$installdir" == "$(dirname -- "$( readlink -f -- "$0"; )")" ] || [ "$bindi
     exit
 fi
 
-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
+# Prompt User
+read -r -p "What user should ${app^} run as? (Default: $app): " app_uid < /dev/tty
 app_uid=$(echo "$app_uid" | tr -d ' ')
 app_uid=${app_uid:-$app}
-
-# 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
+# Prompt Group
+read -r -p "What group should ${app^} run as? (Default: media): " app_guid < /dev/tty
 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"
-if ! $arg_unattended; then
-    read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
-fi
+read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
 
 # Create User / Group as needed
 if [ "$app_guid" != "$app_uid" ]; then
@@ -168,10 +78,11 @@ if ! getent group "$app_guid" | grep -qw "$app_uid"; then
     echo "Added User [$app_uid] to Group [$app_guid]"
 fi
 
-# Stop and disable the App if running
-if [ $(systemctl is-active "$app") = "active" ]; then
-    systemctl disable --now -q "$app"
-    echo "Stopped and disabled existing $app"
+# Stop the App if running
+if service --status-all | grep -Fq "$app"; then
+    systemctl stop "$app"
+    systemctl disable "$app".service
+    echo "Stopped existing $app"
 fi
 
 # Create Appdata Directory

docker/tests/mono/startup.sh

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

docs.sh

@@ -23,7 +23,7 @@ rm -rf $outputFolder
 rm -rf $testPackageFolder
 
 slnFile=src/Sonarr.sln
-outputFile=src/Sonarr.Api.V5/openapi.json
+
 platform=Posix
 
 if [ "$PLATFORM" = "Windows" ]; then
@@ -38,10 +38,7 @@ dotnet clean $slnFile -c Release
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 8.0.0 Swashbuckle.AspNetCore.Cli
-
-# Remove the openapi.json file so we can check if it was created
-rm $outputFile
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
 dotnet tool run swagger tofile --output ./src/Sonarr.Api.V5/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v5 &
 
@@ -49,9 +46,4 @@ sleep 45
 
 kill %1
 
-if [ ! -f $outputFile ]; then
-  echo "$outputFile not found, check logs for errors"
-  exit 1
-fi
-
 exit 0

frontend/build/webpack.config.js

@@ -65,7 +65,7 @@ module.exports = (env) => {
 
     output: {
       path: distFolder,
-      publicPath: 'auto',
+      publicPath: '/',
       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.42'
+                      corejs: '3.39'
                     }
                   ]
                 ]

frontend/src/Activity/Blocklist/Blocklist.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { setQueueOptions } from 'Activity/Queue/queueOptionsStore';
 import { SelectProvider } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -16,8 +16,20 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
+import usePaging from 'Components/Table/usePaging';
+import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
+import usePrevious from 'Helpers/Hooks/usePrevious';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { align, icons, kinds } from 'Helpers/Props';
+import {
+  clearBlocklist,
+  fetchBlocklist,
+  gotoBlocklistPage,
+  removeBlocklistItems,
+  setBlocklistFilter,
+  setBlocklistSort,
+  setBlocklistTableOption,
+} from 'Store/Actions/blocklistActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
@@ -31,35 +43,27 @@ import {
 import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import BlocklistFilterModal from './BlocklistFilterModal';
-import {
-  setBlocklistOption,
-  useBlocklistOptions,
-} from './blocklistOptionsStore';
 import BlocklistRow from './BlocklistRow';
-import useBlocklist, {
-  useFilters,
-  useRemoveBlocklistItems,
-} from './useBlocklist';
 
 function Blocklist() {
+  const requestCurrentPage = useCurrentPage();
+
   const {
-    records,
+    isFetching,
+    isPopulated,
+    error,
+    items,
+    columns,
+    selectedFilterKey,
+    filters,
+    sortKey,
+    sortDirection,
+    page,
+    pageSize,
     totalPages,
     totalRecords,
-    isFetching,
-    isFetched,
-    isLoading,
-    error,
-    page,
-    goToPage,
-    refetch,
-  } = useBlocklist();
-
-  const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
-    useBlocklistOptions();
-
-  const filters = useFilters();
-  const { isRemoving, removeBlocklistItems } = useRemoveBlocklistItems();
+    isRemoving,
+  } = useSelector((state: AppState) => state.blocklist);
 
   const customFilters = useSelector(createCustomFiltersSelector('blocklist'));
   const isClearingBlocklistExecuting = useSelector(
@@ -78,27 +82,28 @@ function Blocklist() {
     return getSelectedIds(selectedState);
   }, [selectedState]);
 
+  const wasClearingBlocklistExecuting = usePrevious(
+    isClearingBlocklistExecuting
+  );
+
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      setSelectState({
-        type: value ? 'selectAll' : 'unselectAll',
-        items: records,
-      });
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
     },
-    [records, setSelectState]
+    [items, setSelectState]
   );
 
   const handleSelectedChange = useCallback(
     ({ id, value, shiftKey = false }: SelectStateInputProps) => {
       setSelectState({
         type: 'toggleSelected',
-        items: records,
+        items,
         id,
         isSelected: value,
         shiftKey,
       });
     },
-    [records, setSelectState]
+    [items, setSelectState]
   );
 
   const handleRemoveSelectedPress = useCallback(() => {
@@ -106,9 +111,9 @@ function Blocklist() {
   }, [setIsConfirmRemoveModalOpen]);
 
   const handleRemoveSelectedConfirmed = useCallback(() => {
-    removeBlocklistItems({ ids: selectedIds });
+    dispatch(removeBlocklistItems({ ids: selectedIds }));
     setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, setIsConfirmRemoveModalOpen, removeBlocklistItems]);
+  }, [selectedIds, setIsConfirmRemoveModalOpen, dispatch]);
 
   const handleConfirmRemoveModalClose = useCallback(() => {
     setIsConfirmRemoveModalOpen(false);
@@ -119,46 +124,66 @@ function Blocklist() {
   }, [setIsConfirmClearModalOpen]);
 
   const handleClearBlocklistConfirmed = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: commandNames.CLEAR_BLOCKLIST,
-        commandFinished: () => {
-          goToPage(1);
-        },
-      })
-    );
+    dispatch(executeCommand({ name: commandNames.CLEAR_BLOCKLIST }));
     setIsConfirmClearModalOpen(false);
-  }, [setIsConfirmClearModalOpen, goToPage, dispatch]);
+  }, [setIsConfirmClearModalOpen, dispatch]);
 
   const handleConfirmClearModalClose = useCallback(() => {
     setIsConfirmClearModalOpen(false);
   }, [setIsConfirmClearModalOpen]);
 
+  const {
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  } = usePaging({
+    page,
+    totalPages,
+    gotoPage: gotoBlocklistPage,
+  });
+
   const handleFilterSelect = useCallback(
     (selectedFilterKey: string | number) => {
-      setBlocklistOption('selectedFilterKey', selectedFilterKey);
+      dispatch(setBlocklistFilter({ selectedFilterKey }));
     },
-    []
+    [dispatch]
   );
 
-  const handleSortPress = useCallback((sortKey: string) => {
-    setBlocklistOption('sortKey', sortKey);
-  }, []);
+  const handleSortPress = useCallback(
+    (sortKey: string) => {
+      dispatch(setBlocklistSort({ sortKey }));
+    },
+    [dispatch]
+  );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
-      setQueueOptions(payload);
+      dispatch(setBlocklistTableOption(payload));
 
       if (payload.pageSize) {
-        goToPage(1);
+        dispatch(gotoBlocklistPage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
+  useEffect(() => {
+    if (requestCurrentPage) {
+      dispatch(fetchBlocklist());
+    } else {
+      dispatch(gotoBlocklistPage({ page: 1 }));
+    }
+
+    return () => {
+      dispatch(clearBlocklist());
+    };
+  }, [requestCurrentPage, dispatch]);
+
   useEffect(() => {
     const repopulate = () => {
-      refetch();
+      dispatch(fetchBlocklist());
     };
 
     registerPagePopulator(repopulate);
@@ -166,10 +191,16 @@ function Blocklist() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [refetch]);
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (wasClearingBlocklistExecuting && !isClearingBlocklistExecuting) {
+      dispatch(gotoBlocklistPage({ page: 1 }));
+    }
+  }, [isClearingBlocklistExecuting, wasClearingBlocklistExecuting, dispatch]);
 
   return (
-    <SelectProvider items={records}>
+    <SelectProvider items={items}>
       <PageContent title={translate('Blocklist')}>
         <PageToolbar>
           <PageToolbarSection>
@@ -184,7 +215,7 @@ function Blocklist() {
             <PageToolbarButton
               label={translate('Clear')}
               iconName={icons.CLEAR}
-              isDisabled={!records.length}
+              isDisabled={!items.length}
               isSpinning={isClearingBlocklistExecuting}
               onPress={handleClearBlocklistPress}
             />
@@ -214,13 +245,13 @@ function Blocklist() {
         </PageToolbar>
 
         <PageContentBody>
-          {isLoading && !isFetched ? <LoadingIndicator /> : null}
+          {isFetching && !isPopulated ? <LoadingIndicator /> : null}
 
-          {!isLoading && !!error ? (
+          {!isFetching && !!error ? (
             <Alert kind={kinds.DANGER}>{translate('BlocklistLoadError')}</Alert>
           ) : null}
 
-          {isFetched && !error && !records.length ? (
+          {isPopulated && !error && !items.length ? (
             <Alert kind={kinds.INFO}>
               {selectedFilterKey === 'all'
                 ? translate('NoBlocklistItems')
@@ -228,7 +259,7 @@ function Blocklist() {
             </Alert>
           ) : null}
 
-          {isFetched && !error && !!records.length ? (
+          {isPopulated && !error && !!items.length ? (
             <div>
               <Table
                 selectAll={true}
@@ -243,7 +274,7 @@ function Blocklist() {
                 onSortPress={handleSortPress}
               >
                 <TableBody>
-                  {records.map((item) => {
+                  {items.map((item) => {
                     return (
                       <BlocklistRow
                         key={item.id}
@@ -261,7 +292,11 @@ function Blocklist() {
                 totalPages={totalPages}
                 totalRecords={totalRecords}
                 isFetching={isFetching}
-                onPageSelect={goToPage}
+                onFirstPagePress={handleFirstPagePress}
+                onPreviousPagePress={handlePreviousPagePress}
+                onNextPagePress={handleNextPagePress}
+                onLastPagePress={handleLastPagePress}
+                onPageSelect={handlePageSelect}
               />
             </div>
           ) : null}

frontend/src/Activity/Blocklist/BlocklistDetailsModal.tsx

@@ -16,19 +16,13 @@ interface BlocklistDetailsModalProps {
   protocol: DownloadProtocol;
   indexer?: string;
   message?: string;
-  source?: string;
   onModalClose: () => void;
 }
 
-function BlocklistDetailsModal({
-  isOpen,
-  sourceTitle,
-  protocol,
-  indexer,
-  message,
-  source,
-  onModalClose,
-}: BlocklistDetailsModalProps) {
+function BlocklistDetailsModal(props: BlocklistDetailsModalProps) {
+  const { isOpen, sourceTitle, protocol, indexer, message, onModalClose } =
+    props;
+
   return (
     <Modal isOpen={isOpen} onModalClose={onModalClose}>
       <ModalContent onModalClose={onModalClose}>
@@ -56,9 +50,6 @@ function BlocklistDetailsModal({
                 data={message}
               />
             ) : null}
-            {source ? (
-              <DescriptionListItem title={translate('Source')} data={source} />
-            ) : null}
           </DescriptionList>
         </ModalBody>
 

frontend/src/Activity/Blocklist/BlocklistFilterModal.tsx

@@ -1,26 +1,50 @@
 import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
-import { setBlocklistOption } from './blocklistOptionsStore';
-import useBlocklist, { FILTER_BUILDER } from './useBlocklist';
+import { setBlocklistFilter } from 'Store/Actions/blocklistActions';
+
+function createBlocklistSelector() {
+  return createSelector(
+    (state: AppState) => state.blocklist.items,
+    (blocklistItems) => {
+      return blocklistItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.blocklist.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
 
 type BlocklistFilterModalProps = FilterModalProps<History>;
 
 export default function BlocklistFilterModal(props: BlocklistFilterModalProps) {
-  const { records } = useBlocklist();
+  const sectionItems = useSelector(createBlocklistSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'blocklist';
+
+  const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
-      setBlocklistOption('selectedFilterKey', selectedFilterKey);
+    (payload: unknown) => {
+      dispatch(setBlocklistFilter(payload));
     },
-    []
+    [dispatch]
   );
 
   return (
     <FilterModal
       {...props}
-      sectionItems={records}
-      filterBuilderProps={FILTER_BUILDER}
-      customFilterType="blocklist"
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
       dispatchSetFilter={dispatchSetFilter}
     />
   );

frontend/src/Activity/Blocklist/BlocklistRow.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -11,11 +12,11 @@ import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds } from 'Helpers/Props';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
 import useSeries from 'Series/useSeries';
+import { removeBlocklistItem } from 'Store/Actions/blocklistActions';
 import Blocklist from 'typings/Blocklist';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
 import BlocklistDetailsModal from './BlocklistDetailsModal';
-import { useRemoveBlocklistItem } from './useBlocklist';
 import styles from './BlocklistRow.css';
 
 interface BlocklistRowProps extends Blocklist {
@@ -24,24 +25,25 @@ interface BlocklistRowProps extends Blocklist {
   onSelectedChange: (options: SelectStateInputProps) => void;
 }
 
-function BlocklistRow({
-  id,
-  seriesId,
-  sourceTitle,
-  languages,
-  quality,
-  customFormats,
-  date,
-  protocol,
-  indexer,
-  message,
-  source,
-  isSelected,
-  columns,
-  onSelectedChange,
-}: BlocklistRowProps) {
+function BlocklistRow(props: BlocklistRowProps) {
+  const {
+    id,
+    seriesId,
+    sourceTitle,
+    languages,
+    quality,
+    customFormats,
+    date,
+    protocol,
+    indexer,
+    message,
+    isSelected,
+    columns,
+    onSelectedChange,
+  } = props;
+
   const series = useSeries(seriesId);
-  const { isRemoving, removeBlocklistItem } = useRemoveBlocklistItem(id);
+  const dispatch = useDispatch();
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
 
   const handleDetailsPress = useCallback(() => {
@@ -53,8 +55,8 @@ function BlocklistRow({
   }, [setIsDetailsModalOpen]);
 
   const handleRemovePress = useCallback(() => {
-    removeBlocklistItem();
-  }, [removeBlocklistItem]);
+    dispatch(removeBlocklistItem({ id }));
+  }, [id, dispatch]);
 
   if (!series) {
     return null;
@@ -137,7 +139,6 @@ function BlocklistRow({
                 title={translate('RemoveFromBlocklist')}
                 name={icons.REMOVE}
                 kind={kinds.DANGER}
-                isSpinning={isRemoving}
                 onPress={handleRemovePress}
               />
             </TableRowCell>
@@ -153,7 +154,6 @@ function BlocklistRow({
         protocol={protocol}
         indexer={indexer}
         message={message}
-        source={source}
         onModalClose={handleDetailsModalClose}
       />
     </TableRow>

frontend/src/Activity/Blocklist/blocklistOptionsStore.ts

@@ -1,71 +0,0 @@
-import {
-  createOptionsStore,
-  PageableOptions,
-} from 'Helpers/Hooks/useOptionsStore';
-import translate from 'Utilities/String/translate';
-
-export type BlocklistOptions = PageableOptions;
-
-const { useOptions, useOption, setOptions, setOption } =
-  createOptionsStore<BlocklistOptions>('blocklist_options', () => {
-    return {
-      pageSize: 20,
-      selectedFilterKey: 'all',
-      sortKey: 'time',
-      sortDirection: 'descending',
-      columns: [
-        {
-          name: 'series.sortTitle',
-          label: () => translate('SeriesTitle'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'sourceTitle',
-          label: () => translate('SourceTitle'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'languages',
-          label: () => translate('Languages'),
-          isVisible: false,
-        },
-        {
-          name: 'quality',
-          label: () => translate('Quality'),
-          isVisible: true,
-        },
-        {
-          name: 'customFormats',
-          label: () => translate('Formats'),
-          isSortable: false,
-          isVisible: true,
-        },
-        {
-          name: 'date',
-          label: () => translate('Date'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'indexer',
-          label: () => translate('Indexer'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'actions',
-          label: '',
-          columnLabel: () => translate('Actions'),
-          isVisible: true,
-          isModifiable: false,
-        },
-      ],
-    };
-  });
-
-export const useBlocklistOptions = useOptions;
-export const setBlocklistOptions = setOptions;
-export const useBlocklistOption = useOption;
-export const setBlocklistOption = setOption;

frontend/src/Activity/Blocklist/useBlocklist.ts

@@ -1,116 +0,0 @@
-import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import usePage from 'Helpers/Hooks/usePage';
-import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
-import { filterBuilderValueTypes } from 'Helpers/Props';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import Blocklist from 'typings/Blocklist';
-import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
-import translate from 'Utilities/String/translate';
-import { useBlocklistOptions } from './blocklistOptionsStore';
-
-interface BulkBlocklistData {
-  ids: number[];
-}
-
-export const FILTERS: Filter[] = [
-  {
-    key: 'all',
-    label: () => translate('All'),
-    filters: [],
-  },
-];
-
-export const FILTER_BUILDER: FilterBuilderProp<Blocklist>[] = [
-  {
-    name: 'seriesIds',
-    label: () => translate('Series'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.SERIES,
-  },
-  {
-    name: 'protocols',
-    label: () => translate('Protocol'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.PROTOCOL,
-  },
-];
-
-const useBlocklist = () => {
-  const { page, goToPage } = usePage('blocklist');
-  const { pageSize, selectedFilterKey, sortKey, sortDirection } =
-    useBlocklistOptions();
-  const customFilters = useSelector(
-    createCustomFiltersSelector('blocklist')
-  ) as CustomFilter[];
-
-  const filters = useMemo(() => {
-    return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
-  }, [selectedFilterKey, customFilters]);
-
-  const { refetch, ...query } = usePagedApiQuery<Blocklist>({
-    path: '/blocklist',
-    page,
-    pageSize,
-    filters,
-    sortKey,
-    sortDirection,
-    queryOptions: {
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  return {
-    ...query,
-    goToPage,
-    page,
-    refetch,
-  };
-};
-
-export default useBlocklist;
-
-export const useFilters = () => {
-  return FILTERS;
-};
-
-export const useRemoveBlocklistItem = (id: number) => {
-  const queryClient = useQueryClient();
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/blocklist/${id}`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/blocklist'] });
-      },
-    },
-  });
-
-  return {
-    removeBlocklistItem: mutate,
-    isRemoving: isPending,
-  };
-};
-
-export const useRemoveBlocklistItems = () => {
-  const queryClient = useQueryClient();
-
-  const { mutate, isPending } = useApiMutation<unknown, BulkBlocklistData>({
-    path: `/blocklist/bulk`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/blocklist'] });
-      },
-    },
-  });
-
-  return {
-    removeBlocklistItems: mutate,
-    isRemoving: isPending,
-  };
-};

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

@@ -174,7 +174,7 @@ function HistoryDetails(props: HistoryDetailsProps) {
   }
 
   if (eventType === 'downloadFailed') {
-    const { indexer, message, source } = data as DownloadFailedHistory;
+    const { message } = data as DownloadFailedHistory;
 
     return (
       <DescriptionList>
@@ -188,17 +188,9 @@ 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}
-
-        {source ? (
-          <DescriptionListItem title={translate('Source')} data={source} />
-        ) : null}
       </DescriptionList>
     );
   }

frontend/src/Activity/Queue/Details/QueueDetailsProvider.tsx

@@ -1,113 +0,0 @@
-import React, { createContext, ReactNode, useContext, useMemo } from 'react';
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import Queue from 'typings/Queue';
-
-interface EpisodeDetails {
-  episodeIds: number[];
-}
-
-interface SeriesDetails {
-  seriesId: number;
-}
-
-interface AllDetails {
-  all: boolean;
-}
-
-type QueueDetailsFilter = AllDetails | EpisodeDetails | SeriesDetails;
-
-interface QueueDetailsProps {
-  children: ReactNode;
-}
-
-const QueueDetailsContext = createContext<Queue[] | undefined>(undefined);
-
-export default function QueueDetailsProvider({
-  children,
-  ...filter
-}: QueueDetailsProps & QueueDetailsFilter) {
-  const { data } = useApiQuery<Queue[]>({
-    path: '/queue/details',
-    queryParams: { ...filter },
-    queryOptions: {
-      enabled: Object.keys(filter).length > 0,
-    },
-  });
-
-  return (
-    <QueueDetailsContext.Provider value={data}>
-      {children}
-    </QueueDetailsContext.Provider>
-  );
-}
-
-export function useQueueItemForEpisode(episodeId: number) {
-  const queue = useContext(QueueDetailsContext);
-
-  return useMemo(() => {
-    return queue?.find((item) => item.episodeIds.includes(episodeId));
-  }, [episodeId, queue]);
-}
-
-export function useIsDownloadingEpisodes(episodeIds: number[]) {
-  const queue = useContext(QueueDetailsContext);
-
-  return useMemo(() => {
-    if (!queue) {
-      return false;
-    }
-
-    return queue.some((item) =>
-      item.episodeIds?.some((e) => episodeIds.includes(e))
-    );
-  }, [episodeIds, queue]);
-}
-
-export interface SeriesQueueDetails {
-  count: number;
-  episodesWithFiles: number;
-}
-
-export function useQueueDetailsForSeries(
-  seriesId: number,
-  seasonNumber?: number
-) {
-  const queue = useContext(QueueDetailsContext);
-
-  return useMemo<SeriesQueueDetails>(() => {
-    if (!queue) {
-      return { count: 0, episodesWithFiles: 0 };
-    }
-
-    return queue.reduce<SeriesQueueDetails>(
-      (acc: SeriesQueueDetails, item) => {
-        if (
-          item.trackedDownloadState === 'imported' ||
-          item.seriesId !== seriesId
-        ) {
-          return acc;
-        }
-
-        if (seasonNumber != null && item.seasonNumber !== seasonNumber) {
-          return acc;
-        }
-
-        acc.count++;
-
-        if (item.episodeHasFile) {
-          acc.episodesWithFiles++;
-        }
-
-        return acc;
-      },
-      {
-        count: 0,
-        episodesWithFiles: 0,
-      }
-    );
-  }, [seriesId, seasonNumber, queue]);
-}
-
-export const useQueueDetails = () => {
-  return useContext(QueueDetailsContext) ?? [];
-};

frontend/src/Activity/Queue/EpisodeCellContent.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import Episode from 'Episode/Episode';
-import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
-import Series from 'Series/Series';
-import translate from 'Utilities/String/translate';
-
-interface EpisodeCellContentProps {
-  episodes: Episode[];
-  isFullSeason: boolean;
-  seasonNumber?: number;
-  series?: Series;
-}
-
-export default function EpisodeCellContent({
-  episodes,
-  isFullSeason,
-  seasonNumber,
-  series,
-}: EpisodeCellContentProps) {
-  if (episodes.length === 0) {
-    return '-';
-  }
-
-  if (isFullSeason && seasonNumber != null) {
-    return translate('SeasonNumberToken', { seasonNumber });
-  }
-
-  if (episodes.length === 1) {
-    const episode = episodes[0];
-
-    return (
-      <SeasonEpisodeNumber
-        seasonNumber={episode.seasonNumber}
-        episodeNumber={episode.episodeNumber}
-        absoluteEpisodeNumber={episode.absoluteEpisodeNumber}
-        seriesType={series?.seriesType}
-        alternateTitles={series?.alternateTitles}
-        sceneSeasonNumber={episode.sceneSeasonNumber}
-        sceneEpisodeNumber={episode.sceneEpisodeNumber}
-        sceneAbsoluteEpisodeNumber={episode.sceneAbsoluteEpisodeNumber}
-        unverifiedSceneNumbering={episode.unverifiedSceneNumbering}
-      />
-    );
-  }
-
-  const firstEpisode = episodes[0];
-  const lastEpisode = episodes[episodes.length - 1];
-
-  return (
-    <>
-      <SeasonEpisodeNumber
-        seasonNumber={firstEpisode.seasonNumber}
-        episodeNumber={firstEpisode.episodeNumber}
-        absoluteEpisodeNumber={firstEpisode.absoluteEpisodeNumber}
-        seriesType={series?.seriesType}
-        alternateTitles={series?.alternateTitles}
-        sceneSeasonNumber={firstEpisode.sceneSeasonNumber}
-        sceneEpisodeNumber={firstEpisode.sceneEpisodeNumber}
-        sceneAbsoluteEpisodeNumber={firstEpisode.sceneAbsoluteEpisodeNumber}
-        unverifiedSceneNumbering={firstEpisode.unverifiedSceneNumbering}
-      />
-      {' - '}
-      <SeasonEpisodeNumber
-        seasonNumber={lastEpisode.seasonNumber}
-        episodeNumber={lastEpisode.episodeNumber}
-        absoluteEpisodeNumber={lastEpisode.absoluteEpisodeNumber}
-        seriesType={series?.seriesType}
-        alternateTitles={series?.alternateTitles}
-        sceneSeasonNumber={lastEpisode.sceneSeasonNumber}
-        sceneEpisodeNumber={lastEpisode.sceneEpisodeNumber}
-        sceneAbsoluteEpisodeNumber={lastEpisode.sceneAbsoluteEpisodeNumber}
-        unverifiedSceneNumbering={lastEpisode.unverifiedSceneNumbering}
-      />
-    </>
-  );
-}

frontend/src/Activity/Queue/EpisodeTitleCellContent.css

@@ -1,13 +0,0 @@
-.multiple {
-  cursor: default;
-}
-
-.row {
-  display: flex;
-}
-
-.episodeNumber {
-  margin-right: 8px;
-  font-weight: bold;
-  cursor: default;
-}

frontend/src/Activity/Queue/EpisodeTitleCellContent.css.d.ts

@@ -1,9 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'episodeNumber': string;
-  'multiple': string;
-  'row': string;
-}
-export const cssExports: CssExports;
-export default cssExports;

frontend/src/Activity/Queue/EpisodeTitleCellContent.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import Popover from 'Components/Tooltip/Popover';
-import Episode from 'Episode/Episode';
-import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
-import Series from 'Series/Series';
-import translate from 'Utilities/String/translate';
-import styles from './EpisodeTitleCellContent.css';
-
-interface EpisodeTitleCellContentProps {
-  episodes: Episode[];
-  series?: Series;
-}
-
-export default function EpisodeTitleCellContent({
-  episodes,
-  series,
-}: EpisodeTitleCellContentProps) {
-  if (episodes.length === 0 || !series) {
-    return '-';
-  }
-
-  if (episodes.length === 1) {
-    const episode = episodes[0];
-
-    return (
-      <EpisodeTitleLink
-        episodeId={episode.id}
-        seriesId={series.id}
-        episodeTitle={episode.title}
-        episodeEntity="episodes"
-        showOpenSeriesButton={true}
-      />
-    );
-  }
-
-  return (
-    <Popover
-      anchor={
-        <span className={styles.multiple}>{translate('MultipleEpisodes')}</span>
-      }
-      title={translate('EpisodeTitles')}
-      body={
-        <>
-          {episodes.map((episode) => {
-            return (
-              <div key={episode.id} className={styles.row}>
-                <div className={styles.episodeNumber}>
-                  {episode.episodeNumber}
-                </div>
-
-                <EpisodeTitleLink
-                  episodeId={episode.id}
-                  seriesId={series.id}
-                  episodeTitle={episode.title}
-                  episodeEntity="episodes"
-                  showOpenSeriesButton={true}
-                />
-              </div>
-            );
-          })}
-        </>
-      }
-      position="right"
-    />
-  );
-}

frontend/src/Activity/Queue/Queue.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -21,15 +22,28 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
+import usePaging from 'Components/Table/usePaging';
 import createEpisodesFetchingSelector from 'Episode/createEpisodesFetchingSelector';
+import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { align, icons, kinds } from 'Helpers/Props';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
+import {
+  clearQueue,
+  fetchQueue,
+  gotoQueuePage,
+  grabQueueItems,
+  removeQueueItems,
+  setQueueFilter,
+  setQueueSort,
+  setQueueTableOption,
+} from 'Store/Actions/queueActions';
 import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { CheckInputChanged } from 'typings/inputs';
 import { SelectStateInputProps } from 'typings/props';
+import QueueItem from 'typings/Queue';
 import { TableOptionsChangePayload } from 'typings/Table';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import {
@@ -40,45 +54,33 @@ import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import QueueFilterModal from './QueueFilterModal';
 import QueueOptions from './QueueOptions';
-import {
-  setQueueOption,
-  setQueueOptions,
-  useQueueOptions,
-} from './queueOptionsStore';
 import QueueRow from './QueueRow';
-import RemoveQueueItemModal from './RemoveQueueItemModal';
-import useQueueStatus from './Status/useQueueStatus';
-import useQueue, {
-  useFilters,
-  useGrabQueueItems,
-  useRemoveQueueItems,
-} from './useQueue';
+import RemoveQueueItemModal, { RemovePressProps } from './RemoveQueueItemModal';
+import createQueueStatusSelector from './Status/createQueueStatusSelector';
 
 function Queue() {
+  const requestCurrentPage = useCurrentPage();
   const dispatch = useDispatch();
 
   const {
-    records,
+    isFetching,
+    isPopulated,
+    error,
+    items,
+    columns,
+    selectedFilterKey,
+    filters,
+    sortKey,
+    sortDirection,
+    page,
+    pageSize,
     totalPages,
     totalRecords,
-    error,
-    isFetching,
-    isFetched,
-    isLoading,
-    page,
-    goToPage,
-    refetch,
-  } = useQueue();
+    isGrabbing,
+    isRemoving,
+  } = useSelector((state: AppState) => state.queue.paged);
 
-  const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
-    useQueueOptions();
-
-  const filters = useFilters();
-
-  const { isRemoving, removeQueueItems } = useRemoveQueueItems();
-  const { isGrabbing, grabQueueItems } = useGrabQueueItems();
-
-  const { count } = useQueueStatus();
+  const { count } = useSelector(createQueueStatusSelector());
   const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
     useSelector(createEpisodesFetchingSelector());
   const customFilters = useSelector(createCustomFiltersSelector('queue'));
@@ -98,46 +100,41 @@ function Queue() {
   }, [selectedState]);
 
   const isPendingSelected = useMemo(() => {
-    return records.some((item) => {
+    return items.some((item) => {
       return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
     });
-  }, [records, selectedIds]);
+  }, [items, selectedIds]);
 
   const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
     useState(false);
 
   const isRefreshing =
-    isLoading || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting;
+    isFetching || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting;
   const isAllPopulated =
-    isFetched &&
-    (isEpisodesPopulated ||
-      !records.length ||
-      records.every((e) => !e.episodeIds?.length));
+    isPopulated &&
+    (isEpisodesPopulated || !items.length || items.every((e) => !e.episodeId));
   const hasError = error || episodesError;
   const selectedCount = selectedIds.length;
   const disableSelectedActions = selectedCount === 0;
 
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      setSelectState({
-        type: value ? 'selectAll' : 'unselectAll',
-        items: records,
-      });
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
     },
-    [records, setSelectState]
+    [items, setSelectState]
   );
 
   const handleSelectedChange = useCallback(
     ({ id, value, shiftKey = false }: SelectStateInputProps) => {
       setSelectState({
         type: 'toggleSelected',
-        items: records,
+        items,
         id,
         isSelected: value,
         shiftKey,
       });
     },
-    [records, setSelectState]
+    [items, setSelectState]
   );
 
   const handleRefreshPress = useCallback(() => {
@@ -153,60 +150,93 @@ function Queue() {
   }, []);
 
   const handleGrabSelectedPress = useCallback(() => {
-    grabQueueItems({ ids: selectedIds });
-  }, [selectedIds, grabQueueItems]);
+    dispatch(grabQueueItems({ ids: selectedIds }));
+  }, [selectedIds, dispatch]);
 
   const handleRemoveSelectedPress = useCallback(() => {
     shouldBlockRefresh.current = true;
     setIsConfirmRemoveModalOpen(true);
   }, [setIsConfirmRemoveModalOpen]);
 
-  const handleRemoveSelectedConfirmed = useCallback(() => {
-    shouldBlockRefresh.current = false;
-    removeQueueItems({ ids: selectedIds });
-    setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, setIsConfirmRemoveModalOpen, removeQueueItems]);
+  const handleRemoveSelectedConfirmed = useCallback(
+    (payload: RemovePressProps) => {
+      shouldBlockRefresh.current = false;
+      dispatch(removeQueueItems({ ids: selectedIds, ...payload }));
+      setIsConfirmRemoveModalOpen(false);
+    },
+    [selectedIds, setIsConfirmRemoveModalOpen, dispatch]
+  );
 
   const handleConfirmRemoveModalClose = useCallback(() => {
     shouldBlockRefresh.current = false;
     setIsConfirmRemoveModalOpen(false);
   }, [setIsConfirmRemoveModalOpen]);
 
+  const {
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  } = usePaging({
+    page,
+    totalPages,
+    gotoPage: gotoQueuePage,
+  });
+
   const handleFilterSelect = useCallback(
     (selectedFilterKey: string | number) => {
-      setQueueOption('selectedFilterKey', selectedFilterKey);
+      dispatch(setQueueFilter({ selectedFilterKey }));
     },
-    []
+    [dispatch]
   );
 
-  const handleSortPress = useCallback((sortKey: string) => {
-    setQueueOption('sortKey', sortKey);
-  }, []);
+  const handleSortPress = useCallback(
+    (sortKey: string) => {
+      dispatch(setQueueSort({ sortKey }));
+    },
+    [dispatch]
+  );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
-      setQueueOptions(payload);
+      dispatch(setQueueTableOption(payload));
 
       if (payload.pageSize) {
-        goToPage(1);
+        dispatch(gotoQueuePage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
   useEffect(() => {
-    const episodeIds = selectUniqueIds(records, 'episodeIds');
+    if (requestCurrentPage) {
+      dispatch(fetchQueue());
+    } else {
+      dispatch(gotoQueuePage({ page: 1 }));
+    }
+
+    return () => {
+      dispatch(clearQueue());
+    };
+  }, [requestCurrentPage, dispatch]);
+
+  useEffect(() => {
+    const episodeIds = selectUniqueIds<QueueItem, number | undefined>(
+      items,
+      'episodeId'
+    );
 
     if (episodeIds.length) {
       dispatch(fetchEpisodes({ episodeIds }));
     } else {
       dispatch(clearEpisodes());
     }
-  }, [records, dispatch]);
+  }, [items, dispatch]);
 
   useEffect(() => {
     const repopulate = () => {
-      refetch();
+      dispatch(fetchQueue());
     };
 
     registerPagePopulator(repopulate);
@@ -214,7 +244,7 @@ function Queue() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [refetch]);
+  }, [dispatch]);
 
   if (!shouldBlockRefresh.current) {
     currentQueue.current = (
@@ -225,7 +255,7 @@ function Queue() {
           <Alert kind={kinds.DANGER}>{translate('QueueLoadError')}</Alert>
         ) : null}
 
-        {isAllPopulated && !hasError && !records.length ? (
+        {isAllPopulated && !hasError && !items.length ? (
           <Alert kind={kinds.INFO}>
             {selectedFilterKey !== 'all' && count > 0
               ? translate('QueueFilterHasNoItems')
@@ -233,7 +263,7 @@ function Queue() {
           </Alert>
         ) : null}
 
-        {isAllPopulated && !hasError && !!records.length ? (
+        {isAllPopulated && !hasError && !!items.length ? (
           <div>
             <Table
               selectAll={true}
@@ -249,10 +279,11 @@ function Queue() {
               onSortPress={handleSortPress}
             >
               <TableBody>
-                {records.map((item) => {
+                {items.map((item) => {
                   return (
                     <QueueRow
                       key={item.id}
+                      episodeId={item.episodeId}
                       isSelected={selectedState[item.id]}
                       columns={columns}
                       {...item}
@@ -271,7 +302,11 @@ function Queue() {
               totalPages={totalPages}
               totalRecords={totalRecords}
               isFetching={isFetching}
-              onPageSelect={goToPage}
+              onFirstPagePress={handleFirstPagePress}
+              onPreviousPagePress={handlePreviousPagePress}
+              onNextPagePress={handleNextPagePress}
+              onLastPagePress={handleLastPagePress}
+              onPageSelect={handlePageSelect}
             />
           </div>
         ) : null}
@@ -342,7 +377,7 @@ function Queue() {
         canChangeCategory={
           isConfirmRemoveModalOpen &&
           selectedIds.every((id) => {
-            const item = records.find((i) => i.id === id);
+            const item = items.find((i) => i.id === id);
 
             return !!(item && item.downloadClientHasPostImportCategory);
           })
@@ -350,7 +385,7 @@ function Queue() {
         canIgnore={
           isConfirmRemoveModalOpen &&
           selectedIds.every((id) => {
-            const item = records.find((i) => i.id === id);
+            const item = items.find((i) => i.id === id);
 
             return !!(item && item.seriesId && item.episodeId);
           })
@@ -358,7 +393,7 @@ function Queue() {
         isPending={
           isConfirmRemoveModalOpen &&
           selectedIds.every((id) => {
-            const item = records.find((i) => i.id === id);
+            const item = items.find((i) => i.id === id);
 
             if (!item) {
               return false;

frontend/src/Activity/Queue/QueueDetails.tsx

@@ -14,7 +14,7 @@ import styles from './QueueDetails.css';
 interface QueueDetailsProps {
   title: string;
   size: number;
-  sizeLeft: number;
+  sizeleft: number;
   estimatedCompletionTime?: string;
   status: string;
   trackedDownloadState?: QueueTrackedDownloadState;
@@ -28,7 +28,7 @@ function QueueDetails(props: QueueDetailsProps) {
   const {
     title,
     size,
-    sizeLeft,
+    sizeleft,
     status,
     trackedDownloadState = 'downloading',
     trackedDownloadStatus = 'ok',
@@ -37,7 +37,7 @@ function QueueDetails(props: QueueDetailsProps) {
     progressBar,
   } = props;
 
-  const progress = 100 - (sizeLeft / size) * 100;
+  const progress = 100 - (sizeleft / size) * 100;
   const isDownloading = status === 'downloading';
   const isPaused = status === 'paused';
   const hasWarning = trackedDownloadStatus === 'warning';
@@ -61,7 +61,7 @@ function QueueDetails(props: QueueDetailsProps) {
         anchor={progressBar!}
         title={`${state} - ${progress.toFixed(1)}%`}
         body={<div>{title}</div>}
-        position="bottom-start"
+        position={tooltipPositions.LEFT}
       />
     );
   }

frontend/src/Activity/Queue/QueueFilterModal.tsx

@@ -1,26 +1,50 @@
 import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
-import { setQueueOption } from './queueOptionsStore';
-import useQueue, { FILTER_BUILDER } from './useQueue';
+import { setQueueFilter } from 'Store/Actions/queueActions';
+
+function createQueueSelector() {
+  return createSelector(
+    (state: AppState) => state.queue.paged.items,
+    (queueItems) => {
+      return queueItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.queue.paged.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
 
 type QueueFilterModalProps = FilterModalProps<History>;
 
 export default function QueueFilterModal(props: QueueFilterModalProps) {
-  const { records } = useQueue();
+  const sectionItems = useSelector(createQueueSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'queue';
+
+  const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
-      setQueueOption('selectedFilterKey', selectedFilterKey);
+    (payload: unknown) => {
+      dispatch(setQueueFilter(payload));
     },
-    []
+    [dispatch]
   );
 
   return (
     <FilterModal
       {...props}
-      sectionItems={records}
-      filterBuilderProps={FILTER_BUILDER}
-      customFilterType="queue"
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
       dispatchSetFilter={dispatchSetFilter}
     />
   );

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -1,30 +1,33 @@
 import React, { useCallback } 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 { OptionChanged } from 'Helpers/Hooks/useOptionsStore';
 import { inputTypes } from 'Helpers/Props';
+import { gotoQueuePage, setQueueOption } from 'Store/Actions/queueActions';
+import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
-import {
-  QueueOptions as QueueOptionsType,
-  setQueueOption,
-  useQueueOption,
-} from './queueOptionsStore';
-import useQueue from './useQueue';
 
 function QueueOptions() {
-  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
-  const { goToPage } = useQueue();
+  const dispatch = useDispatch();
+  const { includeUnknownSeriesItems } = useSelector(
+    (state: AppState) => state.queue.options
+  );
 
   const handleOptionChange = useCallback(
-    ({ name, value }: OptionChanged<QueueOptionsType>) => {
-      setQueueOption(name, value);
+    ({ name, value }: InputChanged<boolean>) => {
+      dispatch(
+        setQueueOption({
+          [name]: value,
+        })
+      );
 
       if (name === 'includeUnknownSeriesItems') {
-        goToPage(1);
+        dispatch(gotoQueuePage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
   return (
@@ -36,7 +39,6 @@ function QueueOptions() {
         name="includeUnknownSeriesItems"
         value={includeUnknownSeriesItems}
         helpText={translate('ShowUnknownSeriesItemsHelpText')}
-        // @ts-expect-error - The typing for inputs needs more work
         onChange={handleOptionChange}
       />
     </FormGroup>

frontend/src/Activity/Queue/QueueRow.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
+import { Error } from 'App/State/AppSectionState';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ProgressBar from 'Components/ProgressBar';
@@ -14,13 +15,16 @@ import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
-import useEpisodes from 'Episode/useEpisodes';
+import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
+import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
+import useEpisode from 'Episode/useEpisode';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
 import useSeries from 'Series/useSeries';
+import { grabQueueItem, removeQueueItem } from 'Store/Actions/queueActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import CustomFormat from 'typings/CustomFormat';
 import { SelectStateInputProps } from 'typings/props';
@@ -32,18 +36,15 @@ import {
 import formatBytes from 'Utilities/Number/formatBytes';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
-import EpisodeCellContent from './EpisodeCellContent';
-import EpisodeTitleCellContent from './EpisodeTitleCellContent';
 import QueueStatusCell from './QueueStatusCell';
-import RemoveQueueItemModal from './RemoveQueueItemModal';
-import TimeLeftCell from './TimeLeftCell';
-import { useGrabQueueItem, useRemoveQueueItem } from './useQueue';
+import RemoveQueueItemModal, { RemovePressProps } from './RemoveQueueItemModal';
+import TimeleftCell from './TimeleftCell';
 import styles from './QueueRow.css';
 
 interface QueueRowProps {
   id: number;
   seriesId?: number;
-  episodeIds: number[];
+  episodeId?: number;
   downloadId?: string;
   title: string;
   status: string;
@@ -57,16 +58,16 @@ interface QueueRowProps {
   customFormatScore: number;
   protocol: DownloadProtocol;
   indexer?: string;
-  isFullSeason: boolean;
-  seasonNumbers: number[];
   outputPath?: string;
   downloadClient?: string;
   downloadClientHasPostImportCategory?: boolean;
   estimatedCompletionTime?: string;
   added?: string;
-  timeLeft?: string;
+  timeleft?: string;
   size: number;
-  sizeLeft: number;
+  sizeleft: number;
+  isGrabbing?: boolean;
+  grabError?: Error;
   isRemoving?: boolean;
   isSelected?: boolean;
   columns: Column[];
@@ -78,7 +79,7 @@ function QueueRow(props: QueueRowProps) {
   const {
     id,
     seriesId,
-    episodeIds,
+    episodeId,
     downloadId,
     title,
     status,
@@ -96,25 +97,25 @@ function QueueRow(props: QueueRowProps) {
     downloadClient,
     downloadClientHasPostImportCategory,
     estimatedCompletionTime,
-    isFullSeason,
-    seasonNumbers,
     added,
-    timeLeft,
+    timeleft,
     size,
-    sizeLeft,
+    sizeleft,
+    isGrabbing = false,
+    grabError,
+    isRemoving = false,
     isSelected,
     columns,
     onSelectedChange,
     onQueueRowModalOpenOrClose,
   } = props;
 
+  const dispatch = useDispatch();
   const series = useSeries(seriesId);
-  const episodes = useEpisodes(episodeIds, 'episodes');
+  const episode = useEpisode(episodeId, 'episodes');
   const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
     createUISettingsSelector()
   );
-  const { removeQueueItem, isRemoving } = useRemoveQueueItem(id);
-  const { grabQueueItem, isGrabbing, grabError } = useGrabQueueItem(id);
 
   const [isRemoveQueueItemModalOpen, setIsRemoveQueueItemModalOpen] =
     useState(false);
@@ -123,8 +124,8 @@ function QueueRow(props: QueueRowProps) {
     useState(false);
 
   const handleGrabPress = useCallback(() => {
-    grabQueueItem();
-  }, [grabQueueItem]);
+    dispatch(grabQueueItem({ id }));
+  }, [id, dispatch]);
 
   const handleInteractiveImportPress = useCallback(() => {
     onQueueRowModalOpenOrClose(true);
@@ -141,22 +142,21 @@ function QueueRow(props: QueueRowProps) {
     setIsRemoveQueueItemModalOpen(true);
   }, [setIsRemoveQueueItemModalOpen, onQueueRowModalOpenOrClose]);
 
-  const handleRemoveQueueItemModalConfirmed = useCallback(() => {
-    onQueueRowModalOpenOrClose(false);
-    removeQueueItem();
-    setIsRemoveQueueItemModalOpen(false);
-  }, [
-    setIsRemoveQueueItemModalOpen,
-    removeQueueItem,
-    onQueueRowModalOpenOrClose,
-  ]);
+  const handleRemoveQueueItemModalConfirmed = useCallback(
+    (payload: RemovePressProps) => {
+      onQueueRowModalOpenOrClose(false);
+      dispatch(removeQueueItem({ id, ...payload }));
+      setIsRemoveQueueItemModalOpen(false);
+    },
+    [id, setIsRemoveQueueItemModalOpen, onQueueRowModalOpenOrClose, dispatch]
+  );
 
   const handleRemoveQueueItemModalClose = useCallback(() => {
     onQueueRowModalOpenOrClose(false);
     setIsRemoveQueueItemModalOpen(false);
   }, [setIsRemoveQueueItemModalOpen, onQueueRowModalOpenOrClose]);
 
-  const progress = 100 - (sizeLeft / size) * 100;
+  const progress = 100 - (sizeleft / size) * 100;
   const showInteractiveImport =
     status === 'completed' && trackedDownloadStatus === 'warning';
   const isPending =
@@ -209,12 +209,23 @@ function QueueRow(props: QueueRowProps) {
         if (name === 'episode') {
           return (
             <TableRowCell key={name}>
-              <EpisodeCellContent
-                episodes={episodes}
-                isFullSeason={isFullSeason}
-                seasonNumber={seasonNumbers[0]}
-                series={series}
-              />
+              {episode ? (
+                <SeasonEpisodeNumber
+                  seasonNumber={episode.seasonNumber}
+                  episodeNumber={episode.episodeNumber}
+                  absoluteEpisodeNumber={episode.absoluteEpisodeNumber}
+                  seriesType={series?.seriesType}
+                  alternateTitles={series?.alternateTitles}
+                  sceneSeasonNumber={episode.sceneSeasonNumber}
+                  sceneEpisodeNumber={episode.sceneEpisodeNumber}
+                  sceneAbsoluteEpisodeNumber={
+                    episode.sceneAbsoluteEpisodeNumber
+                  }
+                  unverifiedSceneNumbering={episode.unverifiedSceneNumbering}
+                />
+              ) : (
+                '-'
+              )}
             </TableRowCell>
           );
         }
@@ -222,37 +233,27 @@ function QueueRow(props: QueueRowProps) {
         if (name === 'episodes.title') {
           return (
             <TableRowCell key={name}>
-              <EpisodeTitleCellContent episodes={episodes} series={series} />
+              {series && episode ? (
+                <EpisodeTitleLink
+                  episodeId={episode.id}
+                  seriesId={series.id}
+                  episodeTitle={episode.title}
+                  episodeEntity="episodes"
+                  showOpenSeriesButton={true}
+                />
+              ) : (
+                '-'
+              )}
             </TableRowCell>
           );
         }
 
         if (name === 'episodes.airDateUtc') {
-          if (episodes.length === 0) {
-            return <TableRowCell key={name}>-</TableRowCell>;
+          if (episode) {
+            return <RelativeDateCell key={name} date={episode.airDateUtc} />;
           }
 
-          if (episodes.length === 1) {
-            return (
-              <RelativeDateCell key={name} date={episodes[0].airDateUtc} />
-            );
-          }
-
-          return (
-            <TableRowCell key={name}>
-              <RelativeDateCell
-                key={name}
-                component="span"
-                date={episodes[0].airDateUtc}
-              />
-              {' - '}
-              <RelativeDateCell
-                key={name}
-                component="span"
-                date={episodes[episodes.length - 1].airDateUtc}
-              />
-            </TableRowCell>
-          );
+          return <TableRowCell key={name}>-</TableRowCell>;
         }
 
         if (name === 'languages') {
@@ -324,13 +325,13 @@ function QueueRow(props: QueueRowProps) {
 
         if (name === 'estimatedCompletionTime') {
           return (
-            <TimeLeftCell
+            <TimeleftCell
               key={name}
               status={status}
               estimatedCompletionTime={estimatedCompletionTime}
-              timeLeft={timeLeft}
+              timeleft={timeleft}
               size={size}
-              sizeLeft={sizeLeft}
+              sizeleft={sizeleft}
               showRelativeDates={showRelativeDates}
               shortDateFormat={shortDateFormat}
               timeFormat={timeFormat}

frontend/src/Activity/Queue/QueueStatus.tsx

@@ -90,7 +90,7 @@ function QueueStatus(props: QueueStatusProps) {
 
     if (trackedDownloadState === 'importing') {
       title += ` - ${translate('Importing')}`;
-      iconKind = kinds.PRIMARY;
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {

frontend/src/Activity/Queue/RemoveQueueItemModal.tsx

@@ -1,24 +1,24 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, 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 Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import { OptionChanged } from 'Helpers/Hooks/useOptionsStore';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
-import {
-  QueueOptions,
-  setQueueOption,
-  useQueueOption,
-} from './queueOptionsStore';
 import styles from './RemoveQueueItemModal.css';
 
+export interface RemovePressProps {
+  remove: boolean;
+  changeCategory: boolean;
+  blocklist: boolean;
+  skipRedownload: boolean;
+}
+
 interface RemoveQueueItemModalProps {
   isOpen: boolean;
   sourceTitle?: string;
@@ -26,10 +26,16 @@ interface RemoveQueueItemModalProps {
   canIgnore: boolean;
   isPending: boolean;
   selectedCount?: number;
-  onRemovePress(): void;
+  onRemovePress(props: RemovePressProps): void;
   onModalClose: () => void;
 }
 
+type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore';
+type BlocklistMethod =
+  | 'doNotBlocklist'
+  | 'blocklistAndSearch'
+  | 'blocklistOnly';
+
 function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
   const {
     isOpen,
@@ -43,7 +49,11 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
   } = props;
 
   const multipleSelected = selectedCount && selectedCount > 1;
-  const { removalMethod, blocklistMethod } = useQueueOption('removalOptions');
+
+  const [removalMethod, setRemovalMethod] =
+    useState<RemovalMethod>('removeFromClient');
+  const [blocklistMethod, setBlocklistMethod] =
+    useState<BlocklistMethod>('doNotBlocklist');
 
   const { title, message } = useMemo(() => {
     if (!selectedCount) {
@@ -69,7 +79,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
   }, [sourceTitle, selectedCount]);
 
   const removalMethodOptions = useMemo(() => {
-    const options: EnhancedSelectInputValue<string>[] = [
+    return [
       {
         key: 'removeFromClient',
         value: translate('RemoveFromDownloadClient'),
@@ -96,12 +106,10 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
           : translate('IgnoreDownloadHint'),
       },
     ];
-
-    return options;
   }, [canChangeCategory, canIgnore, multipleSelected]);
 
   const blocklistMethodOptions = useMemo(() => {
-    const options: EnhancedSelectInputValue<string>[] = [
+    return [
       {
         key: 'doNotBlocklist',
         value: translate('DoNotBlocklist'),
@@ -123,28 +131,46 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
           : translate('BlocklistOnlyHint'),
       },
     ];
-
-    return options;
   }, [isPending, multipleSelected]);
 
-  const handleRemovalOptionInputChange = useCallback(
-    ({ name, value }: OptionChanged<QueueOptions['removalOptions']>) => {
-      setQueueOption('removalOptions', {
-        removalMethod,
-        blocklistMethod,
-        [name]: value,
-      });
+  const handleRemovalMethodChange = useCallback(
+    ({ value }: { value: RemovalMethod }) => {
+      setRemovalMethod(value);
     },
-    [removalMethod, blocklistMethod]
+    [setRemovalMethod]
+  );
+
+  const handleBlocklistMethodChange = useCallback(
+    ({ value }: { value: BlocklistMethod }) => {
+      setBlocklistMethod(value);
+    },
+    [setBlocklistMethod]
   );
 
   const handleConfirmRemove = useCallback(() => {
-    onRemovePress();
-  }, [onRemovePress]);
+    onRemovePress({
+      remove: removalMethod === 'removeFromClient',
+      changeCategory: removalMethod === 'changeCategory',
+      blocklist: blocklistMethod !== 'doNotBlocklist',
+      skipRedownload: blocklistMethod === 'blocklistOnly',
+    });
+
+    setRemovalMethod('removeFromClient');
+    setBlocklistMethod('doNotBlocklist');
+  }, [
+    removalMethod,
+    blocklistMethod,
+    setRemovalMethod,
+    setBlocklistMethod,
+    onRemovePress,
+  ]);
 
   const handleModalClose = useCallback(() => {
+    setRemovalMethod('removeFromClient');
+    setBlocklistMethod('doNotBlocklist');
+
     onModalClose();
-  }, [onModalClose]);
+  }, [setRemovalMethod, setBlocklistMethod, onModalClose]);
 
   return (
     <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={handleModalClose}>
@@ -167,8 +193,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
                 helpTextWarning={translate(
                   'RemoveQueueItemRemovalMethodHelpTextWarning'
                 )}
-                // @ts-expect-error - The typing for inputs needs more work
-                onChange={handleRemovalOptionInputChange}
+                onChange={handleRemovalMethodChange}
               />
             </FormGroup>
           )}
@@ -186,8 +211,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
               value={blocklistMethod}
               values={blocklistMethodOptions}
               helpText={translate('BlocklistReleaseHelpText')}
-              // @ts-expect-error - The typing for inputs needs more work
-              onChange={handleRemovalOptionInputChange}
+              onChange={handleBlocklistMethodChange}
             />
           </FormGroup>
         </ModalBody>

frontend/src/Activity/Queue/Status/QueueStatus.tsx

@@ -1,9 +1,33 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
-import useQueueStatus from './useQueueStatus';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { fetchQueueStatus } from 'Store/Actions/queueActions';
+import createQueueStatusSelector from './createQueueStatusSelector';
 
 function QueueStatus() {
-  const { errors, warnings, count } = useQueueStatus();
+  const dispatch = useDispatch();
+  const { isConnected, isReconnecting } = useSelector(
+    (state: AppState) => state.app
+  );
+  const { isPopulated, count, errors, warnings } = useSelector(
+    createQueueStatusSelector()
+  );
+
+  const wasReconnecting = usePrevious(isReconnecting);
+
+  useEffect(() => {
+    if (!isPopulated) {
+      dispatch(fetchQueueStatus());
+    }
+  }, [isPopulated, dispatch]);
+
+  useEffect(() => {
+    if (isConnected && wasReconnecting) {
+      dispatch(fetchQueueStatus());
+    }
+  }, [isConnected, wasReconnecting, dispatch]);
 
   return (
     <PageSidebarStatus count={count} errors={errors} warnings={warnings} />

frontend/src/Activity/Queue/Status/createQueueStatusSelector.ts

@@ -0,0 +1,32 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createQueueStatusSelector() {
+  return createSelector(
+    (state: AppState) => state.queue.status.isPopulated,
+    (state: AppState) => state.queue.status.item,
+    (state: AppState) => state.queue.options.includeUnknownSeriesItems,
+    (isPopulated, status, includeUnknownSeriesItems) => {
+      const {
+        errors,
+        warnings,
+        unknownErrors,
+        unknownWarnings,
+        count,
+        totalCount,
+      } = status;
+
+      return {
+        ...status,
+        isPopulated,
+        count: includeUnknownSeriesItems ? totalCount : count,
+        errors: includeUnknownSeriesItems ? errors || unknownErrors : errors,
+        warnings: includeUnknownSeriesItems
+          ? warnings || unknownWarnings
+          : warnings,
+      };
+    }
+  );
+}
+
+export default createQueueStatusSelector;

frontend/src/Activity/Queue/Status/useQueueStatus.ts

@@ -1,54 +0,0 @@
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import { useQueueOption } from '../queueOptionsStore';
-
-export interface QueueStatus {
-  totalCount: number;
-  count: number;
-  unknownCount: number;
-  errors: boolean;
-  warnings: boolean;
-  unknownErrors: boolean;
-  unknownWarnings: boolean;
-}
-
-export default function useQueueStatus() {
-  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
-
-  const { data } = useApiQuery<QueueStatus>({
-    path: '/queue/status',
-    queryParams: {
-      includeUnknownSeriesItems,
-    },
-  });
-
-  if (!data) {
-    return {
-      count: 0,
-      errors: false,
-      warnings: false,
-    };
-  }
-
-  const {
-    errors,
-    warnings,
-    unknownErrors,
-    unknownWarnings,
-    count,
-    totalCount,
-  } = data;
-
-  if (includeUnknownSeriesItems) {
-    return {
-      count: totalCount,
-      errors: errors || unknownErrors,
-      warnings: warnings || unknownWarnings,
-    };
-  }
-
-  return {
-    count,
-    errors,
-    warnings,
-  };
-}

frontend/src/Activity/Queue/TimeleftCell.css

@@ -1,4 +1,4 @@
-.timeLeft {
+.timeleft {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;

frontend/src/Activity/Queue/TimeleftCell.css.d.ts

@@ -1,7 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'timeLeft': string;
+  'timeleft': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Activity/Queue/TimeleftCell.tsx

@@ -8,26 +8,26 @@ import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
-import styles from './TimeLeftCell.css';
+import styles from './TimeleftCell.css';
 
-interface TimeLeftCellProps {
+interface TimeleftCellProps {
   estimatedCompletionTime?: string;
-  timeLeft?: string;
+  timeleft?: string;
   status: string;
   size: number;
-  sizeLeft: number;
+  sizeleft: number;
   showRelativeDates: boolean;
   shortDateFormat: string;
   timeFormat: string;
 }
 
-function TimeLeftCell(props: TimeLeftCellProps) {
+function TimeleftCell(props: TimeleftCellProps) {
   const {
     estimatedCompletionTime,
-    timeLeft,
+    timeleft,
     status,
     size,
-    sizeLeft,
+    sizeleft,
     showRelativeDates,
     shortDateFormat,
     timeFormat,
@@ -44,7 +44,7 @@ function TimeLeftCell(props: TimeLeftCellProps) {
     });
 
     return (
-      <TableRowCell className={styles.timeLeft}>
+      <TableRowCell className={styles.timeleft}>
         <Tooltip
           anchor={<Icon name={icons.INFO} />}
           tooltip={translate('DelayingDownloadUntil', { date, time })}
@@ -66,7 +66,7 @@ function TimeLeftCell(props: TimeLeftCellProps) {
     });
 
     return (
-      <TableRowCell className={styles.timeLeft}>
+      <TableRowCell className={styles.timeleft}>
         <Tooltip
           anchor={<Icon name={icons.INFO} />}
           tooltip={translate('RetryingDownloadOn', { date, time })}
@@ -77,21 +77,21 @@ function TimeLeftCell(props: TimeLeftCellProps) {
     );
   }
 
-  if (!timeLeft || status === 'completed' || status === 'failed') {
-    return <TableRowCell className={styles.timeLeft}>-</TableRowCell>;
+  if (!timeleft || status === 'completed' || status === 'failed') {
+    return <TableRowCell className={styles.timeleft}>-</TableRowCell>;
   }
 
   const totalSize = formatBytes(size);
-  const remainingSize = formatBytes(sizeLeft);
+  const remainingSize = formatBytes(sizeleft);
 
   return (
     <TableRowCell
-      className={styles.timeLeft}
+      className={styles.timeleft}
       title={`${remainingSize} / ${totalSize}`}
     >
-      {formatTimeSpan(timeLeft)}
+      {formatTimeSpan(timeleft)}
     </TableRowCell>
   );
 }
 
-export default TimeLeftCell;
+export default TimeleftCell;

frontend/src/Activity/Queue/queueOptionsStore.ts

@@ -1,160 +0,0 @@
-import React from 'react';
-import Icon from 'Components/Icon';
-import {
-  createOptionsStore,
-  PageableOptions,
-} from 'Helpers/Hooks/useOptionsStore';
-import { icons } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-
-interface QueueRemovalOptions {
-  removalMethod: 'changeCategory' | 'ignore' | 'removeFromClient';
-  blocklistMethod: 'blocklistAndSearch' | 'blocklistOnly' | 'doNotBlocklist';
-}
-
-export interface QueueOptions extends PageableOptions {
-  includeUnknownSeriesItems: boolean;
-  removalOptions: QueueRemovalOptions;
-}
-
-const { useOptions, useOption, setOptions, setOption } =
-  createOptionsStore<QueueOptions>('queue_options', () => {
-    return {
-      includeUnknownSeriesItems: true,
-      pageSize: 20,
-      selectedFilterKey: 'all',
-      sortKey: 'time',
-      sortDirection: 'descending',
-      columns: [
-        {
-          name: 'status',
-          label: '',
-          columnLabel: () => translate('Status'),
-          isSortable: true,
-          isVisible: true,
-          isModifiable: false,
-        },
-        {
-          name: 'series.sortTitle',
-          label: () => translate('Series'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'episode',
-          label: () => translate('EpisodeMaybePlural'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'episodes.title',
-          label: () => translate('EpisodeTitleMaybePlural'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'episodes.airDateUtc',
-          label: () => translate('EpisodeAirDate'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'languages',
-          label: () => translate('Languages'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'quality',
-          label: () => translate('Quality'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'customFormats',
-          label: () => translate('Formats'),
-          isSortable: false,
-          isVisible: true,
-        },
-        {
-          name: 'customFormatScore',
-          columnLabel: () => translate('CustomFormatScore'),
-          label: React.createElement(Icon, {
-            name: icons.SCORE,
-            title: () => translate('CustomFormatScore'),
-          }),
-          isVisible: false,
-        },
-        {
-          name: 'protocol',
-          label: () => translate('Protocol'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'indexer',
-          label: () => translate('Indexer'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'downloadClient',
-          label: () => translate('DownloadClient'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'title',
-          label: () => translate('ReleaseTitle'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'size',
-          label: () => translate('Size'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'outputPath',
-          label: () => translate('OutputPath'),
-          isSortable: false,
-          isVisible: false,
-        },
-        {
-          name: 'estimatedCompletionTime',
-          label: () => translate('TimeLeft'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'added',
-          label: () => translate('Added'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'progress',
-          label: () => translate('Progress'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'actions',
-          label: '',
-          columnLabel: () => translate('Actions'),
-          isVisible: true,
-          isModifiable: false,
-        },
-      ],
-      removalOptions: {
-        removalMethod: 'removeFromClient',
-        blocklistMethod: 'doNotBlocklist',
-      },
-    };
-  });
-
-export const useQueueOptions = useOptions;
-export const setQueueOptions = setOptions;
-export const useQueueOption = useOption;
-export const setQueueOption = setOption;

frontend/src/Activity/Queue/useQueue.ts

@@ -1,203 +0,0 @@
-import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import usePage from 'Helpers/Hooks/usePage';
-import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
-import { filterBuilderValueTypes } from 'Helpers/Props';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import Queue from 'typings/Queue';
-import getQueryString from 'Utilities/Fetch/getQueryString';
-import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
-import translate from 'Utilities/String/translate';
-import { useQueueOptions } from './queueOptionsStore';
-
-interface BulkQueueData {
-  ids: number[];
-}
-
-export const FILTERS: Filter[] = [
-  {
-    key: 'all',
-    label: () => translate('All'),
-    filters: [],
-  },
-];
-
-export const FILTER_BUILDER: FilterBuilderProp<Queue>[] = [
-  {
-    name: 'seriesIds',
-    label: () => translate('Series'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.SERIES,
-  },
-  {
-    name: 'quality',
-    label: () => translate('Quality'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.QUALITY,
-  },
-  {
-    name: 'languages',
-    label: () => translate('Languages'),
-    type: 'contains',
-    valueType: filterBuilderValueTypes.LANGUAGE,
-  },
-  {
-    name: 'protocol',
-    label: () => translate('Protocol'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.PROTOCOL,
-  },
-  {
-    name: 'status',
-    label: () => translate('Status'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.QUEUE_STATUS,
-  },
-];
-
-const useQueue = () => {
-  const { page, goToPage } = usePage('queue');
-  const {
-    includeUnknownSeriesItems,
-    pageSize,
-    selectedFilterKey,
-    sortKey,
-    sortDirection,
-  } = useQueueOptions();
-  const customFilters = useSelector(
-    createCustomFiltersSelector('queue')
-  ) as CustomFilter[];
-
-  const filters = useMemo(() => {
-    return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
-  }, [selectedFilterKey, customFilters]);
-
-  const { refetch, ...query } = usePagedApiQuery<Queue>({
-    path: '/queue',
-    page,
-    pageSize,
-    filters,
-    queryParams: {
-      includeUnknownSeriesItems,
-    },
-    sortKey,
-    sortDirection,
-    queryOptions: {
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  return {
-    ...query,
-    goToPage,
-    page,
-    refetch,
-  };
-};
-
-export default useQueue;
-
-export const useFilters = () => {
-  return FILTERS;
-};
-
-const useRemovalOptions = () => {
-  const { removalOptions } = useQueueOptions();
-
-  return {
-    remove: removalOptions.removalMethod === 'removeFromClient',
-    changeCategory: removalOptions.removalMethod === 'changeCategory',
-    blocklist: removalOptions.blocklistMethod !== 'doNotBlocklist',
-    skipRedownload: removalOptions.blocklistMethod === 'blocklistOnly',
-  };
-};
-
-export const useRemoveQueueItem = (id: number) => {
-  const queryClient = useQueryClient();
-  const removalOptions = useRemovalOptions();
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/queue/${id}${getQueryString(removalOptions)}`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/queue'] });
-      },
-    },
-  });
-
-  return {
-    removeQueueItem: mutate,
-    isRemoving: isPending,
-  };
-};
-
-export const useRemoveQueueItems = () => {
-  const queryClient = useQueryClient();
-  const removalOptions = useRemovalOptions();
-
-  const { mutate, isPending } = useApiMutation<unknown, BulkQueueData>({
-    path: `/queue/bulk${getQueryString(removalOptions)}`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/queue'] });
-      },
-    },
-  });
-
-  return {
-    removeQueueItems: mutate,
-    isRemoving: isPending,
-  };
-};
-
-export const useGrabQueueItem = (id: number) => {
-  const queryClient = useQueryClient();
-  const [grabError, setGrabError] = useState<string | null>(null);
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/queue/grab/${id}`,
-    method: 'POST',
-    mutationOptions: {
-      onMutate: () => {
-        setGrabError(null);
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/queue'] });
-      },
-      onError: () => {
-        setGrabError('Error grabbing queue item');
-      },
-    },
-  });
-
-  return {
-    grabQueueItem: mutate,
-    isGrabbing: isPending,
-    grabError,
-  };
-};
-
-export const useGrabQueueItems = () => {
-  const queryClient = useQueryClient();
-
-  // Explicitly define the types for the mutation so we can pass in no arguments to mutate as expected.
-  const { mutate, isPending } = useApiMutation<unknown, BulkQueueData>({
-    path: '/queue/grab/bulk',
-    method: 'POST',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/queue'] });
-      },
-    },
-  });
-
-  return {
-    grabQueueItems: mutate,
-    isGrabbing: isPending,
-  };
-};

frontend/src/AddSeries/AddNewSeries/AddNewSeries.tsx

@@ -1,5 +1,6 @@
 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';
@@ -9,6 +10,7 @@ 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';
@@ -16,7 +18,6 @@ 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() {
@@ -47,7 +48,12 @@ function AddNewSeries() {
     isFetching: isFetchingApi,
     error,
     data = [],
-  } = useLookupSeries(query);
+  } = useApiQuery<AddSeries[]>({
+    path: `/series/lookup?term=${query}`,
+    queryOptions: {
+      enabled: !!query,
+    },
+  });
 
   useEffect(() => {
     setIsFetching(isFetchingApi);
@@ -97,9 +103,7 @@ function AddNewSeries() {
         {!isFetching && !error && !!data.length ? (
           <div className={styles.searchResults}>
             {data.map((item) => {
-              return (
-                <AddNewSeriesSearchResult key={item.tvdbId} series={item} />
-              );
+              return <AddNewSeriesSearchResult key={item.tvdbId} {...item} />;
             })}
           </div>
         ) : null}

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.tsx

@@ -1,13 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import AddSeries from 'AddSeries/AddSeries';
-import {
-  AddSeriesOptions,
-  setAddSeriesOption,
-  useAddSeriesOptions,
-} from 'AddSeries/addSeriesOptionsStore';
+import { useDispatch, useSelector } from 'react-redux';
 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';
@@ -21,39 +17,46 @@ 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 {
-  series: AddSeries;
-  initialSeriesType: SeriesType;
+export interface AddNewSeriesModalContentProps
+  extends Pick<
+    AddSeries,
+    'tvdbId' | 'title' | 'year' | 'overview' | 'images' | 'folder'
+  > {
+  initialSeriesType: string;
   onModalClose: () => void;
 }
 
 function AddNewSeriesModalContent({
-  series,
+  tvdbId,
+  title,
+  year,
+  overview,
+  images,
+  folder,
   initialSeriesType,
   onModalClose,
 }: AddNewSeriesModalContentProps) {
-  const { title, year, overview, images, folder } = series;
-  const options = useAddSeriesOptions();
+  const dispatch = useDispatch();
+  const { isAdding, addError, defaults } = useSelector(
+    (state: AppState) => state.addSeries
+  );
   const { isSmallScreen } = useSelector(createDimensionsSelector());
   const isWindows = useIsWindows();
 
-  const { isAdding, addError, addSeries } = useAddSeries();
-
   const { settings, validationErrors, validationWarnings } = useMemo(() => {
-    return selectSettings(options, {}, addError);
-  }, [options, addError]);
+    return selectSettings(defaults, {}, addError);
+  }, [defaults, addError]);
 
-  const [seriesType, setSeriesType] = useState<SeriesType>(
+  const [seriesType, setSeriesType] = useState(
     initialSeriesType === 'standard'
       ? settings.seriesType.value
       : initialSeriesType
@@ -71,33 +74,35 @@ function AddNewSeriesModalContent({
   } = settings;
 
   const handleInputChange = useCallback(
-    ({ name, value }: InputChanged<string | number | boolean | number[]>) => {
-      setAddSeriesOption(name as keyof AddSeriesOptions, value);
+    ({ name, value }: InputChanged) => {
+      dispatch(setAddSeriesDefault({ [name]: value }));
     },
-    []
+    [dispatch]
   );
 
   const handleQualityProfileIdChange = useCallback(
     ({ value }: InputChanged<string | number>) => {
-      setAddSeriesOption('qualityProfileId', value as number);
+      dispatch(setAddSeriesDefault({ qualityProfileId: value }));
     },
-    []
+    [dispatch]
   );
 
   const handleAddSeriesPress = useCallback(() => {
-    addSeries({
-      ...series,
-      rootFolderPath: rootFolderPath.value,
-      monitor: monitor.value,
-      qualityProfileId: qualityProfileId.value,
-      seriesType,
-      seasonFolder: seasonFolder.value,
-      searchForMissingEpisodes: searchForMissingEpisodes.value,
-      searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
-      tags: tags.value,
-    });
+    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,
+      })
+    );
   }, [
-    series,
+    tvdbId,
     seriesType,
     rootFolderPath,
     monitor,
@@ -106,7 +111,7 @@ function AddNewSeriesModalContent({
     searchForMissingEpisodes,
     searchForCutoffUnmetEpisodes,
     tags,
-    addSeries,
+    dispatch,
   ]);
 
   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 'AddSeries/AddSeries';
+import { AddSeries } from 'App/State/AddSeriesAppState';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
@@ -16,27 +16,24 @@ import translate from 'Utilities/String/translate';
 import AddNewSeriesModal from './AddNewSeriesModal';
 import styles from './AddNewSeriesSearchResult.css';
 
-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;
+type AddNewSeriesSearchResultProps = AddSeries;
 
+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);
@@ -171,8 +168,13 @@ function AddNewSeriesSearchResult({ series }: AddNewSeriesSearchResultProps) {
 
       <AddNewSeriesModal
         isOpen={isNewAddSeriesModalOpen && !isExistingSeries}
-        series={series}
+        tvdbId={tvdbId}
+        title={title}
+        year={year}
+        overview={overview}
+        folder={folder}
         initialSeriesType={seriesType}
+        images={images}
         onModalClose={handleAddSeriesModalClose}
       />
     </div>

frontend/src/AddSeries/AddNewSeries/useAddSeries.ts

@@ -1,51 +0,0 @@
-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]
-  );
-
-  const { isPending, error, mutate } = useApiMutation<Series, AddSeriesPayload>(
-    {
-      path: '/series',
-      method: 'POST',
-      mutationOptions: {
-        onSuccess: onAddSuccess,
-      },
-    }
-  );
-
-  return {
-    isAdding: isPending,
-    addError: error,
-    addSeries: mutate,
-  };
-};

frontend/src/AddSeries/AddSeries.ts

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

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

@@ -1,10 +1,6 @@
 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';
@@ -12,6 +8,7 @@ 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';
@@ -51,7 +48,9 @@ function ImportSeries() {
     (state: AppState) => state.settings.qualityProfiles.items
   );
 
-  const defaultQualityProfileId = useAddSeriesOption('qualityProfileId');
+  const defaultQualityProfileId = useSelector(
+    (state: AppState) => state.addSeries.defaults.qualityProfileId
+  );
 
   const scrollerRef = useRef<HTMLDivElement>(null);
 
@@ -77,7 +76,9 @@ function ImportSeries() {
       !defaultQualityProfileId ||
       !qualityProfiles.some((p) => p.id === defaultQualityProfileId)
     ) {
-      setAddSeriesOption('qualityProfileId', qualityProfiles[0].id);
+      dispatch(
+        setAddSeriesDefault({ qualityProfileId: qualityProfiles[0].id })
+      );
     }
   }, [defaultQualityProfileId, qualityProfiles, dispatch]);
 

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

@@ -1,10 +1,5 @@
 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';
@@ -17,6 +12,7 @@ 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,
@@ -37,7 +33,7 @@ function ImportSeriesFooter() {
     qualityProfileId: defaultQualityProfileId,
     seriesType: defaultSeriesType,
     seasonFolder: defaultSeasonFolder,
-  } = useAddSeriesOptions();
+  } = useSelector((state: AppState) => state.addSeries.defaults);
 
   const { isLookingUpSeries, isImporting, items, importError } = useSelector(
     (state: AppState) => state.importSeries
@@ -114,7 +110,7 @@ function ImportSeriesFooter() {
   ]);
 
   const handleInputChange = useCallback(
-    ({ name, value }: InputChanged<string | number | boolean | number[]>) => {
+    ({ name, value }: InputChanged) => {
       if (name === 'monitor') {
         setMonitor(value as SeriesMonitor);
       } else if (name === 'qualityProfileId') {
@@ -125,7 +121,7 @@ function ImportSeriesFooter() {
         setSeasonFolder(value as boolean);
       }
 
-      setAddSeriesOption(name as keyof AddSeriesOptions, value);
+      dispatch(setAddSeriesDefault({ [name]: value }));
 
       selectedIds.forEach((id) => {
         dispatch(

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

@@ -75,6 +75,11 @@ 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,7 +1,6 @@
 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';
@@ -60,8 +59,9 @@ function ImportSeriesTable({
 }: ImportSeriesTableProps) {
   const dispatch = useDispatch();
 
-  const { monitor, qualityProfileId, seriesType, seasonFolder } =
-    useAddSeriesOptions();
+  const { monitor, qualityProfileId, seriesType, seasonFolder } = useSelector(
+    (state: AppState) => state.addSeries.defaults
+  );
 
   const items = useSelector((state: AppState) => state.importSeries.items);
   const { isSmallScreen } = useSelector(createDimensionsSelector());

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

@@ -1,13 +1,5 @@
-import {
-  autoUpdate,
-  flip,
-  FloatingPortal,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-} from '@floating-ui/react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { Manager, Popper, Reference } from 'react-popper';
 import { useDispatch, useSelector } from 'react-redux';
 import AppState from 'App/State/AppState';
 import FormInputButton from 'Components/Form/FormInputButton';
@@ -15,6 +7,7 @@ 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,
@@ -54,6 +47,9 @@ 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('');
@@ -61,6 +57,37 @@ 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);
   }, []);
@@ -120,139 +147,157 @@ 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 (
-    <>
-      <div ref={refs.setReference} {...getReferenceProps()}>
-        <Link className={styles.button} component="div" onPress={handlePress}>
-          {isLookingUpSeries && isQueued && !isPopulated ? (
-            <LoadingIndicator className={styles.loading} size={20} />
-          ) : null}
+    <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}
 
-          {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}
-              />
-
-              {translate('NoMatchFound')}
-            </div>
-          ) : null}
-
-          {!isFetching && !!error ? (
-            <div>
-              <Icon
-                className={styles.warningIcon}
-                title={errorMessage}
-                name={icons.WARNING}
-                kind={kinds.WARNING}
-              />
-
-              {translate('SearchFailedError')}
-            </div>
-          ) : null}
-
-          <div className={styles.dropdownArrowContainer}>
-            <Icon name={icons.CARET_DOWN} />
-          </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>
-
-                  <TextInput
-                    className={styles.searchInput}
-                    name={`${name}_textInput`}
-                    value={term}
-                    onChange={handleSearchInputChange}
+              {isPopulated && !selectedSeries ? (
+                <div>
+                  <Icon
+                    className={styles.warningIcon}
+                    name={icons.WARNING}
+                    kind={kinds.WARNING}
                   />
 
-                  <FormInputButton
-                    kind={kinds.DEFAULT}
-                    spinnerIcon={icons.REFRESH}
-                    canSpin={true}
-                    isSpinning={isFetching}
-                    onPress={handleRefreshPress}
-                  >
-                    <Icon name={icons.REFRESH} />
-                  </FormInputButton>
+                  {translate('NoMatchFound')}
                 </div>
+              ) : null}
 
-                <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}
-                      />
-                    );
-                  })}
+              {!isFetching && !!error ? (
+                <div>
+                  <Icon
+                    className={styles.warningIcon}
+                    title={errorMessage}
+                    name={icons.WARNING}
+                    kind={kinds.WARNING}
+                  />
+
+                  {translate('SearchFailedError')}
                 </div>
+              ) : null}
+
+              <div className={styles.dropdownArrowContainer}>
+                <Icon name={icons.CARET_DOWN} />
               </div>
-            ) : null}
+            </Link>
           </div>
-        </FloatingPortal>
-      ) : null}
-    </>
+        )}
+      </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>
+                  </div>
+                ) : null}
+              </div>
+            );
+          }}
+        </Popper>
+      </Portal>
+    </Manager>
   );
 }
 

frontend/src/AddSeries/addSeriesOptionsStore.ts

@@ -1,31 +0,0 @@
-import { createOptionsStore } from 'Helpers/Hooks/useOptionsStore';
-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 { useOptions, useOption, setOption } =
-  createOptionsStore<AddSeriesOptions>('add_series_options', () => {
-    return {
-      rootFolderPath: '',
-      monitor: 'all',
-      qualityProfileId: 0,
-      seriesType: 'standard',
-      seasonFolder: true,
-      searchForMissingEpisodes: false,
-      searchForCutoffUnmetEpisodes: false,
-      tags: [],
-    };
-  });
-
-export const useAddSeriesOptions = useOptions;
-export const useAddSeriesOption = useOption;
-export const setAddSeriesOption = setOption;

frontend/src/App/AppUpdatedModalContent.tsx

@@ -11,7 +11,6 @@ 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';
@@ -66,12 +65,14 @@ interface AppUpdatedModalContentProps {
 function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
   const dispatch = useDispatch();
   const { version, prevVersion } = useSelector((state: AppState) => state.app);
-  const { isFetched, error, data } = useUpdates();
+  const { isPopulated, error, items } = useSelector(
+    (state: AppState) => state.system.updates
+  );
   const previousVersion = usePrevious(version);
 
   const { onModalClose } = props;
 
-  const update = mergeUpdates(data, version, prevVersion);
+  const update = mergeUpdates(items, version, prevVersion);
 
   const handleSeeChangesPress = useCallback(() => {
     window.location.href = `${window.Sonarr.urlBase}/system/updates`;
@@ -99,7 +100,7 @@ function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
           />
         </div>
 
-        {isFetched && !error && !!update ? (
+        {isPopulated && !error && !!update ? (
           <div>
             {update.changes ? (
               <div className={styles.maintenance}>
@@ -125,7 +126,7 @@ function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
           </div>
         ) : null}
 
-        {!isFetched && !error ? <LoadingIndicator /> : null}
+        {!isPopulated && !error ? <LoadingIndicator /> : null}
       </ModalBody>
 
       <ModalFooter>

frontend/src/App/ApplyTheme.tsx

@@ -1,9 +1,20 @@
 import { useCallback, useEffect } from 'react';
-import useTheme from 'Helpers/Hooks/useTheme';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
 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 = useTheme();
+  const theme = useSelector(createThemeSelector());
 
   const updateCSSVariables = useCallback(() => {
     Object.entries(themes[theme]).forEach(([key, value]) => {

frontend/src/App/State/AddSeriesAppState.ts

@@ -0,0 +1,25 @@
+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,6 +1,7 @@
 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';
@@ -18,6 +19,7 @@ import OrganizePreviewAppState from './OrganizePreviewAppState';
 import ParseAppState from './ParseAppState';
 import PathsAppState from './PathsAppState';
 import ProviderOptionsAppState from './ProviderOptionsAppState';
+import QueueAppState from './QueueAppState';
 import ReleasesAppState from './ReleasesAppState';
 import RootFolderAppState from './RootFolderAppState';
 import SeriesAppState, { SeriesIndexAppState } from './SeriesAppState';
@@ -48,6 +50,7 @@ export interface PropertyFilter {
 export interface Filter {
   key: string;
   label: string | (() => string);
+  type: string;
   filters: PropertyFilter[];
 }
 
@@ -80,6 +83,7 @@ export interface AppSectionState {
 }
 
 interface AppState {
+  addSeries: AddSeriesAppState;
   app: AppSectionState;
   blocklist: BlocklistAppState;
   calendar: CalendarAppState;
@@ -98,6 +102,7 @@ interface AppState {
   parse: ParseAppState;
   paths: PathsAppState;
   providerOptions: ProviderOptionsAppState;
+  queue: QueueAppState;
   releases: ReleasesAppState;
   rootFolders: RootFolderAppState;
   series: SeriesAppState;

frontend/src/App/State/LogsAppState.ts

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,44 @@
+import Queue from 'typings/Queue';
+import AppSectionState, {
+  AppSectionFilterState,
+  AppSectionItemState,
+  Error,
+  PagedAppSectionState,
+  TableAppSectionState,
+} from './AppSectionState';
+
+export interface QueueStatus {
+  totalCount: number;
+  count: number;
+  unknownCount: number;
+  errors: boolean;
+  warnings: boolean;
+  unknownErrors: boolean;
+  unknownWarnings: boolean;
+}
+
+export interface QueueDetailsAppState extends AppSectionState<Queue> {
+  params: unknown;
+}
+
+export interface QueuePagedAppState
+  extends AppSectionState<Queue>,
+    AppSectionFilterState<Queue>,
+    PagedAppSectionState,
+    TableAppSectionState {
+  isGrabbing: boolean;
+  grabError: Error;
+  isRemoving: boolean;
+  removeError: Error;
+}
+
+interface QueueAppState {
+  status: AppSectionItemState<QueueStatus>;
+  details: QueueDetailsAppState;
+  paged: QueuePagedAppState;
+  options: {
+    includeUnknownSeriesItems: boolean;
+  };
+}
+
+export default QueueAppState;

frontend/src/App/State/SystemAppState.ts

@@ -3,23 +3,28 @@ 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/App/State/TagsAppState.ts

@@ -17,7 +17,6 @@ export interface TagDetail extends ModelBase {
   indexerIds: number[];
   notificationIds: number[];
   restrictionIds: number[];
-  excludedReleaseProfileIds: number[];
   seriesIds: number[];
 }
 

frontend/src/Calendar/Agenda/AgendaEvent.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import moment from 'moment';
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useQueueItemForEpisode } from 'Activity/Queue/Details/QueueDetailsProvider';
 import AppState from 'App/State/AppState';
 import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
 import getStatusStyle from 'Calendar/getStatusStyle';
@@ -14,6 +13,7 @@ import getFinaleTypeName from 'Episode/getFinaleTypeName';
 import useEpisodeFile from 'EpisodeFile/useEpisodeFile';
 import { icons, kinds } from 'Helpers/Props';
 import useSeries from 'Series/useSeries';
+import { createQueueItemSelectorForHook } from 'Store/Selectors/createQueueItemSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import formatTime from 'Utilities/Date/formatTime';
 import padNumber from 'Utilities/Number/padNumber';
@@ -57,7 +57,7 @@ function AgendaEvent(props: AgendaEventProps) {
 
   const series = useSeries(seriesId)!;
   const episodeFile = useEpisodeFile(episodeFileId);
-  const queueItem = useQueueItemForEpisode(id);
+  const queueItem = useSelector(createQueueItemSelectorForHook(id));
   const { timeFormat, longDateFormat, enableColorImpairedMode } = useSelector(
     createUISettingsSelector()
   );

frontend/src/Calendar/Calendar.tsx

@@ -17,6 +17,10 @@ import {
   clearEpisodeFiles,
   fetchEpisodeFiles,
 } from 'Store/Actions/episodeFileActions';
+import {
+  clearQueueDetails,
+  fetchQueueDetails,
+} from 'Store/Actions/queueActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
@@ -70,6 +74,7 @@ function Calendar() {
 
     return () => {
       dispatch(clearCalendar());
+      dispatch(clearQueueDetails());
       dispatch(clearEpisodeFiles());
       clearTimeout(updateTimeout.current);
     };
@@ -85,6 +90,7 @@ function Calendar() {
 
   useEffect(() => {
     const repopulate = () => {
+      dispatch(fetchQueueDetails({ time, view }));
       dispatch(fetchCalendar({ time, view }));
     };
 
@@ -119,11 +125,16 @@ function Calendar() {
 
   useEffect(() => {
     if (!previousItems || hasDifferentItems(items, previousItems)) {
+      const episodeIds = selectUniqueIds<Episode, number>(items, 'id');
       const episodeFileIds = selectUniqueIds<Episode, number>(
         items,
         'episodeFileId'
       );
 
+      if (items.length) {
+        dispatch(fetchQueueDetails({ episodeIds }));
+      }
+
       if (episodeFileIds.length) {
         dispatch(fetchEpisodeFiles({ episodeFileIds }));
       }
@@ -133,15 +144,18 @@ function Calendar() {
   return (
     <div className={styles.calendar}>
       {isFetching && !isPopulated ? <LoadingIndicator /> : null}
+
       {!isFetching && error ? (
         <Alert kind={kinds.DANGER}>{translate('CalendarLoadError')}</Alert>
       ) : null}
+
       {!error && isPopulated && view === 'agenda' ? (
         <div className={styles.calendarContent}>
           <CalendarHeader />
           <Agenda />
         </div>
       ) : null}
+
       {!error && isPopulated && view !== 'agenda' ? (
         <div className={styles.calendarContent}>
           <CalendarHeader />

frontend/src/Calendar/CalendarMissingEpisodeSearchButton.tsx

@@ -1,78 +0,0 @@
-import moment from 'moment';
-import React, { useCallback } from 'react';
-import { useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import { useQueueDetails } from 'Activity/Queue/Details/QueueDetailsProvider';
-import AppState from 'App/State/AppState';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import { icons } from 'Helpers/Props';
-import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
-import Queue from 'typings/Queue';
-import { isCommandExecuting } from 'Utilities/Command';
-import isBefore from 'Utilities/Date/isBefore';
-import translate from 'Utilities/String/translate';
-
-function createIsSearchingSelector() {
-  return createSelector(
-    (state: AppState) => state.calendar.searchMissingCommandId,
-    createCommandsSelector(),
-    (searchMissingCommandId, commands) => {
-      if (searchMissingCommandId == null) {
-        return false;
-      }
-
-      return isCommandExecuting(
-        commands.find((command) => {
-          return command.id === searchMissingCommandId;
-        })
-      );
-    }
-  );
-}
-
-function createMissingEpisodeIdsSelector(queueDetails: Queue[]) {
-  return createSelector(
-    (state: AppState) => state.calendar.start,
-    (state: AppState) => state.calendar.end,
-    (state: AppState) => state.calendar.items,
-    (start, end, episodes) => {
-      return episodes.reduce<number[]>((acc, episode) => {
-        const airDateUtc = episode.airDateUtc;
-
-        if (
-          !episode.episodeFileId &&
-          moment(airDateUtc).isAfter(start) &&
-          moment(airDateUtc).isBefore(end) &&
-          isBefore(episode.airDateUtc) &&
-          !queueDetails.some(
-            (details) => !!details.episode && details.episode.id === episode.id
-          )
-        ) {
-          acc.push(episode.id);
-        }
-
-        return acc;
-      }, []);
-    }
-  );
-}
-
-export default function CalendarMissingEpisodeSearchButton() {
-  const queueDetails = useQueueDetails();
-  const missingEpisodeIds = useSelector(
-    createMissingEpisodeIdsSelector(queueDetails)
-  );
-  const isSearchingForMissing = useSelector(createIsSearchingSelector());
-
-  const handlePress = useCallback(() => {}, []);
-
-  return (
-    <PageToolbarButton
-      label={translate('SearchForMissing')}
-      iconName={icons.SEARCH}
-      isDisabled={!missingEpisodeIds.length}
-      isSpinning={isSearchingForMissing}
-      onPress={handlePress}
-    />
-  );
-}

frontend/src/Calendar/CalendarPage.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import moment from 'moment';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import QueueDetails from 'Activity/Queue/Details/QueueDetailsProvider';
+import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import FilterMenu from 'Components/Menu/FilterMenu';
@@ -10,23 +11,24 @@ import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import Episode from 'Episode/Episode';
 import useMeasure from 'Helpers/Hooks/useMeasure';
 import { align, icons } from 'Helpers/Props';
 import NoSeries from 'Series/NoSeries';
 import {
+  searchMissing,
   setCalendarDaysCount,
   setCalendarFilter,
 } from 'Store/Actions/calendarActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
 import createSeriesCountSelector from 'Store/Selectors/createSeriesCountSelector';
-import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
+import { isCommandExecuting } from 'Utilities/Command';
+import isBefore from 'Utilities/Date/isBefore';
 import translate from 'Utilities/String/translate';
 import Calendar from './Calendar';
 import CalendarFilterModal from './CalendarFilterModal';
-import CalendarMissingEpisodeSearchButton from './CalendarMissingEpisodeSearchButton';
 import CalendarLinkModal from './iCal/CalendarLinkModal';
 import Legend from './Legend/Legend';
 import CalendarOptionsModal from './Options/CalendarOptionsModal';
@@ -34,12 +36,60 @@ import styles from './CalendarPage.css';
 
 const MINIMUM_DAY_WIDTH = 120;
 
+function createMissingEpisodeIdsSelector() {
+  return createSelector(
+    (state: AppState) => state.calendar.start,
+    (state: AppState) => state.calendar.end,
+    (state: AppState) => state.calendar.items,
+    (state: AppState) => state.queue.details.items,
+    (start, end, episodes, queueDetails) => {
+      return episodes.reduce<number[]>((acc, episode) => {
+        const airDateUtc = episode.airDateUtc;
+
+        if (
+          !episode.episodeFileId &&
+          moment(airDateUtc).isAfter(start) &&
+          moment(airDateUtc).isBefore(end) &&
+          isBefore(episode.airDateUtc) &&
+          !queueDetails.some(
+            (details) => !!details.episode && details.episode.id === episode.id
+          )
+        ) {
+          acc.push(episode.id);
+        }
+
+        return acc;
+      }, []);
+    }
+  );
+}
+
+function createIsSearchingSelector() {
+  return createSelector(
+    (state: AppState) => state.calendar.searchMissingCommandId,
+    createCommandsSelector(),
+    (searchMissingCommandId, commands) => {
+      if (searchMissingCommandId == null) {
+        return false;
+      }
+
+      return isCommandExecuting(
+        commands.find((command) => {
+          return command.id === searchMissingCommandId;
+        })
+      );
+    }
+  );
+}
+
 function CalendarPage() {
   const dispatch = useDispatch();
 
-  const { selectedFilterKey, filters, items } = useSelector(
+  const { selectedFilterKey, filters } = useSelector(
     (state: AppState) => state.calendar
   );
+  const missingEpisodeIds = useSelector(createMissingEpisodeIdsSelector());
+  const isSearchingForMissing = useSelector(createIsSearchingSelector());
   const isRssSyncExecuting = useSelector(
     createCommandExecutingSelector(commandNames.RSS_SYNC)
   );
@@ -77,6 +127,10 @@ function CalendarPage() {
     );
   }, [dispatch]);
 
+  const handleSearchMissingPress = useCallback(() => {
+    dispatch(searchMissing({ episodeIds: missingEpisodeIds }));
+  }, [missingEpisodeIds, dispatch]);
+
   const handleFilterSelect = useCallback(
     (key: string | number) => {
       dispatch(setCalendarFilter({ selectedFilterKey: key }));
@@ -84,10 +138,6 @@ function CalendarPage() {
     [dispatch]
   );
 
-  const episodeIds = useMemo(() => {
-    return selectUniqueIds<Episode, number>(items, 'id');
-  }, [items]);
-
   useEffect(() => {
     if (width === 0) {
       return;
@@ -102,67 +152,71 @@ function CalendarPage() {
   }, [width, dispatch]);
 
   return (
-    <QueueDetails episodeIds={episodeIds}>
-      <PageContent title={translate('Calendar')}>
-        <PageToolbar>
-          <PageToolbarSection>
-            <PageToolbarButton
-              label={translate('ICalLink')}
-              iconName={icons.CALENDAR}
-              onPress={handleGetCalendarLinkPress}
-            />
+    <PageContent title={translate('Calendar')}>
+      <PageToolbar>
+        <PageToolbarSection>
+          <PageToolbarButton
+            label={translate('ICalLink')}
+            iconName={icons.CALENDAR}
+            onPress={handleGetCalendarLinkPress}
+          />
 
-            <PageToolbarSeparator />
+          <PageToolbarSeparator />
 
-            <PageToolbarButton
-              label={translate('RssSync')}
-              iconName={icons.RSS}
-              isSpinning={isRssSyncExecuting}
-              onPress={handleRssSyncPress}
-            />
+          <PageToolbarButton
+            label={translate('RssSync')}
+            iconName={icons.RSS}
+            isSpinning={isRssSyncExecuting}
+            onPress={handleRssSyncPress}
+          />
 
-            <CalendarMissingEpisodeSearchButton />
-          </PageToolbarSection>
+          <PageToolbarButton
+            label={translate('SearchForMissing')}
+            iconName={icons.SEARCH}
+            isDisabled={!missingEpisodeIds.length}
+            isSpinning={isSearchingForMissing}
+            onPress={handleSearchMissingPress}
+          />
+        </PageToolbarSection>
 
-          <PageToolbarSection alignContent={align.RIGHT}>
-            <PageToolbarButton
-              label={translate('Options')}
-              iconName={icons.POSTER}
-              onPress={handleOptionsPress}
-            />
+        <PageToolbarSection alignContent={align.RIGHT}>
+          <PageToolbarButton
+            label={translate('Options')}
+            iconName={icons.POSTER}
+            onPress={handleOptionsPress}
+          />
 
-            <FilterMenu
-              alignMenu={align.RIGHT}
-              isDisabled={!hasSeries}
-              selectedFilterKey={selectedFilterKey}
-              filters={filters}
-              customFilters={customFilters}
-              filterModalConnectorComponent={CalendarFilterModal}
-              onFilterSelect={handleFilterSelect}
-            />
-          </PageToolbarSection>
-        </PageToolbar>
+          <FilterMenu
+            alignMenu={align.RIGHT}
+            isDisabled={!hasSeries}
+            selectedFilterKey={selectedFilterKey}
+            filters={filters}
+            customFilters={customFilters}
+            filterModalConnectorComponent={CalendarFilterModal}
+            onFilterSelect={handleFilterSelect}
+          />
+        </PageToolbarSection>
+      </PageToolbar>
 
-        <PageContentBody
-          ref={pageContentRef}
-          className={styles.calendarPageBody}
-          innerClassName={styles.calendarInnerPageBody}
-        >
-          {isMeasured ? <PageComponent totalItems={0} /> : <div />}
-          {hasSeries && <Legend />}
-        </PageContentBody>
+      <PageContentBody
+        ref={pageContentRef}
+        className={styles.calendarPageBody}
+        innerClassName={styles.calendarInnerPageBody}
+      >
+        {isMeasured ? <PageComponent totalItems={0} /> : <div />}
+        {hasSeries && <Legend />}
+      </PageContentBody>
 
-        <CalendarLinkModal
-          isOpen={isCalendarLinkModalOpen}
-          onModalClose={handleGetCalendarLinkModalClose}
-        />
+      <CalendarLinkModal
+        isOpen={isCalendarLinkModalOpen}
+        onModalClose={handleGetCalendarLinkModalClose}
+      />
 
-        <CalendarOptionsModal
-          isOpen={isOptionsModalOpen}
-          onModalClose={handleOptionsModalClose}
-        />
-      </PageContent>
-    </QueueDetails>
+      <CalendarOptionsModal
+        isOpen={isOptionsModalOpen}
+        onModalClose={handleOptionsModalClose}
+      />
+    </PageContent>
   );
 }
 

frontend/src/Calendar/Events/CalendarEvent.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import moment from 'moment';
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useQueueItemForEpisode } from 'Activity/Queue/Details/QueueDetailsProvider';
 import AppState from 'App/State/AppState';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
@@ -13,6 +12,7 @@ import getFinaleTypeName from 'Episode/getFinaleTypeName';
 import useEpisodeFile from 'EpisodeFile/useEpisodeFile';
 import { icons, kinds } from 'Helpers/Props';
 import useSeries from 'Series/useSeries';
+import { createQueueItemSelectorForHook } from 'Store/Selectors/createQueueItemSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import formatTime from 'Utilities/Date/formatTime';
 import padNumber from 'Utilities/Number/padNumber';
@@ -58,7 +58,7 @@ function CalendarEvent(props: CalendarEventProps) {
 
   const series = useSeries(seriesId);
   const episodeFile = useEpisodeFile(episodeFileId);
-  const queueItem = useQueueItemForEpisode(id);
+  const queueItem = useSelector(createQueueItemSelectorForHook(id));
 
   const { timeFormat, enableColorImpairedMode } = useSelector(
     createUISettingsSelector()

frontend/src/Calendar/Events/CalendarEventGroup.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import moment from 'moment';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useIsDownloadingEpisodes } from 'Activity/Queue/Details/QueueDetailsProvider';
+import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
@@ -18,6 +18,17 @@ import translate from 'Utilities/String/translate';
 import CalendarEvent from './CalendarEvent';
 import styles from './CalendarEventGroup.css';
 
+function createIsDownloadingSelector(episodeIds: number[]) {
+  return createSelector(
+    (state: AppState) => state.queue.details,
+    (details) => {
+      return details.items.some((item) => {
+        return !!(item.episodeId && episodeIds.includes(item.episodeId));
+      });
+    }
+  );
+}
+
 interface CalendarEventGroupProps {
   episodeIds: number[];
   seriesId: number;
@@ -31,7 +42,7 @@ function CalendarEventGroup({
   events,
   onEventModalOpenToggle,
 }: CalendarEventGroupProps) {
-  const isDownloading = useIsDownloadingEpisodes(episodeIds);
+  const isDownloading = useSelector(createIsDownloadingSelector(episodeIds));
   const series = useSeries(seriesId)!;
 
   const { timeFormat, enableColorImpairedMode } = useSelector(
@@ -50,10 +61,10 @@ function CalendarEventGroup({
   const endTime = moment(lastEpisode.airDateUtc).add(series.runtime, 'minutes');
   const seasonNumber = firstEpisode.seasonNumber;
 
-  const { allDownloaded, anyGrabbed, anyMonitored, allAbsoluteEpisodeNumbers } =
+  const { allDownloaded, anyQueued, anyMonitored, allAbsoluteEpisodeNumbers } =
     useMemo(() => {
       let files = 0;
-      let grabbed = 0;
+      let queued = 0;
       let monitored = 0;
       let absoluteEpisodeNumbers = 0;
 
@@ -62,8 +73,8 @@ function CalendarEventGroup({
           files++;
         }
 
-        if (event.grabbed) {
-          grabbed++;
+        if (event.queued) {
+          queued++;
         }
 
         if (series.monitored && event.monitored) {
@@ -77,13 +88,13 @@ function CalendarEventGroup({
 
       return {
         allDownloaded: files === events.length,
-        anyGrabbed: grabbed > 0,
+        anyQueued: queued > 0,
         anyMonitored: monitored > 0,
         allAbsoluteEpisodeNumbers: absoluteEpisodeNumbers === events.length,
       };
     }, [series, events]);
 
-  const anyDownloading = isDownloading || anyGrabbed;
+  const anyDownloading = isDownloading || anyQueued;
 
   const statusStyle = getStatusStyle(
     allDownloaded,

frontend/src/Calendar/Events/CalendarEventQueueDetails.tsx

@@ -10,7 +10,7 @@ import {
 interface CalendarEventQueueDetailsProps {
   title: string;
   size: number;
-  sizeLeft: number;
+  sizeleft: number;
   estimatedCompletionTime?: string;
   status: string;
   trackedDownloadState: QueueTrackedDownloadState;
@@ -22,7 +22,7 @@ interface CalendarEventQueueDetailsProps {
 function CalendarEventQueueDetails({
   title,
   size,
-  sizeLeft,
+  sizeleft,
   estimatedCompletionTime,
   status,
   trackedDownloadState,
@@ -30,13 +30,13 @@ function CalendarEventQueueDetails({
   statusMessages,
   errorMessage,
 }: CalendarEventQueueDetailsProps) {
-  const progress = size ? 100 - (sizeLeft / size) * 100 : 0;
+  const progress = size ? 100 - (sizeleft / size) * 100 : 0;
 
   return (
     <QueueDetails
       title={title}
       size={size}
-      sizeLeft={sizeLeft}
+      sizeleft={sizeleft}
       estimatedCompletionTime={estimatedCompletionTime}
       status={status}
       trackedDownloadState={trackedDownloadState}

frontend/src/Calendar/iCal/CalendarLinkModalContent.tsx

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

frontend/src/Components/Form/AutoSuggestInput.tsx

@@ -1,4 +1,3 @@
-import { autoUpdate, flip, size, useFloating } from '@floating-ui/react-dom';
 import classNames from 'classnames';
 import React, {
   FocusEvent,
@@ -20,6 +19,8 @@ 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';
@@ -36,6 +37,7 @@ interface AutoSuggestInputProps<T>
   hasError?: boolean;
   hasWarning?: boolean;
   enforceMaxHeight?: boolean;
+  minHeight?: number;
   maxHeight?: number;
   renderInputComponent?: (
     inputProps: RenderInputComponentProps,
@@ -68,6 +70,7 @@ function AutoSuggestInput<T = any>(props: AutoSuggestInputProps<T>) {
     enforceMaxHeight = true,
     hasError,
     hasWarning,
+    minHeight = 50,
     maxHeight = 200,
     getSuggestionValue,
     renderSuggestion,
@@ -86,60 +89,95 @@ function AutoSuggestInput<T = any>(props: AutoSuggestInputProps<T>) {
   const updater = useRef<(() => void) | null>(null);
   const previousSuggestions = usePrevious(suggestions);
 
-  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 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 createRenderInputComponent = useCallback(
     (inputProps: RenderInputComponentProps) => {
-      if (renderInputComponent) {
-        return renderInputComponent(inputProps, refs.setReference);
-      }
-
       return (
-        <div ref={refs.setReference}>
-          <input {...inputProps} />
-        </div>
+        <Reference>
+          {({ ref }) => {
+            if (renderInputComponent) {
+              return renderInputComponent(inputProps, ref);
+            }
+
+            return (
+              <div ref={ref}>
+                <input {...inputProps} />
+              </div>
+            );
+          }}
+        </Reference>
       );
     },
-    [refs.setReference, renderInputComponent]
+    [renderInputComponent]
   );
 
   const renderSuggestionsContainer = useCallback(
     ({ containerProps, children }: RenderSuggestionsContainerParams) => {
       return (
-        <div
-          ref={refs.setFloating}
-          style={floatingStyles}
-          className={children ? styles.suggestionsContainerOpen : undefined}
-        >
-          <div
-            {...containerProps}
-            style={{
-              maxHeight: enforceMaxHeight ? maxHeight : undefined,
+        <Portal>
+          <Popper
+            placement="bottom-start"
+            modifiers={{
+              computeMaxHeight: {
+                order: 851,
+                enabled: true,
+                fn: handleComputeMaxHeight,
+              },
+              flip: {
+                padding: minHeight,
+              },
             }}
           >
-            {children}
-          </div>
-        </div>
+            {({ 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>
       );
     },
-    [enforceMaxHeight, floatingStyles, maxHeight, refs.setFloating]
+    [minHeight, handleComputeMaxHeight]
   );
 
   const handleInputKeyDown = useCallback(
@@ -198,21 +236,23 @@ function AutoSuggestInput<T = any>(props: AutoSuggestInputProps<T>) {
   }, [suggestions, previousSuggestions]);
 
   return (
-    <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}
+      />
+    </Manager>
   );
 }
 

frontend/src/Components/Form/FloatInput.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import NumberInput, { NumberInputChanged } from './NumberInput';
-
-export interface FloatInputProps {
-  name: string;
-  value?: number | null;
-  min?: number;
-  max?: number;
-  step?: number;
-  placeholder?: string;
-  className?: string;
-  onChange: (change: NumberInputChanged) => void;
-}
-
-function FloatInput(props: FloatInputProps) {
-  return <NumberInput {...props} isFloat={true} />;
-}
-
-export default FloatInput;

frontend/src/Components/Form/FormInputGroup.tsx

@@ -7,7 +7,6 @@ import translate from 'Utilities/String/translate';
 import AutoCompleteInput, { AutoCompleteInputProps } from './AutoCompleteInput';
 import CaptchaInput, { CaptchaInputProps } from './CaptchaInput';
 import CheckInput, { CheckInputProps } from './CheckInput';
-import FloatInput, { FloatInputProps } from './FloatInput';
 import { FormInputButtonProps } from './FormInputButton';
 import FormInputHelpText from './FormInputHelpText';
 import KeyValueListInput, { KeyValueListInputProps } from './KeyValueListInput';
@@ -66,7 +65,7 @@ const componentMap: Record<InputType, ElementType> = {
   downloadClientSelect: DownloadClientSelectInput,
   dynamicSelect: ProviderDataSelectInput,
   file: TextInput,
-  float: FloatInput,
+  float: NumberInput,
   indexerFlagsSelect: IndexerFlagsSelectInput,
   indexerSelect: IndexerSelectInput,
   keyValueList: KeyValueListInput,
@@ -111,7 +110,7 @@ type PickProps<V, C extends InputType> = C extends 'text'
   : C extends 'file'
   ? TextInputProps
   : C extends 'float'
-  ? FloatInputProps
+  ? TextInputProps
   : C extends 'indexerFlagsSelect'
   ? IndexerFlagsSelectInputProps
   : C extends 'indexerSelect'
@@ -140,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<V>
+  ? SeriesTagInputProps
   : C extends 'seriesTypeSelect'
   ? SeriesTypeSelectInputProps
   : C extends 'tag'
-  ? SeriesTagInputProps<V>
+  ? SeriesTagInputProps
   : C extends 'tagSelect'
   ? TagSelectInputProps
   : C extends 'text'
@@ -223,7 +222,7 @@ function FormInputGroup<T, C extends InputType>(
     <div className={containerClassName}>
       <div className={className}>
         <div className={styles.inputContainer}>
-          {/* @ts-expect-error - types are validated already */}
+          {/* @ts-expect-error - tpyes are validated already */}
           <InputComponent
             className={inputClassName}
             helpText={helpText}

frontend/src/Components/Form/NumberInput.tsx

@@ -24,17 +24,13 @@ function parseValue(
   return newValue;
 }
 
-export interface NumberInputChanged extends InputChanged<number | null> {
-  isFloat?: boolean;
-}
-
 export interface NumberInputProps
   extends Omit<TextInputProps, 'value' | 'onChange'> {
   value?: number | null;
   min?: number;
   max?: number;
   isFloat?: boolean;
-  onChange: (change: NumberInputChanged) => void;
+  onChange: (input: InputChanged<number | null>) => void;
 }
 
 function NumberInput({
@@ -54,14 +50,11 @@ function NumberInput({
 
   const handleChange = useCallback(
     ({ name, value: newValue }: InputChanged<string>) => {
-      const parsedValue = parseValue(newValue, isFloat, min, max);
-
-      setValue(parsedValue == null ? '' : parsedValue.toString());
+      setValue(newValue);
 
       onChange({
         name,
-        value: parsedValue,
-        isFloat,
+        value: parseValue(newValue, isFloat, min, max),
       });
     },
     [isFloat, min, max, onChange, setValue]
@@ -82,7 +75,6 @@ function NumberInput({
     onChange({
       name,
       value: parsedValue,
-      isFloat,
     });
 
     isFocused.current = false;

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,10 +42,15 @@
   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,6 +13,7 @@ interface CssExports {
   'mobileCloseButton': string;
   'mobileCloseButtonContainer': string;
   'options': string;
+  'optionsContainer': string;
   'optionsInnerModalBody': string;
   'optionsModal': string;
   'optionsModalBody': string;

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

@@ -1,13 +1,3 @@
-import {
-  autoUpdate,
-  flip,
-  FloatingPortal,
-  size,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-} from '@floating-ui/react';
 import classNames from 'classnames';
 import React, {
   ElementType,
@@ -16,24 +6,31 @@ 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;
 }
@@ -165,6 +162,10 @@ 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)
   );
@@ -174,38 +175,6 @@ 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;
@@ -220,10 +189,60 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     return '';
   }, [value, values, isMultiSelect]);
 
-  const handlePress = useCallback(() => {
-    setIsOpen((prevIsOpen) => !prevIsOpen);
+  // 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]);
+
   const handleSelect = useCallback(
     (newValue: ArrayElement<V>) => {
       const additionalProperties = values.find(
@@ -279,9 +298,10 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
 
   const handleFocus = useCallback(() => {
     if (isOpen) {
+      removeListener();
       setIsOpen(false);
     }
-  }, [isOpen, setIsOpen]);
+  }, [isOpen, setIsOpen, removeListener]);
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLButtonElement>) => {
@@ -376,121 +396,171 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
   );
 
   useEffect(() => {
-    if (isOpen) {
-      onOpen?.();
+    if (updater.current) {
+      updater.current();
     }
-  }, [isOpen, onOpen]);
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      addListener();
+    } else {
+      removeListener();
+    }
+
+    return removeListener;
+  }, [isOpen, addListener, removeListener]);
 
   return (
-    <>
-      <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}
+    <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}
 
-              {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>
+                      {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}
+                    <div
+                      className={
+                        isDisabled
+                          ? styles.dropdownArrowContainerDisabled
+                          : styles.dropdownArrowContainer
+                      }
+                    >
+                      {isFetching ? (
+                        <LoadingIndicator
+                          className={styles.loading}
+                          size={20}
+                        />
+                      ) : null}
 
-              {isFetching ? null : <Icon name={icons.CARET_DOWN} />}
+                      {isFetching ? null : <Icon name={icons.CARET_DOWN} />}
+                    </div>
+                  </Link>
+                )}
+              </div>
             </div>
-          </Link>
-        )}
-      </div>
-
-      {!isMobile && isOpen ? (
-        <FloatingPortal id="portal-root">
-          <Scroller
-            ref={refs.setFloating}
-            className={styles.options}
-            style={floatingStyles}
-            {...getFloatingProps()}
+          )}
+        </Reference>
+        <Portal>
+          <Popper
+            placement="bottom-start"
+            modifiers={{
+              computeMaxHeight: {
+                order: 851,
+                enabled: true,
+                fn: handleComputeMaxHeight,
+              },
+            }}
           >
-            {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;
+            {({ ref, style, scheduleUpdate }) => {
+              updater.current = scheduleUpdate;
 
               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}
+                <div
+                  ref={ref}
+                  id={optionsId}
+                  className={styles.optionsContainer}
+                  style={{
+                    ...style,
+                    minWidth: width,
+                  }}
                 >
-                  {v.value}
-                </OptionComponent>
+                  {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>
               );
-            })}
-          </Scroller>
-        </FloatingPortal>
-      ) : null}
+            }}
+          </Popper>
+        </Portal>
+      </Manager>
 
       {isMobile ? (
         <Modal
@@ -545,7 +615,7 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
           </ModalBody>
         </Modal>
       ) : null}
-    </>
+    </div>
   );
 }
 

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

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

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

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

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

@@ -21,7 +21,6 @@ const ADD_NEW_KEY = 'addNew';
 
 export interface RootFolderSelectInputValue
   extends EnhancedSelectInputValue<string> {
-  freeSpace?: number;
   isMissing?: boolean;
 }
 
@@ -43,58 +42,66 @@ 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,
+  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,
           isMissing: false,
-        };
+        });
       }
-    );
 
-    if (includeNoChange) {
-      values.unshift({
-        key: 'noChange',
-        get value() {
-          return translate('NoChange');
-        },
-        isDisabled: includeNoChangeDisabled,
-        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,
+        });
+      }
 
-    if (!values.length) {
       values.push({
-        key: '',
-        value: '',
-        isDisabled: true,
-        isHidden: true,
+        key: ADD_NEW_KEY,
+        value: translate('AddANewPath'),
       });
+
+      return {
+        values,
+        isSaving: rootFolders.isSaving,
+        saveError: rootFolders.saveError,
+      };
     }
-
-    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,16 +18,18 @@ interface RootFolderSelectInputOptionProps
   isWindows?: boolean;
 }
 
-function RootFolderSelectInputOption({
-  id,
-  value,
-  freeSpace,
-  isMissing,
-  seriesFolder,
-  isMobile,
-  isWindows,
-  ...otherProps
-}: RootFolderSelectInputOptionProps) {
+function RootFolderSelectInputOption(props: RootFolderSelectInputOptionProps) {
+  const {
+    id,
+    value,
+    freeSpace,
+    isMissing,
+    seriesFolder,
+    isMobile,
+    isWindows,
+    ...otherProps
+  } = props;
+
   const slashCharacter = isWindows ? '\\' : '/';
 
   return (

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

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

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

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

frontend/src/Components/Form/SelectInput.tsx

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

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

@@ -1,25 +1,21 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { addTag } from 'Store/Actions/tagActions';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import { InputChanged } from 'typings/inputs';
 import sortByProp from 'Utilities/Array/sortByProp';
-import TagInput, { TagBase, TagInputProps } from './TagInput';
+import TagInput, { TagBase } from './TagInput';
 
 interface SeriesTag extends TagBase {
   id: number;
   name: string;
 }
 
-export interface SeriesTagInputProps<V>
-  extends Omit<
-    TagInputProps<SeriesTag>,
-    'tags' | 'tagList' | 'onTagAdd' | 'onTagDelete' | 'onChange'
-  > {
+export interface SeriesTagInputProps {
   name: string;
-  value: V;
-  onChange: (change: InputChanged<V>) => void;
+  value: number[];
+  onChange: (change: InputChanged<number[]>) => void;
 }
 
 const VALID_TAG_REGEX = new RegExp('[^-_a-z0-9]', 'i');
@@ -63,49 +59,28 @@ function createSeriesTagsSelector(tags: number[]) {
   });
 }
 
-export default function SeriesTagInput<V extends number | number[]>({
+export default function SeriesTagInput({
   name,
   value,
   onChange,
-  ...otherProps
-}: SeriesTagInputProps<V>) {
+}: SeriesTagInputProps) {
   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(arrayValue)
+    createSeriesTagsSelector(value)
   );
 
   const handleTagCreated = useCallback(
     (tag: SeriesTag) => {
-      if (isArray) {
-        onChange({ name, value: [...value, tag.id] as V });
-      } else {
-        onChange({
-          name,
-          value: tag.id as V,
-        });
-      }
+      onChange({ name, value: [...value, tag.id] });
     },
-    [name, value, isArray, onChange]
+    [name, value, onChange]
   );
 
   const handleTagAdd = useCallback(
     (newTag: SeriesTag) => {
       if (newTag.id) {
-        if (isArray) {
-          onChange({ name, value: [...value, newTag.id] as V });
-        } else {
-          onChange({ name, value: newTag.id as V });
-        }
+        onChange({ name, value: [...value, newTag.id] });
 
         return;
       }
@@ -121,26 +96,21 @@ export default function SeriesTagInput<V extends number | number[]>({
         );
       }
     },
-    [name, value, isArray, allTags, handleTagCreated, onChange, dispatch]
+    [name, value, allTags, handleTagCreated, onChange, dispatch]
   );
 
   const handleTagDelete = useCallback(
     ({ index }: { index: number }) => {
-      if (isArray) {
-        const newValue = value.slice();
-        newValue.splice(index, 1);
+      const newValue = value.slice();
+      newValue.splice(index, 1);
 
-        onChange({ name, value: newValue as V });
-      } else {
-        onChange({ name, value: 0 as V });
-      }
+      onChange({ name, value: newValue });
     },
-    [name, value, isArray, onChange]
+    [name, value, onChange]
   );
 
   return (
     <TagInput
-      {...otherProps}
       name={name}
       tags={tags}
       tagList={tagList}

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

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

frontend/src/Components/Icon.css

@@ -26,10 +26,6 @@
   color: var(--warningColor);
 }
 
-.primary {
-  color: var(--primaryColor);
-}
-
 .purple {
   color: var(--purple);
 }

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

@@ -6,7 +6,6 @@ interface CssExports {
   'disabled': string;
   'info': string;
   'pink': string;
-  'primary': string;
   'purple': string;
   'success': string;
   'warning': string;

frontend/src/Components/Menu/Menu.tsx

@@ -1,22 +1,41 @@
-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;
@@ -30,7 +49,9 @@ 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);
 
@@ -49,14 +70,45 @@ function Menu({
     setMaxHeight(height);
   }, [menuButtonId]);
 
-  const handleMenuButtonPress = useCallback(() => {
-    setIsMenuOpen((isOpen) => !isOpen);
-  }, []);
+  const handleWindowClick = useCallback(
+    (event: MouseEvent) => {
+      const menuButton = document.getElementById(menuButtonId);
 
-  const childrenArray = React.Children.toArray(children);
-  const button = React.cloneElement(childrenArray[0] as ReactElement, {
-    onPress: handleMenuButtonPress,
-  });
+      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 handleWindowResize = useCallback(() => {
     updateMaxHeight();
@@ -68,15 +120,32 @@ 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;
@@ -84,88 +153,52 @@ 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]);
-
-  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,
+  }, [
+    isMenuOpen,
+    handleWindowResize,
+    handleWindowScroll,
+    handleWindowClick,
+    handleTouchStart,
   ]);
 
   return (
-    <>
-      <div
-        ref={refs.setReference}
-        {...getReferenceProps()}
-        id={menuButtonId}
-        className={className}
-      >
-        {button}
-      </div>
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <div ref={ref} id={menuButtonId} className={className}>
+            {button}
+          </div>
+        )}
+      </Reference>
 
-      {isMenuOpen ? (
-        <FloatingPortal id="portal-root">
-          {React.cloneElement(childrenArray[1] as ReactElement, {
-            forwardedRef: refs.setFloating,
-            style: {
-              maxHeight,
-              ...floatingStyles,
-            },
-            isOpen: isMenuOpen,
-            ...getFloatingProps(),
-          })}
-        </FloatingPortal>
-      ) : null}
-    </>
+      <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>
   );
 }
 

frontend/src/Components/Modal/Modal.css

@@ -19,7 +19,6 @@
 .modal {
   position: relative;
   display: flex;
-  max-width: 90%;
   max-height: 90%;
   border-radius: 6px;
   opacity: 1;
@@ -89,6 +88,13 @@
 }
 
 @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/PageHeader.css

@@ -1,4 +1,5 @@
 .header {
+  z-index: 3;
   display: flex;
   align-items: center;
   flex: 0 0 auto;

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 a suggestion is not selected go to the first series,
+      // If an suggestion is not selected go to the first series,
       // otherwise go to the selected series.
 
       const selectedSuggestion =

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

@@ -7,40 +7,6 @@
   transform: translateX(0);
 }
 
-.sidebarHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: $headerHeight;
-}
-
-.logoContainer {
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-}
-
-.logoLink {
-  line-height: 0;
-}
-
-.logo {
-  width: 32px;
-  height: 32px;
-}
-
-.sidebarCloseButton {
-  composes: button from '~Components/Link/IconButton.css';
-
-  margin-right: 15px;
-  color: #e1e2e3;
-  text-align: center;
-
-  &:hover {
-    color: var(--sonarrBlue);
-  }
-}
-
 .sidebar {
   display: flex;
   flex-direction: column;

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

@@ -1,13 +1,8 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'logo': string;
-  'logoContainer': string;
-  'logoLink': string;
   'sidebar': string;
-  'sidebarCloseButton': string;
   'sidebarContainer': string;
-  'sidebarHeader': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

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

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, {
   useCallback,
   useEffect,
@@ -10,8 +11,6 @@ import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router';
 import QueueStatus from 'Activity/Queue/Status/QueueStatus';
 import { IconName } from 'Components/Icon';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
 import OverlayScroller from 'Components/Scroller/OverlayScroller';
 import Scroller from 'Components/Scroller/Scroller';
 import usePrevious from 'Helpers/Hooks/usePrevious';
@@ -231,6 +230,10 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
     transition: 'none',
     transform: isSidebarVisible ? 0 : SIDEBAR_WIDTH * -1,
   });
+  const [sidebarStyle, setSidebarStyle] = useState({
+    top: dimensions.headerHeight,
+    height: `${window.innerHeight - HEADER_HEIGHT}px`,
+  });
 
   const urlBase = window.Sonarr.urlBase;
   const pathname = urlBase
@@ -296,6 +299,22 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
     dispatch(setIsSidebarVisible({ isSidebarVisible: false }));
   }, [dispatch]);
 
+  const handleWindowScroll = useCallback(() => {
+    const windowScroll =
+      window.scrollY == null
+        ? document.documentElement.scrollTop
+        : window.scrollY;
+    const sidebarTop = Math.max(HEADER_HEIGHT - windowScroll, 0);
+    const sidebarHeight = window.innerHeight - sidebarTop;
+
+    if (isSmallScreen) {
+      setSidebarStyle({
+        top: `${sidebarTop}px`,
+        height: `${sidebarHeight}px`,
+      });
+    }
+  }, [isSmallScreen]);
+
   const handleTouchStart = useCallback(
     (event: TouchEvent) => {
       const touches = event.touches;
@@ -340,50 +359,44 @@ 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: isSidebarVisible ? 0 : SIDEBAR_WIDTH * -1,
-        });
-      }
+    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,
+      });
+    }
 
-      touchStartX.current = null;
-      touchStartY.current = null;
-    },
-    [isSidebarVisible]
-  );
+    touchStartX.current = null;
+    touchStartY.current = null;
+  }, []);
 
   const handleTouchCancel = useCallback(() => {
     touchStartX.current = null;
     touchStartY.current = null;
   }, []);
 
-  const handleSidebarClosePress = useCallback(() => {
-    dispatch(setIsSidebarVisible({ isSidebarVisible: false }));
-  }, [dispatch]);
-
   useEffect(() => {
     if (isSmallScreen) {
       window.addEventListener('click', handleWindowClick, { capture: true });
+      window.addEventListener('scroll', handleWindowScroll);
       window.addEventListener('touchstart', handleTouchStart);
       window.addEventListener('touchmove', handleTouchMove);
       window.addEventListener('touchend', handleTouchEnd);
@@ -392,6 +405,7 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
 
     return () => {
       window.removeEventListener('click', handleWindowClick, { capture: true });
+      window.removeEventListener('scroll', handleWindowScroll);
       window.removeEventListener('touchstart', handleTouchStart);
       window.removeEventListener('touchmove', handleTouchMove);
       window.removeEventListener('touchend', handleTouchEnd);
@@ -400,6 +414,7 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
   }, [
     isSmallScreen,
     handleWindowClick,
+    handleWindowScroll,
     handleTouchStart,
     handleTouchMove,
     handleTouchEnd,
@@ -438,37 +453,13 @@ function PageSidebar({ isSidebarVisible, isSmallScreen }: PageSidebarProps) {
   return (
     <div
       ref={sidebarRef}
-      className={styles.sidebarContainer}
+      className={classNames(styles.sidebarContainer)}
       style={containerStyle}
     >
-      {isSmallScreen ? (
-        <div className={styles.sidebarHeader}>
-          <div className={styles.logoContainer}>
-            <Link className={styles.logoLink} to="/">
-              <img
-                className={styles.logo}
-                src={`${window.Sonarr.urlBase}/Content/Images/logo.svg`}
-                alt="Sonarr Logo"
-              />
-            </Link>
-          </div>
-
-          <IconButton
-            className={styles.sidebarCloseButton}
-            name={icons.CLOSE}
-            aria-label={translate('Close')}
-            size={20}
-            onPress={handleSidebarClosePress}
-          />
-        </div>
-      ) : null}
-
       <ScrollerComponent
         className={styles.sidebar}
         scrollDirection="vertical"
-        style={{
-          height: `${window.innerHeight - HEADER_HEIGHT}px`,
-        }}
+        style={sidebarStyle}
       >
         <div>
           {LINKS.map((link) => {

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

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

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

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

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

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

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

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

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

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

frontend/src/Components/SignalRListener.tsx

@@ -3,18 +3,19 @@ import {
   HubConnectionBuilder,
   LogLevel,
 } from '@microsoft/signalr';
-import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ModelBase from 'App/ModelBase';
+import AppState from 'App/State/AppState';
 import Command from 'Commands/Command';
 import { setAppValue, setVersion } from 'Store/Actions/appActions';
-import { removeItem, updateItem } from 'Store/Actions/baseActions';
+import { removeItem, update, updateItem } from 'Store/Actions/baseActions';
 import {
   fetchCommands,
   finishCommand,
   updateCommand,
 } from 'Store/Actions/commandActions';
+import { fetchQueue, fetchQueueDetails } from 'Store/Actions/queueActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import { fetchSeries } from 'Store/Actions/seriesActions';
 import { fetchQualityDefinitions } from 'Store/Actions/settingsActions';
@@ -32,13 +33,15 @@ interface SignalRMessage {
     resource: ModelBase;
     version: string;
   };
-  version: number | undefined;
 }
 
 function SignalRListener() {
-  const queryClient = useQueryClient();
   const dispatch = useDispatch();
 
+  const isQueuePopulated = useSelector(
+    (state: AppState) => state.queue.paged.isPopulated
+  );
+
   const connection = useRef<HubConnection | null>(null);
 
   const handleStartFail = useRef((error: unknown) => {
@@ -94,14 +97,9 @@ function SignalRListener() {
   });
 
   const handleReceiveMessage = useRef((message: SignalRMessage) => {
-    console.debug(
-      `[signalR] received ${message.name}${
-        message.version ? ` v${message.version}` : ''
-      }`,
-      message.body
-    );
+    console.debug('[signalR] received', message.name, message.body);
 
-    const { name, body, version = 0 } = message;
+    const { name, body } = message;
 
     if (name === 'calendar') {
       if (body.action === 'updated') {
@@ -237,36 +235,20 @@ function SignalRListener() {
     }
 
     if (name === 'queue') {
-      if (version < 5) {
-        return;
+      if (isQueuePopulated) {
+        dispatch(fetchQueue());
       }
 
-      queryClient.invalidateQueries({ queryKey: ['/queue'] });
       return;
     }
 
     if (name === 'queue/details') {
-      if (version < 5) {
-        return;
-      }
-
-      queryClient.invalidateQueries({ queryKey: ['/queue/details'] });
+      dispatch(fetchQueueDetails());
       return;
     }
 
     if (name === 'queue/status') {
-      if (version < 5) {
-        return;
-      }
-
-      const statusDetails = queryClient.getQueriesData({
-        queryKey: ['/queue/status'],
-      });
-
-      statusDetails.forEach(([queryKey]) => {
-        queryClient.setQueryData(queryKey, () => body.resource);
-      });
-
+      dispatch(update({ section: 'queue.status', data: body.resource }));
       return;
     }
 

frontend/src/Components/Table/Cells/RelativeDateCell.tsx

@@ -20,6 +20,7 @@ function RelativeDateCell(props: RelativeDateCellProps) {
     date,
     includeSeconds = false,
     includeTime = false,
+
     component: Component = TableRowCell,
     ...otherProps
   } = props;

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

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