Revert "Fixed: Ensure translations are fetched before loading app"

This reverts commit 0fc52ae16f.

.editorconfig

@@ -36,9 +36,18 @@ dotnet_naming_style.instance_field_style.capitalization = camel_case
 dotnet_naming_style.instance_field_style.required_prefix = _
 
 # Prefer "var" everywhere
-csharp_style_var_for_built_in_types = true:suggestion
-csharp_style_var_when_type_is_apparent = true:suggestion
-csharp_style_var_elsewhere = true:suggestion
+csharp_style_var_for_built_in_types = true
+csharp_style_var_when_type_is_apparent = true
+csharp_style_var_elsewhere = true
+# Prefer "out" variables to be declared inline
+csharp_style_inlined_variable_declaration = true
+
+# Using directive is unnecessary.
+dotnet_diagnostic.IDE0005.severity = error
+# Use var instead of explicit type
+dotnet_diagnostic.IDE0007.severity = error
+# Inline variable declaration
+dotnet_diagnostic.IDE0018.severity = error
 
 # Stylecop Rules
 dotnet_diagnostic.SA0001.severity = none

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -74,7 +74,7 @@ body:
 - type: checkboxes
   attributes:
     label: Trace Logs have been provided as applicable. Reports may be closed if the required logs are not provided.
-    description: Trace logs are generally required for all bug reports
+    description: Trace logs are generally required for all bug reports and contain `trace`. Info logs are invalid for bug reports and do not contain `debug` nor `trace`
     options:
-    - label: I have followed the steps in the wiki link above and provided the required trace logs that are relevant and show this issue.
+    - label: I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain `trace` - that are relevant and show this issue.
       required: true

.github/label-actions.yml

@@ -7,6 +7,7 @@
     to be a support request. Please hop over onto our [Discord](https://prowlarr.com/discord) 
     or [Subreddit](https://reddit.com/r/prowlarr)
   close: true
+  close-reason: 'not planned'
 
 'Type: Indexer Request':
   comment: >
@@ -14,6 +15,7 @@
     for bug reports and feature requests. However, this issue appears
     to be a indexer request. Please use our Indexer request [site](https://requests.prowlarr.com/)
   close: true
+  close-reason: 'not planned'
 
 'Status: Logs Needed':
   comment: >

.github/labeler.yml

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

.github/workflows/labeler.yml

@@ -0,0 +1,12 @@
+name: "Pull Request Labeler"
+on:
+  - pull_request_target
+
+jobs:
+  triage:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v4

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.5.0'
+  majorVersion: '1.7.2'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
@@ -362,7 +362,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="${PROWLARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="Prowlarr@${PROWLARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p prowlarr -p prowlarr-ui -p prowlarr-update "${RELEASENAME}"
           sentry-cli releases -p prowlarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"
@@ -1003,7 +1003,7 @@ stages:
           git add .
           if git status | grep -q modified
           then
-            git commit -am 'Automated API Docs update'
+            git commit -am 'Automated API Docs update [skip ci]'
             git push -f --set-upstream origin api-docs
             curl -X POST -H "Authorization: token ${GITHUBTOKEN}" -H "Accept: application/vnd.github.v3+json" https://api.github.com/repos/prowlarr/prowlarr/pulls -d '{"head":"api-docs","base":"develop","title":"Update API docs"}'
           else

frontend/.csscomb.json

@@ -1,25 +0,0 @@
-{
-  "remove-empty-rulesets": true,
-  "always-semicolon": true,
-  "color-case": "lower",
-  "block-indent": "  ",
-  "color-shorthand": false,
-  "element-case": "lower",
-  "eof-newline": true,
-  "leading-zero": true,
-  "quotes": "double",
-  "sort-order-fallback": "abc",
-  "space-before-colon": "",
-  "space-after-colon": " ",
-  "space-before-combinator": " ",
-  "space-after-combinator": " ",
-  "space-between-declarations": "\n",
-  "space-before-opening-brace": " ",
-  "space-after-opening-brace": "\n",
-  "space-after-selector-delimiter": " ",
-  "space-before-selector-delimiter": "",
-  "space-before-closing-brace": "\n",
-  "strip-spaces": true,
-  "tab-size": true,
-  "unitless-zero": false
-}

frontend/.esformatter

@@ -1,335 +0,0 @@
-{
-  "indent": {
-    "value": "  ",
-    "FunctionExpression": 1,
-    "ArrayExpression": 1,
-    "ObjectExpression": 1
-  },
-  "lineBreak": {
-    "value": "\n",
-
-    "before": {
-      "ArrayPatternClosing": 0,
-      "ArrayPatternComma": 0,
-      "ArrayPatternOpening": 0,
-      "ArrowFunctionExpressionArrow": 0,
-      "ArrowFunctionExpressionClosingBrace": ">=1",
-      "ArrowFunctionExpressionOpeningBrace": 0,
-      "AssignmentExpression": ">=1",
-      "AssignmentOperator": 0,
-      "BlockStatement": 0,
-      "BreakKeyword": ">=1",
-      "CallExpression": -1,
-      "CallExpressionClosingParentheses": -1,
-      "CallExpressionOpeningParentheses": 0,
-      "CatchClosingBrace": ">=1",
-      "CatchKeyword": 0,
-      "CatchOpeningBrace": 0,
-      "ClassDeclaration": ">=1",
-      "ClassDeclarationClosingBrace": ">=1",
-      "ClassDeclarationOpeningBrace": 0,
-      "ConditionalExpression": ">=1",
-      "DeleteOperator": ">=1",
-      "DoWhileStatement": ">=1",
-      "DoWhileStatementClosingBrace": ">=1",
-      "DoWhileStatementOpeningBrace": 0,
-      "ElseIfStatement": 0,
-      "ElseIfStatementClosingBrace": ">=1",
-      "ElseIfStatementOpeningBrace": 0,
-      "ElseStatement": 0,
-      "ElseStatementClosingBrace": ">=1",
-      "ElseStatementOpeningBrace": 0,
-      "EmptyStatement": -1,
-      "EndOfFile": -1,
-      "FinallyClosingBrace": ">=1",
-      "FinallyKeyword": -1,
-      "FinallyOpeningBrace": 0,
-      "ForInStatement": ">=1",
-      "ForInStatementClosingBrace": ">=1",
-      "ForInStatementExpressionClosing": 0,
-      "ForInStatementExpressionOpening": 0,
-      "ForInStatementOpeningBrace": 0,
-      "ForStatement": ">=1",
-      "ForStatementClosingBrace": ">=1",
-      "ForStatementExpressionClosing": "<2",
-      "ForStatementExpressionOpening": 0,
-      "ForStatementOpeningBrace": 0,
-      "FunctionDeclaration": ">=1",
-      "FunctionDeclarationClosingBrace": ">=1",
-      "FunctionDeclarationOpeningBrace": 0,
-      "FunctionExpression": 0,
-      "FunctionExpressionClosingBrace": 1,
-      "FunctionExpressionOpeningBrace":0,
-      "IIFEClosingParentheses": 0,
-      "IfStatement": ">=1",
-      "IfStatementClosingBrace": ">=1",
-      "IfStatementOpeningBrace": 0,
-      "LogicalExpression": -1,
-      "MemberExpressionClosing": 0,
-      "MemberExpressionOpening": 0,
-      "MemberExpressionPeriod": -1,
-      "MethodDefinition": ">=1",
-      "ObjectExpressionClosingBrace": "<=1",
-      "ObjectPatternClosingBrace": 0,
-      "ObjectPatternComma": 0,
-      "ObjectPatternOpeningBrace": 0,
-      "ParameterDefault": 0,
-      "Property": "<=2",
-      "PropertyValue": 0,
-      "ReturnStatement": -1,
-      "SwitchClosingBrace": ">=1",
-      "SwitchOpeningBrace": 0,
-      "ThisExpression": -1,
-      "ThrowStatement": ">=1",
-      "TryClosingBrace": ">=1",
-      "TryKeyword": -1,
-      "TryOpeningBrace": 0,
-      "VariableDeclaration": ">=1",
-      "VariableDeclarationSemiColon": 0,
-      "VariableDeclarationWithoutInit": ">=1",
-      "VariableName": ">=1",
-      "VariableValue": 0,
-      "WhileStatement": ">=1",
-      "WhileStatementClosingBrace": ">=1",
-      "WhileStatementOpeningBrace": 0
-    },
-
-    "after": {
-      "ArrayPatternClosing": 0,
-      "ArrayPatternComma": 0,
-      "ArrayPatternOpening": 0,
-      "ArrowFunctionExpressionArrow": 0,
-      "ArrowFunctionExpressionClosingBrace": -1,
-      "ArrowFunctionExpressionOpeningBrace": ">=1",
-      "AssignmentExpression": ">=1",
-      "AssignmentOperator": 0,
-      "BlockStatement": 0,
-      "BreakKeyword": -1,
-      "CallExpression": -1,
-      "CallExpressionClosingParentheses": -1,
-      "CallExpressionOpeningParentheses": -1,
-      "CatchClosingBrace": ">=0",
-      "CatchKeyword": 0,
-      "CatchOpeningBrace": ">=1",
-      "ClassDeclaration": ">=1",
-      "ClassDeclarationClosingBrace": ">=1",
-      "ClassDeclarationOpeningBrace": ">=1",
-      "ConditionalExpression": ">=1",
-      "DeleteOperator": ">=1",
-      "DoWhileStatement": ">=1",
-      "DoWhileStatementClosingBrace": 0,
-      "DoWhileStatementOpeningBrace": ">=1",
-      "ElseIfStatement": ">=1",
-      "ElseIfStatementClosingBrace": ">=1",
-      "ElseIfStatementOpeningBrace": ">=1",
-      "ElseStatement": ">=1",
-      "ElseStatementClosingBrace": ">=1",
-      "ElseStatementOpeningBrace": ">=1",
-      "EmptyStatement": -1,
-      "FinallyClosingBrace": ">=1",
-      "FinallyKeyword": -1,
-      "FinallyOpeningBrace": ">=1",
-      "ForInStatement": ">=1",
-      "ForInStatementClosingBrace": ">=1",
-      "ForInStatementExpressionClosing": -1,
-      "ForInStatementExpressionOpening": "<2",
-      "ForInStatementOpeningBrace": ">=1",
-      "ForStatement": ">=1",
-      "ForStatementClosingBrace": ">=1",
-      "ForStatementExpressionClosing": -1,
-      "ForStatementExpressionOpening": "<2",
-      "ForStatementOpeningBrace": ">=1",
-      "FunctionDeclaration": ">=1",
-      "FunctionDeclarationClosingBrace": ">=1",
-      "FunctionDeclarationOpeningBrace": ">=1",
-      "FunctionExpression": 0,
-      "FunctionExpressionClosingBrace": -1,
-      "FunctionExpressionOpeningBrace": 1,
-      "IIFEOpeningParentheses": 0,
-      "IfStatement": ">=1",
-      "IfStatementClosingBrace": ">=1",
-      "IfStatementOpeningBrace": ">=1",
-      "LogicalExpression": -1,
-      "MemberExpressionClosing": 0,
-      "MemberExpressionOpening": 0,
-      "MemberExpressionPeriod": 0,
-      "MethodDefinition": ">=1",
-      "ObjectExpressionOpeningBrace": "<=1",
-      "ObjectPatternClosingBrace": 0,
-      "ObjectPatternComma": 0,
-      "ObjectPatternOpeningBrace": 0,
-      "ParameterDefault": 0,
-      "Property": -1,
-      "PropertyName": 0,
-      "ReturnStatement": -1,
-      "SwitchCaseColon": ">=1",
-      "SwitchClosingBrace": ">=1",
-      "SwitchOpeningBrace": ">=1",
-      "ThisExpression": 0,
-      "ThrowStatement": ">=1",
-      "TryClosingBrace": 0,
-      "TryKeyword": -1,
-      "TryOpeningBrace": ">=1",
-      "VariableDeclaration": ">=1",
-      "VariableDeclarationSemiColon": ">=1",
-      "VariableValue": -1,
-      "WhileStatement": ">=1",
-      "WhileStatementClosingBrace": ">=1",
-      "WhileStatementOpeningBrace": ">=1"
-    }
-  },
-  "whiteSpace": {
-    "value": " ",
-    "removeTrailing": 1,
-    "before": {
-      "ArgumentComma": 0,
-      "ArgumentList": 0,
-      "ArgumentListArrayExpression": 0,
-      "ArgumentListFunctionExpression": 1,
-      "ArgumentListObjectExpression": 0,
-      "ArrayExpressionClosing": 0,
-      "ArrayExpressionComma": 0,
-      "ArrayExpressionOpening": 1,
-      "AssignmentOperator": 1,
-      "BinaryExpression": 0,
-      "BinaryExpressionOperator": 1,
-      "BlockComment": 1,
-      "CallExpression": 1,
-      "CatchClosingBrace": 1,
-      "CatchKeyword": 1,
-      "CatchOpeningBrace": 1,
-      "CatchParameterList": 0,
-      "CommaOperator": 0,
-      "ConditionalExpressionAlternate": 1,
-      "ConditionalExpressionConsequent": 1,
-      "DoWhileStatementClosingBrace": 1,
-      "DoWhileStatementConditional": 1,
-      "DoWhileStatementOpeningBrace": 1,
-      "ElseIfStatementClosingBrace": 1,
-      "ElseIfStatementOpeningBrace": 1,
-      "ElseStatementClosingBrace": 1,
-      "ElseStatementOpeningBrace": 1,
-      "EmptyStatement": 0,
-      "ExpressionClosingParentheses": 0,
-      "FinallyClosingBrace": 1,
-      "FinallyKeyword": -1,
-      "FinallyOpeningBrace": 1,
-      "ForInStatement": 1,
-      "ForInStatementClosingBrace": 1,
-      "ForInStatementExpressionClosing": 0,
-      "ForInStatementExpressionOpening": 1,
-      "ForInStatementOpeningBrace": 1,
-      "ForStatement": 1,
-      "ForStatementClosingBrace": 1,
-      "ForStatementExpressionClosing": 0,
-      "ForStatementExpressionOpening": 1,
-      "ForStatementOpeningBrace": 1,
-      "ForStatementSemicolon": 0,
-      "FunctionDeclarationClosingBrace": 1,
-      "FunctionDeclarationOpeningBrace": 1,
-      "FunctionExpressionClosingBrace": 1,
-      "FunctionExpressionOpeningBrace": 1,
-      "IfStatementClosingBrace": 1,
-      "IfStatementConditionalClosing": 0,
-      "IfStatementConditionalOpening": 1,
-      "IfStatementOpeningBrace": 1,
-      "LineComment": 1,
-      "LogicalExpressionOperator": 1,
-      "MemberExpressionClosing": 0,
-      "ObjectExpressionClosingBrace": 1,
-      "ParameterComma": 0,
-      "ParameterList": 0,
-      "Property": 1,
-      "PropertyName": 1,
-      "PropertyValue": 1,
-      "SwitchDiscriminantClosing": 0,
-      "SwitchDiscriminantOpening": 1,
-      "ThrowKeyword": 1,
-      "TryClosingBrace": 1,
-      "TryKeyword": -1,
-      "TryOpeningBrace": 1,
-      "UnaryExpressionOperator": 0,
-      "VariableName": 1,
-      "VariableValue": 1,
-      "WhileStatementClosingBrace": 1,
-      "WhileStatementConditionalClosing": 0,
-      "WhileStatementConditionalOpening": 1,
-      "WhileStatementOpeningBrace": 1
-    },
-    "after": {
-      "ArgumentComma": 1,
-      "ArgumentList": 0,
-      "ArgumentListArrayExpression": 1,
-      "ArgumentListFunctionExpression": 1,
-      "ArgumentListObjectExpression": 0,
-      "ArrayExpressionClosing": 0,
-      "ArrayExpressionComma": 1,
-      "ArrayExpressionOpening": 0,
-      "AssignmentOperator": 1,
-      "BinaryExpression": 0,
-      "BinaryExpressionOperator": 1,
-      "BlockComment": 1,
-      "CallExpression": 0,
-      "CatchClosingBrace": 1,
-      "CatchKeyword": 1,
-      "CatchOpeningBrace": 1,
-      "CatchParameterList": 0,
-      "CommaOperator": 1,
-      "ConditionalExpressionConsequent": 1,
-      "ConditionalExpressionTest": 1,
-      "DoWhileStatementBody": 1,
-      "DoWhileStatementClosingBrace": 1,
-      "DoWhileStatementOpeningBrace": 1,
-      "ElseIfStatementClosingBrace": 1,
-      "ElseIfStatementOpeningBrace": 1,
-      "ElseStatementClosingBrace": 1,
-      "ElseStatementOpeningBrace": 1,
-      "EmptyStatement": 0,
-      "ExpressionOpeningParentheses": 0,
-      "FinallyClosingBrace": 1,
-      "FinallyKeyword": -1,
-      "FinallyOpeningBrace": 1,
-      "ForInStatement": 1,
-      "ForInStatementClosingBrace": 1,
-      "ForInStatementExpressionClosing": 1,
-      "ForInStatementExpressionOpening": 0,
-      "ForInStatementOpeningBrace": 1,
-      "ForStatement": 1,
-      "ForStatementClosingBrace": 1,
-      "ForStatementExpressionClosing": 1,
-      "ForStatementExpressionOpening": 0,
-      "ForStatementOpeningBrace": 1,
-      "ForStatementSemicolon": 1,
-      "FunctionDeclarationClosingBrace": 0,
-      "FunctionDeclarationOpeningBrace": 0,
-      "FunctionExpressionClosingBrace": 0,
-      "FunctionExpressionOpeningBrace": 0,
-      "FunctionName": 0,
-      "FunctionReservedWord": 0,
-      "IfStatementClosingBrace": 1,
-      "IfStatementConditionalClosing": 0,
-      "IfStatementConditionalOpening": 0,
-      "IfStatementOpeningBrace": 1,
-      "LogicalExpressionOperator": 1,
-      "MemberExpressionOpening": 0,
-      "ObjectExpressionClosingBrace": 0,
-      "ObjectExpressionOpeningBrace": 1,
-      "ParameterComma": 1,
-      "ParameterList": 0,
-      "PropertyName": 0,
-      "PropertyValue": 0,
-      "SwitchDiscriminantClosing": 1,
-      "SwitchDiscriminantOpening": 0,
-      "ThrowKeyword": 1,
-      "TryClosingBrace": 1,
-      "TryKeyword": -1,
-      "TryOpeningBrace": 1,
-      "UnaryExpressionOperator": 0,
-      "VariableName": 1,
-      "WhileStatementClosingBrace": 1,
-      "WhileStatementConditionalClosing": 1,
-      "WhileStatementConditionalOpening": 0,
-      "WhileStatementOpeningBrace": 1
-    }
-  }
-}

frontend/.eslintrc.js

@@ -12,6 +12,8 @@ const dirs = fs
   .join('|');
 
 module.exports = {
+  root: true,
+
   parser: '@babel/eslint-parser',
 
   env: {

frontend/.jsbeautifyrc

@@ -1,12 +0,0 @@
-{
-  "js": {
-    "indent_size": 2,
-    "indent_char": " ",
-    "indent_level": 2,
-    "indent_with_tabs": false,
-    "preserve_newlines": true,
-    "brace_style": "collapse",
-    "max_preserve_newlines": 2,
-    "jslint_happy": true
-  }
-}

frontend/.stylelintrc

@@ -1,12 +1,12 @@
 {
-"plugins": [
-  "stylelint-order"
-],
-"ignoreFiles": [
-  "frontend/src/Styles/scaffolding.css",
-  "**/*.js"
-],
-"rules": {
+  "plugins": [
+    "stylelint-order"
+  ],
+  "ignoreFiles": [
+    "frontend/src/Styles/scaffolding.css",
+    "**/*.js"
+  ],
+  "rules": {
     "at-rule-empty-line-before": [
       "always",
       {
@@ -15,9 +15,6 @@
         ]
       }
     ],
-    "at-rule-name-case": "lower",
-    "at-rule-name-newline-after": "always-multi-line",
-    "at-rule-name-space-after": "always",
     "at-rule-no-unknown": [
       true,
       {
@@ -28,83 +25,36 @@
       }
     ],
     "at-rule-no-vendor-prefix": true,
-    "at-rule-semicolon-newline-after": "always",
-    "at-rule-semicolon-space-before": "never",
-    "block-closing-brace-empty-line-before": "never",
-    "block-closing-brace-newline-after": "always",
-    "block-closing-brace-newline-before": "always",
-    "block-closing-brace-space-after": "always-single-line",
-    "block-closing-brace-space-before": "always-single-line",
     "block-no-empty": true,
-    "block-opening-brace-newline-after": "always",
-    "block-opening-brace-newline-before": "never-single-line",
-    "block-opening-brace-space-after": "always-single-line",
-    "block-opening-brace-space-before": "always",
-    "color-hex-case": "lower",
     "color-hex-length": "short",
     "color-named": "never",
     "color-no-invalid-hex": true,
     "comment-whitespace-inside": "always",
-    "declaration-bang-space-after": "never",
-    "declaration-bang-space-before": "always",
     "declaration-block-no-duplicate-properties": [
       true,
       {
         "ignoreProperties": [
-            "composes"
+          "composes"
         ]
       }
     ],
     "declaration-block-no-redundant-longhand-properties": true,
     "declaration-block-no-shorthand-property-overrides": true,
-    "declaration-block-semicolon-newline-after": "always",
-    "declaration-block-semicolon-newline-before": "never-multi-line",
-    "declaration-block-semicolon-space-before": "never",
     "declaration-block-single-line-max-declarations": 1,
-    "declaration-block-trailing-semicolon": "always",
-    "declaration-colon-space-after": "always",
-    "declaration-colon-space-before": "never",
     "font-family-name-quotes": "always-unless-keyword",
     "function-calc-no-unspaced-operator": true,
-    "function-comma-newline-after": "never-multi-line",
-    "function-comma-newline-before": "never-multi-line",
-    "function-comma-space-after": "always",
-    "function-comma-space-before": "never",
     "function-linear-gradient-no-nonstandard-direction": true,
     "function-name-case": "lower",
-    "function-parentheses-newline-inside": "never-multi-line",
-    "function-parentheses-space-inside": "never",
     "function-url-quotes": "always",
     "function-url-scheme-disallowed-list": [
       "data"
     ],
-    "function-whitespace-after": "always",
-    "indentation": 2,
     "keyframe-declaration-no-important": true,
     "length-zero-no-unit": true,
-    "max-empty-lines": 1,
-    "max-line-length": [
-      100,
-      {
-        "ignore": [
-          "non-comments"
-        ]
-      }
-    ],
     "max-nesting-depth": 2,
-    "media-feature-colon-space-after": "always",
-    "media-feature-colon-space-before": "never",
-    "media-feature-name-case": "lower",
     "media-feature-name-no-vendor-prefix": true,
-    "media-feature-range-operator-space-after": "always",
-    "media-feature-range-operator-space-before": "always",
     "no-empty-source": true,
-    "no-eol-whitespace": true,
-    "no-extra-semicolons": true,
     "no-invalid-double-slash-comments": true,
-    "no-missing-end-of-source-newline": true,
-    "number-leading-zero": "always",
-    "number-no-trailing-zeros": true,
     "order/order": [
       "custom-properties",
       "dollar-variables",
@@ -132,6 +82,7 @@
           "right",
           "bottom",
           "left",
+          "inset",
           "z-index",
           "display",
           "visibility",
@@ -343,54 +294,33 @@
         ]
       }
     ],
-    "property-case": "lower",
     "property-no-vendor-prefix": true,
     "rule-empty-line-before": [
       "always",
       {
         "except": [
-            "first-nested"
+          "first-nested"
         ],
         "ignore": [
-            "after-comment"
+          "after-comment"
         ]
       }
     ],
-    "selector-attribute-brackets-space-inside": "never",
-    "selector-attribute-operator-space-after": "never",
-    "selector-attribute-operator-space-before": "never",
     "selector-attribute-quotes": "never",
     "selector-class-pattern": "^[A-Za-z0-9]+$",
-    "selector-combinator-space-after": "always",
-    "selector-combinator-space-before": "always",
-    "selector-descendant-combinator-no-non-space": true,
-    "selector-list-comma-newline-after": "always",
-    "selector-list-comma-newline-before": "never-multi-line",
-    "selector-list-comma-space-before": "never",
     "selector-max-attribute": 0,
     "selector-max-class": 3,
     "selector-max-compound-selectors": 3,
-    "selector-max-empty-lines": 0,
     "selector-max-id": 0,
     "selector-max-universal": 0,
-    "selector-pseudo-class-case": "lower",
-    "selector-pseudo-class-parentheses-space-inside": "never",
-    "selector-pseudo-element-case": "lower",
     "selector-pseudo-element-colon-notation": "double",
     "selector-pseudo-element-no-unknown": true,
     "selector-type-case": "lower",
     "selector-type-no-unknown": true,
     "shorthand-property-no-redundant-values": true,
     "string-no-newline": true,
-    "string-quotes": "single",
     "time-min-milliseconds": 100,
-    "unit-case": "lower",
     "unit-no-unknown": true,
-    "value-list-comma-newline-after": "never-multi-line",
-    "value-list-comma-newline-before": "never-multi-line",
-    "value-list-comma-space-after": "always",
-    "value-list-comma-space-before": "never",
-    "value-list-max-empty-lines": 0,
     "value-no-vendor-prefix": true
   }
-}
+}

frontend/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "stylelint.vscode-stylelint",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+    ]
+}

frontend/build/webpack.config.js

@@ -251,18 +251,19 @@ module.exports = (env) => {
     config.resolve.alias['react-dom$'] = 'react-dom/profiling';
     config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
 
-    config.optimization.minimizer = [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: true, // Must be set to true if using source-maps in production
-        terserOptions: {
-          mangle: false,
-          keep_classnames: true,
-          keep_fnames: true
-        }
-      })
-    ];
+    config.optimization = {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            sourceMap: true, // Must be set to true if using source-maps in production
+            mangle: false,
+            keep_classnames: true,
+            keep_fnames: true
+          }
+        })
+      ]
+    };
   }
 
   return config;

frontend/src/App/SelectContext.tsx

@@ -1,58 +1,28 @@
 import { cloneDeep } from 'lodash';
-import React, { useEffect } from 'react';
-import areAllSelected from 'Utilities/Table/areAllSelected';
-import selectAll from 'Utilities/Table/selectAll';
-import toggleSelected from 'Utilities/Table/toggleSelected';
+import React, { useCallback, useEffect } from 'react';
+import useSelectState, { SelectState } from 'Helpers/Hooks/useSelectState';
 import ModelBase from './ModelBase';
 
-export enum SelectActionType {
-  Reset,
-  SelectAll,
-  UnselectAll,
-  ToggleSelected,
-  RemoveItem,
-  UpdateItems,
-}
-
-type SelectedState = Record<number, boolean>;
-
-interface SelectState {
-  selectedState: SelectedState;
-  lastToggled: number | null;
-  allSelected: boolean;
-  allUnselected: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  items: any[];
-}
-
-type SelectAction =
-  | { type: SelectActionType.Reset }
-  | { type: SelectActionType.SelectAll }
-  | { type: SelectActionType.UnselectAll }
+export type SelectContextAction =
+  | { type: 'reset' }
+  | { type: 'selectAll' }
+  | { type: 'unselectAll' }
   | {
-      type: SelectActionType.ToggleSelected;
+      type: 'toggleSelected';
       id: number;
       isSelected: boolean;
       shiftKey: boolean;
     }
   | {
-      type: SelectActionType.RemoveItem;
+      type: 'removeItem';
       id: number;
     }
   | {
-      type: SelectActionType.UpdateItems;
+      type: 'updateItems';
       items: ModelBase[];
     };
 
-type Dispatch = (action: SelectAction) => void;
-
-const initialState = {
-  selectedState: {},
-  lastToggled: null,
-  allSelected: false,
-  allUnselected: true,
-  items: [],
-};
+export type SelectDispatch = (action: SelectContextAction) => void;
 
 interface SelectProviderOptions<T extends ModelBase> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -60,90 +30,40 @@ interface SelectProviderOptions<T extends ModelBase> {
   items: Array<T>;
 }
 
-function getSelectedState(items: ModelBase[], existingState: SelectedState) {
-  return items.reduce((acc: SelectedState, item) => {
-    const id = item.id;
-
-    acc[id] = existingState[id] ?? false;
-
-    return acc;
-  }, {});
-}
-
-// TODO: Can this be reused?
-
-const SelectContext = React.createContext<[SelectState, Dispatch] | undefined>(
-  cloneDeep(undefined)
-);
-
-function selectReducer(state: SelectState, action: SelectAction): SelectState {
-  const { items, selectedState } = state;
-
-  switch (action.type) {
-    case SelectActionType.Reset: {
-      return cloneDeep(initialState);
-    }
-    case SelectActionType.SelectAll: {
-      return {
-        items,
-        ...selectAll(selectedState, true),
-      };
-    }
-    case SelectActionType.UnselectAll: {
-      return {
-        items,
-        ...selectAll(selectedState, false),
-      };
-    }
-    case SelectActionType.ToggleSelected: {
-      const result = {
-        items,
-        ...toggleSelected(
-          state,
-          items,
-          action.id,
-          action.isSelected,
-          action.shiftKey
-        ),
-      };
-
-      return result;
-    }
-    case SelectActionType.UpdateItems: {
-      const nextSelectedState = getSelectedState(action.items, selectedState);
-
-      return {
-        ...state,
-        ...areAllSelected(nextSelectedState),
-        selectedState: nextSelectedState,
-        items: action.items,
-      };
-    }
-    default: {
-      throw new Error(`Unhandled action type: ${action.type}`);
-    }
-  }
-}
+const SelectContext = React.createContext<
+  [SelectState, SelectDispatch] | undefined
+>(cloneDeep(undefined));
 
 export function SelectProvider<T extends ModelBase>(
   props: SelectProviderOptions<T>
 ) {
   const { items } = props;
-  const selectedState = getSelectedState(items, {});
+  const [state, dispatch] = useSelectState();
 
-  const [state, dispatch] = React.useReducer(selectReducer, {
-    selectedState,
-    lastToggled: null,
-    allSelected: false,
-    allUnselected: true,
-    items,
-  });
+  const dispatchWrapper = useCallback(
+    (action: SelectContextAction) => {
+      switch (action.type) {
+        case 'reset':
+        case 'removeItem':
+          dispatch(action);
+          break;
 
-  const value: [SelectState, Dispatch] = [state, dispatch];
+        default:
+          dispatch({
+            ...action,
+            items,
+          });
+          break;
+      }
+    },
+    [items, dispatch]
+  );
+
+  const value: [SelectState, SelectDispatch] = [state, dispatchWrapper];
 
   useEffect(() => {
-    dispatch({ type: SelectActionType.UpdateItems, items });
-  }, [items]);
+    dispatch({ type: 'updateItems', items });
+  }, [items, dispatch]);
 
   return (
     <SelectContext.Provider value={value}>

frontend/src/App/State/AppSectionState.ts

@@ -0,0 +1,48 @@
+import SortDirection from 'Helpers/Props/SortDirection';
+
+export interface Error {
+  responseJSON: {
+    message: string;
+  };
+}
+
+export interface AppSectionDeleteState {
+  isDeleting: boolean;
+  deleteError: Error;
+}
+
+export interface AppSectionSaveState {
+  isSaving: boolean;
+  saveError: Error;
+}
+
+export interface PagedAppSectionState {
+  pageSize: number;
+}
+
+export interface AppSectionSchemaState<T> {
+  isSchemaFetching: boolean;
+  isSchemaPopulated: boolean;
+  schemaError: Error;
+  schema: {
+    items: T[];
+  };
+}
+
+export interface AppSectionItemState<T> {
+  isFetching: boolean;
+  isPopulated: boolean;
+  error: Error;
+  item: T;
+}
+
+interface AppSectionState<T> {
+  isFetching: boolean;
+  isPopulated: boolean;
+  error: Error;
+  items: T[];
+  sortKey: string;
+  sortDirection: SortDirection;
+}
+
+export default AppSectionState;

frontend/src/App/State/AppState.ts

@@ -0,0 +1,43 @@
+import IndexerAppState from './IndexerAppState';
+import SettingsAppState from './SettingsAppState';
+import TagsAppState from './TagsAppState';
+
+interface FilterBuilderPropOption {
+  id: string;
+  name: string;
+}
+
+export interface FilterBuilderProp<T> {
+  name: string;
+  label: string;
+  type: string;
+  valueType?: string;
+  optionsSelector?: (items: T[]) => FilterBuilderPropOption[];
+}
+
+export interface PropertyFilter {
+  key: string;
+  value: boolean | string | number | string[] | number[];
+  type: string;
+}
+
+export interface Filter {
+  key: string;
+  label: string;
+  filers: PropertyFilter[];
+}
+
+export interface CustomFilter {
+  id: number;
+  type: string;
+  label: string;
+  filers: PropertyFilter[];
+}
+
+interface AppState {
+  indexers: IndexerAppState;
+  settings: SettingsAppState;
+  tags: TagsAppState;
+}
+
+export default AppState;

frontend/src/App/State/IndexerAppState.ts

@@ -0,0 +1,12 @@
+import Indexer from 'typings/Indexer';
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from './AppSectionState';
+
+interface IndexerAppState
+  extends AppSectionState<Indexer>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export default IndexerAppState;

frontend/src/App/State/SettingsAppState.ts

@@ -0,0 +1,33 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import Application from 'typings/Application';
+import DownloadClient from 'typings/DownloadClient';
+import Notification from 'typings/Notification';
+import { UiSettings } from 'typings/UiSettings';
+
+export interface ApplicationAppState
+  extends AppSectionState<Application>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface DownloadClientAppState
+  extends AppSectionState<DownloadClient>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface NotificationAppState
+  extends AppSectionState<Notification>,
+    AppSectionDeleteState {}
+
+export type UiSettingsAppState = AppSectionState<UiSettings>;
+
+interface SettingsAppState {
+  applications: ApplicationAppState;
+  downloadClients: DownloadClientAppState;
+  notifications: NotificationAppState;
+  uiSettings: UiSettingsAppState;
+}
+
+export default SettingsAppState;

frontend/src/App/State/TagsAppState.ts

@@ -0,0 +1,12 @@
+import ModelBase from 'App/ModelBase';
+import AppSectionState, {
+  AppSectionDeleteState,
+} from 'App/State/AppSectionState';
+
+export interface Tag extends ModelBase {
+  label: string;
+}
+
+interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {}
+
+export default TagsAppState;

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

@@ -9,13 +9,13 @@ import FilterBuilderRowValue from './FilterBuilderRowValue';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.indexers,
-    (qualityProfiles) => {
+    (indexers) => {
       const {
         isFetching,
         isPopulated,
         error,
         items
-      } = qualityProfiles;
+      } = indexers;
 
       const tagList = items.map((item) => {
         return {

frontend/src/Components/Form/AppProfileSelectInputConnector.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import sortByName from 'Utilities/Array/sortByName';
+import translate from 'Utilities/String/translate';
 import SelectInput from './SelectInput';
 
 function createMapStateToProps() {
@@ -23,7 +24,7 @@ function createMapStateToProps() {
       if (includeNoChange) {
         values.unshift({
           key: 'noChange',
-          value: 'No Change',
+          value: translate('NoChange'),
           disabled: true
         });
       }

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+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 EnhancedSelectInput from './EnhancedSelectInput';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.downloadClients,
+    (state, { includeAny }) => includeAny,
+    (state, { protocol }) => protocol,
+    (downloadClients, includeAny, protocolFilter) => {
+      const {
+        isFetching,
+        isPopulated,
+        error,
+        items
+      } = downloadClients;
+
+      const values = items
+        .filter((downloadClient) => downloadClient.protocol === protocolFilter)
+        .sort(sortByName)
+        .map((downloadClient) => ({
+          key: downloadClient.id,
+          value: downloadClient.name
+        }));
+
+      if (includeAny) {
+        values.unshift({
+          key: 0,
+          value: '(Any)'
+        });
+      }
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        values
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchFetchDownloadClients: fetchDownloadClients
+};
+
+class DownloadClientSelectInputConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    if (!this.props.isPopulated) {
+      this.props.dispatchFetchDownloadClients();
+    }
+  }
+
+  //
+  // Listeners
+
+  onChange = ({ name, value }) => {
+    this.props.onChange({ name, value: parseInt(value) });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EnhancedSelectInput
+        {...this.props}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+DownloadClientSelectInputConnector.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  values: PropTypes.arrayOf(PropTypes.object).isRequired,
+  includeAny: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  dispatchFetchDownloadClients: PropTypes.func.isRequired
+};
+
+DownloadClientSelectInputConnector.defaultProps = {
+  includeAny: false,
+  protocol: 'torrent'
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(DownloadClientSelectInputConnector);

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -578,7 +578,7 @@ EnhancedSelectInput.propTypes = {
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,

frontend/src/Components/Form/FormInputGroup.js

@@ -10,6 +10,7 @@ import CaptchaInputConnector from './CaptchaInputConnector';
 import CardigannCaptchaInputConnector from './CardigannCaptchaInputConnector';
 import CheckInput from './CheckInput';
 import DeviceInputConnector from './DeviceInputConnector';
+import DownloadClientSelectInputConnector from './DownloadClientSelectInputConnector';
 import EnhancedSelectInput from './EnhancedSelectInput';
 import EnhancedSelectInputConnector from './EnhancedSelectInputConnector';
 import FormInputHelpText from './FormInputHelpText';
@@ -72,6 +73,9 @@ function getComponent(type) {
     case inputTypes.CATEGORY_SELECT:
       return NewznabCategorySelectInputConnector;
 
+    case inputTypes.DOWNLOAD_CLIENT_SELECT:
+      return DownloadClientSelectInputConnector;
+
     case inputTypes.INDEXER_FLAGS_SELECT:
       return IndexerFlagsSelectInputConnector;
 
@@ -258,6 +262,8 @@ FormInputGroup.propTypes = {
   values: PropTypes.arrayOf(PropTypes.any),
   type: PropTypes.string.isRequired,
   kind: PropTypes.oneOf(kinds.all),
+  min: PropTypes.number,
+  max: PropTypes.number,
   unit: PropTypes.string,
   buttons: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   helpText: PropTypes.string,

frontend/src/Components/Form/IndexersSelectInputConnector.js

@@ -12,7 +12,7 @@ function createMapStateToProps() {
     (state) => state.indexers,
     (value, indexers) => {
       const values = [];
-      const groupedIndexers = _(indexers.items).groupBy((x) => x.protocol).map((val, key) => ({ protocol: key, indexers: val })).value();
+      const groupedIndexers = _.map(_.groupBy(indexers.items, 'protocol'), (val, key) => ({ protocol: key, indexers: val }));
 
       groupedIndexers.forEach((element) => {
         values.push({
@@ -21,10 +21,11 @@ function createMapStateToProps() {
         });
 
         if (element.indexers && element.indexers.length > 0) {
-          element.indexers.forEach((subCat) => {
+          element.indexers.forEach((indexer) => {
             values.push({
-              key: subCat.id,
-              value: subCat.name,
+              key: indexer.id,
+              value: indexer.name,
+              isDisabled: !indexer.enable,
               parentKey: element.protocol === 'usenet' ? -1 : -2
             });
           });

frontend/src/Components/Form/NumberInput.js

@@ -10,7 +10,7 @@ function parseValue(props, value) {
   } = props;
 
   if (value == null || value === '') {
-    return min;
+    return null;
   }
 
   let newValue = isFloat ? parseFloat(value) : parseInt(value);

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -67,6 +67,7 @@ function ProviderFieldFormGroup(props) {
     name,
     label,
     helpText,
+    helpTextWarning,
     helpLink,
     placeholder,
     value,
@@ -100,6 +101,7 @@ function ProviderFieldFormGroup(props) {
         name={name}
         label={label}
         helpText={helpText}
+        helpTextWarning={helpTextWarning}
         helpLink={helpLink}
         placeholder={placeholder}
         value={value}
@@ -126,6 +128,7 @@ ProviderFieldFormGroup.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string,
   helpText: PropTypes.string,
+  helpTextWarning: PropTypes.string,
   helpLink: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.any,

frontend/src/Components/Form/TagInputInput.css

@@ -1,8 +1,5 @@
 .inputContainer {
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  inset: -1px;
   display: flex;
   align-items: start;
   flex-wrap: wrap;

frontend/src/Components/Loading/LoadingMessage.js

@@ -13,7 +13,7 @@ const messages = [
   'Loading humorous message... Please Wait',
   'I could\'ve been faster in Python',
   'Don\'t forget to rewind your tracks',
-  'Congratulations! you are the 1000th visitor.',
+  'Congratulations! You are the 1000th visitor.',
   'HELP! I\'m being held hostage and forced to write these stupid lines!',
   'RE-calibrating the internet...',
   'I\'ll be here all week',

frontend/src/Components/Page/PageSectionContent.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 
 function PageSectionContent(props) {
   const {
@@ -17,7 +19,7 @@ function PageSectionContent(props) {
     );
   } else if (!isFetching && !!error) {
     return (
-      <div>{errorMessage}</div>
+      <Alert kind={kinds.DANGER}>{errorMessage}</Alert>
     );
   } else if (isPopulated && !error) {
     return (

frontend/src/Components/ProgressBar.css

@@ -16,6 +16,38 @@
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   color: var(--white);
   transition: width 0.6s ease;
+
+  &.primary {
+    background-color: var(--primaryColor);
+  }
+
+  &.danger {
+    background-color: var(--dangerColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
+    }
+  }
+
+  &.success {
+    background-color: var(--successColor);
+  }
+
+  &.purple {
+    background-color: var(--purple);
+  }
+
+  &.warning {
+    background-color: var(--warningColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
+    }
+  }
+
+  &.info {
+    background-color: var(--infoColor);
+  }
 }
 
 .frontTextContainer {
@@ -41,38 +73,6 @@
   cursor: default;
 }
 
-.primary {
-  background-color: var(--primaryColor);
-}
-
-.danger {
-  background-color: var(--dangerColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
-  }
-}
-
-.success {
-  background-color: var(--successColor);
-}
-
-.purple {
-  background-color: var(--purple);
-}
-
-.warning {
-  background-color: var(--warningColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
-  }
-}
-
-.info {
-  background-color: var(--infoColor);
-}
-
 .small {
   height: $progressBarSmallHeight;
 

frontend/src/Components/ProgressBar.js

@@ -38,7 +38,7 @@ function ProgressBar(props) {
             {
               showText && width ?
                 <div
-                  className={styles.backTextContainer}
+                  className={classNames(styles.backTextContainer, styles[kind])}
                   style={{ width: actualWidth }}
                 >
                   <div className={styles.backText}>
@@ -67,7 +67,7 @@ function ProgressBar(props) {
             {
               showText ?
                 <div
-                  className={styles.frontTextContainer}
+                  className={classNames(styles.frontTextContainer, styles[kind])}
                   style={{ width: progressPercent }}
                 >
                   <div

frontend/src/Components/SignalRConnector.js

@@ -54,7 +54,7 @@ function Logger(minimumLogLevel) {
 }
 
 Logger.prototype.cleanse = function(message) {
-  const apikey = new RegExp(`access_token=${window.Prowlarr.apiKey}`, 'g');
+  const apikey = new RegExp(`access_token=${encodeURIComponent(window.Prowlarr.apiKey)}`, 'g');
   return message.replace(apikey, 'access_token=(removed)');
 };
 
@@ -98,7 +98,7 @@ class SignalRConnector extends Component {
 
     this.connection = new signalR.HubConnectionBuilder()
       .configureLogging(new Logger(signalR.LogLevel.Information))
-      .withUrl(`${url}?access_token=${window.Prowlarr.apiKey}`)
+      .withUrl(`${url}?access_token=${encodeURIComponent(window.Prowlarr.apiKey)}`)
       .withAutomaticReconnect({
         nextRetryDelayInMilliseconds: (retryContext) => {
           if (retryContext.elapsedMilliseconds > 180000) {

frontend/src/Components/Table/Cells/TableSelectCell.css.d.ts

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

frontend/src/Components/Table/Column.ts

@@ -1,8 +1,10 @@
+import React from 'react';
+
 interface Column {
   name: string;
-  label: string;
-  columnLabel: string;
-  isSortable: boolean;
+  label: string | React.ReactNode;
+  columnLabel?: string;
+  isSortable?: boolean;
   isVisible: boolean;
   isModifiable?: boolean;
 }

frontend/src/Components/Table/Table.js

@@ -121,6 +121,7 @@ function Table(props) {
 }
 
 Table.propTypes = {
+  ...TableHeaderCell.props,
   className: PropTypes.string,
   horizontalScroll: PropTypes.bool.isRequired,
   selectAll: PropTypes.bool.isRequired,

frontend/src/Components/Table/VirtualTable.js

@@ -39,7 +39,8 @@ class VirtualTable extends Component {
     super(props, context);
 
     this.state = {
-      width: 0
+      width: 0,
+      scrollRestored: false
     };
 
     this._grid = null;
@@ -48,20 +49,25 @@ class VirtualTable extends Component {
   componentDidUpdate(prevProps, prevState) {
     const {
       items,
-      scrollIndex
+      scrollIndex,
+      scrollTop
     } = this.props;
 
     const {
-      width
+      width,
+      scrollRestored
     } = this.state;
 
-    if (this._grid &&
-        (prevState.width !== width ||
-            hasDifferentItemsOrOrder(prevProps.items, items))) {
+    if (this._grid && (prevState.width !== width || hasDifferentItemsOrOrder(prevProps.items, items))) {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
 
+    if (this._grid && scrollTop !== undefined && scrollTop !== 0 && !scrollRestored) {
+      this.setState({ scrollRestored: true });
+      this._grid.scrollToPosition({ scrollTop });
+    }
+
     if (scrollIndex != null && scrollIndex !== prevProps.scrollIndex) {
       this._grid.scrollToCell({
         rowIndex: scrollIndex,
@@ -98,6 +104,7 @@ class VirtualTable extends Component {
       focusScroller,
       header,
       headerHeight,
+      rowHeight,
       rowRenderer,
       ...otherProps
     } = this.props;
@@ -141,6 +148,7 @@ class VirtualTable extends Component {
                 {header}
                 <div ref={registerChild}>
                   <Grid
+                    {...otherProps}
                     ref={this.setGridRef}
                     autoContainerWidth={true}
                     autoHeight={true}
@@ -148,7 +156,7 @@ class VirtualTable extends Component {
                     width={width}
                     height={height}
                     headerHeight={height - headerHeight}
-                    rowHeight={ROW_HEIGHT}
+                    rowHeight={rowHeight}
                     rowCount={items.length}
                     columnCount={1}
                     columnWidth={width}
@@ -162,7 +170,6 @@ class VirtualTable extends Component {
                     className={styles.tableBodyContainer}
                     style={gridStyle}
                     containerStyle={containerStyle}
-                    {...otherProps}
                   />
                 </div>
               </Scroller>
@@ -180,16 +187,19 @@ VirtualTable.propTypes = {
   className: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   scrollIndex: PropTypes.number,
+  scrollTop: PropTypes.number,
   scroller: PropTypes.instanceOf(Element).isRequired,
   focusScroller: PropTypes.bool.isRequired,
   header: PropTypes.node.isRequired,
   headerHeight: PropTypes.number.isRequired,
-  rowRenderer: PropTypes.func.isRequired
+  rowRenderer: PropTypes.func.isRequired,
+  rowHeight: PropTypes.number.isRequired
 };
 
 VirtualTable.defaultProps = {
   className: styles.tableContainer,
   headerHeight: 38,
+  rowHeight: ROW_HEIGHT,
   focusScroller: true
 };
 

frontend/src/Components/keyboardShortcuts.js

@@ -67,8 +67,10 @@ function keyboardShortcuts(WrappedComponent) {
     };
 
     unbindShortcut = (key) => {
-      delete this._mousetrapBindings[key];
-      this._mousetrap.unbind(key);
+      if (this._mousetrap != null) {
+        delete this._mousetrapBindings[key];
+        this._mousetrap.unbind(key);
+      }
     };
 
     unbindAllShortcuts = () => {

frontend/src/Content/Images/Icons/manifest.json

@@ -1,18 +1,19 @@
 {
-    "name": "",
+    "name": "Prowlarr",
     "icons": [
         {
-            "src": "/Content/Images/Icons/android-chrome-192x192.png",
+            "src": "android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/Content/Images/Icons/android-chrome-512x512.png",
+            "src": "android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
     ],
+    "start_url": "../../../../",
     "theme_color": "#3a3f51",
     "background_color": "#3a3f51",
     "display": "standalone"
-}
+}

frontend/src/Helpers/Hooks/usePrevious.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

frontend/src/Helpers/Hooks/useSelectState.tsx

@@ -0,0 +1,113 @@
+import { cloneDeep } from 'lodash';
+import { useReducer } from 'react';
+import ModelBase from 'App/ModelBase';
+import areAllSelected from 'Utilities/Table/areAllSelected';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+
+export type SelectedState = Record<number, boolean>;
+
+export interface SelectState {
+  selectedState: SelectedState;
+  lastToggled: number | null;
+  allSelected: boolean;
+  allUnselected: boolean;
+}
+
+export type SelectAction =
+  | { type: 'reset' }
+  | { type: 'selectAll'; items: ModelBase[] }
+  | { type: 'unselectAll'; items: ModelBase[] }
+  | {
+      type: 'toggleSelected';
+      id: number;
+      isSelected: boolean;
+      shiftKey: boolean;
+      items: ModelBase[];
+    }
+  | {
+      type: 'removeItem';
+      id: number;
+    }
+  | {
+      type: 'updateItems';
+      items: ModelBase[];
+    };
+
+export type Dispatch = (action: SelectAction) => void;
+
+const initialState = {
+  selectedState: {},
+  lastToggled: null,
+  allSelected: false,
+  allUnselected: true,
+  items: [],
+};
+
+function getSelectedState(items: ModelBase[], existingState: SelectedState) {
+  return items.reduce((acc: SelectedState, item) => {
+    const id = item.id;
+
+    acc[id] = existingState[id] ?? false;
+
+    return acc;
+  }, {});
+}
+
+function selectReducer(state: SelectState, action: SelectAction): SelectState {
+  const { selectedState } = state;
+
+  switch (action.type) {
+    case 'reset': {
+      return cloneDeep(initialState);
+    }
+    case 'selectAll': {
+      return {
+        ...selectAll(selectedState, true),
+      };
+    }
+    case 'unselectAll': {
+      return {
+        ...selectAll(selectedState, false),
+      };
+    }
+    case 'toggleSelected': {
+      const result = {
+        ...toggleSelected(
+          state,
+          action.items,
+          action.id,
+          action.isSelected,
+          action.shiftKey
+        ),
+      };
+
+      return result;
+    }
+    case 'updateItems': {
+      const nextSelectedState = getSelectedState(action.items, selectedState);
+
+      return {
+        ...state,
+        ...areAllSelected(nextSelectedState),
+        selectedState: nextSelectedState,
+      };
+    }
+    default: {
+      throw new Error(`Unhandled action type: ${action.type}`);
+    }
+  }
+}
+
+export default function useSelectState(): [SelectState, Dispatch] {
+  const selectedState = getSelectedState([], {});
+
+  const [state, dispatch] = useReducer(selectReducer, {
+    selectedState,
+    lastToggled: null,
+    allSelected: false,
+    allUnselected: true,
+  });
+
+  return [state, dispatch];
+}

frontend/src/Helpers/Props/filterBuilderTypes.js

@@ -1,14 +1,18 @@
 import * as filterTypes from './filterTypes';
 
 export const ARRAY = 'array';
+export const CONTAINS = 'contains';
 export const DATE = 'date';
+export const EQUAL = 'equal';
 export const EXACT = 'exact';
 export const NUMBER = 'number';
 export const STRING = 'string';
 
 export const all = [
   ARRAY,
+  CONTAINS,
   DATE,
+  EQUAL,
   EXACT,
   NUMBER,
   STRING
@@ -20,6 +24,10 @@ export const possibleFilterTypes = {
     { key: filterTypes.NOT_CONTAINS, value: 'does not contain' }
   ],
 
+  [CONTAINS]: [
+    { key: filterTypes.CONTAINS, value: 'contains' }
+  ],
+
   [DATE]: [
     { key: filterTypes.LESS_THAN, value: 'is before' },
     { key: filterTypes.GREATER_THAN, value: 'is after' },
@@ -29,6 +37,10 @@ export const possibleFilterTypes = {
     { key: filterTypes.NOT_IN_NEXT, value: 'not in the next' }
   ],
 
+  [EQUAL]: [
+    { key: filterTypes.EQUAL, value: 'is' }
+  ],
+
   [EXACT]: [
     { key: filterTypes.EQUAL, value: 'is' },
     { key: filterTypes.NOT_EQUAL, value: 'is not' }
@@ -47,6 +59,10 @@ export const possibleFilterTypes = {
     { key: filterTypes.CONTAINS, value: 'contains' },
     { key: filterTypes.NOT_CONTAINS, value: 'does not contain' },
     { key: filterTypes.EQUAL, value: 'equal' },
-    { key: filterTypes.NOT_EQUAL, value: 'not equal' }
+    { key: filterTypes.NOT_EQUAL, value: 'not equal' },
+    { key: filterTypes.STARTS_WITH, value: 'starts with' },
+    { key: filterTypes.NOT_STARTS_WITH, value: 'does not start with' },
+    { key: filterTypes.ENDS_WITH, value: 'ends with' },
+    { key: filterTypes.NOT_ENDS_WITH, value: 'does not end with' }
   ]
 };

frontend/src/Helpers/Props/filterTypePredicates.js

@@ -39,6 +39,22 @@ const filterTypePredicates = {
 
   [filterTypes.NOT_EQUAL]: function(itemValue, filterValue) {
     return itemValue !== filterValue;
+  },
+
+  [filterTypes.STARTS_WITH]: function(itemValue, filterValue) {
+    return itemValue.toLowerCase().startsWith(filterValue.toLowerCase());
+  },
+
+  [filterTypes.NOT_STARTS_WITH]: function(itemValue, filterValue) {
+    return !itemValue.toLowerCase().startsWith(filterValue.toLowerCase());
+  },
+
+  [filterTypes.ENDS_WITH]: function(itemValue, filterValue) {
+    return itemValue.toLowerCase().endsWith(filterValue.toLowerCase());
+  },
+
+  [filterTypes.NOT_ENDS_WITH]: function(itemValue, filterValue) {
+    return !itemValue.toLowerCase().endsWith(filterValue.toLowerCase());
   }
 };
 

frontend/src/Helpers/Props/filterTypes.js

@@ -10,6 +10,10 @@ export const LESS_THAN = 'lessThan';
 export const LESS_THAN_OR_EQUAL = 'lessThanOrEqual';
 export const NOT_CONTAINS = 'notContains';
 export const NOT_EQUAL = 'notEqual';
+export const STARTS_WITH = 'startsWith';
+export const NOT_STARTS_WITH = 'notStartsWith';
+export const ENDS_WITH = 'endsWith';
+export const NOT_ENDS_WITH = 'notEndsWith';
 
 export const all = [
   CONTAINS,
@@ -23,5 +27,9 @@ export const all = [
   IN_LAST,
   NOT_IN_LAST,
   IN_NEXT,
-  NOT_IN_NEXT
+  NOT_IN_NEXT,
+  STARTS_WITH,
+  NOT_STARTS_WITH,
+  ENDS_WITH,
+  NOT_ENDS_WITH
 ];

frontend/src/Helpers/Props/icons.js

@@ -72,6 +72,7 @@ import {
   faLanguage as fasLanguage,
   faLaptop as fasLaptop,
   faLevelUpAlt as fasLevelUpAlt,
+  faListCheck as fasListCheck,
   faLocationArrow as fasLocationArrow,
   faLock as fasLock,
   faMedkit as fasMedkit,
@@ -180,6 +181,7 @@ export const INTERACTIVE = fasUser;
 export const KEYBOARD = farKeyboard;
 export const LOCK = fasLock;
 export const LOGOUT = fasSignOutAlt;
+export const MANAGE = fasListCheck;
 export const MEDIA_INFO = farFileInvoice;
 export const MISSING = fasExclamationTriangle;
 export const MONITORED = fasBookmark;

frontend/src/Helpers/Props/inputTypes.js

@@ -9,6 +9,7 @@ export const KEY_VALUE_LIST = 'keyValueList';
 export const INFO = 'info';
 export const MOVIE_MONITORED_SELECT = 'movieMonitoredSelect';
 export const CATEGORY_SELECT = 'newznabCategorySelect';
+export const DOWNLOAD_CLIENT_SELECT = 'downloadClientSelect';
 export const NUMBER = 'number';
 export const OAUTH = 'oauth';
 export const PASSWORD = 'password';

frontend/src/History/Details/HistoryDetails.js

@@ -18,6 +18,8 @@ function HistoryDetails(props) {
       query,
       queryResults,
       categories,
+      limit,
+      offset,
       source,
       url
     } = data;
@@ -31,43 +33,66 @@ function HistoryDetails(props) {
         />
 
         {
-          !!indexer &&
+          indexer ?
             <DescriptionListItem
               title={translate('Indexer')}
               data={indexer.name}
-            />
+            /> :
+            null
         }
 
         {
-          !!data &&
+          data ?
             <DescriptionListItem
               title={translate('QueryResults')}
               data={queryResults ? queryResults : '-'}
-            />
+            /> :
+            null
         }
 
         {
-          !!data &&
+          data ?
             <DescriptionListItem
               title={translate('Categories')}
               data={categories ? categories : '-'}
-            />
+            /> :
+            null
         }
 
         {
-          !!data &&
+          limit ?
+            <DescriptionListItem
+              title={translate('Limit')}
+              data={limit}
+            /> :
+            null
+        }
+
+        {
+          offset ?
+            <DescriptionListItem
+              title={translate('Offset')}
+              data={offset}
+            /> :
+            null
+        }
+
+        {
+          data ?
             <DescriptionListItem
               title={translate('Source')}
               data={source}
-            />
+            /> :
+            null
         }
 
         {
-          !!data &&
+          data ?
             <DescriptionListItem
               title={translate('Url')}
               data={url ? <Link to={url}>{translate('Link')}</Link> : '-'}
-            />
+            /> :
+            null
         }
       </DescriptionList>
     );
@@ -76,42 +101,46 @@ function HistoryDetails(props) {
   if (eventType === 'releaseGrabbed') {
     const {
       source,
-      title,
+      grabTitle,
       url
     } = data;
 
     return (
       <DescriptionList>
         {
-          !!indexer &&
+          indexer ?
             <DescriptionListItem
               title={translate('Indexer')}
               data={indexer.name}
-            />
+            /> :
+            null
         }
 
         {
-          !!data &&
+          data ?
             <DescriptionListItem
               title={translate('Source')}
               data={source ? source : '-'}
-            />
+            /> :
+            null
         }
 
         {
-          !!data &&
+          data ?
             <DescriptionListItem
-              title={translate('Title')}
-              data={title ? title : '-'}
-            />
+              title={translate('GrabTitle')}
+              data={grabTitle ? grabTitle : '-'}
+            /> :
+            null
         }
 
         {
-          !!data &&
+          data ?
             <DescriptionListItem
               title={translate('Url')}
               data={url ? <Link to={url}>{translate('Link')}</Link> : '-'}
-            />
+            /> :
+            null
         }
       </DescriptionList>
     );
@@ -124,11 +153,12 @@ function HistoryDetails(props) {
         title={translate('Auth')}
       >
         {
-          !!indexer &&
+          indexer ?
             <DescriptionListItem
               title={translate('Indexer')}
               data={indexer.name}
-            />
+            /> :
+            null
         }
       </DescriptionList>
     );

frontend/src/History/History.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
@@ -121,9 +122,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -131,9 +132,9 @@ class History extends Component {
             // wait for the episodes to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
-                No history found
-              </div>
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistoryFound')}
+              </Alert>
           }
 
           {

frontend/src/History/HistoryRow.css

@@ -26,9 +26,7 @@
   width: 70px;
 }
 
-.parameters {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
+.parametersContent {
   display: flex;
   flex-wrap: wrap;
 }

frontend/src/History/HistoryRow.css.d.ts

@@ -6,7 +6,7 @@ interface CssExports {
   'details': string;
   'elapsedTime': string;
   'indexer': string;
-  'parameters': string;
+  'parametersContent': string;
   'query': string;
   'releaseGroup': string;
   'source': string;

frontend/src/History/HistoryRow.js

@@ -1,17 +1,39 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel';
 import translate from 'Utilities/String/translate';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
+import * as historyDataTypes from './historyDataTypes';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
 import HistoryRowParameter from './HistoryRowParameter';
 import styles from './HistoryRow.css';
 
+const historyParameters = [
+  { key: historyDataTypes.IMDB_ID, title: 'IMDb' },
+  { key: historyDataTypes.TMDB_ID, title: 'TMDb' },
+  { key: historyDataTypes.TVDB_ID, title: 'TVDb' },
+  { key: historyDataTypes.TRAKT_ID, title: 'Trakt' },
+  { key: historyDataTypes.R_ID, title: 'TvRage' },
+  { key: historyDataTypes.TVMAZE_ID, title: 'TvMaze' },
+  { key: historyDataTypes.SEASON, title: translate('Season') },
+  { key: historyDataTypes.EPISODE, title: translate('Episode') },
+  { key: historyDataTypes.ARTIST, title: translate('Artist') },
+  { key: historyDataTypes.ALBUM, title: translate('Album') },
+  { key: historyDataTypes.LABEL, title: translate('Label') },
+  { key: historyDataTypes.TRACK, title: translate('Track') },
+  { key: historyDataTypes.YEAR, title: translate('Year') },
+  { key: historyDataTypes.GENRE, title: translate('Genre') },
+  { key: historyDataTypes.AUTHOR, title: translate('Author') },
+  { key: historyDataTypes.TITLE, title: translate('Title') },
+  { key: historyDataTypes.PUBLISHER, title: translate('Publisher') }
+];
+
 class HistoryRow extends Component {
 
   //
@@ -44,15 +66,52 @@ class HistoryRow extends Component {
       data
     } = this.props;
 
+    const { query, queryType, limit, offset } = data;
+
+    let searchQuery = query;
     let categories = [];
 
     if (data.categories) {
-      categories = data.categories.split(',').map((item) => {
-        return parseInt(item);
-      });
+      categories = data.categories.split(',').map((item) => parseInt(item));
     }
 
-    this.props.onSearchPress(data.query, indexer.id, categories);
+    const searchParams = [
+      historyDataTypes.IMDB_ID,
+      historyDataTypes.TMDB_ID,
+      historyDataTypes.TVDB_ID,
+      historyDataTypes.TRAKT_ID,
+      historyDataTypes.R_ID,
+      historyDataTypes.TVMAZE_ID,
+      historyDataTypes.SEASON,
+      historyDataTypes.EPISODE,
+      historyDataTypes.ARTIST,
+      historyDataTypes.ALBUM,
+      historyDataTypes.LABEL,
+      historyDataTypes.TRACK,
+      historyDataTypes.YEAR,
+      historyDataTypes.GENRE,
+      historyDataTypes.AUTHOR,
+      historyDataTypes.TITLE,
+      historyDataTypes.PUBLISHER
+    ]
+      .reduce((acc, key) => {
+        if (key in data && data[key].length > 0) {
+          const value = data[key];
+
+          acc.push({ key, value });
+        }
+
+        return acc;
+      }, [])
+      .map((item) => `{${item.key}:${item.value}}`)
+      .join('')
+    ;
+
+    if (searchParams.length > 0) {
+      searchQuery += `${searchParams}`;
+    }
+
+    this.props.onSearchPress(searchQuery, indexer.id, categories, queryType, parseInt(limit), parseInt(offset));
   };
 
   onDetailsPress = () => {
@@ -84,6 +143,8 @@ class HistoryRow extends Component {
       return null;
     }
 
+    const parameters = historyParameters.filter((parameter) => parameter.key in data && data[parameter.key]);
+
     return (
       <TableRow>
         {
@@ -133,162 +194,19 @@ class HistoryRow extends Component {
 
             if (name === 'parameters') {
               return (
-                <TableRowCell
-                  key={name}
-                  className={styles.parameters}
-                >
-                  {
-                    data.imdbId ?
-                      <HistoryRowParameter
-                        title='IMDb'
-                        value={data.imdbId}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.tmdbId ?
-                      <HistoryRowParameter
-                        title='TMDb'
-                        value={data.tmdbId}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.tvdbId ?
-                      <HistoryRowParameter
-                        title='TVDb'
-                        value={data.tvdbId}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.traktId ?
-                      <HistoryRowParameter
-                        title='Trakt'
-                        value={data.traktId}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.rId ?
-                      <HistoryRowParameter
-                        title='TvRage'
-                        value={data.rId}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.tvMazeId ?
-                      <HistoryRowParameter
-                        title='TvMaze'
-                        value={data.tvMazeId}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.season ?
-                      <HistoryRowParameter
-                        title={translate('Season')}
-                        value={data.season}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.episode ?
-                      <HistoryRowParameter
-                        title={translate('Episode')}
-                        value={data.episode}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.artist ?
-                      <HistoryRowParameter
-                        title={translate('Artist')}
-                        value={data.artist}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.album ?
-                      <HistoryRowParameter
-                        title={translate('Album')}
-                        value={data.album}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.label ?
-                      <HistoryRowParameter
-                        title={translate('Label')}
-                        value={data.label}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.track ?
-                      <HistoryRowParameter
-                        title={translate('Track')}
-                        value={data.track}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.year ?
-                      <HistoryRowParameter
-                        title={translate('Year')}
-                        value={data.year}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.genre ?
-                      <HistoryRowParameter
-                        title={translate('Genre')}
-                        value={data.genre}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.author ?
-                      <HistoryRowParameter
-                        title={translate('Author')}
-                        value={data.author}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.bookTitle ?
-                      <HistoryRowParameter
-                        title={translate('Book')}
-                        value={data.bookTitle}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.publisher ?
-                      <HistoryRowParameter
-                        title={translate('Publisher')}
-                        value={data.publisher}
-                      /> :
-                      null
-                  }
+                <TableRowCell key={name}>
+                  <div className={styles.parametersContent}>
+                    {parameters.map((parameter) => {
+                      return (
+                        <HistoryRowParameter
+                          key={parameter.key}
+                          title={parameter.title}
+                          value={data[parameter.key]}
+                        />
+                      );
+                    }
+                    )}
+                  </div>
                 </TableRowCell>
               );
             }
@@ -300,8 +218,25 @@ class HistoryRow extends Component {
                   className={styles.indexer}
                 >
                   {
-                    data.title ?
-                      data.title :
+                    data.grabTitle ?
+                      data.grabTitle :
+                      null
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'queryType') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.query}
+                >
+                  {
+                    data.queryType ?
+                      <Label kind={kinds.INFO}>
+                        {data.queryType}
+                      </Label> :
                       null
                   }
                 </TableRowCell>
@@ -377,6 +312,12 @@ class HistoryRow extends Component {
                   key={name}
                   className={styles.details}
                 >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                    title={translate('HistoryDetails')}
+                  />
+
                   {
                     eventType === 'indexerQuery' ?
                       <IconButton
@@ -386,11 +327,6 @@ class HistoryRow extends Component {
                       /> :
                       null
                   }
-                  <IconButton
-                    name={icons.INFO}
-                    onPress={this.onDetailsPress}
-                    title={translate('HistoryDetails')}
-                  />
                 </TableRowCell>
               );
             }

frontend/src/History/HistoryRowConnector.js

@@ -1,4 +1,5 @@
 import { push } from 'connected-react-router';
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -48,8 +49,15 @@ class HistoryRowConnector extends Component {
   //
   // Listeners
 
-  onSearchPress = (term, indexerId, categories) => {
-    this.props.setSearchDefault({ searchQuery: term, searchIndexerIds: [indexerId], searchCategories: categories });
+  onSearchPress = (query, indexerId, categories, type, limit, offset) => {
+    this.props.setSearchDefault(_.pickBy({
+      searchQuery: query,
+      searchIndexerIds: [indexerId],
+      searchCategories: categories,
+      searchType: type,
+      searchLimit: limit,
+      searchOffset: offset
+    }));
     this.props.push(`${window.Prowlarr.urlBase}/search`);
   };
 

frontend/src/History/historyDataTypes.js

@@ -0,0 +1,17 @@
+export const IMDB_ID = 'imdbId';
+export const TMDB_ID = 'tmdbId';
+export const TVDB_ID = 'tvdbId';
+export const TRAKT_ID = 'traktId';
+export const R_ID = 'rId';
+export const TVMAZE_ID = 'tvMazeId';
+export const SEASON = 'season';
+export const EPISODE = 'episode';
+export const ARTIST = 'artist';
+export const ALBUM = 'album';
+export const LABEL = 'label';
+export const TRACK = 'track';
+export const YEAR = 'year';
+export const GENRE = 'genre';
+export const AUTHOR = 'author';
+export const TITLE = 'title';
+export const PUBLISHER = 'publisher';

frontend/src/Indexer/Add/AddIndexerModalContent.css

@@ -40,6 +40,7 @@
   flex: 1;
   flex-direction: column;
   margin-right: 12px;
+  max-width: 50%;
 }
 
 .filterContainer:last-child {
@@ -71,3 +72,20 @@
     margin-left: -30px;
   }
 }
+
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.available {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

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

@@ -2,12 +2,14 @@
 // Please do not change this file!
 interface CssExports {
   'alert': string;
+  'available': string;
   'filterContainer': string;
   'filterInput': string;
   'filterLabel': string;
   'filterRow': string;
   'indexers': string;
   'modalBody': string;
+  'modalFooter': string;
   'scroller': string;
 }
 export const cssExports: CssExports;

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -2,6 +2,7 @@ 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';
@@ -26,7 +27,7 @@ const columns = [
     isVisible: true
   },
   {
-    name: 'name',
+    name: 'sortName',
     label: translate('Name'),
     isSortable: true,
     isVisible: true
@@ -89,7 +90,8 @@ class AddIndexerModalContent extends Component {
       filter: '',
       filterProtocols: [],
       filterLanguages: [],
-      filterPrivacyLevels: []
+      filterPrivacyLevels: [],
+      filterCategories: []
     };
   }
 
@@ -121,7 +123,13 @@ class AddIndexerModalContent extends Component {
       .map((language) => ({ key: language, value: language }));
 
     const filteredIndexers = indexers.filter((indexer) => {
-      const { filter, filterProtocols, filterLanguages, filterPrivacyLevels } = this.state;
+      const {
+        filter,
+        filterProtocols,
+        filterLanguages,
+        filterPrivacyLevels,
+        filterCategories
+      } = this.state;
 
       if (!indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) && !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())) {
         return false;
@@ -139,6 +147,18 @@ class AddIndexerModalContent extends Component {
         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;
     });
 
@@ -165,7 +185,7 @@ class AddIndexerModalContent extends Component {
 
           <div className={styles.filterRow}>
             <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>Protocol</label>
+              <label className={styles.filterLabel}>{translate('Protocol')}</label>
               <EnhancedSelectInput
                 name="indexerProtocols"
                 value={this.state.filterProtocols}
@@ -175,7 +195,7 @@ class AddIndexerModalContent extends Component {
             </div>
 
             <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>Language</label>
+              <label className={styles.filterLabel}>{translate('Language')}</label>
               <EnhancedSelectInput
                 name="indexerLanguages"
                 value={this.state.filterLanguages}
@@ -185,7 +205,7 @@ class AddIndexerModalContent extends Component {
             </div>
 
             <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>Privacy</label>
+              <label className={styles.filterLabel}>{translate('Privacy')}</label>
               <EnhancedSelectInput
                 name="indexerPrivacyLevels"
                 value={this.state.filterPrivacyLevels}
@@ -193,6 +213,15 @@ class AddIndexerModalContent extends Component {
                 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
@@ -212,7 +241,7 @@ class AddIndexerModalContent extends Component {
               isFetching ? <LoadingIndicator /> : null
             }
             {
-              error ? <div>{errorMessage}</div> : null
+              error ? <Alert kind={kinds.DANGER}>{errorMessage}</Alert> : null
             }
             {
               isPopulated && !!indexers.length ?
@@ -226,7 +255,7 @@ class AddIndexerModalContent extends Component {
                     {
                       filteredIndexers.map((indexer) => (
                         <SelectIndexerRowConnector
-                          key={indexer.name}
+                          key={`${indexer.implementation}-${indexer.name}`}
                           implementation={indexer.implementation}
                           {...indexer}
                           onIndexerSelect={onIndexerSelect}
@@ -237,15 +266,30 @@ class AddIndexerModalContent extends Component {
                 </Table> :
                 null
             }
+            {
+              isPopulated && !!indexers.length && !filteredIndexers.length ?
+                <Alert
+                  kind={kinds.WARNING}
+                >
+                  {translate('NoIndexersFound')}
+                </Alert> :
+                null
+            }
           </Scroller>
         </ModalBody>
 
-        <ModalFooter>
-          <Button
-            onPress={onModalClose}
-          >
-            {translate('Close')}
-          </Button>
+        <ModalFooter className={styles.modalFooter}>
+          <div className={styles.available}>
+            {
+              isPopulated ?
+                translate('CountIndexersAvailable', [filteredIndexers.length]) :
+                null
+            }
+          </div>
+
+          <div>
+            <Button onPress={onModalClose}>{translate('Close')}</Button>
+          </div>
         </ModalFooter>
       </ModalContent>
     );

frontend/src/Indexer/Edit/EditIndexerModalContent.js

@@ -26,6 +26,8 @@ function EditIndexerModalContent(props) {
     isTesting,
     saveError,
     item,
+    hasUsenetDownloadClients,
+    hasTorrentDownloadClients,
     onInputChange,
     onFieldChange,
     onModalClose,
@@ -48,10 +50,13 @@ function EditIndexerModalContent(props) {
     appProfileId,
     tags,
     fields,
-    priority
+    priority,
+    protocol,
+    downloadClientId
   } = item;
 
   const indexerDisplayName = implementationName === definitionName ? implementationName : `${implementationName} (${definitionName})`;
+  const showDownloadClientInput = downloadClientId.value > 0 || protocol.value === 'usenet' && hasUsenetDownloadClients || protocol.value === 'torrent' && hasTorrentDownloadClients;
 
   return (
     <ModalContent onModalClose={onModalClose}>
@@ -156,6 +161,25 @@ function EditIndexerModalContent(props) {
                 />
               </FormGroup>
 
+              {showDownloadClientInput ?
+                <FormGroup
+                  advancedSettings={advancedSettings}
+                  isAdvanced={true}
+                >
+                  <FormLabel>{translate('DownloadClient')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.DOWNLOAD_CLIENT_SELECT}
+                    name="downloadClientId"
+                    helpText={translate('IndexerDownloadClientHelpText')}
+                    {...downloadClientId}
+                    includeAny={true}
+                    protocol={protocol.value}
+                    onChange={onInputChange}
+                  />
+                </FormGroup> : null
+              }
+
               <FormGroup>
                 <FormLabel>{translate('Tags')}</FormLabel>
 
@@ -222,6 +246,8 @@ EditIndexerModalContent.propTypes = {
   isTesting: PropTypes.bool.isRequired,
   saveError: PropTypes.object,
   item: PropTypes.object.isRequired,
+  hasUsenetDownloadClients: PropTypes.bool.isRequired,
+  hasTorrentDownloadClients: PropTypes.bool.isRequired,
   onInputChange: PropTypes.func.isRequired,
   onFieldChange: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,

frontend/src/Indexer/Edit/EditIndexerModalContentConnector.js

@@ -3,17 +3,23 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { saveIndexer, setIndexerFieldValue, setIndexerValue, testIndexer } from 'Store/Actions/indexerActions';
-import { toggleAdvancedSettings } from 'Store/Actions/settingsActions';
+import { fetchDownloadClients, toggleAdvancedSettings } from 'Store/Actions/settingsActions';
 import createIndexerSchemaSelector from 'Store/Selectors/createIndexerSchemaSelector';
 import EditIndexerModalContent from './EditIndexerModalContent';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.advancedSettings,
+    (state) => state.settings.downloadClients,
     createIndexerSchemaSelector(),
-    (advancedSettings, indexer) => {
+    (advancedSettings, downloadClients, indexer) => {
+      const usenetDownloadClients = downloadClients.items.filter((downloadClient) => downloadClient.protocol === 'usenet');
+      const torrentDownloadClients = downloadClients.items.filter((downloadClient) => downloadClient.protocol === 'torrent');
+
       return {
         advancedSettings,
+        hasUsenetDownloadClients: usenetDownloadClients.length > 0,
+        hasTorrentDownloadClients: torrentDownloadClients.length > 0,
         ...indexer
       };
     }
@@ -25,7 +31,8 @@ const mapDispatchToProps = {
   setIndexerFieldValue,
   saveIndexer,
   testIndexer,
-  toggleAdvancedSettings
+  toggleAdvancedSettings,
+  dispatchFetchDownloadClients: fetchDownloadClients
 };
 
 class EditIndexerModalContentConnector extends Component {
@@ -33,6 +40,10 @@ class EditIndexerModalContentConnector extends Component {
   //
   // Lifecycle
 
+  componentDidMount() {
+    this.props.dispatchFetchDownloadClients();
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
       this.props.onModalClose();
@@ -90,7 +101,8 @@ EditIndexerModalContentConnector.propTypes = {
   toggleAdvancedSettings: PropTypes.func.isRequired,
   saveIndexer: PropTypes.func.isRequired,
   testIndexer: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
+  onModalClose: PropTypes.func.isRequired,
+  dispatchFetchDownloadClients: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(EditIndexerModalContentConnector);

frontend/src/Indexer/Index/IndexerIndex.tsx

@@ -148,17 +148,17 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
   );
 
   const jumpBarItems = useMemo(() => {
-    // Reset if not sorting by sortTitle
-    if (sortKey !== 'sortTitle') {
+    // Reset if not sorting by sortName
+    if (sortKey !== 'sortName') {
       return {
         order: [],
       };
     }
 
     const characters = items.reduce((acc, item) => {
-      let char = item.sortTitle.charAt(0);
+      let char = item.sortName.charAt(0);
 
-      if (!isNaN(char)) {
+      if (!isNaN(Number(char))) {
         char = '#';
       }
 
@@ -190,7 +190,7 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
 
   return (
     <SelectProvider items={items}>
-      <PageContent>
+      <PageContent title={translate('Indexers')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
@@ -225,7 +225,7 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
               label={
                 isSelectMode
                   ? translate('StopSelecting')
-                  : translate('SelectIndexer')
+                  : translate('SelectIndexers')
               }
               iconName={isSelectMode ? icons.SERIES_ENDED : icons.CHECK}
               isSelectMode={isSelectMode}

frontend/src/Indexer/Index/Select/Delete/DeleteIndexerModalContent.tsx

@@ -7,8 +7,9 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
-import { bulkDeleteIndexers } from 'Store/Actions/indexerIndexActions';
+import { bulkDeleteIndexers } from 'Store/Actions/indexerActions';
 import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
+import translate from 'Utilities/String/translate';
 import styles from './DeleteIndexerModalContent.css';
 
 interface DeleteIndexerModalContentProps {
@@ -19,21 +20,21 @@ interface DeleteIndexerModalContentProps {
 function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
   const { indexerIds, onModalClose } = props;
 
-  const allIndexer = useSelector(createAllIndexersSelector());
+  const allIndexers = useSelector(createAllIndexersSelector());
   const dispatch = useDispatch();
 
-  const indexers = useMemo(() => {
+  const selectedIndexers = useMemo(() => {
     const indexers = indexerIds.map((id) => {
-      return allIndexer.find((s) => s.id === id);
+      return allIndexers.find((s) => s.id === id);
     });
 
-    return orderBy(indexers, ['sortTitle']);
-  }, [indexerIds, allIndexer]);
+    return orderBy(indexers, ['sortName']);
+  }, [indexerIds, allIndexers]);
 
   const onDeleteIndexerConfirmed = useCallback(() => {
     dispatch(
       bulkDeleteIndexers({
-        indexerIds,
+        ids: indexerIds,
       })
     );
 
@@ -42,17 +43,19 @@ function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>Delete Selected Indexer</ModalHeader>
+      <ModalHeader>{translate('DeleteSelectedIndexers')}</ModalHeader>
 
       <ModalBody>
         <div className={styles.message}>
-          {`Are you sure you want to delete ${indexers.length} selected indexers?`}
+          {translate('DeleteSelectedIndexersMessageText', [
+            selectedIndexers.length,
+          ])}
         </div>
 
         <ul>
-          {indexers.map((s) => {
+          {selectedIndexers.map((s) => {
             return (
-              <li key={s.name}>
+              <li key={s.id}>
                 <span>{s.name}</span>
               </li>
             );
@@ -61,10 +64,10 @@ function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
       </ModalBody>
 
       <ModalFooter>
-        <Button onPress={onModalClose}>Cancel</Button>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
         <Button kind={kinds.DANGER} onPress={onDeleteIndexerConfirmed}>
-          Delete
+          {translate('Delete')}
         </Button>
       </ModalFooter>
     </ModalContent>

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

@@ -7,13 +7,18 @@ 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 { inputTypes } from 'Helpers/Props';
+import { inputTypes, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './EditIndexerModalContent.css';
 
 interface SavePayload {
   enable?: boolean;
   appProfileId?: number;
+  priority?: number;
+  minimumSeeders?: number;
+  seedRatio?: number;
+  seedTime?: number;
+  packSeedTime?: number;
 }
 
 interface EditIndexerModalContentProps {
@@ -35,6 +40,15 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
 
   const [enable, setEnable] = useState(NO_CHANGE);
   const [appProfileId, setAppProfileId] = useState<string | number>(NO_CHANGE);
+  const [priority, setPriority] = useState<null | string | number>(null);
+  const [minimumSeeders, setMinimumSeeders] = useState<null | string | number>(
+    null
+  );
+  const [seedRatio, setSeedRatio] = useState<null | string | number>(null);
+  const [seedTime, setSeedTime] = useState<null | string | number>(null);
+  const [packSeedTime, setPackSeedTime] = useState<null | string | number>(
+    null
+  );
 
   const save = useCallback(() => {
     let hasChanges = false;
@@ -50,12 +64,47 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
       payload.appProfileId = appProfileId as number;
     }
 
+    if (priority !== null) {
+      hasChanges = true;
+      payload.priority = priority as number;
+    }
+
+    if (minimumSeeders !== null) {
+      hasChanges = true;
+      payload.minimumSeeders = minimumSeeders as number;
+    }
+
+    if (seedRatio !== null) {
+      hasChanges = true;
+      payload.seedRatio = seedRatio as number;
+    }
+
+    if (seedTime !== null) {
+      hasChanges = true;
+      payload.seedTime = seedTime as number;
+    }
+
+    if (packSeedTime !== null) {
+      hasChanges = true;
+      payload.packSeedTime = packSeedTime as number;
+    }
+
     if (hasChanges) {
       onSavePress(payload);
     }
 
     onModalClose();
-  }, [enable, appProfileId, onSavePress, onModalClose]);
+  }, [
+    enable,
+    appProfileId,
+    priority,
+    minimumSeeders,
+    seedRatio,
+    seedTime,
+    packSeedTime,
+    onSavePress,
+    onModalClose,
+  ]);
 
   const onInputChange = useCallback(
     ({ name, value }) => {
@@ -66,8 +115,23 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
         case 'appProfileId':
           setAppProfileId(value);
           break;
+        case 'priority':
+          setPriority(value);
+          break;
+        case 'minimumSeeders':
+          setMinimumSeeders(value);
+          break;
+        case 'seedRatio':
+          setSeedRatio(value);
+          break;
+        case 'seedTime':
+          setSeedTime(value);
+          break;
+        case 'packSeedTime':
+          setPackSeedTime(value);
+          break;
         default:
-          console.warn('EditIndexerModalContent Unknown Input');
+          console.warn(`EditIndexersModalContent Unknown Input: '${name}'`);
       }
     },
     [setEnable]
@@ -81,10 +145,10 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>{translate('Edit Selected Indexer')}</ModalHeader>
+      <ModalHeader>{translate('EditSelectedIndexers')}</ModalHeader>
 
       <ModalBody>
-        <FormGroup>
+        <FormGroup size={sizes.MEDIUM}>
           <FormLabel>{translate('Enable')}</FormLabel>
 
           <FormInputGroup
@@ -96,30 +160,95 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
           />
         </FormGroup>
 
-        <FormGroup>
+        <FormGroup size={sizes.MEDIUM}>
           <FormLabel>{translate('SyncProfile')}</FormLabel>
 
           <FormInputGroup
             type={inputTypes.APP_PROFILE_SELECT}
             name="appProfileId"
             value={appProfileId}
+            helpText={translate('AppProfileSelectHelpText')}
             includeNoChange={true}
             includeNoChangeDisabled={false}
             onChange={onInputChange}
           />
         </FormGroup>
+
+        <FormGroup size={sizes.MEDIUM}>
+          <FormLabel>{translate('IndexerPriority')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="priority"
+            value={priority}
+            min={1}
+            max={50}
+            helpText={translate('IndexerPriorityHelpText')}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup size={sizes.MEDIUM}>
+          <FormLabel>{translate('AppsMinimumSeeders')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="minimumSeeders"
+            value={minimumSeeders}
+            helpText={translate('AppsMinimumSeedersHelpText')}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup size={sizes.MEDIUM}>
+          <FormLabel>{translate('SeedRatio')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="seedRatio"
+            value={seedRatio}
+            helpText={translate('SeedRatioHelpText')}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup size={sizes.MEDIUM}>
+          <FormLabel>{translate('SeedTime')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="seedTime"
+            value={seedTime}
+            unit={translate('minutes')}
+            helpText={translate('SeedTimeHelpText')}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup size={sizes.MEDIUM}>
+          <FormLabel>{translate('PackSeedTime')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="packSeedTime"
+            value={packSeedTime}
+            unit={translate('minutes')}
+            helpText={translate('PackSeedTimeHelpText')}
+            onChange={onInputChange}
+          />
+        </FormGroup>
       </ModalBody>
 
       <ModalFooter className={styles.modalFooter}>
         <div className={styles.selected}>
-          {translate('{0} indexers selected', selectedCount.toString())}
+          {translate('CountIndexersSelected', [selectedCount])}
         </div>
 
         <div>
           <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
           <Button onPress={onSavePressWrapper}>
-            {translate('Apply Changes')}
+            {translate('ApplyChanges')}
           </Button>
         </div>
       </ModalFooter>

frontend/src/Indexer/Index/Select/IndexerIndexSelectAllButton.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { SelectActionType, useSelect } from 'App/SelectContext';
+import { useSelect } from 'App/SelectContext';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import { icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
@@ -25,9 +25,7 @@ function IndexerIndexSelectAllButton(props: IndexerIndexSelectAllButtonProps) {
 
   const onPress = useCallback(() => {
     selectDispatch({
-      type: allSelected
-        ? SelectActionType.UnselectAll
-        : SelectActionType.SelectAll,
+      type: allSelected ? 'unselectAll' : 'selectAll',
     });
   }, [allSelected, selectDispatch]);
 

frontend/src/Indexer/Index/Select/IndexerIndexSelectAllMenuItem.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { SelectActionType, useSelect } from 'App/SelectContext';
+import { useSelect } from 'App/SelectContext';
 import PageToolbarOverflowMenuItem from 'Components/Page/Toolbar/PageToolbarOverflowMenuItem';
 import { icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
@@ -26,9 +26,7 @@ function IndexerIndexSelectAllMenuItem(
 
   const onPressWrapper = useCallback(() => {
     selectDispatch({
-      type: allSelected
-        ? SelectActionType.UnselectAll
-        : SelectActionType.SelectAll,
+      type: allSelected ? 'unselectAll' : 'selectAll',
     });
   }, [allSelected, selectDispatch]);
 

frontend/src/Indexer/Index/Select/IndexerIndexSelectFooter.tsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
-import { SelectActionType, useSelect } from 'App/SelectContext';
+import { useSelect } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import PageContentFooter from 'Components/Page/PageContentFooter';
+import usePrevious from 'Helpers/Hooks/usePrevious';
 import { kinds } from 'Helpers/Props';
-import { saveIndexerEditor } from 'Store/Actions/indexerIndexActions';
+import { bulkEditIndexers } from 'Store/Actions/indexerActions';
 import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import DeleteIndexerModal from './Delete/DeleteIndexerModal';
@@ -13,8 +15,8 @@ import EditIndexerModal from './Edit/EditIndexerModal';
 import TagsModal from './Tags/TagsModal';
 import styles from './IndexerIndexSelectFooter.css';
 
-const seriesEditorSelector = createSelector(
-  (state) => state.indexers,
+const indexersEditorSelector = createSelector(
+  (state: AppState) => state.indexers,
   (indexers) => {
     const { isSaving, isDeleting, deleteError } = indexers;
 
@@ -27,8 +29,9 @@ const seriesEditorSelector = createSelector(
 );
 
 function IndexerIndexSelectFooter() {
-  const { isSaving, isDeleting, deleteError } =
-    useSelector(seriesEditorSelector);
+  const { isSaving, isDeleting, deleteError } = useSelector(
+    indexersEditorSelector
+  );
 
   const dispatch = useDispatch();
 
@@ -37,6 +40,7 @@ function IndexerIndexSelectFooter() {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isSavingIndexer, setIsSavingIndexer] = useState(false);
   const [isSavingTags, setIsSavingTags] = useState(false);
+  const previousIsDeleting = usePrevious(isDeleting);
 
   const [selectState, selectDispatch] = useSelect();
   const { selectedState } = selectState;
@@ -61,9 +65,9 @@ function IndexerIndexSelectFooter() {
       setIsEditModalOpen(false);
 
       dispatch(
-        saveIndexerEditor({
+        bulkEditIndexers({
           ...payload,
-          indexerIds,
+          ids: indexerIds,
         })
       );
     },
@@ -84,8 +88,8 @@ function IndexerIndexSelectFooter() {
       setIsTagsModalOpen(false);
 
       dispatch(
-        saveIndexerEditor({
-          indexerIds,
+        bulkEditIndexers({
+          ids: indexerIds,
           tags,
           applyTags,
         })
@@ -110,10 +114,10 @@ function IndexerIndexSelectFooter() {
   }, [isSaving]);
 
   useEffect(() => {
-    if (!isDeleting && !deleteError) {
-      selectDispatch({ type: SelectActionType.UnselectAll });
+    if (previousIsDeleting && !isDeleting && !deleteError) {
+      selectDispatch({ type: 'unselectAll' });
     }
-  }, [isDeleting, deleteError, selectDispatch]);
+  }, [previousIsDeleting, isDeleting, deleteError, selectDispatch]);
 
   const anySelected = selectedCount > 0;
 
@@ -134,7 +138,7 @@ function IndexerIndexSelectFooter() {
             isDisabled={!anySelected}
             onPress={onTagsPress}
           >
-            {translate('Set Tags')}
+            {translate('SetTags')}
           </SpinnerButton>
         </div>
 
@@ -151,7 +155,7 @@ function IndexerIndexSelectFooter() {
       </div>
 
       <div className={styles.selected}>
-        {translate('{0} indexers selected', selectedCount.toString())}
+        {translate('CountIndexersSelected', [selectedCount])}
       </div>
 
       <EditIndexerModal

frontend/src/Indexer/Index/Select/IndexerIndexSelectModeButton.tsx

@@ -1,6 +1,6 @@
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import React, { useCallback } from 'react';
-import { SelectActionType, useSelect } from 'App/SelectContext';
+import { useSelect } from 'App/SelectContext';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 
 interface IndexerIndexSelectModeButtonProps {
@@ -20,7 +20,7 @@ function IndexerIndexSelectModeButton(
   const onPressWrapper = useCallback(() => {
     if (isSelectMode) {
       selectDispatch({
-        type: SelectActionType.Reset,
+        type: 'reset',
       });
     }
 

frontend/src/Indexer/Index/Select/IndexerIndexSelectModeMenuItem.tsx

@@ -1,6 +1,6 @@
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import React, { useCallback } from 'react';
-import { SelectActionType, useSelect } from 'App/SelectContext';
+import { useSelect } from 'App/SelectContext';
 import PageToolbarOverflowMenuItem from 'Components/Page/Toolbar/PageToolbarOverflowMenuItem';
 
 interface IndexerIndexSelectModeMenuItemProps {
@@ -19,7 +19,7 @@ function IndexerIndexSelectModeMenuItem(
   const onPressWrapper = useCallback(() => {
     if (isSelectMode) {
       selectDispatch({
-        type: SelectActionType.Reset,
+        type: 'reset',
       });
     }
 

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

@@ -59,14 +59,14 @@ function TagsModalContent(props: TagsModalContentProps) {
   }, [tags, applyTags, onApplyTagsPress]);
 
   const applyTagsOptions = [
-    { key: 'add', value: 'Add' },
-    { key: 'remove', value: 'Remove' },
-    { key: 'replace', value: 'Replace' },
+    { key: 'add', value: translate('Add') },
+    { key: 'remove', value: translate('Remove') },
+    { key: 'replace', value: translate('Replace') },
   ];
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>Tags</ModalHeader>
+      <ModalHeader>{translate('Tags')}</ModalHeader>
 
       <ModalBody>
         <Form>
@@ -90,10 +90,10 @@ function TagsModalContent(props: TagsModalContentProps) {
               value={applyTags}
               values={applyTagsOptions}
               helpTexts={[
-                translate('ApplyTagsHelpTexts1'),
-                translate('ApplyTagsHelpTexts2'),
-                translate('ApplyTagsHelpTexts3'),
-                translate('ApplyTagsHelpTexts4'),
+                translate('ApplyTagsHelpTextHowToApplyIndexers'),
+                translate('ApplyTagsHelpTextAdd'),
+                translate('ApplyTagsHelpTextRemove'),
+                translate('ApplyTagsHelpTextReplace'),
               ]}
               onChange={onApplyTagsChange}
             />
@@ -119,8 +119,8 @@ function TagsModalContent(props: TagsModalContentProps) {
                     key={tag.id}
                     title={
                       removeTag
-                        ? translate('RemoveTagRemovingTag')
-                        : translate('RemoveTagExistingTag')
+                        ? translate('RemovingTag')
+                        : translate('ExistingTag')
                     }
                     kind={removeTag ? kinds.INVERSE : kinds.INFO}
                     size={sizes.LARGE}
@@ -159,10 +159,10 @@ function TagsModalContent(props: TagsModalContentProps) {
       </ModalBody>
 
       <ModalFooter>
-        <Button onPress={onModalClose}>Cancel</Button>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
         <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
-          Apply
+          {translate('Apply')}
         </Button>
       </ModalFooter>
     </ModalContent>

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

@@ -19,7 +19,11 @@
 
 .priority,
 .protocol,
-.privacy {
+.privacy,
+.minimumSeeders,
+.seedRatio,
+.seedTime,
+.packSeedTime {
   composes: cell;
 
   flex: 0 0 90px;

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

@@ -8,9 +8,13 @@ interface CssExports {
   'cell': string;
   'checkInput': string;
   'externalLink': string;
+  'minimumSeeders': string;
+  'packSeedTime': string;
   'priority': string;
   'privacy': string;
   'protocol': string;
+  'seedRatio': string;
+  'seedTime': string;
   'sortName': string;
   'status': string;
   'tags': string;

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { SelectActionType, useSelect } from 'App/SelectContext';
+import { useSelect } from 'App/SelectContext';
 import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
@@ -55,7 +55,28 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
   const vipExpiration =
     fields.find((field) => field.name === 'vipExpiration')?.value ?? '';
 
-  const rssUrl = `${window.location.origin}${window.Prowlarr.urlBase}/${id}/api?t=search&extended=1&apikey=${window.Prowlarr.apiKey}`;
+  const minimumSeeders =
+    fields.find(
+      (field) => field.name === 'torrentBaseSettings.appMinimumSeeders'
+    )?.value ?? undefined;
+
+  const seedRatio =
+    fields.find((field) => field.name === 'torrentBaseSettings.seedRatio')
+      ?.value ?? undefined;
+
+  const seedTime =
+    fields.find((field) => field.name === 'torrentBaseSettings.seedTime')
+      ?.value ?? undefined;
+
+  const packSeedTime =
+    fields.find((field) => field.name === 'torrentBaseSettings.packSeedTime')
+      ?.value ?? undefined;
+
+  const rssUrl = `${window.location.origin}${
+    window.Prowlarr.urlBase
+  }/${id}/api?apikey=${encodeURIComponent(
+    window.Prowlarr.apiKey
+  )}&extended=1&t=search`;
 
   const [isEditIndexerModalOpen, setIsEditIndexerModalOpen] = useState(false);
   const [isDeleteIndexerModalOpen, setIsDeleteIndexerModalOpen] =
@@ -86,7 +107,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
   const onSelectedChange = useCallback(
     ({ id, value, shiftKey }) => {
       selectDispatch({
-        type: SelectActionType.ToggleSelected,
+        type: 'toggleSelected',
         id,
         isSelected: value,
         shiftKey,
@@ -209,6 +230,38 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
           );
         }
 
+        if (name === 'minimumSeeders') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {minimumSeeders}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'seedRatio') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {seedRatio}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'seedTime') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {seedTime}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'packSeedTime') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {packSeedTime}
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'actions') {
           return (
             <VirtualTableRowCell

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

@@ -92,11 +92,9 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
 
   const columns = useSelector(columnsSelector);
   const { showBanners } = useSelector(selectTableOptions);
-  const listRef: React.MutableRefObject<List> = useRef();
+  const listRef = useRef<List>(null);
   const [measureRef, bounds] = useMeasure();
   const [size, setSize] = useState({ width: 0, height: 0 });
-  const windowWidth = window.innerWidth;
-  const windowHeight = window.innerHeight;
 
   const rowHeight = useMemo(() => {
     return showBanners ? 70 : 38;
@@ -107,8 +105,8 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
 
     if (isSmallScreen) {
       setSize({
-        width: windowWidth,
-        height: windowHeight,
+        width: window.innerWidth,
+        height: window.innerHeight,
       });
 
       return;
@@ -121,14 +119,14 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
 
       setSize({
         width: width - padding * 2,
-        height: windowHeight,
+        height: window.innerHeight,
       });
     }
-  }, [isSmallScreen, windowWidth, windowHeight, scrollerRef, bounds]);
+  }, [isSmallScreen, scrollerRef, bounds]);
 
   useEffect(() => {
-    const currentScrollListener = isSmallScreen ? window : scrollerRef.current;
-    const currentScrollerRef = scrollerRef.current;
+    const currentScrollerRef = scrollerRef.current as HTMLElement;
+    const currentScrollListener = isSmallScreen ? window : currentScrollerRef;
 
     const handleScroll = throttle(() => {
       const { offsetTop = 0 } = currentScrollerRef;
@@ -137,7 +135,7 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
           ? getWindowScrollTopPosition()
           : currentScrollerRef.scrollTop) - offsetTop;
 
-      listRef.current.scrollTo(scrollTop);
+      listRef.current?.scrollTo(scrollTop);
     }, 10);
 
     currentScrollListener.addEventListener('scroll', handleScroll);
@@ -166,8 +164,8 @@ function IndexerIndexTable(props: IndexerIndexTableProps) {
           scrollTop += offset;
         }
 
-        listRef.current.scrollTo(scrollTop);
-        scrollerRef.current.scrollTo(0, scrollTop);
+        listRef.current?.scrollTo(scrollTop);
+        scrollerRef.current?.scrollTo(0, scrollTop);
       }
     }
   }, [jumpToCharacter, rowHeight, items, scrollerRef, listRef]);

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

@@ -12,7 +12,11 @@
 
 .priority,
 .privacy,
-.protocol {
+.protocol,
+.minimumSeeders,
+.seedRatio,
+.seedTime,
+.packSeedTime {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 90px;

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

@@ -5,9 +5,13 @@ interface CssExports {
   'added': string;
   'appProfileId': string;
   'capabilities': string;
+  'minimumSeeders': string;
+  'packSeedTime': string;
   'priority': string;
   'privacy': string;
   'protocol': string;
+  'seedRatio': string;
+  'seedTime': string;
   'sortName': string;
   'status': string;
   'tags': string;

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { SelectActionType, useSelect } from 'App/SelectContext';
+import { useSelect } from 'App/SelectContext';
 import IconButton from 'Components/Link/IconButton';
 import Column from 'Components/Table/Column';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
@@ -14,6 +14,7 @@ import {
   setIndexerSort,
   setIndexerTableOption,
 } from 'Store/Actions/indexerIndexActions';
+import { SelectStateInputProps } from 'typings/props';
 import IndexerIndexTableOptions from './IndexerIndexTableOptions';
 import styles from './IndexerIndexTableHeader.css';
 
@@ -45,9 +46,9 @@ function IndexerIndexTableHeader(props: IndexerIndexTableHeaderProps) {
   );
 
   const onSelectAllChange = useCallback(
-    ({ value }) => {
+    ({ value }: SelectStateInputProps) => {
       selectDispatch({
-        type: value ? SelectActionType.SelectAll : SelectActionType.UnselectAll,
+        type: value ? 'selectAll' : 'unselectAll',
       });
     },
     [selectDispatch]

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

@@ -43,7 +43,7 @@ function IndexerStatusCell(props: IndexerStatusCellProps) {
           className={styles.statusIcon}
           kind={enabled ? enableKind : kinds.DEFAULT}
           name={enabled ? enableIcon : icons.BLOCKLIST}
-          title={enabled ? enableTitle : translate('EnabledIndexerIsDisabled')}
+          title={enabled ? enableTitle : translate('Disabled')}
         />
       }
       {status ? (

frontend/src/Indexer/Info/IndexerInfoModalContent.tsx

@@ -13,6 +13,10 @@ 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 TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableRow from 'Components/Table/TableRow';
 import TagListConnector from 'Components/TagListConnector';
 import { kinds } from 'Helpers/Props';
 import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal';
@@ -130,9 +134,11 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
                   {baseUrl.replace(/(:\/\/)api\./, '$1')}
                 </Link>
               </DescriptionListItemDescription>
-              <DescriptionListItemTitle>{`${
-                protocol === 'usenet' ? 'Newznab' : 'Torznab'
-              } Url`}</DescriptionListItemTitle>
+              <DescriptionListItemTitle>
+                {protocol === 'usenet'
+                  ? translate('NewznabUrl')
+                  : translate('TorznabUrl')}
+              </DescriptionListItemTitle>
               <DescriptionListItemDescription>
                 {`${window.location.origin}${window.Prowlarr.urlBase}/${id}/api`}
               </DescriptionListItemDescription>
@@ -149,6 +155,7 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
             </DescriptionList>
           </div>
         </FieldSet>
+
         <FieldSet legend={translate('SearchCapabilities')}>
           <div>
             <DescriptionList>
@@ -237,6 +244,54 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
             </DescriptionList>
           </div>
         </FieldSet>
+
+        {capabilities.categories !== null &&
+        capabilities.categories.length > 0 ? (
+          <FieldSet legend={translate('IndexerCategories')}>
+            <Table
+              columns={[
+                {
+                  name: 'id',
+                  label: translate('Id'),
+                  isVisible: true,
+                },
+                {
+                  name: 'name',
+                  label: translate('Name'),
+                  isVisible: true,
+                },
+              ]}
+            >
+              {capabilities.categories
+                .sort((a, b) => a.id - b.id)
+                .map((category) => {
+                  return (
+                    <TableBody key={category.id}>
+                      <TableRow key={category.id}>
+                        <TableRowCell>{category.id}</TableRowCell>
+                        <TableRowCell>{category.name}</TableRowCell>
+                      </TableRow>
+                      {category.subCategories !== null &&
+                      category.subCategories.length > 0
+                        ? category.subCategories
+                            .sort((a, b) => a.id - b.id)
+                            .map((subCategory) => {
+                              return (
+                                <TableRow key={subCategory.id}>
+                                  <TableRowCell>{subCategory.id}</TableRowCell>
+                                  <TableRowCell>
+                                    {subCategory.name}
+                                  </TableRowCell>
+                                </TableRow>
+                              );
+                            })
+                        : null}
+                    </TableBody>
+                  );
+                })}
+            </Table>
+          </FieldSet>
+        ) : null}
       </ModalBody>
       <ModalFooter>
         <Button

frontend/src/Indexer/Stats/Stats.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import BarChart from 'Components/Chart/BarChart';
 import DoughnutChart from 'Components/Chart/DoughnutChart';
 import StackedBarChart from 'Components/Chart/StackedBarChart';
@@ -178,9 +179,9 @@ function Stats(props) {
 
         {
           !isFetching && !!error &&
-            <div className={styles.errorMessage}>
+            <Alert kind={kinds.DANGER}>
               {getErrorMessage(error, 'Failed to load indexer stats from API')}
-            </div>
+            </Alert>
         }
 
         {
@@ -252,7 +253,6 @@ Stats.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   selectedFilterKey: PropTypes.string.isRequired,
-  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
   onFilterSelect: PropTypes.func.isRequired,
   error: PropTypes.object,
   data: PropTypes.object

frontend/src/Search/QueryParameterModal.js

@@ -14,11 +14,11 @@ import QueryParameterOption from './QueryParameterOption';
 import styles from './QueryParameterModal.css';
 
 const searchOptions = [
-  { key: 'search', value: 'Basic Search' },
-  { key: 'tvsearch', value: 'TV Search' },
-  { key: 'movie', value: 'Movie Search' },
-  { key: 'music', value: 'Audio Search' },
-  { key: 'book', value: 'Book Search' }
+  { key: 'search', value: translate('BasicSearch') },
+  { key: 'tvsearch', value: translate('TvSearch') },
+  { key: 'movie', value: translate('MovieSearch') },
+  { key: 'music', value: translate( 'AudioSearch') },
+  { key: 'book', value: translate('BookSearch') }
 ];
 
 const seriesTokens = [
@@ -94,8 +94,8 @@ class QueryParameterModal extends Component {
       const newValue = `${start}${tokenValue}${end}`;
 
       onSearchInputChange({ name, value: newValue });
-      this._selectionStart = newValue.length - 1;
-      this._selectionEnd = newValue.length - 1;
+      this._selectionStart = newValue.length;
+      this._selectionEnd = newValue.length;
     }
   };
 

frontend/src/Search/SearchFooter.js

@@ -27,7 +27,9 @@ class SearchFooter extends Component {
       defaultIndexerIds,
       defaultCategories,
       defaultSearchQuery,
-      defaultSearchType
+      defaultSearchType,
+      defaultSearchLimit,
+      defaultSearchOffset
     } = props;
 
     this.state = {
@@ -38,8 +40,8 @@ class SearchFooter extends Component {
       searchQuery: defaultSearchQuery || '',
       searchIndexerIds: defaultIndexerIds,
       searchCategories: defaultCategories,
-      searchLimit: 100,
-      searchOffset: 0,
+      searchLimit: defaultSearchLimit,
+      searchOffset: defaultSearchOffset,
       newSearch: true
     };
   }
@@ -55,7 +57,9 @@ class SearchFooter extends Component {
       this.onSearchPress();
     }
 
-    this.props.bindShortcut('enter', this.onSearchPress, { isGlobal: true });
+    setTimeout(() => {
+      this.props.bindShortcut('enter', this.onSearchPress, { isGlobal: true });
+    });
   }
 
   componentDidUpdate(prevProps) {
@@ -120,7 +124,6 @@ class SearchFooter extends Component {
   };
 
   onSearchPress = () => {
-
     const {
       searchLimit,
       searchOffset,
@@ -188,10 +191,10 @@ class SearchFooter extends Component {
         icon = icons.SEARCH;
     }
 
-    let footerLabel = `Search ${searchIndexerIds.length === 0 ? 'all' : searchIndexerIds.length} Indexers`;
+    let footerLabel = searchIndexerIds.length === 0 ? translate('SearchAllIndexers') : translate('SearchCountIndexers', [searchIndexerIds.length]);
 
     if (isPopulated) {
-      footerLabel = selectedCount === 0 ? `Found ${itemCount} releases` : `Selected ${selectedCount} of ${itemCount} releases`;
+      footerLabel = selectedCount === 0 ? translate('FoundCountReleases', [itemCount]) : translate('SelectedCountOfCountReleases', [selectedCount, itemCount]);
     }
 
     return (
@@ -302,6 +305,8 @@ SearchFooter.propTypes = {
   defaultCategories: PropTypes.arrayOf(PropTypes.number).isRequired,
   defaultSearchQuery: PropTypes.string.isRequired,
   defaultSearchType: PropTypes.string.isRequired,
+  defaultSearchLimit: PropTypes.number.isRequired,
+  defaultSearchOffset: PropTypes.number.isRequired,
   selectedCount: PropTypes.number.isRequired,
   itemCount: PropTypes.number.isRequired,
   isFetching: PropTypes.bool.isRequired,

frontend/src/Search/SearchFooterConnector.js

@@ -3,24 +3,58 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { setSearchDefault } from 'Store/Actions/releaseActions';
+import parseUrl from 'Utilities/String/parseUrl';
 import SearchFooter from './SearchFooter';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.releases,
-    (releases) => {
+    (state) => state.router.location,
+    (releases, location) => {
       const {
         searchQuery: defaultSearchQuery,
         searchIndexerIds: defaultIndexerIds,
         searchCategories: defaultCategories,
-        searchType: defaultSearchType
+        searchType: defaultSearchType,
+        searchLimit: defaultSearchLimit,
+        searchOffset: defaultSearchOffset
       } = releases.defaults;
 
+      const { params } = parseUrl(location.search);
+      const defaultSearchQueryParams = {};
+
+      if (params.query && !defaultSearchQuery) {
+        defaultSearchQueryParams.searchQuery = params.query;
+      }
+
+      if (params.indexerIds && !defaultIndexerIds.length) {
+        defaultSearchQueryParams.searchIndexerIds = params.indexerIds.split(',').map((id) => Number(id)).filter(Boolean);
+      }
+
+      if (params.categories && !defaultCategories.length) {
+        defaultSearchQueryParams.searchCategories = params.categories.split(',').map((id) => Number(id)).filter(Boolean);
+      }
+
+      if (params.type && defaultSearchType === 'search') {
+        defaultSearchQueryParams.searchType = params.type;
+      }
+
+      if (params.limit && defaultSearchLimit === 100 && !isNaN(params.limit)) {
+        defaultSearchQueryParams.searchLimit = Number(params.limit);
+      }
+
+      if (params.offset && !defaultSearchOffset && !isNaN(params.offset)) {
+        defaultSearchQueryParams.searchOffset = Number(params.offset);
+      }
+
       return {
-        defaultSearchQuery,
-        defaultIndexerIds,
-        defaultCategories,
-        defaultSearchType
+        defaultSearchQueryParams,
+        defaultSearchQuery: defaultSearchQueryParams.searchQuery ?? defaultSearchQuery,
+        defaultIndexerIds: defaultSearchQueryParams.searchIndexerIds ?? defaultIndexerIds,
+        defaultCategories: defaultSearchQueryParams.searchCategories ?? defaultCategories,
+        defaultSearchType: defaultSearchQueryParams.searchType ?? defaultSearchType,
+        defaultSearchLimit: defaultSearchQueryParams.searchLimit ?? defaultSearchLimit,
+        defaultSearchOffset: defaultSearchQueryParams.searchOffset ?? defaultSearchOffset
       };
     }
   );
@@ -32,6 +66,16 @@ const mapDispatchToProps = {
 
 class SearchFooterConnector extends Component {
 
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    // Set defaults from query parameters
+    Object.entries(this.props.defaultSearchQueryParams).forEach(([name, value]) => {
+      this.onInputChange({ name, value });
+    });
+  }
+
   //
   // Listeners
 
@@ -43,9 +87,14 @@ class SearchFooterConnector extends Component {
   // Render
 
   render() {
+    const {
+      defaultSearchQueryParams,
+      ...otherProps
+    } = this.props;
+
     return (
       <SearchFooter
-        {...this.props}
+        {...otherProps}
         onInputChange={this.onInputChange}
       />
     );
@@ -53,6 +102,7 @@ class SearchFooterConnector extends Component {
 }
 
 SearchFooterConnector.propTypes = {
+  defaultSearchQueryParams: PropTypes.object.isRequired,
   setSearchDefault: PropTypes.func.isRequired
 };
 

frontend/src/Search/SearchIndex.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -10,7 +11,9 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
+import AddIndexerModal from 'Indexer/Add/AddIndexerModal';
+import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
 import NoIndexer from 'Indexer/NoIndexer';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
@@ -53,7 +56,9 @@ class SearchIndex extends Component {
       lastToggled: null,
       allSelected: false,
       allUnselected: false,
-      selectedState: {}
+      selectedState: {},
+      isAddIndexerModalOpen: false,
+      isEditIndexerModalOpen: false
     };
   }
 
@@ -141,7 +146,7 @@ class SearchIndex extends Component {
     } = this.props;
 
     // Reset if not sorting by sortTitle
-    if (sortKey !== 'title') {
+    if (sortKey !== 'sortTitle') {
       this.setState({ jumpBarItems: { order: [] } });
       return;
     }
@@ -149,7 +154,7 @@ class SearchIndex extends Component {
     const characters = _.reduce(items, (acc, item) => {
       let char = item.sortTitle.charAt(0);
 
-      if (!isNaN(char)) {
+      if (!isNaN(Number(char))) {
         char = '#';
       }
 
@@ -180,6 +185,22 @@ class SearchIndex extends Component {
   //
   // Listeners
 
+  onAddIndexerPress = () => {
+    this.setState({ isAddIndexerModalOpen: true });
+  };
+
+  onAddIndexerModalClose = () => {
+    this.setState({ isAddIndexerModalOpen: false });
+  };
+
+  onAddIndexerSelectIndexer = () => {
+    this.setState({ isEditIndexerModalOpen: true });
+  };
+
+  onEditIndexerModalClose = () => {
+    this.setState({ isEditIndexerModalOpen: false });
+  };
+
   onJumpBarItemPress = (jumpToCharacter) => {
     this.setState({ jumpToCharacter });
   };
@@ -251,7 +272,9 @@ class SearchIndex extends Component {
       jumpToCharacter,
       selectedState,
       allSelected,
-      allUnselected
+      allUnselected,
+      isAddIndexerModalOpen,
+      isEditIndexerModalOpen
     } = this.state;
 
     const selectedIndexerIds = this.getSelectedIds();
@@ -309,9 +332,9 @@ class SearchIndex extends Component {
 
             {
               !isFetching && !!error &&
-                <div className={styles.errorMessage}>
+                <Alert kind={kinds.DANGER}>
                   {getErrorMessage(error, 'Failed to load search results from API')}
-                </div>
+                </Alert>
             }
 
             {
@@ -347,6 +370,17 @@ class SearchIndex extends Component {
               !error && !isFetching && hasIndexers && !items.length &&
                 <NoSearchResults totalItems={totalItems} />
             }
+
+            <AddIndexerModal
+              isOpen={isAddIndexerModalOpen}
+              onModalClose={this.onAddIndexerModalClose}
+              onSelectIndexer={this.onAddIndexerSelectIndexer}
+            />
+
+            <EditIndexerModalConnector
+              isOpen={isEditIndexerModalOpen}
+              onModalClose={this.onEditIndexerModalClose}
+            />
           </PageContentBody>
 
           {

frontend/src/Search/Table/CategoryLabel.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Label from 'Components/Label';
+import Tooltip from 'Components/Tooltip/Tooltip';
 import { kinds, tooltipPositions } from 'Helpers/Props';
-import Tooltip from '../../Components/Tooltip/Tooltip';
 
 function CategoryLabel({ categories }) {
   const sortedCategories = categories.filter((cat) => cat.name !== undefined).sort((c) => c.id);

frontend/src/Settings/AdvancedSettingsButton.js

@@ -17,7 +17,7 @@ function AdvancedSettingsButton(props) {
   return (
     <Link
       className={styles.button}
-      title={advancedSettings ? translate('ShownClickToHide') : translate('HiddenClickToShow')}
+      title={advancedSettings ? translate('AdvancedSettingsShownClickToHide') : translate('AdvancedSettingsHiddenClickToShow')}
       onPress={onAdvancedSettingsPress}
     >
       <Icon

frontend/src/Settings/Applications/ApplicationSettings.js

@@ -9,8 +9,35 @@ import AppProfilesConnector from 'Settings/Profiles/App/AppProfilesConnector';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import ApplicationsConnector from './Applications/ApplicationsConnector';
+import ManageApplicationsModal from './Applications/Manage/ManageApplicationsModal';
 
 class ApplicationSettings extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isManageApplicationsOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onManageApplicationsPress = () => {
+    this.setState({ isManageApplicationsOpen: true });
+  };
+
+  onManageApplicationsModalClose = () => {
+    this.setState({ isManageApplicationsOpen: false });
+  };
+
+  //
+  // Render
+
   render() {
     const {
       isTestingAll,
@@ -19,6 +46,8 @@ class ApplicationSettings extends Component {
       onAppIndexerSyncPress
     } = this.props;
 
+    const { isManageApplicationsOpen } = this.state;
+
     return (
       <PageContent title={translate('Applications')}>
         <SettingsToolbarConnector
@@ -40,6 +69,12 @@ class ApplicationSettings extends Component {
                 isSpinning={isTestingAll}
                 onPress={onTestAllPress}
               />
+
+              <PageToolbarButton
+                label={translate('ManageApplications')}
+                iconName={icons.MANAGE}
+                onPress={this.onManageApplicationsPress}
+              />
             </Fragment>
           }
         />
@@ -47,6 +82,11 @@ class ApplicationSettings extends Component {
         <PageContentBody>
           <ApplicationsConnector />
           <AppProfilesConnector />
+
+          <ManageApplicationsModal
+            isOpen={isManageApplicationsOpen}
+            onModalClose={this.onManageApplicationsModalClose}
+          />
         </PageContentBody>
       </PageContent>
     );

frontend/src/Settings/Applications/Applications/Application.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TagList from 'Components/TagList';
 import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import EditApplicationModalConnector from './EditApplicationModalConnector';
@@ -55,7 +56,9 @@ class Application extends Component {
     const {
       id,
       name,
-      syncLevel
+      syncLevel,
+      tags,
+      tagList
     } = this.props;
 
     return (
@@ -92,6 +95,11 @@ class Application extends Component {
             </Label>
         }
 
+        <TagList
+          tags={tags}
+          tagList={tagList}
+        />
+
         <EditApplicationModalConnector
           id={id}
           isOpen={this.state.isEditApplicationModalOpen}
@@ -117,6 +125,8 @@ Application.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   syncLevel: PropTypes.string.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteApplication: PropTypes.func
 };
 

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

@@ -49,6 +49,7 @@ class Applications extends Component {
   render() {
     const {
       items,
+      tagList,
       onConfirmDeleteApplication,
       ...otherProps
     } = this.props;
@@ -71,6 +72,7 @@ class Applications extends Component {
                   <Application
                     key={item.id}
                     {...item}
+                    tagList={tagList}
                     onConfirmDeleteApplication={onConfirmDeleteApplication}
                   />
                 );
@@ -109,6 +111,7 @@ Applications.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteApplication: PropTypes.func.isRequired
 };
 

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

@@ -4,13 +4,20 @@ import { connect } from 'react-redux';
 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 Applications from './Applications';
 
 function createMapStateToProps() {
   return createSelector(
     createSortedSectionSelector('settings.applications', sortByName),
-    (applications) => applications
+    createTagsSelector(),
+    (applications, tagList) => {
+      return {
+        ...applications,
+        tagList
+      };
+    }
   );
 }
 

frontend/src/Settings/Applications/Applications/EditApplicationModalContent.js

@@ -14,6 +14,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
+import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
 import translate from 'Utilities/String/translate';
 import styles from './EditApplicationModalContent.css';
 
@@ -38,6 +39,7 @@ function EditApplicationModalContent(props) {
     onSavePress,
     onTestPress,
     onDeleteApplicationPress,
+    onAdvancedSettingsPress,
     ...otherProps
   } = props;
 
@@ -149,6 +151,12 @@ function EditApplicationModalContent(props) {
             </Button>
         }
 
+        <AdvancedSettingsButton
+          advancedSettings={advancedSettings}
+          onAdvancedSettingsPress={onAdvancedSettingsPress}
+          showLabel={false}
+        />
+
         <SpinnerErrorButton
           isSpinning={isTesting}
           error={saveError}
@@ -188,7 +196,8 @@ EditApplicationModalContent.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onSavePress: PropTypes.func.isRequired,
   onTestPress: PropTypes.func.isRequired,
-  onDeleteApplicationPress: PropTypes.func
+  onDeleteApplicationPress: PropTypes.func,
+  onAdvancedSettingsPress: PropTypes.func.isRequired
 };
 
 export default EditApplicationModalContent;

frontend/src/Settings/Applications/Applications/EditApplicationModalContentConnector.js

@@ -2,7 +2,13 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { saveApplication, setApplicationFieldValue, setApplicationValue, testApplication } from 'Store/Actions/settingsActions';
+import {
+  saveApplication,
+  setApplicationFieldValue,
+  setApplicationValue,
+  testApplication,
+  toggleAdvancedSettings
+} from 'Store/Actions/settingsActions';
 import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
 import EditApplicationModalContent from './EditApplicationModalContent';
 
@@ -23,7 +29,8 @@ const mapDispatchToProps = {
   setApplicationValue,
   setApplicationFieldValue,
   saveApplication,
-  testApplication
+  testApplication,
+  toggleAdvancedSettings
 };
 
 class EditApplicationModalContentConnector extends Component {
@@ -56,6 +63,10 @@ class EditApplicationModalContentConnector extends Component {
     this.props.testApplication({ id: this.props.id });
   };
 
+  onAdvancedSettingsPress = () => {
+    this.props.toggleAdvancedSettings();
+  };
+
   //
   // Render
 
@@ -67,6 +78,7 @@ class EditApplicationModalContentConnector extends Component {
         onTestPress={this.onTestPress}
         onInputChange={this.onInputChange}
         onFieldChange={this.onFieldChange}
+        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
       />
     );
   }
@@ -82,7 +94,8 @@ EditApplicationModalContentConnector.propTypes = {
   setApplicationFieldValue: PropTypes.func,
   saveApplication: PropTypes.func,
   testApplication: PropTypes.func,
-  onModalClose: PropTypes.func.isRequired
+  onModalClose: PropTypes.func.isRequired,
+  toggleAdvancedSettings: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(EditApplicationModalContentConnector);

frontend/src/Settings/Applications/Applications/Manage/Edit/ManageApplicationsEditModal.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageApplicationsEditModalContent from './ManageApplicationsEditModalContent';
+
+interface ManageApplicationsEditModalProps {
+  isOpen: boolean;
+  applicationIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+function ManageApplicationsEditModal(props: ManageApplicationsEditModalProps) {
+  const { isOpen, applicationIds, onSavePress, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageApplicationsEditModalContent
+        applicationIds={applicationIds}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default ManageApplicationsEditModal;

frontend/src/Settings/Applications/Applications/Manage/Edit/ManageApplicationsEditModalContent.css

@@ -0,0 +1,16 @@
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Settings/Applications/Applications/Manage/Edit/ManageApplicationsEditModalContent.css.d.ts

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

frontend/src/Settings/Applications/Applications/Manage/Edit/ManageApplicationsEditModalContent.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+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 { inputTypes } from 'Helpers/Props';
+import { ApplicationSyncLevel } from 'typings/Application';
+import translate from 'Utilities/String/translate';
+import styles from './ManageApplicationsEditModalContent.css';
+
+interface SavePayload {
+  syncLevel?: ApplicationSyncLevel;
+}
+
+interface ManageApplicationsEditModalContentProps {
+  applicationIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const syncLevelOptions = [
+  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+  { key: ApplicationSyncLevel.Disabled, value: translate('Disabled') },
+  { key: ApplicationSyncLevel.AddOnly, value: translate('AddOnly') },
+  { key: ApplicationSyncLevel.FullSync, value: translate('FullSync') },
+];
+
+function ManageApplicationsEditModalContent(
+  props: ManageApplicationsEditModalContentProps
+) {
+  const { applicationIds, onSavePress, onModalClose } = props;
+
+  const [syncLevel, setSyncLevel] = useState(NO_CHANGE);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (syncLevel !== NO_CHANGE) {
+      hasChanges = true;
+      payload.syncLevel = syncLevel as ApplicationSyncLevel;
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [syncLevel, onSavePress, onModalClose]);
+
+  const onInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      switch (name) {
+        case 'syncLevel':
+          setSyncLevel(value);
+          break;
+        default:
+          console.warn(`EditApplicationsModalContent Unknown Input: '${name}'`);
+      }
+    },
+    []
+  );
+
+  const selectedCount = applicationIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditSelectedApplications')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('SyncLevel')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="syncLevel"
+            value={syncLevel}
+            values={syncLevelOptions}
+            helpText={`${translate('SyncLevelAddRemove')}<br>${translate(
+              'SyncLevelFull'
+            )}`}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('CountApplicationsSelected', [selectedCount])}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={save}>{translate('ApplyChanges')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default ManageApplicationsEditModalContent;

frontend/src/Settings/Applications/Applications/Manage/ManageApplicationsModal.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageApplicationsModalContent from './ManageApplicationsModalContent';
+
+interface ManageApplicationsModalProps {
+  isOpen: boolean;
+  onModalClose(): void;
+}
+
+function ManageApplicationsModal(props: ManageApplicationsModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageApplicationsModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default ManageApplicationsModal;

frontend/src/Settings/Applications/Applications/Manage/ManageApplicationsModalContent.css

@@ -0,0 +1,16 @@
+.leftButtons,
+.rightButtons {
+  display: flex;
+  flex: 1 0 50%;
+  flex-wrap: wrap;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: 10px;
+}

frontend/src/Settings/Applications/Applications/Manage/ManageApplicationsModalContent.css.d.ts

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

frontend/src/Settings/Applications/Applications/Manage/ManageApplicationsModalContent.tsx

@@ -0,0 +1,282 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ApplicationAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+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 Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { kinds } from 'Helpers/Props';
+import {
+  bulkDeleteApplications,
+  bulkEditApplications,
+} from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SelectStateInputProps } from 'typings/props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import ManageApplicationsEditModal from './Edit/ManageApplicationsEditModal';
+import ManageApplicationsModalRow from './ManageApplicationsModalRow';
+import TagsModal from './Tags/TagsModal';
+import styles from './ManageApplicationsModalContent.css';
+
+// TODO: This feels janky to do, but not sure of a better way currently
+type OnSelectedChangeCallback = React.ComponentProps<
+  typeof ManageApplicationsModalRow
+>['onSelectedChange'];
+
+const COLUMNS = [
+  {
+    name: 'name',
+    label: translate('Name'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'implementation',
+    label: translate('Implementation'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'syncLevel',
+    label: translate('SyncLevel'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'tags',
+    label: translate('Tags'),
+    isSortable: true,
+    isVisible: true,
+  },
+];
+
+interface ManageApplicationsModalContentProps {
+  onModalClose(): void;
+}
+
+function ManageApplicationsModalContent(
+  props: ManageApplicationsModalContentProps
+) {
+  const { onModalClose } = props;
+
+  const {
+    isFetching,
+    isPopulated,
+    isDeleting,
+    isSaving,
+    error,
+    items,
+  }: ApplicationAppState = useSelector(
+    createClientSideCollectionSelector('settings.applications')
+  );
+  const dispatch = useDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
+  const [isSavingTags, setIsSavingTags] = useState(false);
+
+  const [selectState, setSelectState] = useSelectState();
+
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds: number[] = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = selectedIds.length;
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, [setIsDeleteModalOpen]);
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onConfirmDelete = useCallback(() => {
+    dispatch(bulkDeleteApplications({ ids: selectedIds }));
+    setIsDeleteModalOpen(false);
+  }, [selectedIds, dispatch]);
+
+  const onSavePress = useCallback(
+    (payload: object) => {
+      setIsEditModalOpen(false);
+
+      dispatch(
+        bulkEditApplications({
+          ids: selectedIds,
+          ...payload,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onTagsPress = useCallback(() => {
+    setIsTagsModalOpen(true);
+  }, [setIsTagsModalOpen]);
+
+  const onTagsModalClose = useCallback(() => {
+    setIsTagsModalOpen(false);
+  }, [setIsTagsModalOpen]);
+
+  const onApplyTagsPress = useCallback(
+    (tags: number[], applyTags: string) => {
+      setIsSavingTags(true);
+      setIsTagsModalOpen(false);
+
+      dispatch(
+        bulkEditApplications({
+          ids: selectedIds,
+          tags,
+          applyTags,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }: SelectStateInputProps) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const onSelectedChange = useCallback<OnSelectedChangeCallback>(
+    ({ id, value, shiftKey = false }) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const errorMessage = getErrorMessage(
+    error,
+    'Unable to load download clients.'
+  );
+  const anySelected = selectedCount > 0;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('ManageApplications')}</ModalHeader>
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {error ? <div>{errorMessage}</div> : null}
+
+        {isPopulated && !error && !items.length && (
+          <Alert kind={kinds.INFO}>{translate('NoApplicationsFound')}</Alert>
+        )}
+
+        {isPopulated && !!items.length && !isFetching && !isFetching ? (
+          <Table
+            columns={COLUMNS}
+            horizontalScroll={true}
+            selectAll={true}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          >
+            <TableBody>
+              {items.map((item) => {
+                return (
+                  <ManageApplicationsModalRow
+                    key={item.id}
+                    isSelected={selectedState[item.id]}
+                    {...item}
+                    columns={COLUMNS}
+                    onSelectedChange={onSelectedChange}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <div className={styles.leftButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected}
+            onPress={onDeletePress}
+          >
+            {translate('Delete')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            {translate('Edit')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving && isSavingTags}
+            isDisabled={!anySelected}
+            onPress={onTagsPress}
+          >
+            {translate('SetTags')}
+          </SpinnerButton>
+        </div>
+
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      </ModalFooter>
+
+      <ManageApplicationsEditModal
+        isOpen={isEditModalOpen}
+        onModalClose={onEditModalClose}
+        onSavePress={onSavePress}
+        applicationIds={selectedIds}
+      />
+
+      <TagsModal
+        isOpen={isTagsModalOpen}
+        ids={selectedIds}
+        onApplyTagsPress={onApplyTagsPress}
+        onModalClose={onTagsModalClose}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        kind={kinds.DANGER}
+        title={translate('DeleteSelectedApplications')}
+        message={translate('DeleteSelectedApplicationsMessageText', [
+          selectedIds.length,
+        ])}
+        confirmLabel={translate('Delete')}
+        onConfirm={onConfirmDelete}
+        onCancel={onDeleteModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default ManageApplicationsModalContent;

frontend/src/Settings/Applications/Applications/Manage/ManageApplicationsModalRow.css

@@ -0,0 +1,8 @@
+.name,
+.syncLevel,
+.tags,
+.implementation {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}

frontend/src/Settings/Applications/Applications/Manage/ManageApplicationsModalRow.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'implementation': string;
+  'name': string;
+  'syncLevel': string;
+  'tags': string;
+}
+export const cssExports: CssExports;
+export default cssExports;