Automated API Docs update

Remove not implemented endpoints from API docs
Closes #8724
2026-03-12 15:30:39 -04:00 · 2023-06-21 06:45:42 +03:00 · 2023-06-21 06:34:07 +03:00 · 2023-06-21 06:25:44 +03:00 · 2023-06-21 06:19:30 +03:00 · 2023-06-20 19:39:16 +03:00
1391 changed files with 25349 additions and 17098 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -40,9 +40,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
--- a/.gitattributes
+++ b/.gitattributes
@@ -3,7 +3,7 @@

 # Explicitly set bash scripts to have unix endings
 *.sh text eol=lf
-macOS/Radarr text eol=lf
+distribution/osx/Radarr text eol=lf

 # Custom for Visual Studio
 *.cs     diff=csharp
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -73,3 +73,10 @@ body:
      Additionally, any additional info? Screenshots? References? Anything that will give us more context about the issue you are encountering!
  validations:
    required: true
+- 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
+    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.
+      required: true
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -0,0 +1,28 @@
+'Area: API':
+  - src/Radarr.Api.V3/**/*
+
+'Area: Db-migration':
+  - src/NzbDrone.Core/Datastore/Migration/*
+
+'Area: Download Clients':
+  - src/NzbDrone.Core/Download/Clients/**/*
+
+'Area: Import Lists':
+  - src/NzbDrone.Core/ImportLists/**/*
+
+'Area: Indexer':
+  - src/NzbDrone.Core/Indexers/**/*
+
+'Area: Notifications':
+  - src/NzbDrone.Core/Notifications/**/*
+
+'Area: Organizer':
+  - src/NzbDrone.Core/Organizer/**/*
+
+'Area: Parser':
+  - src/NzbDrone.Core/Parser/**/*
+
+'Area: UI':
+  - frontend/**/*
+  - package.json
+  - yarn.lock
--- a/.github/workflows/labeler.yml
+++ b/.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
--- a/.github/workflows/lock.yml
+++ b/.github/workflows/lock.yml
@@ -14,13 +14,13 @@ jobs:

    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/lock-threads@v2
+      - uses: dessant/lock-threads@v4
        with:
          github-token: ${{ github.token }}
-          issue-lock-inactive-days: '90'
-          issue-exclude-created-before: ''
-          issue-exclude-labels: ''
-          issue-lock-labels: ''
-          issue-lock-comment: ''
+          issue-inactive-days: '90'
+          exclude-issue-created-before: ''
+          exclude-any-issue-labels: ''
+          add-issue-labels: ''
+          issue-comment: ''
          issue-lock-reason: 'resolved'
          process-only: ''
--- a/.github/workflows/support.yml
+++ b/.github/workflows/support.yml
@@ -12,7 +12,7 @@ jobs:

    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/support-requests@v2
+      - uses: dessant/support-requests@v3
        with:
          github-token: ${{ github.token }}
          support-label: 'Type: Support'
@@ -22,4 +22,15 @@ jobs:
            to be a support request. Please hop over onto our [Discord](https://radarr.video/discord) 
            or [Subreddit](https://reddit.com/r/radarr)
          close-issue: true
-          lock-issue: false
+          lock-issue: false
+      - uses: dessant/support-requests@v3
+        with:
+          github-token: ${{ github.token }}
+          support-label: 'Status: Logs Needed'
+          issue-comment: >
+            :wave: @{issue-author}, In order to help you further we'll need to see logs. 
+            You'll need to enable trace logging and replicate the problem that you encountered. 
+            Guidance on how to enable trace logging can be found in 
+            our [troubleshooting guide](https://wiki.servarr.com/radarr/troubleshooting#logging-and-log-files).
+          close-issue: false
+          lock-issue: false
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -9,13 +9,13 @@ variables:
  testsFolder: './_tests'
  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
  nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '4.4.3'
+  majorVersion: '4.6.3'
  minorVersion: $[counter('minorVersion', 2000)]
  radarrVersion: '$(majorVersion).$(minorVersion)'
  buildName: '$(Build.SourceBranchName).$(radarrVersion)'
  sentryOrg: 'servarr'
  sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.400'
+  dotnetVersion: '6.0.408'
  nodeVersion: '16.X'
  innoVersion: '6.2.0'
  windowsImage: 'windows-2022'
@@ -211,8 +211,8 @@ stages:
        displayName: Fetch Frontend
      - bash: |
          ./build.sh --packages --installer
-          cp setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
-          cp setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
+          cp distribution/windows/setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
+          cp distribution/windows/setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
        displayName: Create Installers
      - publish: $(Build.ArtifactStagingDirectory)
        artifact: 'WindowsInstaller'
--- a/build.sh
+++ b/build.sh
@@ -21,7 +21,7 @@ UpdateVersionNumber()
        echo "Updating Version Info"
        sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$RADARRVERSION<\/AssemblyVersion>/g" src/Directory.Build.props
        sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BUILD_SOURCEBRANCHNAME}<\/AssemblyConfiguration>/g" src/Directory.Build.props
-        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" macOS/Radarr.app/Contents/Info.plist
+        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" distribution/osx/Radarr.app/Contents/Info.plist
    fi
 }

@@ -184,7 +184,7 @@ PackageMacOSApp()

    rm -rf $folder
    mkdir -p $folder
-    cp -r macOS/Radarr.app $folder
+    cp -r distribution/osx/Radarr.app $folder
    mkdir -p $folder/Radarr.app/Contents/MacOS

    echo "Copying Binaries"
@@ -246,7 +246,7 @@ BuildInstaller()
    local framework="$1"
    local runtime="$2"
    
-    ./_inno/ISCC.exe setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
+    ./_inno/ISCC.exe distribution/windows/setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
 }

 InstallInno()
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,5 +0,0 @@
-nzbdrone {version} {branch}; urgency=low
-
-  * Automatic Release.
-
- -- NzbDrone <contact@nzbdrone.com>  Mon, 26 Aug 2013 00:00:00 -0700
--- a/debian/compat
+++ b/debian/compat
@@ -1 +0,0 @@
-8
--- a/debian/control
+++ b/debian/control
@@ -1,12 +0,0 @@
-Section: web
-Priority: optional
-Maintainer: Sonarr <contact@nzbdrone.com>
-Source: nzbdrone
-Homepage: https://sonarr.tv
-Vcs-Git: git@github.com:Sonarr/Sonarr.git
-Vcs-Browser: https://github.com/Sonarr/Sonarr
-
-Package: nzbdrone
-Architecture: all
-Depends: libmono-cil-dev (>= 3.2), sqlite3 (>= 3.7), mediainfo (>= 0.7.52)
-Description: Sonarr is an internet PVR
--- a/debian/copyright
+++ b/debian/copyright
@@ -1,24 +0,0 @@
-Format: http://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
-Upstream-Name: nzbdrone
-Source: https://github.com/Sonarr/Sonarr
-
-Files: *
-Copyright: 2010-2016 Sonarr <hello@sonarr.tv>
-
-License: GPL-3.0+
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
- .
- This package is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- GNU General Public License for more details.
- .
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
- .
- On Debian systems, the complete text of the GNU General
- Public License version 3 can be found in "/usr/share/common-licenses/GPL-3".
--- a/debian/install
+++ b/debian/install
@@ -1 +0,0 @@
-nzbdrone_bin/* opt/NzbDrone
--- a/debian/rules
+++ b/debian/rules
@@ -1,13 +0,0 @@
-#!/usr/bin/make -f
-# -*- makefile -*-
-# Sample debian/rules that uses debhelper.
-# This file was originally written by Joey Hess and Craig Small.
-# As a special exception, when this file is copied by dh-make into a
-# dh-make output file, you may use that output file without restriction.
-# This special exception was added by Craig Small in version 0.37 of dh-make.
-
-# Uncomment this to turn on verbose mode.
-#export DH_VERBOSE=1
-
-%:
-	dh $@ 
--- a/distribution/osx/Radarr.app/Contents/Info.plist
+++ b/distribution/osx/Radarr.app/Contents/Info.plist
--- a/distribution/osx/Radarr.app/Contents/Resources/radarr.icns
+++ b/distribution/osx/Radarr.app/Contents/Resources/radarr.icns
--- a/distribution/windows/setup/radarr.iss
+++ b/distribution/windows/setup/radarr.iss
@@ -52,8 +52,8 @@ Name: "none"; Description: "Do not start automatically"; GroupDescription: "Star
 Name: "{app}"; Permissions: users-modify

 [Files]
-Source: "..\_artifacts\{#Runtime}\{#Framework}\Radarr\Radarr.exe"; DestDir: "{app}\bin"; Flags: ignoreversion
-Source: "..\_artifacts\{#Runtime}\{#Framework}\Radarr\*"; Excludes: "Radarr.Update"; DestDir: "{app}\bin"; Flags: ignoreversion recursesubdirs createallsubdirs
+Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Radarr\Radarr.exe"; DestDir: "{app}\bin"; Flags: ignoreversion
+Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Radarr\*"; Excludes: "Radarr.Update"; DestDir: "{app}\bin"; Flags: ignoreversion recursesubdirs createallsubdirs
 ; NOTE: Don't use "Flags: ignoreversion" on any shared system files

 [Icons]
--- a/docs.sh
+++ b/docs.sh
@@ -3,9 +3,9 @@ PLATFORM=$1
 if [ "$PLATFORM" = "Windows" ]; then
  RUNTIME="win-x64"
 elif [ "$PLATFORM" = "Linux" ]; then
-  WHERE="linux-x64"
+  RUNTIME="linux-x64"
 elif [ "$PLATFORM" = "Mac" ]; then
-  WHERE="osx-x64"
+  RUNTIME="osx-x64"
 else
  echo "Platform must be provided as first arguement: Windows, Linux or Mac"
  exit 1
@@ -27,7 +27,7 @@ dotnet clean $slnFile -c Release
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids

 dotnet new tool-manifest
-dotnet tool install --version 6.3.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli

 dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/radarr.console.dll" v3 &

@@ -35,4 +35,4 @@ sleep 45

 kill %1

-exit 0
+exit 0
--- a/frontend/.csscomb.json
+++ b/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
-}
--- a/frontend/.esformatter
+++ b/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
-    }
-  }
-}
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -1 +1,2 @@
 **/JsLibraries/**
+**/*.css.d.ts
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -1,14 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require('fs');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin').configs.recommended;
+
+const frontendFolder = __dirname;

 const dirs = fs
-  .readdirSync('frontend/src', { withFileTypes: true })
+  .readdirSync(path.join(frontendFolder, 'src'), { withFileTypes: true })
  .filter((dirent) => dirent.isDirectory())
  .map((dirent) => dirent.name)
  .join('|');

-const frontendFolder = __dirname;
-
 module.exports = {
+  root: true,
+
  parser: '@babel/eslint-parser',

  env: {
@@ -21,7 +28,8 @@ module.exports = {
  globals: {
    expect: false,
    chai: false,
-    sinon: false
+    sinon: false,
+    JSX: true
  },

  parserOptions: {
@@ -41,7 +49,9 @@ module.exports = {
    'react',
    'react-hooks',
    'simple-import-sort',
-    'import'
+    'import',
+    '@typescript-eslint',
+    'prettier'
  ],

  settings: {
@@ -224,7 +234,7 @@ module.exports = {
    'consistent-this': ['error', 'self'],
    'eol-last': 'error',
    'func-names': 'off',
-    'func-style': ['error', 'declaration'],
+    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
    indent: ['error', 2, { SwitchCase: 1 }],
    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
    'keyword-spacing': ['error', { before: true, after: true }],
@@ -315,7 +325,9 @@ module.exports = {
  },
  overrides: [
    {
-      files: ['*.js'],
+      files: [
+        '*.js'
+      ],
      rules: {
        'simple-import-sort/imports': [
          'error',
@@ -330,6 +342,52 @@ module.exports = {
          }
        ]
      }
+    },
+    {
+      files: [
+        '*.ts',
+        '*.tsx'
+      ],
+
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: './tsconfig.json'
+      },
+
+      extends: [
+        'prettier'
+      ],
+
+      rules: Object.assign(typescriptEslintRecommended.rules, {
+        'no-shadow': 'off',
+        // These should be enabled after cleaning things up
+        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        'react/prop-types': 'off',
+        'prettier/prettier': 'error',
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              // Packages
+              // Absolute Paths
+              // Relative Paths
+              // Css
+              ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
+            ]
+          }
+        ]
+      })
+    },
+    {
+      files: [
+        '*.css.d.ts'
+      ],
+      rules: {
+        'filenames/match-exported': 'off',
+        'init-declarations': 'off',
+        'prettier/prettier': 'off'
+      }
    }
  ]
 };
--- a/frontend/.jsbeautifyrc
+++ b/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
-  }
-}
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -0,0 +1,10 @@
+# Ignore everything recursively
+*
+
+# But not the .ts files
+!*.ts*
+
+*css.d.ts
+
+# Check subdirectories too
+!*/
--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "arrowParens": "always",
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
--- a/frontend/.stylelintrc
+++ b/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
  }
-}
+}
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "stylelint.vscode-stylelint",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+    ]
+}
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -0,0 +1,23 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "files.insertFinalNewline": true,
+
+  "files.exclude": {
+    "**/node_modules": true,
+    "**/*.d.css": true
+  },
+
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+
+  "typescript.preferences.quoteStyle": "single",
+
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+}
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -17,7 +17,8 @@ module.exports = {
  env: {
    development: {
      presets: [
-        ['@babel/preset-react', { development: true }]
+        ['@babel/preset-react', { development: true }],
+        '@babel/preset-typescript'
      ],
      plugins: [
        'babel-plugin-inline-classnames'
@@ -25,7 +26,8 @@ module.exports = {
    },
    production: {
      presets: [
-        '@babel/preset-react'
+        '@babel/preset-react',
+        '@babel/preset-typescript'
      ],
      plugins: [
        'babel-plugin-transform-react-remove-prop-types'
--- a/frontend/build/webpack.config.js
+++ b/frontend/build/webpack.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const webpack = require('webpack');
 const FileManagerPlugin = require('filemanager-webpack-plugin');
@@ -5,6 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

 module.exports = (env) => {
  const uiFolder = 'UI';
@@ -38,13 +40,18 @@ module.exports = (env) => {
    },

    resolve: {
+      extensions: [
+        '.ts',
+        '.tsx',
+        '.js'
+      ],
      modules: [
        srcFolder,
        path.join(srcFolder, 'Shims'),
        'node_modules'
      ],
      alias: {
-        jquery: 'jquery/src/jquery'
+        jquery: 'jquery/dist/jquery.min'
      },
      fallback: {
        buffer: false,
@@ -130,6 +137,8 @@ module.exports = (env) => {
        }
      }),

+      new ForkTsCheckerWebpackPlugin(),
+
      new LiveReloadPlugin()
    ],

@@ -153,7 +162,7 @@ module.exports = (env) => {
          }
        },
        {
-          test: /\.js?$/,
+          test: [/\.jsx?$/, /\.tsx?$/],
          exclude: /(node_modules|JsLibraries)/,
          use: [
            {
@@ -184,6 +193,7 @@ module.exports = (env) => {
          exclude: /(node_modules|globals.css)/,
          use: [
            { loader: MiniCssExtractPlugin.loader },
+            { loader: 'css-modules-typescript-loader' },
            {
              loader: 'css-loader',
              options: {
@@ -251,18 +261,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;
--- a/frontend/src/.vscode/settings.json
+++ b/frontend/src/.vscode/settings.json
@@ -1,4 +0,0 @@
-// Place your settings in this file to overwrite default and user settings.
-{
-  "files.insertFinalNewline": true
-}
--- a/frontend/src/Activity/Blocklist/Blocklist.js
+++ b/frontend/src/Activity/Blocklist/Blocklist.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 ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
@@ -156,16 +157,16 @@ class Blocklist extends Component {

          {
            !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                {translate('UnableToLoadBlocklist')}
-              </div>
+              </Alert>
          }

          {
            isPopulated && !error && !items.length &&
-              <div>
-                {translate('NoHistory')}
-              </div>
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistoryBlocklist')}
+              </Alert>
          }

          {
@@ -209,7 +210,7 @@ class Blocklist extends Component {
          isOpen={isConfirmRemoveModalOpen}
          kind={kinds.DANGER}
          title={translate('RemoveSelected')}
-          message={translate('AreYouSureYouWantToRemoveTheSelectedItemsFromBlocklist')}
+          message={translate('RemoveSelectedItemBlocklistMessageText')}
          confirmLabel={translate('RemoveSelected')}
          onConfirm={this.onRemoveSelectedConfirmed}
          onCancel={this.onConfirmRemoveModalClose}
--- a/frontend/src/Activity/Blocklist/BlocklistRow.css.d.ts
+++ b/frontend/src/Activity/Blocklist/BlocklistRow.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'indexer': string;
+  'language': string;
+  'quality': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/History/Details/HistoryDetails.css.d.ts
+++ b/frontend/src/Activity/History/Details/HistoryDetails.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'description': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/History/Details/HistoryDetails.js
+++ b/frontend/src/Activity/History/Details/HistoryDetails.js
@@ -27,6 +27,7 @@ function HistoryDetails(props) {
      downloadClient,
      downloadClientName,
      downloadId,
+      movieMatchType,
      age,
      ageHours,
      ageMinutes,
@@ -73,6 +74,16 @@ function HistoryDetails(props) {
            </span>
        }

+        {
+          movieMatchType ?
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('MovieMatchType')}
+              data={movieMatchType}
+            /> :
+            null
+        }
+
        {
          downloadClientNameInfo ?
            <DescriptionListItem
--- a/frontend/src/Activity/History/Details/HistoryDetailsModal.css.d.ts
+++ b/frontend/src/Activity/History/Details/HistoryDetailsModal.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'markAsFailedButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/History/History.js
+++ b/frontend/src/Activity/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 PageContent from 'Components/Page/PageContent';
@@ -11,7 +12,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';

@@ -83,9 +84,9 @@ class History extends Component {

          {
            !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
          }

          {
@@ -93,9 +94,9 @@ class History extends Component {
            // wait for the episodes to populate because they are never coming.

            isPopulated && !hasError && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                {translate('NoHistory')}
-              </div>
+              </Alert>
          }

          {
--- a/frontend/src/Activity/History/HistoryEventTypeCell.css.d.ts
+++ b/frontend/src/Activity/History/HistoryEventTypeCell.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'cell': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/History/HistoryRow.css.d.ts
+++ b/frontend/src/Activity/History/HistoryRow.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'customFormatScore': string;
+  'details': string;
+  'downloadClient': string;
+  'indexer': string;
+  'releaseGroup': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/Queue/ProtocolLabel.css.d.ts
+++ b/frontend/src/Activity/Queue/ProtocolLabel.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'torrent': string;
+  'usenet': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/Queue/Queue.js
+++ b/frontend/src/Activity/Queue/Queue.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';
@@ -12,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
@@ -231,17 +232,17 @@ class Queue extends Component {

          {
            !isRefreshing && hasError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                {translate('FailedToLoadQueue')}
-              </div> :
+              </Alert> :
              null
          }

          {
            isAllPopulated && !hasError && !items.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                {translate('QueueIsEmpty')}
-              </div> :
+              </Alert> :
              null
          }

--- a/frontend/src/Activity/Queue/QueueRow.css.d.ts
+++ b/frontend/src/Activity/Queue/QueueRow.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'progress': string;
+  'protocol': string;
+  'quality': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/Queue/QueueStatusCell.css.d.ts
+++ b/frontend/src/Activity/Queue/QueueStatusCell.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'status': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/Queue/RemoveQueueItemsModal.css.d.ts
+++ b/frontend/src/Activity/Queue/RemoveQueueItemsModal.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Activity/Queue/RemoveQueueItemsModal.js
+++ b/frontend/src/Activity/Queue/RemoveQueueItemsModal.js
@@ -88,7 +88,7 @@ class RemoveQueueItemsModal extends Component {

          <ModalBody>
            <div className={styles.message}>
-              {selectedCount > 1 ? translate('AreYouSureYouWantToRemoveSelectedItemsFromQueue', selectedCount) : translate('AreYouSureYouWantToRemoveSelectedItemFromQueue')}
+              {selectedCount > 1 ? translate('RemoveSelectedItemsQueueMessageText', selectedCount) : translate('RemoveSelectedItemQueueMessageText')}
            </div>

            {
@@ -133,7 +133,7 @@ class RemoveQueueItemsModal extends Component {
              kind={kinds.DANGER}
              onPress={this.onRemoveConfirmed}
            >
-              Remove
+              {translate('Remove')}
            </Button>
          </ModalFooter>
        </ModalContent>
--- a/frontend/src/Activity/Queue/TimeleftCell.css.d.ts
+++ b/frontend/src/Activity/Queue/TimeleftCell.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'timeleft': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovie.css.d.ts
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovie.css.d.ts
@@ -0,0 +1,15 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'clearLookupButton': string;
+  'helpText': string;
+  'message': string;
+  'noMoviesText': string;
+  'noResults': string;
+  'searchContainer': string;
+  'searchIconContainer': string;
+  'searchInput': string;
+  'searchResults': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css.d.ts
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css.d.ts
@@ -0,0 +1,18 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'addButton': string;
+  'container': string;
+  'info': string;
+  'labelIcon': string;
+  'modalFooter': string;
+  'overview': string;
+  'poster': string;
+  'searchForMissingMovieContainer': string;
+  'searchForMissingMovieInput': string;
+  'searchForMissingMovieLabel': string;
+  'searchForMissingMovieLabelContainer': string;
+  'year': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts
@@ -0,0 +1,24 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'alreadyExistsIcon': string;
+  'certification': string;
+  'content': string;
+  'exclusionIcon': string;
+  'icons': string;
+  'links': string;
+  'overlay': string;
+  'overview': string;
+  'poster': string;
+  'posterContainer': string;
+  'runtime': string;
+  'searchResult': string;
+  'statusContainer': string;
+  'title': string;
+  'titleContainer': string;
+  'titleRow': string;
+  'underlay': string;
+  'year': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
@@ -113,6 +113,7 @@ class AddNewMovieSearchResult extends Component {
                    images={images}
                    size={250}
                    overflow={true}
+                    lazy={false}
                  />
                </div>

@@ -122,7 +123,7 @@ class AddNewMovieSearchResult extends Component {
                      monitored={monitored}
                      hasFile={hasFile}
                      status={status}
-                      posterWidth={posterWidth}
+                      width={posterWidth}
                      detailedProgressBar={true}
                      queueStatus={queueStatus}
                      queueState={queueState}
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js
@@ -1,10 +1,12 @@
+import { reduce } 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';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
-import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import ImportMovieFooterConnector from './ImportMovieFooterConnector';
@@ -18,6 +20,8 @@ class ImportMovie extends Component {
  constructor(props, context) {
    super(props, context);

+    this.scrollerRef = React.createRef();
+
    this.state = {
      allSelected: false,
      allUnselected: false,
@@ -27,18 +31,21 @@ class ImportMovie extends Component {
    };
  }

-  //
-  // Control
-
-  setScrollerRef = (ref) => {
-    this.setState({ scroller: ref });
-  };
-
  //
  // Listeners

  getSelectedIds = () => {
-    return getSelectedIds(this.state.selectedState, { parseIds: false });
+    return reduce(
+      this.state.selectedState,
+      (result, value, id) => {
+        if (value) {
+          result.push(id);
+        }
+
+        return result;
+      },
+      []
+    );
  };

  onSelectAllChange = ({ value }) => {
@@ -88,25 +95,21 @@ class ImportMovie extends Component {
    const {
      allSelected,
      allUnselected,
-      selectedState,
-      scroller
+      selectedState
    } = this.state;

    return (
      <PageContent title={translate('ImportMovies')}>
-        <PageContentBody
-          registerScroller={this.setScrollerRef}
-          onScroll={this.onScroll}
-        >
+        <PageContentBody ref={this.scrollerRef} >
          {
            rootFoldersFetching ? <LoadingIndicator /> : null
          }

          {
            !rootFoldersFetching && !!rootFoldersError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
              null
          }

@@ -115,9 +118,9 @@ class ImportMovie extends Component {
            !rootFoldersFetching &&
            rootFoldersPopulated &&
            !unmappedFolders.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                {translate('AllMoviesInPathHaveBeenImported', [path])}
-              </div> :
+              </Alert> :
              null
          }

@@ -126,14 +129,14 @@ class ImportMovie extends Component {
            !rootFoldersFetching &&
            rootFoldersPopulated &&
            !!unmappedFolders.length &&
-            scroller ?
+            this.scrollerRef.current ?
              <ImportMovieTableConnector
                rootFolderId={rootFolderId}
                unmappedFolders={unmappedFolders}
                allSelected={allSelected}
                allUnselected={allUnselected}
                selectedState={selectedState}
-                scroller={scroller}
+                scroller={this.scrollerRef.current}
                onSelectAllChange={this.onSelectAllChange}
                onSelectedChange={this.onSelectedChange}
                onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css
@@ -1,6 +1,14 @@
 .inputContainer {
  margin-right: 20px;
  min-width: 150px;
+
+  div {
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
 }

 .label {
@@ -35,3 +43,17 @@
 .importError {
  margin-left: 10px;
 }
+
+@media only screen and (max-width: $breakpointSmall) {
+  .inputContainer {
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .importButtonContainer {
+    margin-top: 10px;
+  }
+}
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css.d.ts
@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'importButton': string;
+  'importButtonContainer': string;
+  'importError': string;
+  'inputContainer': string;
+  'label': string;
+  'loading': string;
+  'loadingButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieHeader.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieHeader.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'detailsIcon': string;
+  'folder': string;
+  'minimumAvailability': string;
+  'monitor': string;
+  'movie': string;
+  'qualityProfile': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieRow.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieRow.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'folder': string;
+  'minimumAvailability': string;
+  'monitor': string;
+  'movie': string;
+  'qualityProfile': string;
+  'selectInput': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'container': string;
+  'movie': string;
+  'tmdbLink': string;
+  'tmdbLinkIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css.d.ts
@@ -0,0 +1,16 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'button': string;
+  'content': string;
+  'contentContainer': string;
+  'dropdownArrowContainer': string;
+  'existing': string;
+  'loading': string;
+  'searchContainer': string;
+  'searchIconContainer': string;
+  'searchInput': string;
+  'warningIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'existing': string;
+  'title': string;
+  'titleContainer': string;
+  'year': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieRootFolderRow.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieRootFolderRow.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'freeSpace': string;
+  'link': string;
+  'unmappedFolders': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.css.d.ts
@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'addErrorAlert': string;
+  'code': string;
+  'header': string;
+  'importButtonIcon': string;
+  'recentFolders': string;
+  'startImport': string;
+  'tip': string;
+  'tips': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
+++ b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
@@ -92,9 +92,9 @@ class ImportMovieSelectFolder extends Component {

          {
            !isFetching && error ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
              null
          }

--- a/frontend/src/App/AppRoutes.js
+++ b/frontend/src/App/AppRoutes.js
@@ -12,7 +12,7 @@ import NotFound from 'Components/NotFound';
 import Switch from 'Components/Router/Switch';
 import DiscoverMovieConnector from 'DiscoverMovie/DiscoverMovieConnector';
 import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
-import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
+import MovieIndex from 'Movie/Index/MovieIndex';
 import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
@@ -48,7 +48,7 @@ function AppRoutes(props) {
      <Route
        exact={true}
        path="/"
-        component={MovieIndexConnector}
+        component={MovieIndex}
      />

      {
--- a/frontend/src/App/AppUpdatedModalContent.css.d.ts
+++ b/frontend/src/App/AppUpdatedModalContent.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'changes': string;
+  'maintenance': string;
+  'version': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/App/ConnectionLostModal.css.d.ts
+++ b/frontend/src/App/ConnectionLostModal.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'automatic': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/App/ModelBase.ts
+++ b/frontend/src/App/ModelBase.ts
@@ -0,0 +1,5 @@
+interface ModelBase {
+  id: number;
+}
+
+export default ModelBase;
--- a/frontend/src/App/SelectContext.tsx
+++ b/frontend/src/App/SelectContext.tsx
@@ -0,0 +1,83 @@
+import { cloneDeep } from 'lodash';
+import React, { useCallback, useEffect } from 'react';
+import useSelectState, { SelectState } from 'Helpers/Hooks/useSelectState';
+import ModelBase from './ModelBase';
+
+export type SelectContextAction =
+  | { type: 'reset' }
+  | { type: 'selectAll' }
+  | { type: 'unselectAll' }
+  | {
+      type: 'toggleSelected';
+      id: number;
+      isSelected: boolean;
+      shiftKey: boolean;
+    }
+  | {
+      type: 'removeItem';
+      id: number;
+    }
+  | {
+      type: 'updateItems';
+      items: ModelBase[];
+    };
+
+export type SelectDispatch = (action: SelectContextAction) => void;
+
+interface SelectProviderOptions<T extends ModelBase> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children: any;
+  items: Array<T>;
+}
+
+const SelectContext = React.createContext<
+  [SelectState, SelectDispatch] | undefined
+>(cloneDeep(undefined));
+
+export function SelectProvider<T extends ModelBase>(
+  props: SelectProviderOptions<T>
+) {
+  const { items } = props;
+  const [state, dispatch] = useSelectState();
+
+  const dispatchWrapper = useCallback(
+    (action: SelectContextAction) => {
+      switch (action.type) {
+        case 'reset':
+        case 'removeItem':
+          dispatch(action);
+          break;
+
+        default:
+          dispatch({
+            ...action,
+            items,
+          });
+          break;
+      }
+    },
+    [items, dispatch]
+  );
+
+  const value: [SelectState, SelectDispatch] = [state, dispatchWrapper];
+
+  useEffect(() => {
+    dispatch({ type: 'updateItems', items });
+  }, [items, dispatch]);
+
+  return (
+    <SelectContext.Provider value={value}>
+      {props.children}
+    </SelectContext.Provider>
+  );
+}
+
+export function useSelect() {
+  const context = React.useContext(SelectContext);
+
+  if (context === undefined) {
+    throw new Error('useSelect must be used within a SelectProvider');
+  }
+
+  return context;
+}
--- a/frontend/src/App/State/AppSectionState.ts
+++ b/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;
--- a/frontend/src/App/State/AppState.ts
+++ b/frontend/src/App/State/AppState.ts
@@ -0,0 +1,50 @@
+import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
+import MovieFilesAppState from './MovieFilesAppState';
+import MoviesAppState, { MovieIndexAppState } from './MoviesAppState';
+import QueueAppState from './QueueAppState';
+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 {
+  movieFiles: MovieFilesAppState;
+  interactiveImport: InteractiveImportAppState;
+  movieIndex: MovieIndexAppState;
+  settings: SettingsAppState;
+  movies: MoviesAppState;
+  tags: TagsAppState;
+  queue: QueueAppState;
+}
+
+export default AppState;
--- a/frontend/src/App/State/ClientSideCollectionAppState.ts
+++ b/frontend/src/App/State/ClientSideCollectionAppState.ts
@@ -0,0 +1,8 @@
+import { CustomFilter } from './AppState';
+
+interface ClientSideCollectionAppState {
+  totalItems: number;
+  customFilters: CustomFilter[];
+}
+
+export default ClientSideCollectionAppState;
--- a/frontend/src/App/State/CustomFiltersAppState.ts
+++ b/frontend/src/App/State/CustomFiltersAppState.ts
@@ -0,0 +1,10 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+} from 'App/State/AppSectionState';
+import { CustomFilter } from './AppState';
+
+interface CustomFiltersAppState
+  extends AppSectionState<CustomFilter>,
+    AppSectionDeleteState {}
+
+export default CustomFiltersAppState;
--- a/frontend/src/App/State/InteractiveImportAppState.ts
+++ b/frontend/src/App/State/InteractiveImportAppState.ts
@@ -0,0 +1,12 @@
+import AppSectionState from 'App/State/AppSectionState';
+import RecentFolder from 'InteractiveImport/Folder/RecentFolder';
+import ImportMode from '../../InteractiveImport/ImportMode';
+import InteractiveImport from '../../InteractiveImport/InteractiveImport';
+
+interface InteractiveImportAppState extends AppSectionState<InteractiveImport> {
+  originalItems: InteractiveImport[];
+  importMode: ImportMode;
+  recentFolders: RecentFolder[];
+}
+
+export default InteractiveImportAppState;
--- a/frontend/src/App/State/MovieFilesAppState.ts
+++ b/frontend/src/App/State/MovieFilesAppState.ts
@@ -0,0 +1,10 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+} from 'App/State/AppSectionState';
+import { MovieFile } from 'MovieFile/MovieFile';
+
+interface MovieFilesAppState
+  extends AppSectionState<MovieFile>,
+    AppSectionDeleteState {}
+
+export default MovieFilesAppState;
--- a/frontend/src/App/State/MoviesAppState.ts
+++ b/frontend/src/App/State/MoviesAppState.ts
@@ -0,0 +1,61 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import Column from 'Components/Table/Column';
+import SortDirection from 'Helpers/Props/SortDirection';
+import Movie from 'Movie/Movie';
+import { Filter, FilterBuilderProp } from './AppState';
+
+export interface MovieIndexAppState {
+  sortKey: string;
+  sortDirection: SortDirection;
+  secondarySortKey: string;
+  secondarySortDirection: SortDirection;
+  view: string;
+
+  posterOptions: {
+    detailedProgressBar: boolean;
+    size: string;
+    showTitle: boolean;
+    showMonitored: boolean;
+    showQualityProfile: boolean;
+    showReleaseDate: boolean;
+    showCinemaRelease: boolean;
+    showSearchAction: boolean;
+  };
+
+  overviewOptions: {
+    detailedProgressBar: boolean;
+    size: string;
+    showMonitored: boolean;
+    showStudio: boolean;
+    showQualityProfile: boolean;
+    showAdded: boolean;
+    showPath: boolean;
+    showSizeOnDisk: boolean;
+    showSearchAction: boolean;
+  };
+
+  tableOptions: {
+    showSearchAction: boolean;
+  };
+
+  selectedFilterKey: string;
+  filterBuilderProps: FilterBuilderProp<Movie>[];
+  filters: Filter[];
+  columns: Column[];
+}
+
+interface MoviesAppState
+  extends AppSectionState<Movie>,
+    AppSectionDeleteState,
+    AppSectionSaveState {
+  itemMap: Record<number, number>;
+
+  deleteOptions: {
+    addImportExclusion: boolean;
+  };
+}
+
+export default MoviesAppState;
--- a/frontend/src/App/State/QueueAppState.ts
+++ b/frontend/src/App/State/QueueAppState.ts
@@ -0,0 +1,51 @@
+import ModelBase from 'App/ModelBase';
+import Language from 'Language/Language';
+import { QualityModel } from 'Quality/Quality';
+import CustomFormat from 'typings/CustomFormat';
+import AppSectionState, { AppSectionItemState, Error } from './AppSectionState';
+
+export interface StatusMessage {
+  title: string;
+  messages: string[];
+}
+
+export interface Queue extends ModelBase {
+  languages: Language[];
+  quality: QualityModel;
+  customFormats: CustomFormat[];
+  size: number;
+  title: string;
+  sizeleft: number;
+  timeleft: string;
+  estimatedCompletionTime: string;
+  status: string;
+  trackedDownloadStatus: string;
+  trackedDownloadState: string;
+  statusMessages: StatusMessage[];
+  errorMessage: string;
+  downloadId: string;
+  protocol: string;
+  downloadClient: string;
+  outputPath: string;
+  movieHasFile: boolean;
+  movieId?: number;
+}
+
+export interface QueueDetailsAppState extends AppSectionState<Queue> {
+  params: unknown;
+}
+
+export interface QueuePagedAppState extends AppSectionState<Queue> {
+  isGrabbing: boolean;
+  grabError: Error;
+  isRemoving: boolean;
+  removeError: Error;
+}
+
+interface QueueAppState {
+  status: AppSectionItemState<Queue>;
+  details: QueueDetailsAppState;
+  paged: QueuePagedAppState;
+}
+
+export default QueueAppState;
--- a/frontend/src/App/State/SettingsAppState.ts
+++ b/frontend/src/App/State/SettingsAppState.ts
@@ -0,0 +1,50 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+  AppSectionSchemaState,
+} from 'App/State/AppSectionState';
+import Language from 'Language/Language';
+import DownloadClient from 'typings/DownloadClient';
+import ImportList from 'typings/ImportList';
+import Indexer from 'typings/Indexer';
+import Notification from 'typings/Notification';
+import QualityProfile from 'typings/QualityProfile';
+import { UiSettings } from 'typings/UiSettings';
+
+export interface DownloadClientAppState
+  extends AppSectionState<DownloadClient>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface ImportListAppState
+  extends AppSectionState<ImportList>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface IndexerAppState
+  extends AppSectionState<Indexer>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface NotificationAppState
+  extends AppSectionState<Notification>,
+    AppSectionDeleteState {}
+
+export interface QualityProfilesAppState
+  extends AppSectionState<QualityProfile>,
+    AppSectionSchemaState<QualityProfile> {}
+
+export type LanguageSettingsAppState = AppSectionState<Language>;
+export type UiSettingsAppState = AppSectionState<UiSettings>;
+
+interface SettingsAppState {
+  downloadClients: DownloadClientAppState;
+  importLists: ImportListAppState;
+  indexers: IndexerAppState;
+  notifications: NotificationAppState;
+  language: LanguageSettingsAppState;
+  uiSettings: UiSettingsAppState;
+  qualityProfiles: QualityProfilesAppState;
+}
+
+export default SettingsAppState;
--- a/frontend/src/App/State/TagsAppState.ts
+++ b/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;
--- a/frontend/src/Calendar/Agenda/Agenda.css.d.ts
+++ b/frontend/src/Calendar/Agenda/Agenda.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'agenda': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Agenda/AgendaEvent.css.d.ts
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.css.d.ts
@@ -0,0 +1,21 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'continuing': string;
+  'date': string;
+  'dateIcon': string;
+  'downloaded': string;
+  'event': string;
+  'eventWrapper': string;
+  'genres': string;
+  'link': string;
+  'missingMonitored': string;
+  'missingUnmonitored': string;
+  'movieTitle': string;
+  'queue': string;
+  'statusIcon': string;
+  'time': string;
+  'unmonitored': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Calendar.css.d.ts
+++ b/frontend/src/Calendar/Calendar.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'calendar': string;
+  'calendarContent': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Calendar.js
+++ b/frontend/src/Calendar/Calendar.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
@@ -31,9 +33,9 @@ class Calendar extends Component {

        {
          !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
              {translate('UnableToLoadTheCalendar')}
-            </div>
+            </Alert>
        }

        {
--- a/frontend/src/Calendar/CalendarPage.css.d.ts
+++ b/frontend/src/Calendar/CalendarPage.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'calendarInnerPageBody': string;
+  'calendarPageBody': string;
+  'errorMessage': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Day/CalendarDay.css.d.ts
+++ b/frontend/src/Calendar/Day/CalendarDay.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'day': string;
+  'dayOfMonth': string;
+  'isDifferentMonth': string;
+  'isSingleDay': string;
+  'isToday': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Day/CalendarDays.css.d.ts
+++ b/frontend/src/Calendar/Day/CalendarDays.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'day': string;
+  'days': string;
+  'forecast': string;
+  'month': string;
+  'week': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Day/DayOfWeek.css
+++ b/frontend/src/Calendar/Day/DayOfWeek.css
@@ -1,6 +1,6 @@
 .dayOfWeek {
  flex: 1 0 14.28%;
-  background-color: var(--calendarBackgroudColor);
+  background-color: var(--calendarBackgroundColor);
  text-align: center;
 }

--- a/frontend/src/Calendar/Day/DayOfWeek.css.d.ts
+++ b/frontend/src/Calendar/Day/DayOfWeek.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'dayOfWeek': string;
+  'isSingleDay': string;
+  'isToday': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts
+++ b/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'daysOfWeek': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Events/CalendarEvent.css.d.ts
+++ b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts
@@ -0,0 +1,19 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'continuing': string;
+  'downloaded': string;
+  'event': string;
+  'genres': string;
+  'info': string;
+  'link': string;
+  'missingMonitored': string;
+  'missingUnmonitored': string;
+  'movieInfo': string;
+  'movieTitle': string;
+  'queue': string;
+  'statusIcon': string;
+  'unmonitored': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Header/CalendarHeader.css.d.ts
+++ b/frontend/src/Calendar/Header/CalendarHeader.css.d.ts
@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'header': string;
+  'loading': string;
+  'navigationButtons': string;
+  'titleDesktop': string;
+  'titleMobile': string;
+  'todayButton': string;
+  'viewButtonsContainer': string;
+  'viewMenu': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Legend/Legend.css.d.ts
+++ b/frontend/src/Calendar/Legend/Legend.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'legend': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Legend/LegendIconItem.css.d.ts
+++ b/frontend/src/Calendar/Legend/LegendIconItem.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'icon': string;
+  'legendIconItem': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/Legend/LegendItem.css.d.ts
+++ b/frontend/src/Calendar/Legend/LegendItem.css.d.ts
@@ -0,0 +1,18 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'availNotMonitored': string;
+  'continuing': string;
+  'ended': string;
+  'legendItem': string;
+  'legendItemColor': string;
+  'legendItemContainer': string;
+  'legendItemText': string;
+  'missingMonitored': string;
+  'missingMonitoredColorImpaired': string;
+  'missingUnmonitored': string;
+  'missingUnmonitoredColorImpaired': string;
+  'queue': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Calendar/iCal/CalendarLinkModalContent.js
+++ b/frontend/src/Calendar/iCal/CalendarLinkModalContent.js
@@ -36,7 +36,7 @@ function getUrls(state) {
    icalUrl += `tags=${tags.toString()}&`;
  }

-  icalUrl += `apikey=${window.Radarr.apiKey}`;
+  icalUrl += `apikey=${encodeURIComponent(window.Radarr.apiKey)}`;

  const iCalHttpUrl = `${window.location.protocol}//${icalUrl}`;
  const iCalWebCalUrl = `webcal://${icalUrl}`;
--- a/frontend/src/Collection/AddNewCollectionMovieModalContent.css.d.ts
+++ b/frontend/src/Collection/AddNewCollectionMovieModalContent.css.d.ts
@@ -0,0 +1,18 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'addButton': string;
+  'container': string;
+  'info': string;
+  'labelIcon': string;
+  'modalFooter': string;
+  'overview': string;
+  'poster': string;
+  'searchForMissingMovieContainer': string;
+  'searchForMissingMovieInput': string;
+  'searchForMissingMovieLabel': string;
+  'searchForMissingMovieLabelContainer': string;
+  'year': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Collection/Collection.js
+++ b/frontend/src/Collection/Collection.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';
@@ -9,7 +10,7 @@ import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -35,8 +36,9 @@ class Collection extends Component {
  constructor(props, context) {
    super(props, context);

+    this.scrollerRef = React.createRef();
+
    this.state = {
-      scroller: null,
      jumpBarItems: { order: [] },
      jumpToCharacter: null,
      isPosterOptionsModalOpen: false,
@@ -78,10 +80,6 @@ class Collection extends Component {
  //
  // Control

-  setScrollerRef = (ref) => {
-    this.setState({ scroller: ref });
-  };
-
  getSelectedIds = () => {
    if (this.state.allUnselected) {
      return [];
@@ -234,7 +232,6 @@ class Collection extends Component {
    } = this.props;

    const {
-      scroller,
      jumpBarItems,
      jumpToCharacter,
      isOverviewOptionsModalOpen,
@@ -246,7 +243,7 @@ class Collection extends Component {
    const selectedMovieIds = this.getSelectedIds();

    const ViewComponent = getViewComponent(view);
-    const isLoaded = !!(!error && isPopulated && items.length && scroller);
+    const isLoaded = !!(!error && isPopulated && items.length && this.scrollerRef.current);
    const hasNoCollection = !totalItems;

    return (
@@ -306,10 +303,9 @@ class Collection extends Component {

        <div className={styles.pageContentBodyWrapper}>
          <PageContentBody
-            registerScroller={this.setScrollerRef}
+            ref={this.scrollerRef}
            className={styles.contentBody}
            innerClassName={styles[`${view}InnerContentBody`]}
-            onScroll={onScroll}
          >
            {
              isFetching && !isPopulated &&
@@ -318,16 +314,16 @@ class Collection extends Component {

            {
              !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                  {translate('UnableToLoadCollections')}
-                </div>
+                </Alert>
            }

            {
              isLoaded &&
                <div className={styles.contentBodyContainer}>
                  <ViewComponent
-                    scroller={scroller}
+                    scroller={this.scrollerRef.current}
                    items={items}
                    filters={filters}
                    sortKey={sortKey}
--- a/frontend/src/Collection/CollectionFooter.css.d.ts
+++ b/frontend/src/Collection/CollectionFooter.css.d.ts
@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'addSelectedButton': string;
+  'buttonContainer': string;
+  'buttonContainerContent': string;
+  'buttons': string;
+  'excludeSelectedButton': string;
+  'inputContainer': string;
+  'selectedMovieLabel': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Collection/CollectionFooterLabel.css.d.ts
+++ b/frontend/src/Collection/CollectionFooterLabel.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'label': string;
+  'savingIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Collection/Edit/EditCollectionModalContent.css.d.ts
+++ b/frontend/src/Collection/Edit/EditCollectionModalContent.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'container': string;
+  'info': string;
+  'overview': string;
+  'poster': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Collection/NoCollection.css.d.ts
+++ b/frontend/src/Collection/NoCollection.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'buttonContainer': string;
+  'message': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/frontend/src/Collection/Overview/CollectionMovie.css.d.ts
+++ b/frontend/src/Collection/Overview/CollectionMovie.css.d.ts
@@ -0,0 +1,19 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'action': string;
+  'container': string;
+  'content': string;
+  'controls': string;
+  'editorSelect': string;
+  'externalLinks': string;
+  'link': string;
+  'monitorToggleButton': string;
+  'overlay': string;
+  'overlayTitle': string;
+  'poster': string;
+  'posterContainer': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
--- a/Show More
+++ b/Show More