Multiple Translations updated by Weblate

ignore-downstream

Co-authored-by: Anonymous <noreply@weblate.org>
Co-authored-by: seidnerj <jonathan.seidner@gmail.com>
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ar/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/bg/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ca/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/cs/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/da/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/de/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/el/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/es/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/fi/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/fr/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/he/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/hi/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/hr/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/hu/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/id/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/is/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/it/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ja/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ko/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/nb_NO/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/nl/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/pl/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/pt_BR/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ro/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/ru/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/sk/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/sv/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/th/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/tr/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/uk/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/vi/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/zh_CN/
Translate-URL: https://translate.servarr.com/projects/servarr/prowlarr/zh_TW/
Translation: Servarr/Prowlarr

.github/labeler.yml

@@ -1,19 +1,31 @@
 'Area: API':
-  - src/Prowlarr.Api.V1/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/Prowlarr.Api.V1/**/*
 
 'Area: Db-migration':
-  - src/NzbDrone.Core/Datastore/Migration/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Datastore/Migration/*
 
 'Area: Download Clients':
-  - src/NzbDrone.Core/Download/Clients/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Download/Clients/**/*
 
 'Area: Indexer':
-  - src/NzbDrone.Core/Indexers/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Indexers/**/*
 
 'Area: Notifications':
-  - src/NzbDrone.Core/Notifications/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/NzbDrone.Core/Notifications/**/*
 
 'Area: UI':
-  - frontend/**/*
-  - package.json
-  - yarn.lock
+  - changed-files:
+      - any-glob-to-any-file:
+          - frontend/**/*
+          - package.json
+          - yarn.lock

.github/workflows/labeler.yml

@@ -9,4 +9,4 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4
+      - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ github.token }}
           issue-inactive-days: '90'

azure-pipelines.yml

@@ -9,18 +9,18 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.17.0'
+  majorVersion: '1.21.2'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.421'
+  dotnetVersion: '6.0.424'
   nodeVersion: '20.X'
   innoVersion: '6.2.2'
   windowsImage: 'windows-2022'
   linuxImage: 'ubuntu-20.04'
-  macImage: 'macOS-11'
+  macImage: 'macOS-12'
 
 trigger:
   branches:
@@ -166,10 +166,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1075,10 +1075,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1169,7 +1169,7 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@2
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
@@ -1187,21 +1187,16 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@2
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@4
+      - task: reportgenerator@5
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
-      - task: PublishCodeCoverageResults@1
-        displayName: Publish Coverage Report
-        inputs:
-          codeCoverageTool: 'cobertura'
-          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
-          reportDirectory: './CoverageResults/combined/'
+          publishCodeCoverageResults: true
 
   - stage: Report_Out
     dependsOn:

docs.sh

@@ -1,3 +1,7 @@
+#!/bin/bash
+set -e
+
+FRAMEWORK="net6.0"
 PLATFORM=$1
 
 if [ "$PLATFORM" = "Windows" ]; then
@@ -21,17 +25,23 @@ slnFile=src/Prowlarr.sln
 
 platform=Posix
 
+ if [ "$PLATFORM" = "Windows" ]; then
+    application=Prowlarr.Console.dll
+else
+    application=Prowlarr.dll
+fi
+
 dotnet clean $slnFile -c Debug
 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 6.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Prowlarr.Api.V1/openapi.json "$outputFolder/net6.0/$RUNTIME/prowlarr.console.dll" v1 &
+dotnet tool run swagger tofile --output ./src/Prowlarr.Api.V1/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v1 &
 
-sleep 30
+sleep 45
 
 kill %1
 

frontend/src/App/App.js

@@ -12,11 +12,10 @@ function App({ store, history }) {
     <DocumentTitle title={window.Prowlarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <ApplyTheme>
-            <PageConnector>
-              <AppRoutes app={App} />
-            </PageConnector>
-          </ApplyTheme>
+          <ApplyTheme />
+          <PageConnector>
+            <AppRoutes app={App} />
+          </PageConnector>
         </ConnectedRouter>
       </Provider>
     </DocumentTitle>

frontend/src/App/ApplyTheme.js

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, useCallback, useEffect } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import themes from 'Styles/Themes';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.ui.item.theme || window.Prowlarr.theme,
-    (
-      theme
-    ) => {
-      return {
-        theme
-      };
-    }
-  );
-}
-
-function ApplyTheme({ theme, children }) {
-  // Update the CSS Variables
-
-  const updateCSSVariables = useCallback(() => {
-    const arrayOfVariableKeys = Object.keys(themes[theme]);
-    const arrayOfVariableValues = Object.values(themes[theme]);
-
-    // Loop through each array key and set the CSS Variables
-    arrayOfVariableKeys.forEach((cssVariableKey, index) => {
-      // Based on our snippet from MDN
-      document.documentElement.style.setProperty(
-        `--${cssVariableKey}`,
-        arrayOfVariableValues[index]
-      );
-    });
-  }, [theme]);
-
-  // On Component Mount and Component Update
-  useEffect(() => {
-    updateCSSVariables(theme);
-  }, [updateCSSVariables, theme]);
-
-  return <Fragment>{children}</Fragment>;
-}
-
-ApplyTheme.propTypes = {
-  theme: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired
-};
-
-export default connect(createMapStateToProps)(ApplyTheme);

frontend/src/App/ApplyTheme.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment, ReactNode, useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import themes from 'Styles/Themes';
+import AppState from './State/AppState';
+
+interface ApplyThemeProps {
+  children: ReactNode;
+}
+
+function createThemeSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.ui.item.theme || window.Prowlarr.theme,
+    (theme) => {
+      return theme;
+    }
+  );
+}
+
+function ApplyTheme({ children }: ApplyThemeProps) {
+  const theme = useSelector(createThemeSelector());
+
+  const updateCSSVariables = useCallback(() => {
+    Object.entries(themes[theme]).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--${key}`, value);
+    });
+  }, [theme]);
+
+  // On Component Mount and Component Update
+  useEffect(() => {
+    updateCSSVariables();
+  }, [updateCSSVariables, theme]);
+
+  return <Fragment>{children}</Fragment>;
+}
+
+export default ApplyTheme;

frontend/src/Components/Chart/StackedBarChart.js

@@ -46,6 +46,10 @@ class StackedBarChart extends Component {
               size: 14,
               family: defaultFontFamily
             }
+          },
+          tooltip: {
+            mode: 'index',
+            position: 'average'
           }
         }
       },

frontend/src/Components/DescriptionList/DescriptionListItem.js

@@ -10,6 +10,7 @@ class DescriptionListItem extends Component {
 
   render() {
     const {
+      className,
       titleClassName,
       descriptionClassName,
       title,
@@ -17,7 +18,7 @@ class DescriptionListItem extends Component {
     } = this.props;
 
     return (
-      <div>
+      <div className={className}>
         <DescriptionListItemTitle
           className={titleClassName}
         >
@@ -35,6 +36,7 @@ class DescriptionListItem extends Component {
 }
 
 DescriptionListItem.propTypes = {
+  className: PropTypes.string,
   titleClassName: PropTypes.string,
   descriptionClassName: PropTypes.string,
   title: PropTypes.string,

frontend/src/Components/Filter/Builder/FilterBuilderRow.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import SelectInput from 'Components/Form/SelectInput';
 import IconButton from 'Components/Link/IconButton';
 import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import AppProfileFilterBuilderRowValueConnector from './AppProfileFilterBuilderRowValueConnector';
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
 import CategoryFilterBuilderRowValue from './CategoryFilterBuilderRowValue';
@@ -212,7 +213,7 @@ class FilterBuilderRow extends Component {
         key: name,
         value: typeof label === 'function' ? label() : label
       };
-    }).sort((a, b) => a.value.localeCompare(b.value));
+    }).sort(sortByProp('value'));
 
     const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { filterBuilderTypes } from 'Helpers/Props';
 import * as filterTypes from 'Helpers/Props/filterTypes';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {
@@ -38,7 +38,7 @@ function createTagListSelector() {
           }
 
           return acc;
-        }, []).sort(sortByName);
+        }, []).sort(sortByProp('name'));
       }
 
       return _.uniqBy(items, 'id');

frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js

@@ -5,6 +5,7 @@ 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 sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import CustomFilter from './CustomFilter';
 import styles from './CustomFiltersModalContent.css';
@@ -31,7 +32,7 @@ function CustomFiltersModalContent(props) {
       <ModalBody>
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort((a, b) => sortByProp(a, b, 'label'))
             .map((customFilter) => {
               return (
                 <CustomFilter

frontend/src/Components/Form/AppProfileSelectInputConnector.js

@@ -4,13 +4,13 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import SelectInput from './SelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.appProfiles', sortByName),
+    createSortedSectionSelector('settings.appProfiles', sortByProp('name')),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeMixed }) => includeMixed,
     (appProfiles, includeNoChange, includeMixed) => {

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -3,7 +3,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchDownloadClients } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
@@ -21,7 +22,7 @@ function createMapStateToProps() {
 
       const values = items
         .filter((downloadClient) => downloadClient.protocol === protocolFilter)
-        .sort(sortByName)
+        .sort(sortByProp('name'))
         .map((downloadClient) => ({
           key: downloadClient.id,
           value: downloadClient.name,
@@ -31,7 +32,7 @@ function createMapStateToProps() {
       if (includeAny) {
         values.unshift({
           key: 0,
-          value: '(Any)'
+          value: `(${translate('Any')})`
         });
       }
 

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -271,26 +271,29 @@ class EnhancedSelectInput extends Component {
     this.setState({ isOpen: !this.state.isOpen });
   };
 
-  onSelect = (value) => {
-    if (Array.isArray(this.props.value)) {
-      let newValue = null;
-      const index = this.props.value.indexOf(value);
+  onSelect = (newValue) => {
+    const { name, value, values, onChange } = this.props;
+
+    if (Array.isArray(value)) {
+      let arrayValue = null;
+      const index = value.indexOf(newValue);
+
       if (index === -1) {
-        newValue = this.props.values.map((v) => v.key).filter((v) => (v === value) || this.props.value.includes(v));
+        arrayValue = values.map((v) => v.key).filter((v) => (v === newValue) || value.includes(v));
       } else {
-        newValue = [...this.props.value];
-        newValue.splice(index, 1);
+        arrayValue = [...value];
+        arrayValue.splice(index, 1);
       }
-      this.props.onChange({
-        name: this.props.name,
-        value: newValue
+      onChange({
+        name,
+        value: arrayValue
       });
     } else {
       this.setState({ isOpen: false });
 
-      this.props.onChange({
-        name: this.props.name,
-        value
+      onChange({
+        name,
+        value: newValue
       });
     }
   };
@@ -485,7 +488,7 @@ class EnhancedSelectInput extends Component {
                             values.map((v, index) => {
                               const hasParent = v.parentKey !== undefined;
                               const depth = hasParent ? 1 : 0;
-                              const parentSelected = hasParent && value.includes(v.parentKey);
+                              const parentSelected = hasParent && Array.isArray(value) && value.includes(v.parentKey);
                               return (
                                 <OptionComponent
                                   key={v.key}

frontend/src/Components/Form/EnhancedSelectInputConnector.js

@@ -34,7 +34,8 @@ function getSelectOptions(items) {
       key: option.value,
       value: option.name,
       hint: option.hint,
-      parentKey: option.parentValue
+      parentKey: option.parentValue,
+      isDisabled: option.isDisabled
     };
   });
 }

frontend/src/Components/Form/Form.css

@@ -1,3 +1,7 @@
 .validationFailures {
   margin-bottom: 20px;
 }
+
+.details {
+  margin-left: 5px;
+}

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

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

frontend/src/Components/Form/Form.js

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Alert from 'Components/Alert';
-import { kinds } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import styles from './Form.css';
 
 function Form(props) {
@@ -26,6 +28,18 @@ function Form(props) {
                     kind={kinds.DANGER}
                   >
                     {error.errorMessage}
+
+                    {
+                      error.detailedDescription ?
+                        <Tooltip
+                          className={styles.details}
+                          anchor={<Icon name={icons.INFO} />}
+                          tooltip={error.detailedDescription}
+                          kind={kinds.INVERSE}
+                          position={tooltipPositions.TOP}
+                        /> :
+                        null
+                    }
                   </Alert>
                 );
               })
@@ -39,6 +53,18 @@ function Form(props) {
                     kind={kinds.WARNING}
                   >
                     {warning.errorMessage}
+
+                    {
+                      warning.detailedDescription ?
+                        <Tooltip
+                          className={styles.details}
+                          anchor={<Icon name={icons.INFO} />}
+                          tooltip={warning.detailedDescription}
+                          kind={kinds.INVERSE}
+                          position={tooltipPositions.TOP}
+                        /> :
+                        null
+                    }
                   </Alert>
                 );
               })

frontend/src/Components/Form/FormInputGroup.js

@@ -256,6 +256,7 @@ FormInputGroup.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.any,
   values: PropTypes.arrayOf(PropTypes.any),
+  isFloat: PropTypes.bool,
   type: PropTypes.string.isRequired,
   kind: PropTypes.oneOf(kinds.all),
   min: PropTypes.number,

frontend/src/Components/Form/IndexersSelectInputConnector.js

@@ -4,14 +4,14 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import titleCase from 'Utilities/String/titleCase';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
   return createSelector(
     (state, { value }) => value,
-    createSortedSectionSelector('indexers', sortByName),
+    createSortedSectionSelector('indexers', sortByProp('name')),
     (value, indexers) => {
       const values = [];
       const groupedIndexers = map(groupBy(indexers.items, 'protocol'), (val, key) => ({ protocol: key, indexers: val }));

frontend/src/Components/Form/PasswordInput.css

@@ -1,5 +0,0 @@
-.input {
-  composes: input from '~Components/Form/TextInput.css';
-
-  font-family: $passwordFamily;
-}

frontend/src/Components/Form/PasswordInput.js

@@ -1,7 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import TextInput from './TextInput';
-import styles from './PasswordInput.css';
 
 // Prevent a user from copying (or cutting) the password from the input
 function onCopy(e) {
@@ -13,17 +11,14 @@ function PasswordInput(props) {
   return (
     <TextInput
       {...props}
+      type="password"
       onCopy={onCopy}
     />
   );
 }
 
 PasswordInput.propTypes = {
-  className: PropTypes.string.isRequired
-};
-
-PasswordInput.defaultProps = {
-  className: styles.input
+  ...TextInput.props
 };
 
 export default PasswordInput;

frontend/src/Components/Menu/FilterMenuContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import FilterMenuItem from './FilterMenuItem';
 import MenuContent from './MenuContent';
@@ -47,7 +48,7 @@ class FilterMenuContent extends Component {
 
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort(sortByProp('label'))
             .map((filter) => {
               return (
                 <FilterMenuItem

frontend/src/Components/TagList.js

@@ -1,14 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Label from './Label';
 import styles from './TagList.css';
 
 function TagList({ tags, tagList }) {
   const sortedTags = tags
     .map((tagId) => tagList.find((tag) => tag.id === tagId))
-    .filter((t) => t !== undefined)
-    .sort((a, b) => a.label.localeCompare(b.label));
+    .filter((tag) => !!tag)
+    .sort(sortByProp('label'));
 
   return (
     <div className={styles.tags}>

frontend/src/Content/Fonts/fonts.css

@@ -25,14 +25,3 @@
   font-family: 'Ubuntu Mono';
   src: url('UbuntuMono-Regular.eot?#iefix&v=1.3.0') format('embedded-opentype'), url('UbuntuMono-Regular.woff?v=1.3.0') format('woff'), url('UbuntuMono-Regular.ttf?v=1.3.0') format('truetype');
 }
-
-/*
- * text-security-disc
- */
-
-@font-face {
-  font-weight: normal;
-  font-style: normal;
-  font-family: 'text-security-disc';
-  src: url('text-security-disc.woff?v=1.3.0') format('woff'), url('text-security-disc.ttf?v=1.3.0') format('truetype');
-}

frontend/src/DownloadClient/DownloadProtocol.ts

@@ -0,0 +1,7 @@
+enum DownloadProtocol {
+  Unknown = 'unknown',
+  Usenet = 'usenet',
+  Torrent = 'torrent',
+}
+
+export default DownloadProtocol;

frontend/src/Helpers/Props/icons.js

@@ -43,6 +43,7 @@ import {
   faChevronCircleRight as fasChevronCircleRight,
   faChevronCircleUp as fasChevronCircleUp,
   faCircle as fasCircle,
+  faCircleDown as fasCircleDown,
   faCloud as fasCloud,
   faCloudDownloadAlt as fasCloudDownloadAlt,
   faCog as fasCog,
@@ -141,6 +142,7 @@ export const CHECK_INDETERMINATE = fasMinus;
 export const CHECK_CIRCLE = fasCheckCircle;
 export const CHECK_SQUARE = fasSquareCheck;
 export const CIRCLE = fasCircle;
+export const CIRCLE_DOWN = fasCircleDown;
 export const CIRCLE_OUTLINE = farCircle;
 export const CLEAR = fasTrashAlt;
 export const CLIPBOARD = fasCopy;

frontend/src/History/Details/HistoryDetails.js

@@ -3,6 +3,7 @@ import React from 'react';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import Link from 'Components/Link/Link';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import translate from 'Utilities/String/translate';
 import styles from './HistoryDetails.css';
 
@@ -10,7 +11,10 @@ function HistoryDetails(props) {
   const {
     indexer,
     eventType,
-    data
+    date,
+    data,
+    shortDateFormat,
+    timeFormat
   } = props;
 
   if (eventType === 'indexerQuery' || eventType === 'indexerRss') {
@@ -21,7 +25,10 @@ function HistoryDetails(props) {
       limit,
       offset,
       source,
-      url
+      host,
+      url,
+      elapsedTime,
+      cached
     } = data;
 
     return (
@@ -86,6 +93,15 @@ function HistoryDetails(props) {
             null
         }
 
+        {
+          data ?
+            <DescriptionListItem
+              title={translate('Host')}
+              data={host}
+            /> :
+            null
+        }
+
         {
           data ?
             <DescriptionListItem
@@ -94,6 +110,24 @@ function HistoryDetails(props) {
             /> :
             null
         }
+
+        {
+          elapsedTime ?
+            <DescriptionListItem
+              title={translate('ElapsedTime')}
+              data={`${elapsedTime}ms${cached === '1' ? ' (cached)' : ''}`}
+            /> :
+            null
+        }
+
+        {
+          date ?
+            <DescriptionListItem
+              title={translate('Date')}
+              data={formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
       </DescriptionList>
     );
   }
@@ -101,10 +135,19 @@ function HistoryDetails(props) {
   if (eventType === 'releaseGrabbed') {
     const {
       source,
+      host,
       grabTitle,
-      url
+      url,
+      publishedDate,
+      infoUrl,
+      downloadClient,
+      downloadClientName,
+      elapsedTime,
+      grabMethod
     } = data;
 
+    const downloadClientNameInfo = downloadClientName ?? downloadClient;
+
     return (
       <DescriptionList>
         {
@@ -125,6 +168,15 @@ function HistoryDetails(props) {
             null
         }
 
+        {
+          data ?
+            <DescriptionListItem
+              title={translate('Host')}
+              data={host}
+            /> :
+            null
+        }
+
         {
           data ?
             <DescriptionListItem
@@ -134,6 +186,33 @@ function HistoryDetails(props) {
             null
         }
 
+        {
+          infoUrl ?
+            <DescriptionListItem
+              title={translate('InfoUrl')}
+              data={<Link to={infoUrl}>{infoUrl}</Link>}
+            /> :
+            null
+        }
+
+        {
+          publishedDate ?
+            <DescriptionListItem
+              title={translate('PublishedDate')}
+              data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
+
+        {
+          downloadClientNameInfo ?
+            <DescriptionListItem
+              title={translate('DownloadClient')}
+              data={downloadClientNameInfo}
+            /> :
+            null
+        }
+
         {
           data ?
             <DescriptionListItem
@@ -142,11 +221,40 @@ function HistoryDetails(props) {
             /> :
             null
         }
+
+        {
+          elapsedTime ?
+            <DescriptionListItem
+              title={translate('ElapsedTime')}
+              data={`${elapsedTime}ms`}
+            /> :
+            null
+        }
+
+        {
+          grabMethod ?
+            <DescriptionListItem
+              title={translate('Redirected')}
+              data={grabMethod.toLowerCase() === 'redirect' ? translate('Yes') : translate('No')}
+            /> :
+            null
+        }
+
+        {
+          date ?
+            <DescriptionListItem
+              title={translate('Date')}
+              data={formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
       </DescriptionList>
     );
   }
 
   if (eventType === 'indexerAuth') {
+    const { elapsedTime } = data;
+
     return (
       <DescriptionList
         descriptionClassName={styles.description}
@@ -160,6 +268,24 @@ function HistoryDetails(props) {
             /> :
             null
         }
+
+        {
+          elapsedTime ?
+            <DescriptionListItem
+              title={translate('ElapsedTime')}
+              data={`${elapsedTime}ms`}
+            /> :
+            null
+        }
+
+        {
+          date ?
+            <DescriptionListItem
+              title={translate('Date')}
+              data={formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
       </DescriptionList>
     );
   }
@@ -171,6 +297,15 @@ function HistoryDetails(props) {
         title={translate('Name')}
         data={data.query}
       />
+
+      {
+        date ?
+          <DescriptionListItem
+            title={translate('Date')}
+            data={formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+          /> :
+          null
+      }
     </DescriptionList>
   );
 }
@@ -178,6 +313,7 @@ function HistoryDetails(props) {
 HistoryDetails.propTypes = {
   indexer: PropTypes.object.isRequired,
   eventType: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired

frontend/src/History/Details/HistoryDetailsModal.js

@@ -29,6 +29,7 @@ function HistoryDetailsModal(props) {
     isOpen,
     eventType,
     indexer,
+    date,
     data,
     shortDateFormat,
     timeFormat,
@@ -49,6 +50,7 @@ function HistoryDetailsModal(props) {
           <HistoryDetails
             eventType={eventType}
             indexer={indexer}
+            date={date}
             data={data}
             shortDateFormat={shortDateFormat}
             timeFormat={timeFormat}
@@ -71,6 +73,7 @@ HistoryDetailsModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   eventType: PropTypes.string.isRequired,
   indexer: PropTypes.object.isRequired,
+  date: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired,

frontend/src/History/HistoryEventTypeCell.js

@@ -20,21 +20,22 @@ function getIconName(eventType) {
   }
 }
 
-function getIconKind(successful) {
-  switch (successful) {
-    case false:
-      return kinds.DANGER;
-    default:
-      return kinds.DEFAULT;
+function getIconKind(successful, redirect) {
+  if (redirect) {
+    return kinds.INFO;
+  } else if (!successful) {
+    return kinds.DANGER;
   }
+
+  return kinds.DEFAULT;
 }
 
-function getTooltip(eventType, data, indexer) {
+function getTooltip(eventType, data, indexer, redirect) {
   switch (eventType) {
     case 'indexerQuery':
       return `Query "${data.query}" sent to ${indexer.name}`;
     case 'releaseGrabbed':
-      return `Release grabbed from ${indexer.name}`;
+      return redirect ? `Release grabbed via redirect from ${indexer.name}` : `Release grabbed from ${indexer.name}`;
     case 'indexerAuth':
       return `Auth attempted for ${indexer.name}`;
     case 'indexerRss':
@@ -45,9 +46,12 @@ function getTooltip(eventType, data, indexer) {
 }
 
 function HistoryEventTypeCell({ eventType, successful, data, indexer }) {
+  const { grabMethod } = data;
+  const redirect = grabMethod && grabMethod.toLowerCase() === 'redirect';
+
   const iconName = getIconName(eventType);
-  const iconKind = getIconKind(successful);
-  const tooltip = getTooltip(eventType, data, indexer);
+  const iconKind = getIconKind(successful, redirect);
+  const tooltip = getTooltip(eventType, data, indexer, redirect);
 
   return (
     <TableRowCell

frontend/src/History/HistoryRow.js

@@ -331,6 +331,21 @@ class HistoryRow extends Component {
               );
             }
 
+            if (name === 'host') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {
+                    data.host ?
+                      data.host :
+                      null
+                  }
+                </TableRowCell>
+              );
+            }
+
             if (name === 'elapsedTime') {
               return (
                 <TableRowCell
@@ -355,8 +370,9 @@ class HistoryRow extends Component {
               return (
                 <RelativeDateCell
                   key={name}
-                  date={date}
                   className={styles.date}
+                  date={date}
+                  includeSeconds={true}
                 />
               );
             }
@@ -393,6 +409,7 @@ class HistoryRow extends Component {
         <HistoryDetailsModal
           isOpen={this.state.isDetailsModalOpen}
           eventType={eventType}
+          date={date}
           data={data}
           indexer={indexer}
           isMarkingAsFailed={isMarkingAsFailed}

frontend/src/Indexer/Add/AddIndexerModal.js

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import { sizes } from 'Helpers/Props';
-import AddIndexerModalContentConnector from './AddIndexerModalContentConnector';
-import styles from './AddIndexerModal.css';
-
-function AddIndexerModal({ isOpen, onModalClose, onSelectIndexer, ...otherProps }) {
-  return (
-    <Modal
-      isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
-      onModalClose={onModalClose}
-      className={styles.modal}
-    >
-      <AddIndexerModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-        onSelectIndexer={onSelectIndexer}
-      />
-    </Modal>
-  );
-}
-
-AddIndexerModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSelectIndexer: PropTypes.func.isRequired
-};
-
-export default AddIndexerModal;

frontend/src/Indexer/Add/AddIndexerModal.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import { clearIndexerSchema } from 'Store/Actions/indexerActions';
+import AddIndexerModalContent from './AddIndexerModalContent';
+import styles from './AddIndexerModal.css';
+
+interface AddIndexerModalProps {
+  isOpen: boolean;
+  onSelectIndexer(): void;
+  onModalClose(): void;
+}
+
+function AddIndexerModal({
+  isOpen,
+  onSelectIndexer,
+  onModalClose,
+  ...otherProps
+}: AddIndexerModalProps) {
+  const dispatch = useDispatch();
+
+  const onModalClosePress = useCallback(() => {
+    dispatch(clearIndexerSchema());
+    onModalClose();
+  }, [dispatch, onModalClose]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      size={sizes.EXTRA_LARGE}
+      onModalClose={onModalClosePress}
+      className={styles.modal}
+    >
+      <AddIndexerModalContent
+        {...otherProps}
+        onSelectIndexer={onSelectIndexer}
+        onModalClose={onModalClosePress}
+      />
+    </Modal>
+  );
+}
+
+export default AddIndexerModal;

frontend/src/Indexer/Add/AddIndexerModalContent.css

@@ -19,12 +19,18 @@
   margin-bottom: 16px;
 }
 
-.alert {
+.notice {
   composes: alert from '~Components/Alert.css';
 
   margin-bottom: 20px;
 }
 
+.alert {
+  composes: alert from '~Components/Alert.css';
+
+  text-align: center;
+}
+
 .scroller {
   flex: 1 1 auto;
 }

frontend/src/Indexer/Add/AddIndexerModalContent.css.d.ts

@@ -10,6 +10,7 @@ interface CssExports {
   'indexers': string;
   'modalBody': string;
   'modalFooter': string;
+  'notice': string;
   'scroller': string;
 }
 export const cssExports: CssExports;

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -1,324 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Alert from 'Components/Alert';
-import EnhancedSelectInput from 'Components/Form/EnhancedSelectInput';
-import NewznabCategorySelectInputConnector from 'Components/Form/NewznabCategorySelectInputConnector';
-import TextInput from 'Components/Form/TextInput';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-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 Scroller from 'Components/Scroller/Scroller';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import { kinds, scrollDirections } from 'Helpers/Props';
-import getErrorMessage from 'Utilities/Object/getErrorMessage';
-import translate from 'Utilities/String/translate';
-import SelectIndexerRow from './SelectIndexerRow';
-import styles from './AddIndexerModalContent.css';
-
-const columns = [
-  {
-    name: 'protocol',
-    label: () => translate('Protocol'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'sortName',
-    label: () => translate('Name'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'language',
-    label: () => translate('Language'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'description',
-    label: () => translate('Description'),
-    isSortable: false,
-    isVisible: true
-  },
-  {
-    name: 'privacy',
-    label: () => translate('Privacy'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'categories',
-    label: () => translate('Categories'),
-    isSortable: false,
-    isVisible: true
-  }
-];
-
-const protocols = [
-  {
-    key: 'torrent',
-    value: 'torrent'
-  },
-  {
-    key: 'usenet',
-    value: 'nzb'
-  }
-];
-
-const privacyLevels = [
-  {
-    key: 'private',
-    get value() {
-      return translate('Private');
-    }
-  },
-  {
-    key: 'semiPrivate',
-    get value() {
-      return translate('SemiPrivate');
-    }
-  },
-  {
-    key: 'public',
-    get value() {
-      return translate('Public');
-    }
-  }
-];
-
-class AddIndexerModalContent extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      filter: '',
-      filterProtocols: [],
-      filterLanguages: [],
-      filterPrivacyLevels: [],
-      filterCategories: []
-    };
-  }
-
-  //
-  // Listeners
-
-  onFilterChange = ({ value }) => {
-    this.setState({ filter: value });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      indexers,
-      onIndexerSelect,
-      sortKey,
-      sortDirection,
-      isFetching,
-      isPopulated,
-      error,
-      onSortPress,
-      onModalClose
-    } = this.props;
-
-    const languages = Array.from(new Set(indexers.map(({ language }) => language)))
-      .sort((a, b) => a.localeCompare(b))
-      .map((language) => ({ key: language, value: language }));
-
-    const filteredIndexers = indexers.filter((indexer) => {
-      const {
-        filter,
-        filterProtocols,
-        filterLanguages,
-        filterPrivacyLevels,
-        filterCategories
-      } = this.state;
-
-      if (!indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) && !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())) {
-        return false;
-      }
-
-      if (filterProtocols.length && !filterProtocols.includes(indexer.protocol)) {
-        return false;
-      }
-
-      if (filterLanguages.length && !filterLanguages.includes(indexer.language)) {
-        return false;
-      }
-
-      if (filterPrivacyLevels.length && !filterPrivacyLevels.includes(indexer.privacy)) {
-        return false;
-      }
-
-      if (filterCategories.length) {
-        const { categories = [] } = indexer.capabilities || {};
-        const flat = ({ id, subCategories = [] }) => [id, ...subCategories.flatMap(flat)];
-        const flatCategories = categories
-          .filter((item) => item.id < 100000)
-          .flatMap(flat);
-
-        if (!filterCategories.every((item) => flatCategories.includes(item))) {
-          return false;
-        }
-      }
-
-      return true;
-    });
-
-    const errorMessage = getErrorMessage(error, translate('UnableToLoadIndexers'));
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('AddIndexer')}
-        </ModalHeader>
-
-        <ModalBody
-          className={styles.modalBody}
-          scrollDirection={scrollDirections.NONE}
-        >
-          <TextInput
-            className={styles.filterInput}
-            placeholder={translate('FilterPlaceHolder')}
-            name="filter"
-            value={this.state.filter}
-            autoFocus={true}
-            onChange={this.onFilterChange}
-          />
-
-          <div className={styles.filterRow}>
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Protocol')}</label>
-              <EnhancedSelectInput
-                name="indexerProtocols"
-                value={this.state.filterProtocols}
-                values={protocols}
-                onChange={({ value }) => this.setState({ filterProtocols: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Language')}</label>
-              <EnhancedSelectInput
-                name="indexerLanguages"
-                value={this.state.filterLanguages}
-                values={languages}
-                onChange={({ value }) => this.setState({ filterLanguages: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Privacy')}</label>
-              <EnhancedSelectInput
-                name="indexerPrivacyLevels"
-                value={this.state.filterPrivacyLevels}
-                values={privacyLevels}
-                onChange={({ value }) => this.setState({ filterPrivacyLevels: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Categories')}</label>
-              <NewznabCategorySelectInputConnector
-                name="indexerCategories"
-                value={this.state.filterCategories}
-                onChange={({ value }) => this.setState({ filterCategories: value })}
-              />
-            </div>
-          </div>
-
-          <Alert
-            kind={kinds.INFO}
-            className={styles.alert}
-          >
-            <div>
-              {translate('ProwlarrSupportsAnyIndexer')}
-            </div>
-          </Alert>
-
-          <Scroller
-            className={styles.scroller}
-            autoFocus={false}
-          >
-            {
-              isFetching ? <LoadingIndicator /> : null
-            }
-            {
-              error ? <Alert kind={kinds.DANGER}>{errorMessage}</Alert> : null
-            }
-            {
-              isPopulated && !!indexers.length ?
-                <Table
-                  columns={columns}
-                  sortKey={sortKey}
-                  sortDirection={sortDirection}
-                  onSortPress={onSortPress}
-                >
-                  <TableBody>
-                    {
-                      filteredIndexers.map((indexer) => (
-                        <SelectIndexerRow
-                          key={`${indexer.implementation}-${indexer.name}`}
-                          implementation={indexer.implementation}
-                          implementationName={indexer.implementationName}
-                          {...indexer}
-                          onIndexerSelect={onIndexerSelect}
-                        />
-                      ))
-                    }
-                  </TableBody>
-                </Table> :
-                null
-            }
-            {
-              isPopulated && !!indexers.length && !filteredIndexers.length ?
-                <Alert
-                  kind={kinds.WARNING}
-                >
-                  {translate('NoIndexersFound')}
-                </Alert> :
-                null
-            }
-          </Scroller>
-        </ModalBody>
-
-        <ModalFooter className={styles.modalFooter}>
-          <div className={styles.available}>
-            {
-              isPopulated ?
-                translate('CountIndexersAvailable', { count: filteredIndexers.length }) :
-                null
-            }
-          </div>
-
-          <div>
-            <Button onPress={onModalClose}>{translate('Close')}</Button>
-          </div>
-        </ModalFooter>
-      </ModalContent>
-    );
-  }
-}
-
-AddIndexerModalContent.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  sortKey: PropTypes.string,
-  sortDirection: PropTypes.string,
-  onSortPress: PropTypes.func.isRequired,
-  indexers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onIndexerSelect: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AddIndexerModalContent;

frontend/src/Indexer/Add/AddIndexerModalContent.tsx

@@ -0,0 +1,414 @@
+import { some } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import IndexerAppState from 'App/State/IndexerAppState';
+import Alert from 'Components/Alert';
+import EnhancedSelectInput from 'Components/Form/EnhancedSelectInput';
+import NewznabCategorySelectInputConnector from 'Components/Form/NewznabCategorySelectInputConnector';
+import TextInput from 'Components/Form/TextInput';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 Scroller from 'Components/Scroller/Scroller';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { kinds, scrollDirections } from 'Helpers/Props';
+import Indexer, { IndexerCategory } from 'Indexer/Indexer';
+import {
+  fetchIndexerSchema,
+  selectIndexerSchema,
+  setIndexerSchemaSort,
+} from 'Store/Actions/indexerActions';
+import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SortCallback } from 'typings/callbacks';
+import sortByProp from 'Utilities/Array/sortByProp';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import SelectIndexerRow from './SelectIndexerRow';
+import styles from './AddIndexerModalContent.css';
+
+const COLUMNS = [
+  {
+    name: 'protocol',
+    label: () => translate('Protocol'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'sortName',
+    label: () => translate('Name'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'language',
+    label: () => translate('Language'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'description',
+    label: () => translate('Description'),
+    isSortable: false,
+    isVisible: true,
+  },
+  {
+    name: 'privacy',
+    label: () => translate('Privacy'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'categories',
+    label: () => translate('Categories'),
+    isSortable: false,
+    isVisible: true,
+  },
+];
+
+const PROTOCOLS = [
+  {
+    key: 'torrent',
+    value: 'torrent',
+  },
+  {
+    key: 'usenet',
+    value: 'nzb',
+  },
+];
+
+const PRIVACY_LEVELS = [
+  {
+    key: 'private',
+    get value() {
+      return translate('Private');
+    },
+  },
+  {
+    key: 'semiPrivate',
+    get value() {
+      return translate('SemiPrivate');
+    },
+  },
+  {
+    key: 'public',
+    get value() {
+      return translate('Public');
+    },
+  },
+];
+
+interface IndexerSchema extends Indexer {
+  isExistingIndexer: boolean;
+}
+
+function createAddIndexersSelector() {
+  return createSelector(
+    createClientSideCollectionSelector('indexers.schema'),
+    createAllIndexersSelector(),
+    (indexers: IndexerAppState, allIndexers) => {
+      const { isFetching, isPopulated, error, items, sortDirection, sortKey } =
+        indexers;
+
+      const indexerList: IndexerSchema[] = items.map((item) => {
+        const { definitionName } = item;
+        return {
+          ...item,
+          isExistingIndexer: some(allIndexers, { definitionName }),
+        };
+      });
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        indexers: indexerList,
+        sortKey,
+        sortDirection,
+      };
+    }
+  );
+}
+
+interface AddIndexerModalContentProps {
+  onSelectIndexer(): void;
+  onModalClose(): void;
+}
+
+function AddIndexerModalContent(props: AddIndexerModalContentProps) {
+  const { onSelectIndexer, onModalClose } = props;
+
+  const { isFetching, isPopulated, error, indexers, sortKey, sortDirection } =
+    useSelector(createAddIndexersSelector());
+  const dispatch = useDispatch();
+
+  const [filter, setFilter] = useState('');
+  const [filterProtocols, setFilterProtocols] = useState<string[]>([]);
+  const [filterLanguages, setFilterLanguages] = useState<string[]>([]);
+  const [filterPrivacyLevels, setFilterPrivacyLevels] = useState<string[]>([]);
+  const [filterCategories, setFilterCategories] = useState<number[]>([]);
+
+  useEffect(
+    () => {
+      dispatch(fetchIndexerSchema());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onFilterChange = useCallback(
+    ({ value }: { value: string }) => {
+      setFilter(value);
+    },
+    [setFilter]
+  );
+
+  const onIndexerSelect = useCallback(
+    ({
+      implementation,
+      implementationName,
+      name,
+    }: {
+      implementation: string;
+      implementationName: string;
+      name: string;
+    }) => {
+      dispatch(
+        selectIndexerSchema({
+          implementation,
+          implementationName,
+          name,
+        })
+      );
+
+      onSelectIndexer();
+    },
+    [dispatch, onSelectIndexer]
+  );
+
+  const onSortPress = useCallback<SortCallback>(
+    (sortKey, sortDirection) => {
+      dispatch(setIndexerSchemaSort({ sortKey, sortDirection }));
+    },
+    [dispatch]
+  );
+
+  const languages = useMemo(
+    () =>
+      Array.from(new Set(indexers.map(({ language }) => language)))
+        .map((language) => ({ key: language, value: language }))
+        .sort(sortByProp('value')),
+    [indexers]
+  );
+
+  const filteredIndexers = useMemo(() => {
+    const flat = ({
+      id,
+      subCategories = [],
+    }: {
+      id: number;
+      subCategories: IndexerCategory[];
+    }): number[] => [id, ...subCategories.flatMap(flat)];
+
+    return indexers.filter((indexer) => {
+      if (
+        filter.length &&
+        !indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) &&
+        !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())
+      ) {
+        return false;
+      }
+
+      if (
+        filterProtocols.length &&
+        !filterProtocols.includes(indexer.protocol)
+      ) {
+        return false;
+      }
+
+      if (
+        filterLanguages.length &&
+        !filterLanguages.includes(indexer.language)
+      ) {
+        return false;
+      }
+
+      if (
+        filterPrivacyLevels.length &&
+        !filterPrivacyLevels.includes(indexer.privacy)
+      ) {
+        return false;
+      }
+
+      if (filterCategories.length) {
+        const { categories = [] } = indexer.capabilities || {};
+
+        const flatCategories = categories
+          .filter((item) => item.id < 100000)
+          .flatMap(flat);
+
+        if (
+          !filterCategories.every((categoryId) =>
+            flatCategories.includes(categoryId)
+          )
+        ) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }, [
+    indexers,
+    filter,
+    filterProtocols,
+    filterLanguages,
+    filterPrivacyLevels,
+    filterCategories,
+  ]);
+
+  const errorMessage = getErrorMessage(
+    error,
+    translate('UnableToLoadIndexers')
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('AddIndexer')}</ModalHeader>
+
+      <ModalBody
+        className={styles.modalBody}
+        scrollDirection={scrollDirections.NONE}
+      >
+        <TextInput
+          className={styles.filterInput}
+          placeholder={translate('FilterPlaceHolder')}
+          name="filter"
+          value={filter}
+          autoFocus={true}
+          onChange={onFilterChange}
+        />
+
+        <div className={styles.filterRow}>
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Protocol')}
+            </label>
+
+            <EnhancedSelectInput
+              name="indexerProtocols"
+              value={filterProtocols}
+              values={PROTOCOLS}
+              onChange={({ value }: { value: string[] }) =>
+                setFilterProtocols(value)
+              }
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Language')}
+            </label>
+
+            <EnhancedSelectInput
+              name="indexerLanguages"
+              value={filterLanguages}
+              values={languages}
+              onChange={({ value }: { value: string[] }) =>
+                setFilterLanguages(value)
+              }
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>{translate('Privacy')}</label>
+            <EnhancedSelectInput
+              name="indexerPrivacyLevels"
+              value={filterPrivacyLevels}
+              values={PRIVACY_LEVELS}
+              onChange={({ value }: { value: string[] }) =>
+                setFilterPrivacyLevels(value)
+              }
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Categories')}
+            </label>
+
+            <NewznabCategorySelectInputConnector
+              name="indexerCategories"
+              value={filterCategories}
+              onChange={({ value }: { value: number[] }) =>
+                setFilterCategories(value)
+              }
+            />
+          </div>
+        </div>
+
+        <Alert kind={kinds.INFO} className={styles.notice}>
+          <div>{translate('ProwlarrSupportsAnyIndexer')}</div>
+        </Alert>
+
+        <Scroller className={styles.scroller} autoFocus={false}>
+          {isFetching ? <LoadingIndicator /> : null}
+
+          {error ? (
+            <Alert kind={kinds.DANGER} className={styles.alert}>
+              {errorMessage}
+            </Alert>
+          ) : null}
+
+          {isPopulated && !!indexers.length ? (
+            <Table
+              columns={COLUMNS}
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              onSortPress={onSortPress}
+            >
+              <TableBody>
+                {filteredIndexers.map((indexer) => (
+                  <SelectIndexerRow
+                    {...indexer}
+                    key={`${indexer.implementation}-${indexer.name}`}
+                    implementation={indexer.implementation}
+                    implementationName={indexer.implementationName}
+                    onIndexerSelect={onIndexerSelect}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          ) : null}
+
+          {isPopulated && !!indexers.length && !filteredIndexers.length ? (
+            <Alert kind={kinds.WARNING} className={styles.alert}>
+              {translate('NoIndexersFound')}
+            </Alert>
+          ) : null}
+        </Scroller>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.available}>
+          {isPopulated
+            ? translate('CountIndexersAvailable', {
+                count: filteredIndexers.length,
+              })
+            : null}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Close')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default AddIndexerModalContent;

frontend/src/Indexer/Add/AddIndexerModalContentConnector.js

@@ -1,94 +0,0 @@
-import { some } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchIndexerSchema, selectIndexerSchema, setIndexerSchemaSort } from 'Store/Actions/indexerActions';
-import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
-import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
-import AddIndexerModalContent from './AddIndexerModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    createClientSideCollectionSelector('indexers.schema'),
-    createAllIndexersSelector(),
-    (indexers, allIndexers) => {
-      const {
-        isFetching,
-        isPopulated,
-        error,
-        items,
-        sortDirection,
-        sortKey
-      } = indexers;
-
-      const indexerList = items.map((item) => {
-        const { definitionName } = item;
-        return {
-          ...item,
-          isExistingIndexer: some(allIndexers, { definitionName })
-        };
-      });
-
-      return {
-        isFetching,
-        isPopulated,
-        error,
-        indexers: indexerList,
-        sortKey,
-        sortDirection
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchIndexerSchema,
-  selectIndexerSchema,
-  setIndexerSchemaSort
-};
-
-class AddIndexerModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchIndexerSchema();
-  }
-
-  //
-  // Listeners
-
-  onIndexerSelect = ({ implementation, implementationName, name }) => {
-    this.props.selectIndexerSchema({ implementation, implementationName, name });
-    this.props.onSelectIndexer();
-  };
-
-  onSortPress = (sortKey, sortDirection) => {
-    this.props.setIndexerSchemaSort({ sortKey, sortDirection });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <AddIndexerModalContent
-        {...this.props}
-        onSortPress={this.onSortPress}
-        onIndexerSelect={this.onIndexerSelect}
-      />
-    );
-  }
-}
-
-AddIndexerModalContentConnector.propTypes = {
-  fetchIndexerSchema: PropTypes.func.isRequired,
-  selectIndexerSchema: PropTypes.func.isRequired,
-  setIndexerSchemaSort: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSelectIndexer: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AddIndexerModalContentConnector);

frontend/src/Indexer/Add/SelectIndexerRow.tsx

@@ -4,16 +4,16 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowButton from 'Components/Table/TableRowButton';
 import { icons } from 'Helpers/Props';
 import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel';
+import PrivacyLabel from 'Indexer/Index/Table/PrivacyLabel';
 import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
-import { IndexerCapabilities } from 'Indexer/Indexer';
-import firstCharToUpper from 'Utilities/String/firstCharToUpper';
+import { IndexerCapabilities, IndexerPrivacy } from 'Indexer/Indexer';
 import translate from 'Utilities/String/translate';
 import styles from './SelectIndexerRow.css';
 
 interface SelectIndexerRowProps {
   name: string;
   protocol: string;
-  privacy: string;
+  privacy: IndexerPrivacy;
   language: string;
   description: string;
   capabilities: IndexerCapabilities;
@@ -63,7 +63,9 @@ function SelectIndexerRow(props: SelectIndexerRowProps) {
 
       <TableRowCell>{description}</TableRowCell>
 
-      <TableRowCell>{translate(firstCharToUpper(privacy))}</TableRowCell>
+      <TableRowCell>
+        <PrivacyLabel privacy={privacy} />
+      </TableRowCell>
 
       <TableRowCell>
         <CapabilitiesLabel capabilities={capabilities} />

frontend/src/Indexer/Index/IndexerIndex.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { SelectProvider } from 'App/SelectContext';
 import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
@@ -22,12 +28,17 @@ import AddIndexerModal from 'Indexer/Add/AddIndexerModal';
 import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
 import NoIndexer from 'Indexer/NoIndexer';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { cloneIndexer, testAllIndexers } from 'Store/Actions/indexerActions';
+import {
+  cloneIndexer,
+  fetchIndexers,
+  testAllIndexers,
+} from 'Store/Actions/indexerActions';
 import {
   setIndexerFilter,
   setIndexerSort,
   setIndexerTableOption,
 } from 'Store/Actions/indexerIndexActions';
+import { fetchIndexerStatus } from 'Store/Actions/indexerStatusActions';
 import scrollPositions from 'Store/scrollPositions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
@@ -82,6 +93,11 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
   );
   const [isSelectMode, setIsSelectMode] = useState(false);
 
+  useEffect(() => {
+    dispatch(fetchIndexers());
+    dispatch(fetchIndexerStatus());
+  }, [dispatch]);
+
   const onAddIndexerPress = useCallback(() => {
     setIsAddIndexerModalOpen(true);
   }, [setIsAddIndexerModalOpen]);

frontend/src/Indexer/Index/Select/Edit/EditIndexerModalContent.tsx

@@ -224,6 +224,7 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
             name="seedRatio"
             value={seedRatio}
             helpText={translate('SeedRatioHelpText')}
+            isFloat={true}
             onChange={onInputChange}
           />
         </FormGroup>

frontend/src/Indexer/Index/Table/IndexerIndexRow.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSelect } from 'App/SelectContext';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
@@ -15,10 +14,10 @@ import createIndexerIndexItemSelector from 'Indexer/Index/createIndexerIndexItem
 import Indexer from 'Indexer/Indexer';
 import IndexerTitleLink from 'Indexer/IndexerTitleLink';
 import { SelectStateInputProps } from 'typings/props';
-import firstCharToUpper from 'Utilities/String/firstCharToUpper';
 import translate from 'Utilities/String/translate';
 import CapabilitiesLabel from './CapabilitiesLabel';
 import IndexerStatusCell from './IndexerStatusCell';
+import PrivacyLabel from './PrivacyLabel';
 import ProtocolLabel from './ProtocolLabel';
 import styles from './IndexerIndexRow.css';
 
@@ -175,7 +174,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
         if (name === 'privacy') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
-              <Label>{translate(firstCharToUpper(privacy))}</Label>
+              <PrivacyLabel privacy={privacy} />
             </VirtualTableRowCell>
           );
         }

frontend/src/Indexer/Index/Table/PrivacyLabel.css

@@ -0,0 +1,20 @@
+.publicLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--dangerColor);
+  background-color: var(--dangerColor);
+}
+
+.semiPrivateLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--warningColor);
+  background-color: var(--warningColor);
+}
+
+.privateLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--infoColor);
+  background-color: var(--infoColor);
+}

frontend/src/Indexer/Index/Table/PrivacyLabel.css.d.ts

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

frontend/src/Indexer/Index/Table/PrivacyLabel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Label from 'Components/Label';
+import { IndexerPrivacy } from 'Indexer/Indexer';
+import firstCharToUpper from 'Utilities/String/firstCharToUpper';
+import translate from 'Utilities/String/translate';
+import styles from './PrivacyLabel.css';
+
+interface PrivacyLabelProps {
+  privacy: IndexerPrivacy;
+}
+
+function PrivacyLabel({ privacy }: PrivacyLabelProps) {
+  return (
+    <Label className={styles[`${privacy}Label`]}>
+      {translate(firstCharToUpper(privacy))}
+    </Label>
+  );
+}
+
+export default PrivacyLabel;

frontend/src/Indexer/Indexer.ts

@@ -24,6 +24,8 @@ export interface IndexerCapabilities extends ModelBase {
   categories: IndexerCategory[];
 }
 
+export type IndexerPrivacy = 'public' | 'semiPrivate' | 'private';
+
 export interface IndexerField extends ModelBase {
   order: number;
   name: string;
@@ -36,6 +38,7 @@ export interface IndexerField extends ModelBase {
 
 interface Indexer extends ModelBase {
   name: string;
+  definitionName: string;
   description: string;
   encoding: string;
   language: string;
@@ -47,7 +50,7 @@ interface Indexer extends ModelBase {
   supportsRedirect: boolean;
   supportsPagination: boolean;
   protocol: string;
-  privacy: string;
+  privacy: IndexerPrivacy;
   priority: number;
   fields: IndexerField[];
   tags: number[];

frontend/src/Indexer/Info/History/IndexerHistoryRow.tsx

@@ -74,7 +74,7 @@ function IndexerHistoryRow(props: IndexerHistoryRowProps) {
         </div>
       </TableRowCell>
 
-      <RelativeDateCell date={date} />
+      <RelativeDateCell date={date} includeSeconds={true} />
 
       <TableRowCell className={styles.source}>
         {data.source ? data.source : null}
@@ -91,6 +91,7 @@ function IndexerHistoryRow(props: IndexerHistoryRowProps) {
       <HistoryDetailsModal
         isOpen={isDetailsModalOpen}
         eventType={eventType}
+        date={date}
         data={data}
         indexer={indexer}
         shortDateFormat={shortDateFormat}

frontend/src/Indexer/Info/IndexerInfoModalContent.tsx

@@ -24,6 +24,7 @@ import TagListConnector from 'Components/TagListConnector';
 import { kinds } from 'Helpers/Props';
 import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal';
 import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
+import PrivacyLabel from 'Indexer/Index/Table/PrivacyLabel';
 import Indexer, { IndexerCapabilities } from 'Indexer/Indexer';
 import { createIndexerSelectorForHook } from 'Store/Selectors/createIndexerSelector';
 import translate from 'Utilities/String/translate';
@@ -64,6 +65,7 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
     fields,
     tags,
     protocol,
+    privacy,
     capabilities = {} as IndexerCapabilities,
   } = indexer as Indexer;
 
@@ -160,6 +162,11 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
                       title={translate('Language')}
                       data={language ?? '-'}
                     />
+                    <DescriptionListItem
+                      descriptionClassName={styles.description}
+                      title={translate('Privacy')}
+                      data={privacy ? <PrivacyLabel privacy={privacy} /> : '-'}
+                    />
                     {vipExpiration ? (
                       <DescriptionListItem
                         descriptionClassName={styles.description}

frontend/src/Indexer/NoIndexer.css

@@ -1,4 +1,6 @@
 .message {
+  composes: alert from '~Components/Alert.css';
+
   margin-top: 10px;
   margin-bottom: 30px;
   text-align: center;

frontend/src/Indexer/NoIndexer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
@@ -14,11 +15,9 @@ function NoIndexer(props: NoIndexerProps) {
 
   if (totalItems > 0) {
     return (
-      <div>
-        <div className={styles.message}>
-          {translate('AllIndexersHiddenDueToFilter')}
-        </div>
-      </div>
+      <Alert kind={kinds.WARNING} className={styles.message}>
+        {translate('AllIndexersHiddenDueToFilter')}
+      </Alert>
     );
   }
 

frontend/src/Indexer/Stats/IndexerStats.tsx

@@ -32,136 +32,125 @@ import IndexerStatsFilterModal from './IndexerStatsFilterModal';
 import styles from './IndexerStats.css';
 
 function getAverageResponseTimeData(indexerStats: IndexerStatsIndexer[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.indexerName,
-      value: indexer.averageResponseTime,
-    };
-  });
+  const statistics = [...indexerStats].sort((a, b) =>
+    a.averageResponseTime === b.averageResponseTime
+      ? b.averageGrabResponseTime - a.averageGrabResponseTime
+      : b.averageResponseTime - a.averageResponseTime
+  );
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
-
-  return data;
+  return {
+    labels: statistics.map((indexer) => indexer.indexerName),
+    datasets: [
+      {
+        label: translate('AverageQueries'),
+        data: statistics.map((indexer) => indexer.averageResponseTime),
+      },
+      {
+        label: translate('AverageGrabs'),
+        data: statistics.map((indexer) => indexer.averageGrabResponseTime),
+      },
+    ],
+  };
 }
 
 function getFailureRateData(indexerStats: IndexerStatsIndexer[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.indexerName,
-      value:
-        (indexer.numberOfFailedQueries +
-          indexer.numberOfFailedRssQueries +
-          indexer.numberOfFailedAuthQueries +
-          indexer.numberOfFailedGrabs) /
-        (indexer.numberOfQueries +
-          indexer.numberOfRssQueries +
-          indexer.numberOfAuthQueries +
-          indexer.numberOfGrabs),
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.indexerName,
+    value:
+      (indexer.numberOfFailedQueries +
+        indexer.numberOfFailedRssQueries +
+        indexer.numberOfFailedAuthQueries +
+        indexer.numberOfFailedGrabs) /
+      (indexer.numberOfQueries +
+        indexer.numberOfRssQueries +
+        indexer.numberOfAuthQueries +
+        indexer.numberOfGrabs),
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getTotalRequestsData(indexerStats: IndexerStatsIndexer[]) {
-  const data = {
-    labels: indexerStats.map((indexer) => indexer.indexerName),
+  const statistics = [...indexerStats].sort(
+    (a, b) =>
+      b.numberOfQueries +
+      b.numberOfRssQueries +
+      b.numberOfAuthQueries -
+      (a.numberOfQueries + a.numberOfRssQueries + a.numberOfAuthQueries)
+  );
+
+  return {
+    labels: statistics.map((indexer) => indexer.indexerName),
     datasets: [
       {
         label: translate('SearchQueries'),
-        data: indexerStats.map((indexer) => indexer.numberOfQueries),
+        data: statistics.map((indexer) => indexer.numberOfQueries),
       },
       {
         label: translate('RssQueries'),
-        data: indexerStats.map((indexer) => indexer.numberOfRssQueries),
+        data: statistics.map((indexer) => indexer.numberOfRssQueries),
       },
       {
         label: translate('AuthQueries'),
-        data: indexerStats.map((indexer) => indexer.numberOfAuthQueries),
+        data: statistics.map((indexer) => indexer.numberOfAuthQueries),
       },
     ],
   };
-
-  return data;
 }
 
 function getNumberGrabsData(indexerStats: IndexerStatsIndexer[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.indexerName,
-      value: indexer.numberOfGrabs - indexer.numberOfFailedGrabs,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.indexerName,
+    value: indexer.numberOfGrabs - indexer.numberOfFailedGrabs,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getUserAgentGrabsData(indexerStats: IndexerStatsUserAgent[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.userAgent ? indexer.userAgent : 'Other',
-      value: indexer.numberOfGrabs,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.userAgent ? indexer.userAgent : 'Other',
+    value: indexer.numberOfGrabs,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getUserAgentQueryData(indexerStats: IndexerStatsUserAgent[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.userAgent ? indexer.userAgent : 'Other',
-      value: indexer.numberOfQueries,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.userAgent ? indexer.userAgent : 'Other',
+    value: indexer.numberOfQueries,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getHostGrabsData(indexerStats: IndexerStatsHost[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.host ? indexer.host : 'Other',
-      value: indexer.numberOfGrabs,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.host ? indexer.host : 'Other',
+    value: indexer.numberOfGrabs,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
 
 function getHostQueryData(indexerStats: IndexerStatsHost[]) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.host ? indexer.host : 'Other',
-      value: indexer.numberOfQueries,
-    };
-  });
+  const data = indexerStats.map((indexer) => ({
+    label: indexer.host ? indexer.host : 'Other',
+    value: indexer.numberOfQueries,
+  }));
 
-  data.sort((a, b) => {
-    return b.value - a.value;
-  });
+  data.sort((a, b) => b.value - a.value);
 
   return data;
 }
@@ -294,7 +283,7 @@ function IndexerStats() {
             </div>
             <div className={styles.fullWidthChart}>
               <div className={styles.chartContainer}>
-                <BarChart
+                <StackedBarChart
                   data={getAverageResponseTimeData(item.indexers)}
                   title={translate('AverageResponseTimesMs')}
                   stepSize={100}

frontend/src/Search/Mobile/SearchIndexOverview.css

@@ -47,3 +47,42 @@ $hoverScale: 1.05;
   right: 0;
   white-space: nowrap;
 }
+
+.downloadLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin: 0 2px;
+  width: 22px;
+  color: var(--textColor);
+  text-align: center;
+}
+
+.manualDownloadContent {
+  position: relative;
+  display: inline-block;
+  margin: 0 2px;
+  width: 22px;
+  height: 20.39px;
+  vertical-align: middle;
+  line-height: 20.39px;
+
+  &:hover {
+    color: var(--iconButtonHoverColor);
+  }
+}
+
+.interactiveIcon {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  /* width: 100%; */
+  text-align: center;
+}
+
+.downloadIcon {
+  position: absolute;
+  top: 7px;
+  left: 8px;
+  /* width: 100%; */
+  text-align: center;
+}

frontend/src/Search/Mobile/SearchIndexOverview.css.d.ts

@@ -4,9 +4,13 @@ interface CssExports {
   'actions': string;
   'container': string;
   'content': string;
+  'downloadIcon': string;
+  'downloadLink': string;
   'indexerRow': string;
   'info': string;
   'infoRow': string;
+  'interactiveIcon': string;
+  'manualDownloadContent': string;
   'title': string;
   'titleRow': string;
 }

frontend/src/Search/Mobile/SearchIndexOverview.js

@@ -1,234 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import TextTruncate from 'react-text-truncate';
-import Label from 'Components/Label';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import { icons, kinds } from 'Helpers/Props';
-import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
-import CategoryLabel from 'Search/Table/CategoryLabel';
-import Peers from 'Search/Table/Peers';
-import dimensions from 'Styles/Variables/dimensions';
-import formatAge from 'Utilities/Number/formatAge';
-import formatBytes from 'Utilities/Number/formatBytes';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import styles from './SearchIndexOverview.css';
-
-const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
-const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
-
-function getContentHeight(rowHeight, isSmallScreen) {
-  const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
-
-  return rowHeight - padding;
-}
-
-function getDownloadIcon(isGrabbing, isGrabbed, grabError) {
-  if (isGrabbing) {
-    return icons.SPINNER;
-  } else if (isGrabbed) {
-    return icons.DOWNLOADING;
-  } else if (grabError) {
-    return icons.DOWNLOADING;
-  }
-
-  return icons.DOWNLOAD;
-}
-
-function getDownloadKind(isGrabbed, grabError) {
-  if (isGrabbed) {
-    return kinds.SUCCESS;
-  }
-
-  if (grabError) {
-    return kinds.DANGER;
-  }
-
-  return kinds.DEFAULT;
-}
-
-function getDownloadTooltip(isGrabbing, isGrabbed, grabError) {
-  if (isGrabbing) {
-    return '';
-  } else if (isGrabbed) {
-    return translate('AddedToDownloadClient');
-  } else if (grabError) {
-    return grabError;
-  }
-
-  return translate('AddToDownloadClient');
-}
-
-class SearchIndexOverview extends Component {
-
-  //
-  // Listeners
-
-  onGrabPress = () => {
-    const {
-      guid,
-      indexerId,
-      onGrabPress
-    } = this.props;
-
-    onGrabPress({
-      guid,
-      indexerId
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      title,
-      infoUrl,
-      protocol,
-      downloadUrl,
-      magnetUrl,
-      categories,
-      seeders,
-      leechers,
-      indexerFlags,
-      size,
-      age,
-      ageHours,
-      ageMinutes,
-      indexer,
-      rowHeight,
-      isSmallScreen,
-      isGrabbed,
-      isGrabbing,
-      grabError
-    } = this.props;
-
-    const contentHeight = getContentHeight(rowHeight, isSmallScreen);
-
-    return (
-      <div className={styles.container}>
-        <div className={styles.content}>
-          <div className={styles.info} style={{ height: contentHeight }}>
-            <div className={styles.titleRow}>
-              <div className={styles.title}>
-                <Link
-                  to={infoUrl}
-                  title={title}
-                >
-                  <TextTruncate
-                    line={2}
-                    text={title}
-                  />
-                </Link>
-              </div>
-
-              <div className={styles.actions}>
-                <SpinnerIconButton
-                  name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
-                  kind={getDownloadKind(isGrabbed, grabError)}
-                  title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
-                  isDisabled={isGrabbed}
-                  isSpinning={isGrabbing}
-                  onPress={this.onGrabPress}
-                />
-
-                {
-                  downloadUrl || magnetUrl ?
-                    <IconButton
-                      name={icons.SAVE}
-                      title={translate('Save')}
-                      to={downloadUrl ?? magnetUrl}
-                    /> :
-                    null
-                }
-              </div>
-            </div>
-            <div className={styles.indexerRow}>
-              {indexer}
-            </div>
-            <div className={styles.infoRow}>
-              <ProtocolLabel
-                protocol={protocol}
-              />
-
-              {
-                protocol === 'torrent' &&
-                  <Peers
-                    seeders={seeders}
-                    leechers={leechers}
-                  />
-              }
-
-              <Label>
-                {formatBytes(size)}
-              </Label>
-
-              <Label>
-                {formatAge(age, ageHours, ageMinutes)}
-              </Label>
-
-              <CategoryLabel
-                categories={categories}
-              />
-
-              {
-                indexerFlags.length ?
-                  indexerFlags
-                    .sort((a, b) => a.localeCompare(b))
-                    .map((flag, index) => {
-                      return (
-                        <Label key={index} kind={kinds.INFO}>
-                          {titleCase(flag)}
-                        </Label>
-                      );
-                    }) :
-                  null
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-SearchIndexOverview.propTypes = {
-  guid: PropTypes.string.isRequired,
-  categories: PropTypes.arrayOf(PropTypes.object).isRequired,
-  protocol: PropTypes.string.isRequired,
-  age: PropTypes.number.isRequired,
-  ageHours: PropTypes.number.isRequired,
-  ageMinutes: PropTypes.number.isRequired,
-  publishDate: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  infoUrl: PropTypes.string.isRequired,
-  downloadUrl: PropTypes.string,
-  magnetUrl: PropTypes.string,
-  indexerId: PropTypes.number.isRequired,
-  indexer: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  files: PropTypes.number,
-  grabs: PropTypes.number,
-  seeders: PropTypes.number,
-  leechers: PropTypes.number,
-  indexerFlags: PropTypes.arrayOf(PropTypes.string).isRequired,
-  rowHeight: PropTypes.number.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
-  onGrabPress: PropTypes.func.isRequired,
-  isGrabbing: PropTypes.bool.isRequired,
-  isGrabbed: PropTypes.bool.isRequired,
-  grabError: PropTypes.string
-};
-
-SearchIndexOverview.defaultProps = {
-  isGrabbing: false,
-  isGrabbed: false
-};
-
-export default SearchIndexOverview;

frontend/src/Search/Mobile/SearchIndexOverview.tsx

@@ -0,0 +1,264 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import TextTruncate from 'react-text-truncate';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { icons, kinds } from 'Helpers/Props';
+import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
+import { IndexerCategory } from 'Indexer/Indexer';
+import OverrideMatchModal from 'Search/OverrideMatch/OverrideMatchModal';
+import CategoryLabel from 'Search/Table/CategoryLabel';
+import Peers from 'Search/Table/Peers';
+import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
+import dimensions from 'Styles/Variables/dimensions';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
+import formatBytes from 'Utilities/Number/formatBytes';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import styles from './SearchIndexOverview.css';
+
+const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(
+  dimensions.movieIndexColumnPaddingSmallScreen
+);
+
+function getDownloadIcon(
+  isGrabbing: boolean,
+  isGrabbed: boolean,
+  grabError?: string
+) {
+  if (isGrabbing) {
+    return icons.SPINNER;
+  } else if (isGrabbed) {
+    return icons.DOWNLOADING;
+  } else if (grabError) {
+    return icons.DOWNLOADING;
+  }
+
+  return icons.DOWNLOAD;
+}
+
+function getDownloadKind(isGrabbed: boolean, grabError?: string) {
+  if (isGrabbed) {
+    return kinds.SUCCESS;
+  }
+
+  if (grabError) {
+    return kinds.DANGER;
+  }
+
+  return kinds.DEFAULT;
+}
+
+function getDownloadTooltip(
+  isGrabbing: boolean,
+  isGrabbed: boolean,
+  grabError?: string
+) {
+  if (isGrabbing) {
+    return '';
+  } else if (isGrabbed) {
+    return translate('AddedToDownloadClient');
+  } else if (grabError) {
+    return grabError;
+  }
+
+  return translate('AddToDownloadClient');
+}
+
+interface SearchIndexOverviewProps {
+  guid: string;
+  protocol: DownloadProtocol;
+  age: number;
+  ageHours: number;
+  ageMinutes: number;
+  publishDate: string;
+  title: string;
+  infoUrl: string;
+  downloadUrl?: string;
+  magnetUrl?: string;
+  indexerId: number;
+  indexer: string;
+  categories: IndexerCategory[];
+  size: number;
+  seeders?: number;
+  leechers?: number;
+  indexerFlags: string[];
+  isGrabbing: boolean;
+  isGrabbed: boolean;
+  grabError?: string;
+  longDateFormat: string;
+  timeFormat: string;
+  rowHeight: number;
+  isSmallScreen: boolean;
+  onGrabPress(...args: unknown[]): void;
+}
+
+function SearchIndexOverview(props: SearchIndexOverviewProps) {
+  const {
+    guid,
+    indexerId,
+    protocol,
+    categories,
+    age,
+    ageHours,
+    ageMinutes,
+    publishDate,
+    title,
+    infoUrl,
+    downloadUrl,
+    magnetUrl,
+    indexer,
+    size,
+    seeders,
+    leechers,
+    indexerFlags = [],
+    isGrabbing = false,
+    isGrabbed = false,
+    grabError,
+    longDateFormat,
+    timeFormat,
+    rowHeight,
+    isSmallScreen,
+    onGrabPress,
+  } = props;
+
+  const [isOverrideModalOpen, setIsOverrideModalOpen] = useState(false);
+
+  const { items: downloadClients } = useSelector(
+    createEnabledDownloadClientsSelector(protocol)
+  );
+
+  const onGrabPressWrapper = useCallback(() => {
+    onGrabPress({
+      guid,
+      indexerId,
+    });
+  }, [guid, indexerId, onGrabPress]);
+
+  const onOverridePress = useCallback(() => {
+    setIsOverrideModalOpen(true);
+  }, [setIsOverrideModalOpen]);
+
+  const onOverrideModalClose = useCallback(() => {
+    setIsOverrideModalOpen(false);
+  }, [setIsOverrideModalOpen]);
+
+  const contentHeight = useMemo(() => {
+    const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
+
+    return rowHeight - padding;
+  }, [rowHeight, isSmallScreen]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <div className={styles.info} style={{ height: contentHeight }}>
+            <div className={styles.titleRow}>
+              <div className={styles.title}>
+                <Link to={infoUrl} title={title}>
+                  <TextTruncate line={2} text={title} />
+                </Link>
+              </div>
+
+              <div className={styles.actions}>
+                <SpinnerIconButton
+                  name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
+                  kind={getDownloadKind(isGrabbed, grabError)}
+                  title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
+                  isDisabled={isGrabbed}
+                  isSpinning={isGrabbing}
+                  onPress={onGrabPressWrapper}
+                />
+
+                {downloadClients.length > 1 ? (
+                  <Link
+                    className={styles.manualDownloadContent}
+                    title={translate('OverrideAndAddToDownloadClient')}
+                    onPress={onOverridePress}
+                  >
+                    <div className={styles.manualDownloadContent}>
+                      <Icon
+                        className={styles.interactiveIcon}
+                        name={icons.INTERACTIVE}
+                        size={11}
+                      />
+
+                      <Icon
+                        className={styles.downloadIcon}
+                        name={icons.CIRCLE_DOWN}
+                        size={9}
+                      />
+                    </div>
+                  </Link>
+                ) : null}
+
+                {downloadUrl || magnetUrl ? (
+                  <IconButton
+                    className={styles.downloadLink}
+                    name={icons.SAVE}
+                    title={translate('Save')}
+                    to={downloadUrl ?? magnetUrl}
+                  />
+                ) : null}
+              </div>
+            </div>
+            <div className={styles.indexerRow}>{indexer}</div>
+            <div className={styles.infoRow}>
+              <ProtocolLabel protocol={protocol} />
+
+              {protocol === 'torrent' && (
+                <Peers seeders={seeders} leechers={leechers} />
+              )}
+
+              <Label>{formatBytes(size)}</Label>
+
+              <Label
+                title={formatDateTime(publishDate, longDateFormat, timeFormat, {
+                  includeSeconds: true,
+                })}
+              >
+                {formatAge(age, ageHours, ageMinutes)}
+              </Label>
+
+              <CategoryLabel categories={categories} />
+
+              {indexerFlags.length
+                ? indexerFlags
+                    .sort((a, b) =>
+                      a.localeCompare(b, undefined, { numeric: true })
+                    )
+                    .map((flag, index) => {
+                      return (
+                        <Label key={index} kind={kinds.INFO}>
+                          {titleCase(flag)}
+                        </Label>
+                      );
+                    })
+                : null}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <OverrideMatchModal
+        isOpen={isOverrideModalOpen}
+        title={title}
+        indexerId={indexerId}
+        guid={guid}
+        protocol={protocol}
+        isGrabbing={isGrabbing}
+        grabError={grabError}
+        onModalClose={onOverrideModalClose}
+      />
+    </>
+  );
+}
+
+export default SearchIndexOverview;

frontend/src/Search/NoSearchResults.css

@@ -1,4 +1,6 @@
 .message {
+  composes: alert from '~Components/Alert.css';
+
   margin-top: 10px;
   margin-bottom: 30px;
   text-align: center;

frontend/src/Search/NoSearchResults.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import Alert from 'Components/Alert';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './NoSearchResults.css';
 
@@ -11,18 +13,16 @@ function NoSearchResults(props: NoSearchResultsProps) {
 
   if (totalItems > 0) {
     return (
-      <div>
-        <div className={styles.message}>
-          {translate('AllIndexersHiddenDueToFilter')}
-        </div>
-      </div>
+      <Alert kind={kinds.WARNING} className={styles.message}>
+        {translate('AllSearchResultsHiddenByFilter')}
+      </Alert>
     );
   }
 
   return (
-    <div>
-      <div className={styles.message}>{translate('NoSearchResultsFound')}</div>
-    </div>
+    <Alert kind={kinds.INFO} className={styles.message}>
+      {translate('NoSearchResultsFound')}
+    </Alert>
   );
 }
 

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientModal.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { sizes } from 'Helpers/Props';
+import SelectDownloadClientModalContent from './SelectDownloadClientModalContent';
+
+interface SelectDownloadClientModalProps {
+  isOpen: boolean;
+  protocol: DownloadProtocol;
+  modalTitle: string;
+  onDownloadClientSelect(downloadClientId: number): void;
+  onModalClose(): void;
+}
+
+function SelectDownloadClientModal(props: SelectDownloadClientModalProps) {
+  const { isOpen, protocol, modalTitle, onDownloadClientSelect, onModalClose } =
+    props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose} size={sizes.MEDIUM}>
+      <SelectDownloadClientModalContent
+        protocol={protocol}
+        modalTitle={modalTitle}
+        onDownloadClientSelect={onDownloadClientSelect}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default SelectDownloadClientModal;

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientModalContent.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
+import Form from 'Components/Form/Form';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { kinds } from 'Helpers/Props';
+import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
+import translate from 'Utilities/String/translate';
+import SelectDownloadClientRow from './SelectDownloadClientRow';
+
+interface SelectDownloadClientModalContentProps {
+  protocol: DownloadProtocol;
+  modalTitle: string;
+  onDownloadClientSelect(downloadClientId: number): void;
+  onModalClose(): void;
+}
+
+function SelectDownloadClientModalContent(
+  props: SelectDownloadClientModalContentProps
+) {
+  const { modalTitle, protocol, onDownloadClientSelect, onModalClose } = props;
+
+  const { isFetching, isPopulated, error, items } = useSelector(
+    createEnabledDownloadClientsSelector(protocol)
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {translate('SelectDownloadClientModalTitle', { modalTitle })}
+      </ModalHeader>
+
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {!isFetching && error ? (
+          <Alert kind={kinds.DANGER}>
+            {translate('DownloadClientsLoadError')}
+          </Alert>
+        ) : null}
+
+        {isPopulated && !error ? (
+          <Form>
+            {items.map((downloadClient) => {
+              const { id, name, priority } = downloadClient;
+
+              return (
+                <SelectDownloadClientRow
+                  key={id}
+                  id={id}
+                  name={name}
+                  priority={priority}
+                  onDownloadClientSelect={onDownloadClientSelect}
+                />
+              );
+            })}
+          </Form>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default SelectDownloadClientModalContent;

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientRow.css

@@ -0,0 +1,6 @@
+.downloadClient {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  border-bottom: 1px solid var(--borderColor);
+}

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientRow.css.d.ts

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

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientRow.tsx

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import Link from 'Components/Link/Link';
+import translate from 'Utilities/String/translate';
+import styles from './SelectDownloadClientRow.css';
+
+interface SelectSeasonRowProps {
+  id: number;
+  name: string;
+  priority: number;
+  onDownloadClientSelect(downloadClientId: number): unknown;
+}
+
+function SelectDownloadClientRow(props: SelectSeasonRowProps) {
+  const { id, name, priority, onDownloadClientSelect } = props;
+
+  const onSeasonSelectWrapper = useCallback(() => {
+    onDownloadClientSelect(id);
+  }, [id, onDownloadClientSelect]);
+
+  return (
+    <Link
+      className={styles.downloadClient}
+      component="div"
+      onPress={onSeasonSelectWrapper}
+    >
+      <div>{name}</div>
+      <div>{translate('PrioritySettings', { priority })}</div>
+    </Link>
+  );
+}
+
+export default SelectDownloadClientRow;

frontend/src/Search/OverrideMatch/OverrideMatchData.css

@@ -0,0 +1,17 @@
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  width: 100%;
+}
+
+.placeholder {
+  display: inline-block;
+  margin: -2px 0;
+  width: 100%;
+  outline: 2px dashed var(--dangerColor);
+  outline-offset: -2px;
+}
+
+.optional {
+  outline: 2px dashed var(--gray);
+}

frontend/src/Search/OverrideMatch/OverrideMatchData.css.d.ts

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

frontend/src/Search/OverrideMatch/OverrideMatchData.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import React from 'react';
+import Link from 'Components/Link/Link';
+import styles from './OverrideMatchData.css';
+
+interface OverrideMatchDataProps {
+  value?: string | number | JSX.Element | JSX.Element[];
+  isDisabled?: boolean;
+  isOptional?: boolean;
+  onPress: () => void;
+}
+
+function OverrideMatchData(props: OverrideMatchDataProps) {
+  const { value, isDisabled = false, isOptional, onPress } = props;
+
+  return (
+    <Link className={styles.link} isDisabled={isDisabled} onPress={onPress}>
+      {(value == null || (Array.isArray(value) && value.length === 0)) &&
+      !isDisabled ? (
+        <span
+          className={classNames(
+            styles.placeholder,
+            isOptional && styles.optional
+          )}
+        >
+          &nbsp;
+        </span>
+      ) : (
+        value
+      )}
+    </Link>
+  );
+}
+
+export default OverrideMatchData;

frontend/src/Search/OverrideMatch/OverrideMatchModal.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { sizes } from 'Helpers/Props';
+import OverrideMatchModalContent from './OverrideMatchModalContent';
+
+interface OverrideMatchModalProps {
+  isOpen: boolean;
+  title: string;
+  indexerId: number;
+  guid: string;
+  protocol: DownloadProtocol;
+  isGrabbing: boolean;
+  grabError?: string;
+  onModalClose(): void;
+}
+
+function OverrideMatchModal(props: OverrideMatchModalProps) {
+  const {
+    isOpen,
+    title,
+    indexerId,
+    guid,
+    protocol,
+    isGrabbing,
+    grabError,
+    onModalClose,
+  } = props;
+
+  return (
+    <Modal isOpen={isOpen} size={sizes.LARGE} onModalClose={onModalClose}>
+      <OverrideMatchModalContent
+        title={title}
+        indexerId={indexerId}
+        guid={guid}
+        protocol={protocol}
+        isGrabbing={isGrabbing}
+        grabError={grabError}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default OverrideMatchModal;

frontend/src/Search/OverrideMatch/OverrideMatchModalContent.css

@@ -0,0 +1,49 @@
+.label {
+  composes: label from '~Components/Label.css';
+
+  cursor: pointer;
+}
+
+.item {
+  display: block;
+  margin-bottom: 5px;
+  margin-left: 50px;
+}
+
+.footer {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.error {
+  margin-right: 20px;
+  color: var(--dangerColor);
+  word-break: break-word;
+}
+
+.buttons {
+  display: flex;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .item {
+    margin-left: 0;
+  }
+
+  .footer {
+    display: block;
+  }
+
+  .error {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .buttons {
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}

frontend/src/Search/OverrideMatch/OverrideMatchModalContent.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'buttons': string;
+  'error': string;
+  'footer': string;
+  'item': string;
+  'label': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Search/OverrideMatch/OverrideMatchModalContent.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+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 DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { grabRelease } from 'Store/Actions/releaseActions';
+import { fetchDownloadClients } from 'Store/Actions/settingsActions';
+import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
+import translate from 'Utilities/String/translate';
+import SelectDownloadClientModal from './DownloadClient/SelectDownloadClientModal';
+import OverrideMatchData from './OverrideMatchData';
+import styles from './OverrideMatchModalContent.css';
+
+type SelectType = 'select' | 'downloadClient';
+
+interface OverrideMatchModalContentProps {
+  indexerId: number;
+  title: string;
+  guid: string;
+  protocol: DownloadProtocol;
+  isGrabbing: boolean;
+  grabError?: string;
+  onModalClose(): void;
+}
+
+function OverrideMatchModalContent(props: OverrideMatchModalContentProps) {
+  const modalTitle = translate('ManualGrab');
+  const {
+    indexerId,
+    title,
+    guid,
+    protocol,
+    isGrabbing,
+    grabError,
+    onModalClose,
+  } = props;
+
+  const [downloadClientId, setDownloadClientId] = useState<number | null>(null);
+  const [selectModalOpen, setSelectModalOpen] = useState<SelectType | null>(
+    null
+  );
+  const previousIsGrabbing = usePrevious(isGrabbing);
+
+  const dispatch = useDispatch();
+  const { items: downloadClients } = useSelector(
+    createEnabledDownloadClientsSelector(protocol)
+  );
+
+  const onSelectModalClose = useCallback(() => {
+    setSelectModalOpen(null);
+  }, [setSelectModalOpen]);
+
+  const onSelectDownloadClientPress = useCallback(() => {
+    setSelectModalOpen('downloadClient');
+  }, [setSelectModalOpen]);
+
+  const onDownloadClientSelect = useCallback(
+    (downloadClientId: number) => {
+      setDownloadClientId(downloadClientId);
+      setSelectModalOpen(null);
+    },
+    [setDownloadClientId, setSelectModalOpen]
+  );
+
+  const onGrabPress = useCallback(() => {
+    dispatch(
+      grabRelease({
+        indexerId,
+        guid,
+        downloadClientId,
+      })
+    );
+  }, [indexerId, guid, downloadClientId, dispatch]);
+
+  useEffect(() => {
+    if (!isGrabbing && previousIsGrabbing) {
+      onModalClose();
+    }
+  }, [isGrabbing, previousIsGrabbing, onModalClose]);
+
+  useEffect(
+    () => {
+      dispatch(fetchDownloadClients());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {translate('OverrideGrabModalTitle', { title })}
+      </ModalHeader>
+
+      <ModalBody>
+        <DescriptionList>
+          {downloadClients.length > 1 ? (
+            <DescriptionListItem
+              className={styles.item}
+              title={translate('DownloadClient')}
+              data={
+                <OverrideMatchData
+                  value={
+                    downloadClients.find(
+                      (downloadClient) => downloadClient.id === downloadClientId
+                    )?.name ?? translate('Default')
+                  }
+                  onPress={onSelectDownloadClientPress}
+                />
+              }
+            />
+          ) : null}
+        </DescriptionList>
+      </ModalBody>
+
+      <ModalFooter className={styles.footer}>
+        <div className={styles.error}>{grabError}</div>
+
+        <div className={styles.buttons}>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <SpinnerErrorButton
+            isSpinning={isGrabbing}
+            error={grabError}
+            onPress={onGrabPress}
+          >
+            {translate('GrabRelease')}
+          </SpinnerErrorButton>
+        </div>
+      </ModalFooter>
+
+      <SelectDownloadClientModal
+        isOpen={selectModalOpen === 'downloadClient'}
+        protocol={protocol}
+        modalTitle={modalTitle}
+        onDownloadClientSelect={onDownloadClientSelect}
+        onModalClose={onSelectModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default OverrideMatchModalContent;

frontend/src/Search/SearchIndex.js

@@ -282,7 +282,7 @@ class SearchIndex extends Component {
 
     const ViewComponent = getViewComponent(isSmallScreen);
     const isLoaded = !!(!error && isPopulated && items.length && this.scrollerRef.current);
-    const hasNoIndexer = !totalItems;
+    const hasNoSearchResults = !totalItems;
 
     return (
       <PageContent title={translate('Search')}>
@@ -306,7 +306,7 @@ class SearchIndex extends Component {
             <SearchIndexSortMenu
               sortKey={sortKey}
               sortDirection={sortDirection}
-              isDisabled={hasNoIndexer}
+              isDisabled={hasNoSearchResults}
               onSortSelect={onSortSelect}
             />
 
@@ -314,7 +314,7 @@ class SearchIndex extends Component {
               selectedFilterKey={selectedFilterKey}
               filters={filters}
               customFilters={customFilters}
-              isDisabled={hasNoIndexer}
+              isDisabled={hasNoSearchResults}
               onFilterSelect={onFilterSelect}
             />
           </PageToolbarSection>

frontend/src/Search/SearchIndexConnector.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import withScrollPosition from 'Components/withScrollPosition';
 import { bulkGrabReleases, cancelFetchReleases, clearReleases, fetchReleases, setReleasesFilter, setReleasesSort, setReleasesTableOption } from 'Store/Actions/releaseActions';
+import { fetchDownloadClients } from 'Store/Actions/Settings/downloadClients';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createReleaseClientSideCollectionItemsSelector from 'Store/Selectors/createReleaseClientSideCollectionItemsSelector';
 import SearchIndex from './SearchIndex';
@@ -55,12 +56,20 @@ function createMapDispatchToProps(dispatch, props) {
 
     dispatchClearReleases() {
       dispatch(clearReleases());
+    },
+
+    dispatchFetchDownloadClients() {
+      dispatch(fetchDownloadClients());
     }
   };
 }
 
 class SearchIndexConnector extends Component {
 
+  componentDidMount() {
+    this.props.dispatchFetchDownloadClients();
+  }
+
   componentWillUnmount() {
     this.props.dispatchCancelFetchReleases();
     this.props.dispatchClearReleases();
@@ -85,6 +94,7 @@ SearchIndexConnector.propTypes = {
   onBulkGrabPress: PropTypes.func.isRequired,
   dispatchCancelFetchReleases: PropTypes.func.isRequired,
   dispatchClearReleases: PropTypes.func.isRequired,
+  dispatchFetchDownloadClients: PropTypes.func.isRequired,
   items: PropTypes.arrayOf(PropTypes.object)
 };
 

frontend/src/Search/Table/SearchIndexItemConnector.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { executeCommand } from 'Store/Actions/commandActions';
 
 function createReleaseSelector() {
   return createSelector(
@@ -37,10 +36,6 @@ function createMapStateToProps() {
   );
 }
 
-const mapDispatchToProps = {
-  dispatchExecuteCommand: executeCommand
-};
-
 class SearchIndexItemConnector extends Component {
 
   //
@@ -71,4 +66,4 @@ SearchIndexItemConnector.propTypes = {
   component: PropTypes.elementType.isRequired
 };
 
-export default connect(createMapStateToProps, mapDispatchToProps)(SearchIndexItemConnector);
+export default connect(createMapStateToProps, null)(SearchIndexItemConnector);

frontend/src/Search/Table/SearchIndexRow.css

@@ -67,3 +67,33 @@
 
   color: var(--textColor);
 }
+
+.manualDownloadContent {
+  position: relative;
+  display: inline-block;
+  margin: 0 2px;
+  width: 22px;
+  height: 20.39px;
+  vertical-align: middle;
+  line-height: 20.39px;
+
+  &:hover {
+    color: var(--iconButtonHoverColor);
+  }
+}
+
+.interactiveIcon {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  /* width: 100%; */
+  text-align: center;
+}
+
+.downloadIcon {
+  position: absolute;
+  top: 7px;
+  left: 8px;
+  /* width: 100%; */
+  text-align: center;
+}

frontend/src/Search/Table/SearchIndexRow.css.d.ts

@@ -6,12 +6,15 @@ interface CssExports {
   'category': string;
   'cell': string;
   'checkInput': string;
+  'downloadIcon': string;
   'downloadLink': string;
   'externalLinks': string;
   'files': string;
   'grabs': string;
   'indexer': string;
   'indexerFlags': string;
+  'interactiveIcon': string;
+  'manualDownloadContent': string;
   'peers': string;
   'protocol': string;
   'size': string;

frontend/src/Search/Table/SearchIndexRow.js

@@ -1,431 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Icon from 'Components/Icon';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
-import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
-import Popover from 'Components/Tooltip/Popover';
-import { icons, kinds, tooltipPositions } from 'Helpers/Props';
-import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatAge from 'Utilities/Number/formatAge';
-import formatBytes from 'Utilities/Number/formatBytes';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import CategoryLabel from './CategoryLabel';
-import Peers from './Peers';
-import ReleaseLinks from './ReleaseLinks';
-import styles from './SearchIndexRow.css';
-
-function getDownloadIcon(isGrabbing, isGrabbed, grabError) {
-  if (isGrabbing) {
-    return icons.SPINNER;
-  } else if (isGrabbed) {
-    return icons.DOWNLOADING;
-  } else if (grabError) {
-    return icons.DOWNLOADING;
-  }
-
-  return icons.DOWNLOAD;
-}
-
-function getDownloadKind(isGrabbed, grabError) {
-  if (isGrabbed) {
-    return kinds.SUCCESS;
-  }
-
-  if (grabError) {
-    return kinds.DANGER;
-  }
-
-  return kinds.DEFAULT;
-}
-
-function getDownloadTooltip(isGrabbing, isGrabbed, grabError) {
-  if (isGrabbing) {
-    return '';
-  } else if (isGrabbed) {
-    return translate('AddedToDownloadClient');
-  } else if (grabError) {
-    return grabError;
-  }
-
-  return translate('AddToDownloadClient');
-}
-
-class SearchIndexRow extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isConfirmGrabModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onGrabPress = () => {
-    const {
-      guid,
-      indexerId,
-      onGrabPress
-    } = this.props;
-
-    onGrabPress({
-      guid,
-      indexerId
-    });
-  };
-
-  onSavePress = () => {
-    const {
-      downloadUrl,
-      fileName,
-      onSavePress
-    } = this.props;
-
-    onSavePress({
-      downloadUrl,
-      fileName
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      guid,
-      protocol,
-      downloadUrl,
-      magnetUrl,
-      categories,
-      age,
-      ageHours,
-      ageMinutes,
-      publishDate,
-      title,
-      infoUrl,
-      indexer,
-      size,
-      files,
-      grabs,
-      seeders,
-      leechers,
-      imdbId,
-      tmdbId,
-      tvdbId,
-      tvMazeId,
-      indexerFlags,
-      columns,
-      isGrabbing,
-      isGrabbed,
-      grabError,
-      longDateFormat,
-      timeFormat,
-      isSelected,
-      onSelectedChange
-    } = this.props;
-
-    return (
-      <>
-        {
-          columns.map((column) => {
-            const {
-              isVisible
-            } = column;
-
-            if (!isVisible) {
-              return null;
-            }
-
-            if (column.name === 'select') {
-              return (
-                <VirtualTableSelectCell
-                  inputClassName={styles.checkInput}
-                  id={guid}
-                  key={column.name}
-                  isSelected={isSelected}
-                  isDisabled={false}
-                  onSelectedChange={onSelectedChange}
-                />
-              );
-            }
-
-            if (column.name === 'protocol') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  <ProtocolLabel
-                    protocol={protocol}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'age') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                  title={formatDateTime(publishDate, longDateFormat, timeFormat, { includeSeconds: true })}
-                >
-                  {formatAge(age, ageHours, ageMinutes)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'sortTitle') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  <Link
-                    to={infoUrl}
-                    title={title}
-                  >
-                    <div>
-                      {title}
-                    </div>
-                  </Link>
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'indexer') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {indexer}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'size') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {formatBytes(size)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'files') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {files}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'grabs') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {grabs}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'peers') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {
-                    protocol === 'torrent' &&
-                      <Peers
-                        seeders={seeders}
-                        leechers={leechers}
-                      />
-                  }
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'category') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  <CategoryLabel
-                    categories={categories}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'indexerFlags') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  {
-                    !!indexerFlags.length &&
-                      <Popover
-                        anchor={
-                          <Icon
-                            name={icons.FLAG}
-                            kind={kinds.PRIMARY}
-                          />
-                        }
-                        title={translate('IndexerFlags')}
-                        body={
-                          <ul>
-                            {
-                              indexerFlags.map((flag, index) => {
-                                return (
-                                  <li key={index}>
-                                    {titleCase(flag)}
-                                  </li>
-                                );
-                              })
-                            }
-                          </ul>
-                        }
-                        position={tooltipPositions.LEFT}
-                      />
-                  }
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (column.name === 'actions') {
-              return (
-                <VirtualTableRowCell
-                  key={column.name}
-                  className={styles[column.name]}
-                >
-                  <SpinnerIconButton
-                    name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
-                    kind={getDownloadKind(isGrabbed, grabError)}
-                    title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
-                    isDisabled={isGrabbed}
-                    isSpinning={isGrabbing}
-                    onPress={this.onGrabPress}
-                  />
-
-                  {
-                    downloadUrl ?
-                      <IconButton
-                        className={styles.downloadLink}
-                        name={icons.SAVE}
-                        title={translate('Save')}
-                        onPress={this.onSavePress}
-                      /> :
-                      null
-                  }
-
-                  {
-                    magnetUrl ?
-                      <IconButton
-                        className={styles.downloadLink}
-                        name={icons.MAGNET}
-                        title={translate('Open')}
-                        to={magnetUrl}
-                      /> :
-                      null
-                  }
-
-                  {
-                    imdbId || tmdbId || tvdbId || tvMazeId ? (
-                      <Popover
-                        anchor={
-                          <Icon
-                            className={styles.externalLinks}
-                            name={icons.EXTERNAL_LINK}
-                            size={12}
-                          />
-                        }
-                        title={translate('Links')}
-                        body={
-                          <ReleaseLinks
-                            categories={categories}
-                            imdbId={imdbId}
-                            tmdbId={tmdbId}
-                            tvdbId={tvdbId}
-                            tvMazeId={tvMazeId}
-                          />
-                        }
-                        kind={kinds.INVERSE}
-                        position={tooltipPositions.TOP}
-                      />
-                    ) : null
-                  }
-                </VirtualTableRowCell>
-              );
-            }
-
-            return null;
-          })
-        }
-      </>
-    );
-  }
-}
-
-SearchIndexRow.propTypes = {
-  guid: PropTypes.string.isRequired,
-  categories: PropTypes.arrayOf(PropTypes.object).isRequired,
-  protocol: PropTypes.string.isRequired,
-  age: PropTypes.number.isRequired,
-  ageHours: PropTypes.number.isRequired,
-  ageMinutes: PropTypes.number.isRequired,
-  publishDate: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  fileName: PropTypes.string.isRequired,
-  infoUrl: PropTypes.string.isRequired,
-  downloadUrl: PropTypes.string,
-  magnetUrl: PropTypes.string,
-  indexerId: PropTypes.number.isRequired,
-  indexer: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  files: PropTypes.number,
-  grabs: PropTypes.number,
-  seeders: PropTypes.number,
-  leechers: PropTypes.number,
-  imdbId: PropTypes.number,
-  tmdbId: PropTypes.number,
-  tvdbId: PropTypes.number,
-  tvMazeId: PropTypes.number,
-  indexerFlags: PropTypes.arrayOf(PropTypes.string).isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onGrabPress: PropTypes.func.isRequired,
-  onSavePress: PropTypes.func.isRequired,
-  isGrabbing: PropTypes.bool.isRequired,
-  isGrabbed: PropTypes.bool.isRequired,
-  grabError: PropTypes.string,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool,
-  onSelectedChange: PropTypes.func.isRequired
-};
-
-SearchIndexRow.defaultProps = {
-  isGrabbing: false,
-  isGrabbed: false
-};
-
-export default SearchIndexRow;

frontend/src/Search/Table/SearchIndexRow.tsx

@@ -0,0 +1,395 @@
+import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
+import Column from 'Components/Table/Column';
+import Popover from 'Components/Tooltip/Popover';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
+import { IndexerCategory } from 'Indexer/Indexer';
+import OverrideMatchModal from 'Search/OverrideMatch/OverrideMatchModal';
+import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
+import { SelectStateInputProps } from 'typings/props';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
+import formatBytes from 'Utilities/Number/formatBytes';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import CategoryLabel from './CategoryLabel';
+import Peers from './Peers';
+import ReleaseLinks from './ReleaseLinks';
+import styles from './SearchIndexRow.css';
+
+function getDownloadIcon(
+  isGrabbing: boolean,
+  isGrabbed: boolean,
+  grabError?: string
+) {
+  if (isGrabbing) {
+    return icons.SPINNER;
+  } else if (isGrabbed) {
+    return icons.DOWNLOADING;
+  } else if (grabError) {
+    return icons.DOWNLOADING;
+  }
+
+  return icons.DOWNLOAD;
+}
+
+function getDownloadKind(isGrabbed: boolean, grabError?: string) {
+  if (isGrabbed) {
+    return kinds.SUCCESS;
+  }
+
+  if (grabError) {
+    return kinds.DANGER;
+  }
+
+  return kinds.DEFAULT;
+}
+
+function getDownloadTooltip(
+  isGrabbing: boolean,
+  isGrabbed: boolean,
+  grabError?: string
+) {
+  if (isGrabbing) {
+    return '';
+  } else if (isGrabbed) {
+    return translate('AddedToDownloadClient');
+  } else if (grabError) {
+    return grabError;
+  }
+
+  return translate('AddToDownloadClient');
+}
+
+interface SearchIndexRowProps {
+  guid: string;
+  protocol: DownloadProtocol;
+  age: number;
+  ageHours: number;
+  ageMinutes: number;
+  publishDate: string;
+  title: string;
+  fileName: string;
+  infoUrl: string;
+  downloadUrl?: string;
+  magnetUrl?: string;
+  indexerId: number;
+  indexer: string;
+  categories: IndexerCategory[];
+  size: number;
+  files?: number;
+  grabs?: number;
+  seeders?: number;
+  leechers?: number;
+  imdbId?: string;
+  tmdbId?: number;
+  tvdbId?: number;
+  tvMazeId?: number;
+  indexerFlags: string[];
+  isGrabbing: boolean;
+  isGrabbed: boolean;
+  grabError?: string;
+  longDateFormat: string;
+  timeFormat: string;
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+  onGrabPress(...args: unknown[]): void;
+  onSavePress(...args: unknown[]): void;
+}
+
+function SearchIndexRow(props: SearchIndexRowProps) {
+  const {
+    guid,
+    indexerId,
+    protocol,
+    categories,
+    age,
+    ageHours,
+    ageMinutes,
+    publishDate,
+    title,
+    fileName,
+    infoUrl,
+    downloadUrl,
+    magnetUrl,
+    indexer,
+    size,
+    files,
+    grabs,
+    seeders,
+    leechers,
+    imdbId,
+    tmdbId,
+    tvdbId,
+    tvMazeId,
+    indexerFlags = [],
+    isGrabbing = false,
+    isGrabbed = false,
+    grabError,
+    longDateFormat,
+    timeFormat,
+    columns,
+    isSelected,
+    onSelectedChange,
+    onGrabPress,
+    onSavePress,
+  } = props;
+
+  const [isOverrideModalOpen, setIsOverrideModalOpen] = useState(false);
+
+  const { items: downloadClients } = useSelector(
+    createEnabledDownloadClientsSelector(protocol)
+  );
+
+  const onGrabPressWrapper = useCallback(() => {
+    onGrabPress({
+      guid,
+      indexerId,
+    });
+  }, [guid, indexerId, onGrabPress]);
+
+  const onSavePressWrapper = useCallback(() => {
+    onSavePress({
+      downloadUrl,
+      fileName,
+    });
+  }, [downloadUrl, fileName, onSavePress]);
+
+  const onOverridePress = useCallback(() => {
+    setIsOverrideModalOpen(true);
+  }, [setIsOverrideModalOpen]);
+
+  const onOverrideModalClose = useCallback(() => {
+    setIsOverrideModalOpen(false);
+  }, [setIsOverrideModalOpen]);
+
+  return (
+    <>
+      {columns.map((column) => {
+        const { name, isVisible } = column;
+
+        if (!isVisible) {
+          return null;
+        }
+
+        if (name === 'select') {
+          return (
+            <VirtualTableSelectCell
+              inputClassName={styles.checkInput}
+              id={guid}
+              key={name}
+              isSelected={isSelected}
+              isDisabled={false}
+              onSelectedChange={onSelectedChange}
+            />
+          );
+        }
+
+        if (name === 'protocol') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <ProtocolLabel protocol={protocol} />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'age') {
+          return (
+            <VirtualTableRowCell
+              key={name}
+              className={styles[name]}
+              title={formatDateTime(publishDate, longDateFormat, timeFormat, {
+                includeSeconds: true,
+              })}
+            >
+              {formatAge(age, ageHours, ageMinutes)}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'sortTitle') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <Link to={infoUrl} title={title}>
+                <div>{title}</div>
+              </Link>
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'indexer') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {indexer}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'size') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {formatBytes(size)}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'files') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {files}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'grabs') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {grabs}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'peers') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {protocol === 'torrent' && (
+                <Peers seeders={seeders} leechers={leechers} />
+              )}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'category') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <CategoryLabel categories={categories} />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'indexerFlags') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {!!indexerFlags.length && (
+                <Popover
+                  anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                  title={translate('IndexerFlags')}
+                  body={
+                    <ul>
+                      {indexerFlags.map((flag, index) => {
+                        return <li key={index}>{titleCase(flag)}</li>;
+                      })}
+                    </ul>
+                  }
+                  position={tooltipPositions.LEFT}
+                />
+              )}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'actions') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <SpinnerIconButton
+                name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
+                kind={getDownloadKind(isGrabbed, grabError)}
+                title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
+                isDisabled={isGrabbed}
+                isSpinning={isGrabbing}
+                onPress={onGrabPressWrapper}
+              />
+
+              {downloadClients.length > 1 ? (
+                <Link
+                  className={styles.manualDownloadContent}
+                  title={translate('OverrideAndAddToDownloadClient')}
+                  onPress={onOverridePress}
+                >
+                  <div className={styles.manualDownloadContent}>
+                    <Icon
+                      className={styles.interactiveIcon}
+                      name={icons.INTERACTIVE}
+                      size={12}
+                    />
+
+                    <Icon
+                      className={styles.downloadIcon}
+                      name={icons.CIRCLE_DOWN}
+                      size={10}
+                    />
+                  </div>
+                </Link>
+              ) : null}
+
+              {downloadUrl ? (
+                <IconButton
+                  className={styles.downloadLink}
+                  name={icons.SAVE}
+                  title={translate('Save')}
+                  onPress={onSavePressWrapper}
+                />
+              ) : null}
+
+              {magnetUrl ? (
+                <IconButton
+                  className={styles.downloadLink}
+                  name={icons.MAGNET}
+                  title={translate('Open')}
+                  to={magnetUrl}
+                />
+              ) : null}
+
+              {imdbId || tmdbId || tvdbId || tvMazeId ? (
+                <Popover
+                  anchor={
+                    <Icon
+                      className={styles.externalLinks}
+                      name={icons.EXTERNAL_LINK}
+                      size={12}
+                    />
+                  }
+                  title={translate('Links')}
+                  body={
+                    <ReleaseLinks
+                      categories={categories}
+                      imdbId={imdbId}
+                      tmdbId={tmdbId}
+                      tvdbId={tvdbId}
+                      tvMazeId={tvMazeId}
+                    />
+                  }
+                  position={tooltipPositions.TOP}
+                />
+              ) : null}
+            </VirtualTableRowCell>
+          );
+        }
+
+        return null;
+      })}
+
+      <OverrideMatchModal
+        isOpen={isOverrideModalOpen}
+        title={title}
+        indexerId={indexerId}
+        guid={guid}
+        protocol={protocol}
+        isGrabbing={isGrabbing}
+        grabError={grabError}
+        onModalClose={onOverrideModalClose}
+      />
+    </>
+  );
+}
+
+export default SearchIndexRow;

frontend/src/Settings/Applications/Applications/ApplicationsConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { deleteApplication, fetchApplications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Applications from './Applications';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.applications', sortByName),
+    createSortedSectionSelector('settings.applications', sortByProp('name')),
     createTagsSelector(),
     (applications, tagList) => {
       return {

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { deleteDownloadClient, fetchDownloadClients } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import DownloadClients from './DownloadClients';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.downloadClients', sortByName),
+    createSortedSectionSelector('settings.downloadClients', sortByProp('name')),
     (downloadClients) => downloadClients
   );
 }

frontend/src/Settings/General/UpdateSettings.js

@@ -12,7 +12,6 @@ function UpdateSettings(props) {
   const {
     advancedSettings,
     settings,
-    isWindows,
     packageUpdateMechanism,
     onInputChange
   } = props;
@@ -38,10 +37,10 @@ function UpdateSettings(props) {
       value: titleCase(packageUpdateMechanism)
     });
   } else {
-    updateOptions.push({ key: 'builtIn', value: 'Built-In' });
+    updateOptions.push({ key: 'builtIn', value: translate('BuiltIn') });
   }
 
-  updateOptions.push({ key: 'script', value: 'Script' });
+  updateOptions.push({ key: 'script', value: translate('Script') });
 
   return (
     <FieldSet legend={translate('Updates')}>
@@ -62,61 +61,58 @@ function UpdateSettings(props) {
         />
       </FormGroup>
 
-      {
-        !isWindows &&
-          <div>
-            <FormGroup
-              advancedSettings={advancedSettings}
-              isAdvanced={true}
-              size={sizes.MEDIUM}
-            >
-              <FormLabel>{translate('Automatic')}</FormLabel>
+      <div>
+        <FormGroup
+          advancedSettings={advancedSettings}
+          isAdvanced={true}
+          size={sizes.MEDIUM}
+        >
+          <FormLabel>{translate('Automatic')}</FormLabel>
 
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="updateAutomatically"
-                helpText={translate('UpdateAutomaticallyHelpText')}
-                onChange={onInputChange}
-                {...updateAutomatically}
-              />
-            </FormGroup>
+          <FormInputGroup
+            type={inputTypes.CHECK}
+            name="updateAutomatically"
+            helpText={translate('UpdateAutomaticallyHelpText')}
+            onChange={onInputChange}
+            {...updateAutomatically}
+          />
+        </FormGroup>
 
+        <FormGroup
+          advancedSettings={advancedSettings}
+          isAdvanced={true}
+        >
+          <FormLabel>{translate('Mechanism')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="updateMechanism"
+            values={updateOptions}
+            helpText={translate('UpdateMechanismHelpText')}
+            helpLink="https://wiki.servarr.com/prowlarr/settings#updates"
+            onChange={onInputChange}
+            {...updateMechanism}
+          />
+        </FormGroup>
+
+        {
+          updateMechanism.value === 'script' &&
             <FormGroup
               advancedSettings={advancedSettings}
               isAdvanced={true}
             >
-              <FormLabel>{translate('Mechanism')}</FormLabel>
+              <FormLabel>{translate('ScriptPath')}</FormLabel>
 
               <FormInputGroup
-                type={inputTypes.SELECT}
-                name="updateMechanism"
-                values={updateOptions}
-                helpText={translate('UpdateMechanismHelpText')}
-                helpLink="https://wiki.servarr.com/prowlarr/settings#updates"
+                type={inputTypes.TEXT}
+                name="updateScriptPath"
+                helpText={translate('UpdateScriptPathHelpText')}
                 onChange={onInputChange}
-                {...updateMechanism}
+                {...updateScriptPath}
               />
             </FormGroup>
-
-            {
-              updateMechanism.value === 'script' &&
-                <FormGroup
-                  advancedSettings={advancedSettings}
-                  isAdvanced={true}
-                >
-                  <FormLabel>{translate('ScriptPath')}</FormLabel>
-
-                  <FormInputGroup
-                    type={inputTypes.TEXT}
-                    name="updateScriptPath"
-                    helpText={translate('UpdateScriptPathHelpText')}
-                    onChange={onInputChange}
-                    {...updateScriptPath}
-                  />
-                </FormGroup>
-            }
-          </div>
-      }
+        }
+      </div>
     </FieldSet>
   );
 }

frontend/src/Settings/Indexers/IndexerProxies/IndexerProxiesConnector.js

@@ -5,13 +5,13 @@ import { createSelector } from 'reselect';
 import { deleteIndexerProxy, fetchIndexerProxies } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import IndexerProxies from './IndexerProxies';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.indexerProxies', sortByName),
-    createSortedSectionSelector('indexers', sortByName),
+    createSortedSectionSelector('settings.indexerProxies', sortByProp('name')),
+    createSortedSectionSelector('indexers', sortByProp('name')),
     createTagsSelector(),
     (indexerProxies, indexers, tagList) => {
       return {

frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { deleteNotification, fetchNotifications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Notifications from './Notifications';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.notifications', sortByName),
+    createSortedSectionSelector('settings.notifications', sortByProp('name')),
     createTagsSelector(),
     (notifications, tagList) => {
       return {

frontend/src/Settings/Profiles/App/AppProfilesConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { cloneAppProfile, deleteAppProfile, fetchAppProfiles } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import AppProfiles from './AppProfiles';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.appProfiles', sortByName),
+    createSortedSectionSelector('settings.appProfiles', sortByProp('name')),
     (appProfiles) => appProfiles
   );
 }

frontend/src/Store/Actions/historyActions.js

@@ -82,6 +82,12 @@ export const defaultState = {
       isSortable: false,
       isVisible: false
     },
+    {
+      name: 'host',
+      label: () => translate('Host'),
+      isSortable: false,
+      isVisible: false
+    },
     {
       name: 'elapsedTime',
       label: () => translate('ElapsedTime'),

frontend/src/Store/Actions/indexerActions.js

@@ -3,9 +3,13 @@ import { createAction } from 'redux-actions';
 import { filterTypePredicates, sortDirections } from 'Helpers/Props';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
-import createSaveProviderHandler, { createCancelSaveProviderHandler } from 'Store/Actions/Creators/createSaveProviderHandler';
+import createSaveProviderHandler, {
+  createCancelSaveProviderHandler
+} from 'Store/Actions/Creators/createSaveProviderHandler';
 import createTestAllProvidersHandler from 'Store/Actions/Creators/createTestAllProvidersHandler';
-import createTestProviderHandler, { createCancelTestProviderHandler } from 'Store/Actions/Creators/createTestProviderHandler';
+import createTestProviderHandler, {
+  createCancelTestProviderHandler
+} from 'Store/Actions/Creators/createTestProviderHandler';
 import createSetProviderFieldValueReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValueReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -16,6 +20,7 @@ import translate from 'Utilities/String/translate';
 import createBulkEditItemHandler from './Creators/createBulkEditItemHandler';
 import createBulkRemoveItemHandler from './Creators/createBulkRemoveItemHandler';
 import createHandleActions from './Creators/createHandleActions';
+import createClearReducer from './Creators/Reducers/createClearReducer';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
 
 //
@@ -96,10 +101,7 @@ export const filterPredicates = {
 
 export const sortPredicates = {
   vipExpiration: function(item) {
-    const vipExpiration =
-    item.fields.find((field) => field.name === 'vipExpiration')?.value ?? '';
-
-    return vipExpiration;
+    return item.fields.find((field) => field.name === 'vipExpiration')?.value ?? '';
   }
 };
 
@@ -110,6 +112,7 @@ export const FETCH_INDEXERS = 'indexers/fetchIndexers';
 export const FETCH_INDEXER_SCHEMA = 'indexers/fetchIndexerSchema';
 export const SELECT_INDEXER_SCHEMA = 'indexers/selectIndexerSchema';
 export const SET_INDEXER_SCHEMA_SORT = 'indexers/setIndexerSchemaSort';
+export const CLEAR_INDEXER_SCHEMA = 'indexers/clearIndexerSchema';
 export const CLONE_INDEXER = 'indexers/cloneIndexer';
 export const SET_INDEXER_VALUE = 'indexers/setIndexerValue';
 export const SET_INDEXER_FIELD_VALUE = 'indexers/setIndexerFieldValue';
@@ -129,6 +132,7 @@ export const fetchIndexers = createThunk(FETCH_INDEXERS);
 export const fetchIndexerSchema = createThunk(FETCH_INDEXER_SCHEMA);
 export const selectIndexerSchema = createAction(SELECT_INDEXER_SCHEMA);
 export const setIndexerSchemaSort = createAction(SET_INDEXER_SCHEMA_SORT);
+export const clearIndexerSchema = createAction(CLEAR_INDEXER_SCHEMA);
 export const cloneIndexer = createAction(CLONE_INDEXER);
 
 export const saveIndexer = createThunk(SAVE_INDEXER);
@@ -214,6 +218,8 @@ export const reducers = createHandleActions({
     });
   },
 
+  [CLEAR_INDEXER_SCHEMA]: createClearReducer(schemaSection, defaultState),
+
   [CLONE_INDEXER]: function(state, { payload }) {
     const id = payload.id;
     const newState = getSectionState(state, section);

frontend/src/Store/Selectors/createEnabledDownloadClientsSelector.ts

@@ -0,0 +1,26 @@
+import { createSelector } from 'reselect';
+import { DownloadClientAppState } from 'App/State/SettingsAppState';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import DownloadClient from 'typings/DownloadClient';
+import sortByProp from 'Utilities/Array/sortByProp';
+
+export default function createEnabledDownloadClientsSelector(
+  protocol: DownloadProtocol
+) {
+  return createSelector(
+    createSortedSectionSelector<DownloadClient>(
+      'settings.downloadClients',
+      sortByProp('name')
+    ),
+    (downloadClients: DownloadClientAppState) => {
+      const { isFetching, isPopulated, error, items } = downloadClients;
+
+      const clients = items.filter(
+        (item) => item.protocol === protocol && item.enable
+      );
+
+      return { isFetching, isPopulated, error, items: clients };
+    }
+  );
+}

frontend/src/Store/Selectors/createSortedSectionSelector.ts

@@ -1,14 +1,18 @@
 import { createSelector } from 'reselect';
 import getSectionState from 'Utilities/State/getSectionState';
 
-function createSortedSectionSelector(section, comparer) {
+function createSortedSectionSelector<T>(
+  section: string,
+  comparer: (a: T, b: T) => number
+) {
   return createSelector(
     (state) => state,
     (state) => {
       const sectionState = getSectionState(state, section, true);
+
       return {
         ...sectionState,
-        items: [...sectionState.items].sort(comparer)
+        items: [...sectionState.items].sort(comparer),
       };
     }
   );

frontend/src/Styles/Themes/dark.js

@@ -188,7 +188,7 @@ module.exports = {
   // Charts
 
   chartBackgroundColor: '#262626',
-  failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'],
-  chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'],
-  chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26']
+  failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'].join(','),
+  chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'].join(','),
+  chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26'].join(',')
 };

frontend/src/Styles/Themes/index.js

@@ -2,7 +2,7 @@ import * as dark from './dark';
 import * as light from './light';
 
 const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-const auto = defaultDark ? { ...dark } : { ...light };
+const auto = defaultDark ? dark : light;
 
 export default {
   auto,

frontend/src/Styles/Themes/light.js

@@ -188,7 +188,7 @@ module.exports = {
   // Charts
 
   chartBackgroundColor: '#fff',
-  failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'],
-  chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'],
-  chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26']
+  failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'].join(','),
+  chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'].join(','),
+  chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26'].join(',')
 };

frontend/src/Styles/Variables/fonts.js

@@ -2,7 +2,6 @@ module.exports = {
   // Families
   defaultFontFamily: 'Roboto, "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
   monoSpaceFontFamily: '"Ubuntu Mono", Menlo, Monaco, Consolas, "Courier New", monospace;',
-  passwordFamily: 'text-security-disc',
 
   // Sizes
   extraSmallFontSize: '11px',

frontend/src/Utilities/Array/sortByName.js

@@ -1,5 +0,0 @@
-function sortByName(a, b) {
-  return a.name.localeCompare(b.name);
-}
-
-export default sortByName;

frontend/src/Utilities/Array/sortByProp.ts

@@ -0,0 +1,13 @@
+import { StringKey } from 'typings/Helpers/KeysMatching';
+
+export function sortByProp<
+  // eslint-disable-next-line no-use-before-define
+  T extends Record<K, string>,
+  K extends StringKey<T>
+>(sortKey: K) {
+  return (a: T, b: T) => {
+    return a[sortKey].localeCompare(b[sortKey], undefined, { numeric: true });
+  };
+}
+
+export default sortByProp;

frontend/src/Utilities/Number/formatBytes.js

@@ -7,10 +7,10 @@ function formatBytes(input) {
     return '';
   }
 
-  return filesize(size, {
+  return `${filesize(size, {
     base: 2,
     round: 1
-  });
+  })}`;
 }
 
 export default formatBytes;

frontend/src/login.html

@@ -57,8 +57,8 @@
 
     <style>
       body {
-        background-color: #f5f7fa;
-        color: #656565;
+        background-color: var(--pageBackground);
+        color: var(--textColor);
         font-family: "Roboto", "open sans", "Helvetica Neue", Helvetica, Arial,
           sans-serif;
       }
@@ -88,14 +88,14 @@
         padding: 10px;
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
-        background-color: #464b51;
+        background-color: var(--themeDarkColor);
       }
 
       .panel-body {
         padding: 20px;
         border-bottom-right-radius: 4px;
         border-bottom-left-radius: 4px;
-        background-color: #fff;
+        background-color: var(--panelBackground);
       }
 
       .sign-in {
@@ -112,16 +112,18 @@
         padding: 6px 16px;
         width: 100%;
         height: 35px;
-        border: 1px solid #dde6e9;
+        background-color: var(--inputBackgroundColor);
+        border: 1px solid var(--inputBorderColor);
         border-radius: 4px;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+        color: var(--textColor);
       }
 
       .form-input:focus {
         outline: 0;
-        border-color: #66afe9;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-          0 0 8px rgba(102, 175, 233, 0.6);
+        border-color: var(--inputFocusBorderColor);
+        box-shadow: inset 0 1px 1px var(--inputBoxShadowColor),
+          0 0 8px var(--inputFocusBoxShadowColor);
       }
 
       .button {
@@ -130,10 +132,10 @@
         padding: 10px 0;
         width: 100%;
         border: 1px solid;
-        border-color: #5899eb;
+        border-color: var(--primaryBorderColor);
         border-radius: 4px;
-        background-color: #5d9cec;
-        color: #fff;
+        background-color: var(--primaryBackgroundColor);
+        color: var(--white);
         vertical-align: middle;
         text-align: center;
         white-space: nowrap;
@@ -141,9 +143,9 @@
       }
 
       .button:hover {
-        border-color: #3483e7;
-        background-color: #4b91ea;
-        color: #fff;
+        border-color: var(--primaryHoverBorderColor);
+        background-color: var(--primaryHoverBackgroundColor);
+        color: var(--white);
         text-decoration: none;
       }
 
@@ -165,24 +167,24 @@
 
       .forgot-password {
         margin-left: auto;
-        color: #909fa7;
+        color: var(--forgotPasswordColor);
         text-decoration: none;
         font-size: 13px;
       }
 
       .forgot-password:focus,
       .forgot-password:hover {
-        color: #748690;
+        color: var(--forgotPasswordAltColor);
         text-decoration: underline;
       }
 
       .forgot-password:visited {
-        color: #748690;
+        color: var(--forgotPasswordAltColor);
       }
 
       .login-failed {
         margin-top: 20px;
-        color: #f05050;
+        color: var(--failedColor);
         font-size: 14px;
       }
 
@@ -291,5 +293,59 @@
 
       loginFailedDiv.classList.remove("hidden");
     }
+
+    var light = {
+      white: '#fff',
+      pageBackground: '#f5f7fa',
+      textColor: '#515253',
+      themeDarkColor: '#464b51',
+      panelBackground: '#fff',
+      inputBackgroundColor: '#fff',
+      inputBorderColor: '#dde6e9',
+      inputBoxShadowColor: 'rgba(0, 0, 0, 0.075)',
+      inputFocusBorderColor: '#66afe9',
+      inputFocusBoxShadowColor: 'rgba(102, 175, 233, 0.6)',
+      primaryBackgroundColor: '#5d9cec',
+      primaryBorderColor: '#5899eb',
+      primaryHoverBackgroundColor: '#4b91ea',
+      primaryHoverBorderColor: '#3483e7',
+      failedColor: '#f05050',
+      forgotPasswordColor: '#909fa7',
+      forgotPasswordAltColor: '#748690'
+    };
+
+    var dark = {
+      white: '#fff',
+      pageBackground: '#202020',
+      textColor: '#ccc',
+      themeDarkColor: '#494949',
+      panelBackground: '#111',
+      inputBackgroundColor: '#333',
+      inputBorderColor: '#dde6e9',
+      inputBoxShadowColor: 'rgba(0, 0, 0, 0.075)',
+      inputFocusBorderColor: '#66afe9',
+      inputFocusBoxShadowColor: 'rgba(102, 175, 233, 0.6)',
+      primaryBackgroundColor: '#5d9cec',
+      primaryBorderColor: '#5899eb',
+      primaryHoverBackgroundColor: '#4b91ea',
+      primaryHoverBorderColor: '#3483e7',
+      failedColor: '#f05050',
+      forgotPasswordColor: '#737d83',
+      forgotPasswordAltColor: '#546067'
+    };
+
+    var theme = "_THEME_";
+    var defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    var finalTheme = theme === 'dark' || (theme === 'auto' && defaultDark) ?
+      dark :
+      light;
+
+    Object.entries(finalTheme).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(
+        `--${key}`,
+        value
+      );
+    });
+
   </script>
 </html>

frontend/src/typings/Helpers/KeysMatching.ts

@@ -0,0 +1,7 @@
+type KeysMatching<T, V> = {
+  [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T];
+
+export type StringKey<T> = KeysMatching<T, string>;
+
+export default KeysMatching;

frontend/src/typings/IndexerStats.ts

@@ -2,6 +2,7 @@ export interface IndexerStatsIndexer {
   indexerId: number;
   indexerName: string;
   averageResponseTime: number;
+  averageGrabResponseTime: number;
   numberOfQueries: number;
   numberOfGrabs: number;
   numberOfRssQueries: number;