Bump to 2.13.3

ignore-downstream

Co-authored-by: mrchonks <chonkstv@gmail.com>
Translate-URL: https://translate.servarr.com/projects/servarr/lidarr/fr/
Translation: Servarr/Lidarr

.devcontainer/Lidarr.code-workspace

@@ -0,0 +1,13 @@
+// This file is used to open the backend and frontend in the same workspace, which is necessary as
+// the frontend has vscode settings that are distinct from the backend
+{
+  "folders": [
+    {
+      "path": ".."
+    },
+    {
+      "path": "../frontend"
+    }
+  ],
+  "settings": {}
+}

.devcontainer/devcontainer.json

@@ -0,0 +1,19 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
+{
+  "name": "Lidarr",
+  "image": "mcr.microsoft.com/devcontainers/dotnet:1-6.0",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "nodeGypDependencies": true,
+      "version": "20",
+      "nvmVersion": "latest"
+    }
+  },
+  "forwardPorts": [8686],
+  "customizations": {
+    "vscode": {
+      "extensions": ["esbenp.prettier-vscode"]
+    }
+  }
+}

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -60,6 +60,7 @@ body:
       - Master
       - Develop
       - Nightly
+      - Plugins (experimental)
       - Other (This issue will be closed)
   validations:
     required: true

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.github/workflows/label-actions.yml

@@ -12,6 +12,6 @@ jobs:
   action:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/label-actions@v3
+      - uses: dessant/label-actions@v4
         with:
           process-only: 'issues'

.github/workflows/lock.yml

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

.gitignore

@@ -121,11 +121,13 @@ _artifacts
 _rawPackage/
 _dotTrace*
 _tests/
+_temp*
 *.Result.xml
 coverage*.xml
 coverage*.json
 setup/Output/
 *.~is
+.mono
 
 # VS outout folders
 bin
@@ -138,12 +140,6 @@ project.fragment.lock.json
 artifacts/
 **/Properties/launchSettings.json
 
-#VS outout folders
-bin
-obj
-output/*
-
-
 # macOS metadata files
 ._*
 .DS_Store
@@ -162,34 +158,12 @@ Thumbs.db
 /tools/Addins/*
 packages.config.md5sum
 
-
-# Common IntelliJ Platform excludes
-
-# User specific
-**/.idea/**/workspace.xml
-**/.idea/**/tasks.xml
-**/.idea/shelf/*
-**/.idea/dictionaries
-**/.idea/.idea.Radarr.Posix
-**/.idea/.idea.Radarr.Windows
-
-# Sensitive or high-churn files
-**/.idea/**/dataSources/
-**/.idea/**/dataSources.ids
-**/.idea/**/dataSources.xml
-**/.idea/**/dataSources.local.xml
-**/.idea/**/sqlDataSources.xml
-**/.idea/**/dynamic.xml
-
-# Rider
-# Rider auto-generates .iml files, and contentModel.xml
-**/.idea/**/*.iml
-**/.idea/**/contentModel.xml
-**/.idea/**/modules.xml
-
 # ignore node_modules symlink
 node_modules
 node_modules.nosync
 
 # API doc generation
 .config/
+
+# Ignore Jetbrains IntelliJ Workspace Directories
+.idea/

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "ms-dotnettools.csdevkit",
+    "ms-vscode-remote.remote-containers"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      // Use IntelliSense to find out which attributes exist for C# debugging
+      // Use hover for the description of the existing attributes
+      // For further information visit https://github.com/dotnet/vscode-csharp/blob/main/debugger-launchjson.md
+      "name": "Run Lidarr",
+      "type": "coreclr",
+      "request": "launch",
+      "preLaunchTask": "build dotnet",
+      // If you have changed target frameworks, make sure to update the program path.
+      "program": "${workspaceFolder}/_output/net6.0/Lidarr",
+      "args": [],
+      "cwd": "${workspaceFolder}",
+      // For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console
+      "console": "integratedTerminal",
+      "stopAtEntry": false
+    },
+    {
+      "name": ".NET Core Attach",
+      "type": "coreclr",
+      "request": "attach"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,44 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build dotnet",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "msbuild",
+        "-restore",
+        "${workspaceFolder}/src/Lidarr.sln",
+        "-p:GenerateFullPaths=true",
+        "-p:Configuration=Debug",
+        "-p:Platform=Posix",
+        "-consoleloggerparameters:NoSummary;ForceNoAlign"
+      ],
+      "problemMatcher": "$msCompile"
+    },
+    {
+      "label": "publish",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "publish",
+        "${workspaceFolder}/src/Lidarr.sln",
+        "-property:GenerateFullPaths=true",
+        "-consoleloggerparameters:NoSummary;ForceNoAlign"
+      ],
+      "problemMatcher": "$msCompile"
+    },
+    {
+      "label": "watch",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "watch",
+        "run",
+        "--project",
+        "${workspaceFolder}/src/Lidarr.sln"
+      ],
+      "problemMatcher": "$msCompile"
+    }
+  ]
+}

README.md

@@ -1,6 +1,7 @@
 # Lidarr
 
 [![Build Status](https://dev.azure.com/Lidarr/Lidarr/_apis/build/status/lidarr.Lidarr?branchName=develop)](https://dev.azure.com/Lidarr/Lidarr/_build/latest?definitionId=1&branchName=develop)
+[![Translation status](https://translate.servarr.com/widget/servarr/lidarr/svg-badge.svg)](https://translate.servarr.com/engage/servarr/?utm_source=widget)
 [![Docker Pulls](https://img.shields.io/docker/pulls/linuxserver/lidarr.svg)](https://wiki.servarr.com/lidarr/installation#docker)
 ![Github Downloads](https://img.shields.io/github/downloads/lidarr/lidarr/total.svg)
 [![Backers on Open Collective](https://opencollective.com/lidarr/backers/badge.svg)](#backers) 
@@ -8,6 +9,9 @@
 
 Lidarr is a music collection manager for Usenet and BitTorrent users. It can monitor multiple RSS feeds for new tracks from your favorite artists and will grab, sort and rename them. It can also be configured to automatically upgrade the quality of files already downloaded when a better quality format becomes available.
 
+> [!WARNING]
+> NOTICE - The Lidarr Metadata Server is currently down impacting adding artists, etc. Please follow [GHI 5498](https://github.com/Lidarr/Lidarr/issues/5498) or see Discord for detaila.
+
 ## Major Features Include:
 
 * Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.

azure-pipelines.yml

@@ -9,18 +9,18 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '2.1.3'
+  majorVersion: '2.13.3'
   minorVersion: $[counter('minorVersion', 1076)]
   lidarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(lidarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.417'
-  nodeVersion: '16.X'
+  dotnetVersion: '6.0.427'
+  nodeVersion: '20.X'
   innoVersion: '6.2.0'
   windowsImage: 'windows-2022'
-  linuxImage: 'ubuntu-20.04'
-  macImage: 'macOS-11'
+  linuxImage: 'ubuntu-22.04'
+  macImage: 'macOS-13'
 
 trigger:
   branches:
@@ -166,10 +166,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1093,10 +1093,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: NodeTool@0
+      - task: UseNode@1
         displayName: Set Node.js version
         inputs:
-          versionSpec: $(nodeVersion)
+          version: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1120,19 +1120,19 @@ stages:
         vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self # Need history for Sonar analysis
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@3
         env:
           SONAR_SCANNER_OPTS: ''
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'lidarr'
-          scannerMode: 'CLI'
+          scannerMode: 'cli'
           configMode: 'manual'
           cliProjectKey: 'lidarr_Lidarr.UI'
           cliProjectName: 'LidarrUI'
           cliProjectVersion: '$(lidarrVersion)'
           cliSources: './frontend'
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@3
 
     - job: Api_Docs
       displayName: API Docs
@@ -1208,12 +1208,12 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'lidarr'
-          scannerMode: 'MSBuild'
+          scannerMode: 'dotnet'
           projectKey: 'lidarr_Lidarr'
           projectName: 'Lidarr'
           projectVersion: '$(lidarrVersion)'
@@ -1226,21 +1226,16 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@4
+      - task: reportgenerator@5.3.11
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
-      - task: PublishCodeCoverageResults@1
-        displayName: Publish Coverage Report
-        inputs:
-          codeCoverageTool: 'cobertura'
-          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
-          reportDirectory: './CoverageResults/combined/'
+          publishCodeCoverageResults: true
 
   - stage: Report_Out
     dependsOn:

distribution/debian/install.sh

@@ -0,0 +1,182 @@
+#!/bin/bash
+### Description: Lidarr .NET Debian install
+### Originally written for Radarr by: DoctorArr - doctorarr@the-rowlands.co.uk on 2021-10-01 v1.0
+### Updates for servarr suite made by Bakerboy448, DoctorArr, brightghost, aeramor and VP-EN
+### Version v1.0.0 2023-12-29 - StevieTV - adapted from servarr script for Lidarr installs
+### Version V1.0.1 2024-01-02 - StevieTV - remove UTF8-BOM
+### Version V1.0.2 2024-01-03 - markus101 - Get user input from /dev/tty
+### Version V1.0.3 2024-01-06 - StevieTV - exit script when it is ran from install directory
+
+### Boilerplate Warning
+#THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+#EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+#MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+#NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+#LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+#OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+#WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+scriptversion="1.0.3"
+scriptdate="2024-01-06"
+
+set -euo pipefail
+
+echo "Running Lidarr Install Script - Version [$scriptversion] as of [$scriptdate]"
+
+# Am I root?, need root!
+
+if [ "$EUID" -ne 0 ]; then
+    echo "Please run as root."
+    exit
+fi
+
+app="lidarr"
+app_port="8686"
+app_prereq="curl sqlite3 wget"
+app_umask="0002"
+branch="main"
+
+# Constants
+### Update these variables as required for your specific instance
+installdir="/opt"              # {Update me if needed} Install Location
+bindir="${installdir}/${app^}" # Full Path to Install Location
+datadir="/var/lib/$app/"       # {Update me if needed} AppData directory to use
+app_bin=${app^}                # Binary Name of the app
+
+# This script should not be ran from installdir, otherwise later in the script the extracted files will be removed before they can be moved to installdir.
+if [ "$installdir" == "$(dirname -- "$( readlink -f -- "$0"; )")" ] || [ "$bindir" == "$(dirname -- "$( readlink -f -- "$0"; )")" ]; then
+    echo "You should not run this script from the intended install directory. The script will exit. Please re-run it from another directory"
+    exit
+fi
+
+# Prompt User
+read -r -p "What user should ${app^} run as? (Default: $app): " app_uid < /dev/tty
+app_uid=$(echo "$app_uid" | tr -d ' ')
+app_uid=${app_uid:-$app}
+# Prompt Group
+read -r -p "What group should ${app^} run as? (Default: media): " app_guid < /dev/tty
+app_guid=$(echo "$app_guid" | tr -d ' ')
+app_guid=${app_guid:-media}
+
+echo "This will install [${app^}] to [$bindir] and use [$datadir] for the AppData Directory"
+echo "${app^} will run as the user [$app_uid] and group [$app_guid]. By continuing, you've confirmed that the selected user and group will have READ and WRITE access to your Media Library and Download Client Completed Download directories"
+read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
+
+# Create User / Group as needed
+if [ "$app_guid" != "$app_uid" ]; then
+    if ! getent group "$app_guid" >/dev/null; then
+        groupadd "$app_guid"
+    fi
+fi
+if ! getent passwd "$app_uid" >/dev/null; then
+    adduser --system --no-create-home --ingroup "$app_guid" "$app_uid"
+    echo "Created and added User [$app_uid] to Group [$app_guid]"
+fi
+if ! getent group "$app_guid" | grep -qw "$app_uid"; then
+    echo "User [$app_uid] did not exist in Group [$app_guid]"
+    usermod -a -G "$app_guid" "$app_uid"
+    echo "Added User [$app_uid] to Group [$app_guid]"
+fi
+
+# Stop the App if running
+if service --status-all | grep -Fq "$app"; then
+    systemctl stop "$app"
+    systemctl disable "$app".service
+    echo "Stopped existing $app"
+fi
+
+# Create Appdata Directory
+
+# AppData
+mkdir -p "$datadir"
+chown -R "$app_uid":"$app_guid" "$datadir"
+chmod 775 "$datadir"
+echo "Directories created"
+# Download and install the App
+
+# prerequisite packages
+echo ""
+echo "Installing pre-requisite Packages"
+# shellcheck disable=SC2086
+apt update && apt install -y $app_prereq
+echo ""
+ARCH=$(dpkg --print-architecture)
+# get arch
+dlbase="https://lidarr.servarr.com/v1/update/$branch/updatefile?os=linux&runtime=netcore"
+case "$ARCH" in
+"amd64") DLURL="${dlbase}&arch=x64" ;;
+"armhf") DLURL="${dlbase}&arch=arm" ;;
+"arm64") DLURL="${dlbase}&arch=arm64" ;;
+*)
+    echo "Arch not supported"
+    exit 1
+    ;;
+esac
+echo ""
+echo "Removing previous tarballs"
+# -f to Force so we fail if it doesn't exist
+rm -f "${app^}".*.tar.gz
+echo ""
+echo "Downloading..."
+wget --content-disposition "$DLURL"
+tar -xvzf "${app^}".*.tar.gz
+echo ""
+echo "Installation files downloaded and extracted"
+
+# remove existing installs
+echo "Removing existing installation"
+rm -rf "$bindir"
+echo "Installing..."
+mv "${app^}" $installdir
+chown "$app_uid":"$app_guid" -R "$bindir"
+chmod 775 "$bindir"
+rm -rf "${app^}.*.tar.gz"
+# Ensure we check for an update in case user installs older version or different branch
+touch "$datadir"/update_required
+chown "$app_uid":"$app_guid" "$datadir"/update_required
+echo "App Installed"
+# Configure Autostart
+
+# Remove any previous app .service
+echo "Removing old service file"
+rm -rf /etc/systemd/system/"$app".service
+
+# Create app .service with correct user startup
+echo "Creating service file"
+cat <<EOF | tee /etc/systemd/system/"$app".service >/dev/null
+[Unit]
+Description=${app^} Daemon
+After=syslog.target network.target
+[Service]
+User=$app_uid
+Group=$app_guid
+UMask=$app_umask
+Type=simple
+ExecStart=$bindir/$app_bin -nobrowser -data=$datadir
+TimeoutStopSec=20
+KillMode=process
+Restart=on-failure
+[Install]
+WantedBy=multi-user.target
+EOF
+
+# Start the App
+echo "Service file created. Attempting to start the app"
+systemctl -q daemon-reload
+systemctl enable --now -q "$app"
+
+# Finish Update/Installation
+host=$(hostname -I)
+ip_local=$(grep -oP '^\S*' <<<"$host")
+echo ""
+echo "Install complete"
+sleep 10
+STATUS="$(systemctl is-active "$app")"
+if [ "${STATUS}" = "active" ]; then
+    echo "Browse to http://$ip_local:$app_port for the ${app^} GUI"
+else
+    echo "${app^} failed to start"
+fi
+
+# Exit
+exit 0

distribution/debian/lidarr.service

@@ -0,0 +1,20 @@
+# This file is owned by the lidarr package, DO NOT MODIFY MANUALLY
+# Instead use 'dpkg-reconfigure -plow lidarr' to modify User/Group/UMask/-data
+# Or use systemd built-in override functionality using 'systemctl edit lidarr'
+[Unit]
+Description=Lidarr Daemon
+After=network.target
+
+[Service]
+User=lidarr
+Group=lidarr
+UMask=002
+
+Type=simple
+ExecStart=/opt/Lidarr/Lidarr -nobrowser -data=/var/lib/lidarr
+TimeoutStopSec=20
+KillMode=process
+Restart=on-failure
+
+[Install]
+WantedBy=multi-user.target

docs.sh

@@ -1,13 +1,18 @@
+#!/bin/bash
+set -e
+
+FRAMEWORK="net6.0"
 PLATFORM=$1
+ARCHITECTURE="${2:-x64}"
 
 if [ "$PLATFORM" = "Windows" ]; then
-  RUNTIME="win-x64"
+  RUNTIME="win-$ARCHITECTURE"
 elif [ "$PLATFORM" = "Linux" ]; then
-  RUNTIME="linux-x64"
+  RUNTIME="linux-$ARCHITECTURE"
 elif [ "$PLATFORM" = "Mac" ]; then
-  RUNTIME="osx-x64"
+  RUNTIME="osx-$ARCHITECTURE"
 else
-  echo "Platform must be provided as first arguement: Windows, Linux or Mac"
+  echo "Platform must be provided as first argument: Windows, Linux or Mac"
   exit 1
 fi
 
@@ -21,15 +26,21 @@ slnFile=src/Lidarr.sln
 
 platform=Posix
 
+if [ "$PLATFORM" = "Windows" ]; then
+  application=Lidarr.Console.dll
+else
+  application=Lidarr.dll
+fi
+
 dotnet clean $slnFile -c Debug
 dotnet clean $slnFile -c Release
 
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Lidarr.Api.V1/openapi.json "$outputFolder/net6.0/$RUNTIME/lidarr.console.dll" v1 &
+dotnet tool run swagger tofile --output ./src/Lidarr.Api.V1/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v1 &
 
 sleep 45
 

frontend/.eslintrc.js

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

frontend/.vscode/settings.json

@@ -9,7 +9,7 @@
 
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
 
   "typescript.preferences.quoteStyle": "single",

frontend/babel.config.js

@@ -2,6 +2,8 @@ const loose = true;
 
 module.exports = {
   plugins: [
+    '@babel/plugin-transform-logical-assignment-operators',
+
     // Stage 1
     '@babel/plugin-proposal-export-default-from',
     ['@babel/plugin-transform-optional-chaining', { loose }],

frontend/build/webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
+    target: 'web',
 
     stats: {
       children: false
@@ -67,7 +68,7 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name]-[contenthash].js',
+      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
       sourceMapFilename: '[file].map'
     },
 
@@ -92,7 +93,7 @@ module.exports = (env) => {
 
       new MiniCssExtractPlugin({
         filename: 'Content/styles.css',
-        chunkFilename: 'Content/[id]-[chunkhash].css'
+        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
       }),
 
       new HtmlWebpackPlugin({
@@ -134,6 +135,12 @@ module.exports = (env) => {
               {
                 source: 'frontend/src/Content/robots.txt',
                 destination: path.join(distFolder, 'Content/robots.txt')
+              },
+
+              // manifest.json and browserconfig.xml
+              {
+                source: 'frontend/src/Content/*.(json|xml)',
+                destination: path.join(distFolder, 'Content')
               }
             ]
           }
@@ -181,7 +188,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: 3
+                      corejs: '3.41'
                     }
                   ]
                 ]
@@ -202,7 +209,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: '[name]/[local]/[hash:base64:5]'
+                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
                 }
               }
             },

frontend/postcss.config.js

@@ -16,6 +16,7 @@ const mixinsFiles = [
 
 module.exports = {
   plugins: [
+    'autoprefixer',
     ['postcss-mixins', {
       mixinsFiles
     }],

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

@@ -172,7 +172,8 @@ function HistoryDetails(props) {
 
   if (eventType === 'downloadFailed') {
     const {
-      message
+      message,
+      indexer
     } = data;
 
     return (
@@ -192,6 +193,14 @@ function HistoryDetails(props) {
             null
         }
 
+        {
+          indexer ? (
+            <DescriptionListItem
+              title={translate('Indexer')}
+              data={indexer}
+            />
+          ) : null}
+
         {
           message ?
             <DescriptionListItem

frontend/src/Activity/History/HistoryEventTypeCell.js

@@ -3,9 +3,10 @@ import React from 'react';
 import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './HistoryEventTypeCell.css';
 
-function getIconName(eventType) {
+function getIconName(eventType, data) {
   switch (eventType) {
     case 'grabbed':
       return icons.DOWNLOADING;
@@ -16,7 +17,7 @@ function getIconName(eventType) {
     case 'downloadFailed':
       return icons.DOWNLOADING;
     case 'trackFileDeleted':
-      return icons.DELETE;
+      return data.reason === 'MissingFromDisk' ? icons.FILE_MISSING : icons.DELETE;
     case 'trackFileRenamed':
       return icons.ORGANIZE;
     case 'trackFileRetagged':
@@ -54,11 +55,11 @@ function getTooltip(eventType, data) {
     case 'downloadFailed':
       return 'Album download failed';
     case 'trackFileDeleted':
-      return 'Track file deleted';
+      return data.reason === 'MissingFromDisk' ? translate('TrackFileMissingTooltip') : translate('TrackFileDeletedTooltip');
     case 'trackFileRenamed':
-      return 'Track file renamed';
+      return translate('TrackFileRenamedTooltip');
     case 'trackFileRetagged':
-      return 'Track file tags updated';
+      return translate('TrackFileTagsUpdatedTooltip');
     case 'albumImportIncomplete':
       return 'Files downloaded but not all could be imported';
     case 'downloadImported':
@@ -71,7 +72,7 @@ function getTooltip(eventType, data) {
 }
 
 function HistoryEventTypeCell({ eventType, data }) {
-  const iconName = getIconName(eventType);
+  const iconName = getIconName(eventType, data);
   const iconKind = getIconKind(eventType);
   const tooltip = getTooltip(eventType, data);
 

frontend/src/Activity/Queue/Queue.js

@@ -25,7 +25,7 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import QueueFilterModal from './QueueFilterModal';
 import QueueOptionsConnector from './QueueOptionsConnector';
 import QueueRowConnector from './QueueRowConnector';
-import RemoveQueueItemsModal from './RemoveQueueItemsModal';
+import RemoveQueueItemModal from './RemoveQueueItemModal';
 
 class Queue extends Component {
 
@@ -309,9 +309,16 @@ class Queue extends Component {
           }
         </PageContentBody>
 
-        <RemoveQueueItemsModal
+        <RemoveQueueItemModal
           isOpen={isConfirmRemoveModalOpen}
           selectedCount={selectedCount}
+          canChangeCategory={isConfirmRemoveModalOpen && (
+            selectedIds.every((id) => {
+              const item = items.find((i) => i.id === id);
+
+              return !!(item && item.downloadClientHasPostImportCategory);
+            })
+          )}
           canIgnore={isConfirmRemoveModalOpen && (
             selectedIds.every((id) => {
               const item = items.find((i) => i.id === id);
@@ -319,7 +326,7 @@ class Queue extends Component {
               return !!(item && item.artistId && item.albumId);
             })
           )}
-          allPending={isConfirmRemoveModalOpen && (
+          pending={isConfirmRemoveModalOpen && (
             selectedIds.every((id) => {
               const item = items.find((i) => i.id === id);
 

frontend/src/Activity/Queue/QueueRow.css

@@ -26,4 +26,5 @@
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 90px;
+  text-align: right;
 }

frontend/src/Activity/Queue/QueueRow.js

@@ -98,8 +98,10 @@ class QueueRow extends Component {
       indexer,
       outputPath,
       downloadClient,
+      downloadClientHasPostImportCategory,
       downloadForced,
       estimatedCompletionTime,
+      added,
       timeleft,
       size,
       sizeleft,
@@ -328,6 +330,15 @@ class QueueRow extends Component {
               );
             }
 
+            if (name === 'added') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={added}
+                />
+              );
+            }
+
             if (name === 'actions') {
               return (
                 <TableRowCell
@@ -393,6 +404,7 @@ class QueueRow extends Component {
         <RemoveQueueItemModal
           isOpen={isRemoveQueueItemModalOpen}
           sourceTitle={title}
+          canChangeCategory={!!downloadClientHasPostImportCategory}
           canIgnore={!!artist}
           isPending={isPending}
           onRemovePress={this.onRemoveQueueItemModalConfirmed}
@@ -422,8 +434,10 @@ QueueRow.propTypes = {
   indexer: PropTypes.string,
   outputPath: PropTypes.string,
   downloadClient: PropTypes.string,
+  downloadClientHasPostImportCategory: PropTypes.bool,
   downloadForced: PropTypes.bool.isRequired,
   estimatedCompletionTime: PropTypes.string,
+  added: PropTypes.string,
   timeleft: PropTypes.string,
   size: PropTypes.number,
   sizeleft: PropTypes.number,

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -57,30 +57,40 @@ function QueueStatusCell(props) {
 
   if (status === 'paused') {
     iconName = icons.PAUSED;
-    title = 'Paused';
+    title = translate('Paused');
   }
 
   if (status === 'queued') {
     iconName = icons.QUEUED;
-    title = 'Queued';
+    title = translate('Queued');
   }
 
   if (status === 'completed') {
     iconName = icons.DOWNLOADED;
-    title = 'Downloaded';
+    title = translate('Downloaded');
+
+    if (trackedDownloadState === 'importBlocked') {
+      title += ` - ${translate('UnableToImportAutomatically')}`;
+      iconKind = kinds.WARNING;
+    }
+
+    if (trackedDownloadState === 'importFailed') {
+      title += ` - ${translate('ImportFailed', { sourceTitle })}`;
+      iconKind = kinds.WARNING;
+    }
 
     if (trackedDownloadState === 'importPending') {
-      title += ' - Waiting to Import';
+      title += ` - ${translate('WaitingToImport')}`;
       iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'importing') {
-      title += ' - Importing';
+      title += ` - ${translate('Importing')}`;
       iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {
-      title += ' - Waiting to Process';
+      title += ` - ${translate('WaitingToProcess')}`;
       iconKind = kinds.DANGER;
     }
   }
@@ -91,36 +101,38 @@ function QueueStatusCell(props) {
 
   if (status === 'delay') {
     iconName = icons.PENDING;
-    title = 'Pending';
+    title = translate('Pending');
   }
 
   if (status === 'downloadClientUnavailable') {
     iconName = icons.PENDING;
     iconKind = kinds.WARNING;
-    title = 'Pending - Download client is unavailable';
+    title = translate('PendingDownloadClientUnavailable');
   }
 
   if (status === 'failed') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.DANGER;
-    title = 'Download failed';
+    title = translate('DownloadFailed');
   }
 
   if (status === 'warning') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.WARNING;
-    title = `Download warning: ${errorMessage || 'check download client for more details'}`;
+    const warningMessage =
+      errorMessage || translate('CheckDownloadClientForDetails');
+    title = translate('DownloadWarning', { warningMessage });
   }
 
   if (hasError) {
     if (status === 'completed') {
       iconName = icons.DOWNLOAD;
       iconKind = kinds.DANGER;
-      title = `Import failed: ${sourceTitle}`;
+      title = translate('ImportFailed', { sourceTitle });
     } else {
       iconName = icons.DOWNLOADING;
       iconKind = kinds.DANGER;
-      title = 'Download failed';
+      title = translate('DownloadFailed');
     }
   }
 

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -1,175 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } 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 Modal from 'Components/Modal/Modal';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes, kinds, sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-
-class RemoveQueueItemModal extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      removeFromClient: true,
-      blocklist: false,
-      skipRedownload: false
-    };
-  }
-
-  //
-  // Control
-
-  resetState = function() {
-    this.setState({
-      removeFromClient: true,
-      blocklist: false,
-      skipRedownload: false
-    });
-  };
-
-  //
-  // Listeners
-
-  onRemoveFromClientChange = ({ value }) => {
-    this.setState({ removeFromClient: value });
-  };
-
-  onBlocklistChange = ({ value }) => {
-    this.setState({ blocklist: value });
-  };
-
-  onSkipRedownloadChange = ({ value }) => {
-    this.setState({ skipRedownload: value });
-  };
-
-  onRemoveConfirmed = () => {
-    const state = this.state;
-
-    this.resetState();
-    this.props.onRemovePress(state);
-  };
-
-  onModalClose = () => {
-    this.resetState();
-    this.props.onModalClose();
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      isOpen,
-      sourceTitle,
-      canIgnore,
-      isPending
-    } = this.props;
-
-    const { removeFromClient, blocklist, skipRedownload } = this.state;
-
-    return (
-      <Modal
-        isOpen={isOpen}
-        size={sizes.MEDIUM}
-        onModalClose={this.onModalClose}
-      >
-        <ModalContent
-          onModalClose={this.onModalClose}
-        >
-          <ModalHeader>
-            Remove - {sourceTitle}
-          </ModalHeader>
-
-          <ModalBody>
-            <div>
-              Are you sure you want to remove '{sourceTitle}' from the queue?
-            </div>
-
-            {
-              isPending ?
-                null :
-                <FormGroup>
-                  <FormLabel>{translate('RemoveFromDownloadClient')}</FormLabel>
-
-                  <FormInputGroup
-                    type={inputTypes.CHECK}
-                    name="removeFromClient"
-                    value={removeFromClient}
-                    helpTextWarning={translate('RemoveFromDownloadClientHelpTextWarning')}
-                    isDisabled={!canIgnore}
-                    onChange={this.onRemoveFromClientChange}
-                  />
-                </FormGroup>
-            }
-
-            <FormGroup>
-              <FormLabel>
-                {translate('BlocklistRelease')}
-              </FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="blocklist"
-                value={blocklist}
-                helpText={translate('BlocklistReleaseHelpText')}
-                onChange={this.onBlocklistChange}
-              />
-            </FormGroup>
-
-            {
-              blocklist &&
-                <FormGroup>
-                  <FormLabel>
-                    {translate('SkipRedownload')}
-                  </FormLabel>
-                  <FormInputGroup
-                    type={inputTypes.CHECK}
-                    name="skipRedownload"
-                    value={skipRedownload}
-                    helpText={translate('SkipRedownloadHelpText')}
-                    onChange={this.onSkipRedownloadChange}
-                  />
-                </FormGroup>
-            }
-
-          </ModalBody>
-
-          <ModalFooter>
-            <Button onPress={this.onModalClose}>
-              Close
-            </Button>
-
-            <Button
-              kind={kinds.DANGER}
-              onPress={this.onRemoveConfirmed}
-            >
-              Remove
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    );
-  }
-}
-
-RemoveQueueItemModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  sourceTitle: PropTypes.string.isRequired,
-  canIgnore: PropTypes.bool.isRequired,
-  isPending: PropTypes.bool.isRequired,
-  onRemovePress: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default RemoveQueueItemModal;

frontend/src/Activity/Queue/RemoveQueueItemModal.tsx

@@ -0,0 +1,231 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './RemoveQueueItemModal.css';
+
+interface RemovePressProps {
+  removeFromClient: boolean;
+  changeCategory: boolean;
+  blocklist: boolean;
+  skipRedownload: boolean;
+}
+
+interface RemoveQueueItemModalProps {
+  isOpen: boolean;
+  sourceTitle: string;
+  canChangeCategory: boolean;
+  canIgnore: boolean;
+  isPending: boolean;
+  selectedCount?: number;
+  onRemovePress(props: RemovePressProps): void;
+  onModalClose: () => void;
+}
+
+type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore';
+type BlocklistMethod =
+  | 'doNotBlocklist'
+  | 'blocklistAndSearch'
+  | 'blocklistOnly';
+
+function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
+  const {
+    isOpen,
+    sourceTitle,
+    canIgnore,
+    canChangeCategory,
+    isPending,
+    selectedCount,
+    onRemovePress,
+    onModalClose,
+  } = props;
+
+  const multipleSelected = selectedCount && selectedCount > 1;
+
+  const [removalMethod, setRemovalMethod] =
+    useState<RemovalMethod>('removeFromClient');
+  const [blocklistMethod, setBlocklistMethod] =
+    useState<BlocklistMethod>('doNotBlocklist');
+
+  const { title, message } = useMemo(() => {
+    if (!selectedCount) {
+      return {
+        title: translate('RemoveQueueItem', { sourceTitle }),
+        message: translate('RemoveQueueItemConfirmation', { sourceTitle }),
+      };
+    }
+
+    if (selectedCount === 1) {
+      return {
+        title: translate('RemoveSelectedItem'),
+        message: translate('RemoveSelectedItemQueueMessageText'),
+      };
+    }
+
+    return {
+      title: translate('RemoveSelectedItems'),
+      message: translate('RemoveSelectedItemsQueueMessageText', {
+        selectedCount,
+      }),
+    };
+  }, [sourceTitle, selectedCount]);
+
+  const removalMethodOptions = useMemo(() => {
+    return [
+      {
+        key: 'removeFromClient',
+        value: translate('RemoveFromDownloadClient'),
+        hint: multipleSelected
+          ? translate('RemoveMultipleFromDownloadClientHint')
+          : translate('RemoveFromDownloadClientHint'),
+      },
+      {
+        key: 'changeCategory',
+        value: translate('ChangeCategory'),
+        isDisabled: !canChangeCategory,
+        hint: multipleSelected
+          ? translate('ChangeCategoryMultipleHint')
+          : translate('ChangeCategoryHint'),
+      },
+      {
+        key: 'ignore',
+        value: multipleSelected
+          ? translate('IgnoreDownloads')
+          : translate('IgnoreDownload'),
+        isDisabled: !canIgnore,
+        hint: multipleSelected
+          ? translate('IgnoreDownloadsHint')
+          : translate('IgnoreDownloadHint'),
+      },
+    ];
+  }, [canChangeCategory, canIgnore, multipleSelected]);
+
+  const blocklistMethodOptions = useMemo(() => {
+    return [
+      {
+        key: 'doNotBlocklist',
+        value: translate('DoNotBlocklist'),
+        hint: translate('DoNotBlocklistHint'),
+      },
+      {
+        key: 'blocklistAndSearch',
+        value: translate('BlocklistAndSearch'),
+        isDisabled: isPending,
+        hint: multipleSelected
+          ? translate('BlocklistAndSearchMultipleHint')
+          : translate('BlocklistAndSearchHint'),
+      },
+      {
+        key: 'blocklistOnly',
+        value: translate('BlocklistOnly'),
+        hint: multipleSelected
+          ? translate('BlocklistMultipleOnlyHint')
+          : translate('BlocklistOnlyHint'),
+      },
+    ];
+  }, [isPending, multipleSelected]);
+
+  const handleRemovalMethodChange = useCallback(
+    ({ value }: { value: RemovalMethod }) => {
+      setRemovalMethod(value);
+    },
+    [setRemovalMethod]
+  );
+
+  const handleBlocklistMethodChange = useCallback(
+    ({ value }: { value: BlocklistMethod }) => {
+      setBlocklistMethod(value);
+    },
+    [setBlocklistMethod]
+  );
+
+  const handleConfirmRemove = useCallback(() => {
+    onRemovePress({
+      removeFromClient: removalMethod === 'removeFromClient',
+      changeCategory: removalMethod === 'changeCategory',
+      blocklist: blocklistMethod !== 'doNotBlocklist',
+      skipRedownload: blocklistMethod === 'blocklistOnly',
+    });
+
+    setRemovalMethod('removeFromClient');
+    setBlocklistMethod('doNotBlocklist');
+  }, [
+    removalMethod,
+    blocklistMethod,
+    setRemovalMethod,
+    setBlocklistMethod,
+    onRemovePress,
+  ]);
+
+  const handleModalClose = useCallback(() => {
+    setRemovalMethod('removeFromClient');
+    setBlocklistMethod('doNotBlocklist');
+
+    onModalClose();
+  }, [setRemovalMethod, setBlocklistMethod, onModalClose]);
+
+  return (
+    <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={handleModalClose}>
+      <ModalContent onModalClose={handleModalClose}>
+        <ModalHeader>{title}</ModalHeader>
+
+        <ModalBody>
+          <div className={styles.message}>{message}</div>
+
+          {isPending ? null : (
+            <FormGroup>
+              <FormLabel>{translate('RemoveQueueItemRemovalMethod')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="removalMethod"
+                value={removalMethod}
+                values={removalMethodOptions}
+                isDisabled={!canChangeCategory && !canIgnore}
+                helpTextWarning={translate(
+                  'RemoveQueueItemRemovalMethodHelpTextWarning'
+                )}
+                onChange={handleRemovalMethodChange}
+              />
+            </FormGroup>
+          )}
+
+          <FormGroup>
+            <FormLabel>
+              {multipleSelected
+                ? translate('BlocklistReleases')
+                : translate('BlocklistRelease')}
+            </FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="blocklistMethod"
+              value={blocklistMethod}
+              values={blocklistMethodOptions}
+              helpText={translate('BlocklistReleaseHelpText')}
+              onChange={handleBlocklistMethodChange}
+            />
+          </FormGroup>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={handleModalClose}>{translate('Close')}</Button>
+
+          <Button kind={kinds.DANGER} onPress={handleConfirmRemove}>
+            {translate('Remove')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default RemoveQueueItemModal;

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -1,176 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } 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 Modal from 'Components/Modal/Modal';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes, kinds, sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './RemoveQueueItemsModal.css';
-
-class RemoveQueueItemsModal extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      removeFromClient: true,
-      blocklist: false,
-      skipRedownload: false
-    };
-  }
-
-  //
-  // Control
-
-  resetState = function() {
-    this.setState({
-      removeFromClient: true,
-      blocklist: false,
-      skipRedownload: false
-    });
-  };
-
-  //
-  // Listeners
-
-  onRemoveFromClientChange = ({ value }) => {
-    this.setState({ removeFromClient: value });
-  };
-
-  onBlocklistChange = ({ value }) => {
-    this.setState({ blocklist: value });
-  };
-
-  onSkipRedownloadChange = ({ value }) => {
-    this.setState({ skipRedownload: value });
-  };
-
-  onRemoveConfirmed = () => {
-    const state = this.state;
-
-    this.resetState();
-    this.props.onRemovePress(state);
-  };
-
-  onModalClose = () => {
-    this.resetState();
-    this.props.onModalClose();
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      isOpen,
-      selectedCount,
-      canIgnore,
-      allPending
-    } = this.props;
-
-    const { removeFromClient, blocklist, skipRedownload } = this.state;
-
-    return (
-      <Modal
-        isOpen={isOpen}
-        size={sizes.MEDIUM}
-        onModalClose={this.onModalClose}
-      >
-        <ModalContent
-          onModalClose={this.onModalClose}
-        >
-          <ModalHeader>
-            {selectedCount > 1 ? translate('RemoveSelectedItems') : translate('RemoveSelectedItem')}
-          </ModalHeader>
-
-          <ModalBody>
-            <div className={styles.message}>
-              {selectedCount > 1 ? translate('RemoveSelectedItemsQueueMessageText', [selectedCount]) : translate('RemoveSelectedItemQueueMessageText')}
-            </div>
-
-            {
-              allPending ?
-                null :
-                <FormGroup>
-                  <FormLabel>{translate('RemoveFromDownloadClient')}</FormLabel>
-
-                  <FormInputGroup
-                    type={inputTypes.CHECK}
-                    name="removeFromClient"
-                    value={removeFromClient}
-                    helpTextWarning={translate('RemoveFromDownloadClientHelpTextWarning')}
-                    isDisabled={!canIgnore}
-                    onChange={this.onRemoveFromClientChange}
-                  />
-                </FormGroup>
-            }
-
-            <FormGroup>
-              <FormLabel>
-                {selectedCount > 1 ? translate('BlocklistReleases') : translate('BlocklistRelease')}
-              </FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="blocklist"
-                value={blocklist}
-                helpText={translate('BlocklistReleaseHelpText')}
-                onChange={this.onBlocklistChange}
-              />
-            </FormGroup>
-
-            {
-              blocklist &&
-                <FormGroup>
-                  <FormLabel>
-                    {translate('SkipRedownload')}
-                  </FormLabel>
-                  <FormInputGroup
-                    type={inputTypes.CHECK}
-                    name="skipRedownload"
-                    value={skipRedownload}
-                    helpText={translate('SkipRedownloadHelpText')}
-                    onChange={this.onSkipRedownloadChange}
-                  />
-                </FormGroup>
-            }
-
-          </ModalBody>
-
-          <ModalFooter>
-            <Button onPress={this.onModalClose}>
-              {translate('Close')}
-            </Button>
-
-            <Button
-              kind={kinds.DANGER}
-              onPress={this.onRemoveConfirmed}
-            >
-              {translate('Remove')}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    );
-  }
-}
-
-RemoveQueueItemsModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  selectedCount: PropTypes.number.isRequired,
-  canIgnore: PropTypes.bool.isRequired,
-  allPending: PropTypes.bool.isRequired,
-  onRemovePress: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default RemoveQueueItemsModal;

frontend/src/Activity/Queue/TimeleftCell.js

@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import formatTime from 'Utilities/Date/formatTime';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
@@ -25,11 +28,13 @@ function TimeleftCell(props) {
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
-      <TableRowCell
-        className={styles.timeleft}
-        title={translate('DelayingDownloadUntilInterp', [date, time])}
-      >
-        -
+      <TableRowCell className={styles.timeleft}>
+        <Tooltip
+          anchor={<Icon name={icons.INFO} />}
+          tooltip={translate('DelayingDownloadUntil', { date, time })}
+          kind={kinds.INVERSE}
+          position={tooltipPositions.TOP}
+        />
       </TableRowCell>
     );
   }
@@ -39,11 +44,13 @@ function TimeleftCell(props) {
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
-      <TableRowCell
-        className={styles.timeleft}
-        title={translate('RetryingDownloadInterp', [date, time])}
-      >
-        -
+      <TableRowCell className={styles.timeleft}>
+        <Tooltip
+          anchor={<Icon name={icons.INFO} />}
+          tooltip={translate('RetryingDownloadOn', { date, time })}
+          kind={kinds.INVERSE}
+          position={tooltipPositions.TOP}
+        />
       </TableRowCell>
     );
   }

frontend/src/AddArtist/ArtistMonitorNewItemsOptionsPopoverContent.js

@@ -8,17 +8,17 @@ function ArtistMonitorNewItemsOptionsPopoverContent() {
     <DescriptionList>
       <DescriptionListItem
         title={translate('AllAlbums')}
-        data="Monitor all new albums"
+        data={translate('MonitorAllAlbums')}
       />
 
       <DescriptionListItem
         title={translate('NewAlbums')}
-        data="Monitor new albums released after the newest existing album"
+        data={translate('MonitorNewAlbumsData')}
       />
 
       <DescriptionListItem
         title={translate('None')}
-        data="Don't monitor any new albums"
+        data={translate('MonitorNoAlbumsData')}
       />
     </DescriptionList>
   );

frontend/src/Album/Album.ts

@@ -10,6 +10,7 @@ export interface Statistics {
 }
 
 interface Album extends ModelBase {
+  artistId: number;
   artist: Artist;
   foreignAlbumId: string;
   title: string;
@@ -19,6 +20,7 @@ interface Album extends ModelBase {
   monitored: boolean;
   releaseDate: string;
   statistics: Statistics;
+  lastSearchTime?: string;
   isSaving?: boolean;
 }
 

frontend/src/Album/AlbumSearchCell.js

@@ -4,6 +4,7 @@ import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import AlbumInteractiveSearchModalConnector from './Search/AlbumInteractiveSearchModalConnector';
 import styles from './AlbumSearchCell.css';
 
@@ -49,11 +50,13 @@ class AlbumSearchCell extends Component {
           name={icons.SEARCH}
           isSpinning={isSearching}
           onPress={onSearchPress}
+          title={translate('AutomaticSearch')}
         />
 
         <IconButton
           name={icons.INTERACTIVE}
           onPress={this.onManualSearchPress}
+          title={translate('InteractiveSearch')}
         />
 
         <AlbumInteractiveSearchModalConnector

frontend/src/Album/AlbumTitleLink.js

@@ -4,10 +4,11 @@ import Link from 'Components/Link/Link';
 
 function AlbumTitleLink({ foreignAlbumId, title, disambiguation }) {
   const link = `/album/${foreignAlbumId}`;
+  const albumTitle = `${title}${disambiguation ? ` (${disambiguation})` : ''}`;
 
   return (
-    <Link to={link}>
-      {title}{disambiguation ? ` (${disambiguation})` : ''}
+    <Link to={link} title={albumTitle}>
+      {albumTitle}
     </Link>
   );
 }

frontend/src/Album/Delete/DeleteAlbumModalContent.js

@@ -53,7 +53,7 @@ class DeleteAlbumModalContent extends Component {
   render() {
     const {
       title,
-      statistics,
+      statistics = {},
       onModalClose
     } = this.props;
 

frontend/src/Album/Details/AlbumDetails.css

@@ -121,6 +121,8 @@
 
 .releaseDate,
 .sizeOnDisk,
+.albumType,
+.secondaryTypes,
 .qualityProfileName,
 .links,
 .tags {

frontend/src/Album/Details/AlbumDetails.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'albumNavigationButton': string;
   'albumNavigationButtons': string;
+  'albumType': string;
   'alternateTitlesIconContainer': string;
   'backdrop': string;
   'backdropOverlay': string;
@@ -20,6 +21,7 @@ interface CssExports {
   'overview': string;
   'qualityProfileName': string;
   'releaseDate': string;
+  'secondaryTypes': string;
   'sizeOnDisk': string;
   'tags': string;
   'title': string;

frontend/src/Album/Details/AlbumDetails.js

@@ -192,6 +192,7 @@ class AlbumDetails extends Component {
       duration,
       overview,
       albumType,
+      secondaryTypes,
       statistics = {},
       monitored,
       releaseDate,
@@ -204,6 +205,7 @@ class AlbumDetails extends Component {
       isFetching,
       isPopulated,
       albumsError,
+      tracksError,
       trackFilesError,
       hasTrackFiles,
       shortDateFormat,
@@ -396,10 +398,11 @@ class AlbumDetails extends Component {
                 <div className={styles.details}>
                   <div>
                     {
-                      !!duration &&
+                      duration ?
                         <span className={styles.duration}>
                           {formatDuration(duration)}
-                        </span>
+                        </span> :
+                        null
                     }
 
                     <HeartRating
@@ -418,14 +421,15 @@ class AlbumDetails extends Component {
                     title={translate('ReleaseDate')}
                     size={sizes.LARGE}
                   >
-                    <Icon
-                      name={icons.CALENDAR}
-                      size={17}
-                    />
-
-                    <span className={styles.releaseDate}>
-                      {moment(releaseDate).format(shortDateFormat)}
-                    </span>
+                    <div>
+                      <Icon
+                        name={icons.CALENDAR}
+                        size={17}
+                      />
+                      <span className={styles.releaseDate}>
+                        {moment(releaseDate).format(shortDateFormat)}
+                      </span>
+                    </div>
                   </Label>
 
                   <Tooltip
@@ -434,16 +438,15 @@ class AlbumDetails extends Component {
                         className={styles.detailsLabel}
                         size={sizes.LARGE}
                       >
-                        <Icon
-                          name={icons.DRIVE}
-                          size={17}
-                        />
-
-                        <span className={styles.sizeOnDisk}>
-                          {
-                            formatBytes(sizeOnDisk || 0)
-                          }
-                        </span>
+                        <div>
+                          <Icon
+                            name={icons.DRIVE}
+                            size={17}
+                          />
+                          <span className={styles.sizeOnDisk}>
+                            {formatBytes(sizeOnDisk)}
+                          </span>
+                        </div>
                       </Label>
                     }
                     tooltip={
@@ -459,32 +462,55 @@ class AlbumDetails extends Component {
                     className={styles.detailsLabel}
                     size={sizes.LARGE}
                   >
-                    <Icon
-                      name={monitored ? icons.MONITORED : icons.UNMONITORED}
-                      size={17}
-                    />
-
-                    <span className={styles.qualityProfileName}>
-                      {monitored ? translate('Monitored') : translate('Unmonitored')}
-                    </span>
+                    <div>
+                      <Icon
+                        name={monitored ? icons.MONITORED : icons.UNMONITORED}
+                        size={17}
+                      />
+                      <span className={styles.qualityProfileName}>
+                        {monitored ? translate('Monitored') : translate('Unmonitored')}
+                      </span>
+                    </div>
                   </Label>
 
                   {
-                    !!albumType &&
+                    albumType ?
                       <Label
                         className={styles.detailsLabel}
                         title={translate('Type')}
                         size={sizes.LARGE}
                       >
-                        <Icon
-                          name={icons.INFO}
-                          size={17}
-                        />
+                        <div>
+                          <Icon
+                            name={icons.INFO}
+                            size={17}
+                          />
+                          <span className={styles.albumType}>
+                            {albumType}
+                          </span>
+                        </div>
+                      </Label> :
+                      null
+                  }
 
-                        <span className={styles.qualityProfileName}>
-                          {albumType}
-                        </span>
-                      </Label>
+                  {
+                    secondaryTypes.length ?
+                      <Label
+                        className={styles.detailsLabel}
+                        title={translate('SecondaryTypes')}
+                        size={sizes.LARGE}
+                      >
+                        <div>
+                          <Icon
+                            name={icons.INFO}
+                            size={17}
+                          />
+                          <span className={styles.secondaryTypes}>
+                            {secondaryTypes.join(', ')}
+                          </span>
+                        </div>
+                      </Label> :
+                      null
                   }
 
                   <Tooltip
@@ -493,14 +519,15 @@ class AlbumDetails extends Component {
                         className={styles.detailsLabel}
                         size={sizes.LARGE}
                       >
-                        <Icon
-                          name={icons.EXTERNAL_LINK}
-                          size={17}
-                        />
-
-                        <span className={styles.links}>
-                          {translate('Links')}
-                        </span>
+                        <div>
+                          <Icon
+                            name={icons.EXTERNAL_LINK}
+                            size={17}
+                          />
+                          <span className={styles.links}>
+                            {translate('Links')}
+                          </span>
+                        </div>
                       </Label>
                     }
                     tooltip={
@@ -526,8 +553,9 @@ class AlbumDetails extends Component {
 
           <div className={styles.contentContainer}>
             {
-              !isPopulated && !albumsError && !trackFilesError &&
-                <LoadingIndicator />
+              !isPopulated && !albumsError && !tracksError && !trackFilesError ?
+                <LoadingIndicator /> :
+                null
             }
 
             {
@@ -538,6 +566,14 @@ class AlbumDetails extends Component {
                 null
             }
 
+            {
+              !isFetching && tracksError ?
+                <Alert kind={kinds.DANGER}>
+                  {translate('TracksLoadError')}
+                </Alert> :
+                null
+            }
+
             {
               !isFetching && trackFilesError ?
                 <Alert kind={kinds.DANGER}>
@@ -566,6 +602,14 @@ class AlbumDetails extends Component {
                 </div>
             }
 
+            {
+              isPopulated && !media.length ?
+                <Alert kind={kinds.WARNING}>
+                  {translate('NoMediumInformation')}
+                </Alert> :
+                null
+            }
+
           </div>
 
           <OrganizePreviewModalConnector
@@ -632,6 +676,7 @@ AlbumDetails.propTypes = {
   duration: PropTypes.number,
   overview: PropTypes.string,
   albumType: PropTypes.string.isRequired,
+  secondaryTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
   statistics: PropTypes.object.isRequired,
   releaseDate: PropTypes.string.isRequired,
   ratings: PropTypes.object.isRequired,
@@ -658,6 +703,8 @@ AlbumDetails.propTypes = {
 };
 
 AlbumDetails.defaultProps = {
+  secondaryTypes: [],
+  statistics: {},
   isSaving: false
 };
 

frontend/src/Album/Details/AlbumDetailsMedium.js

@@ -12,16 +12,13 @@ import TrackRowConnector from './TrackRowConnector';
 import styles from './AlbumDetailsMedium.css';
 
 function getMediumStatistics(tracks) {
-  let trackCount = 0;
+  const trackCount = tracks.length;
   let trackFileCount = 0;
   let totalTrackCount = 0;
 
   tracks.forEach((track) => {
     if (track.trackFileId) {
-      trackCount++;
       trackFileCount++;
-    } else {
-      trackCount++;
     }
 
     totalTrackCount++;
@@ -175,7 +172,7 @@ class AlbumDetailsMedium extends Component {
                     </Table> :
 
                     <div className={styles.noTracks}>
-                      No tracks in this medium
+                      {translate('NoTracksInThisMedium')}
                     </div>
                 }
                 <div className={styles.collapseButtonContainer}>

frontend/src/Album/Details/TrackRow.css

@@ -35,3 +35,9 @@
 
   width: 55px;
 }
+
+.indexerFlags {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 50px;
+}

frontend/src/Album/Details/TrackRow.css.d.ts

@@ -4,6 +4,7 @@ interface CssExports {
   'audio': string;
   'customFormatScore': string;
   'duration': string;
+  'indexerFlags': string;
   'monitored': string;
   'size': string;
   'status': string;

frontend/src/Album/Details/TrackRow.js

@@ -2,15 +2,19 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import AlbumFormats from 'Album/AlbumFormats';
 import EpisodeStatusConnector from 'Album/EpisodeStatusConnector';
+import IndexerFlags from 'Album/IndexerFlags';
+import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
+import Popover from 'Components/Tooltip/Popover';
 import Tooltip from 'Components/Tooltip/Tooltip';
-import { tooltipPositions } from 'Helpers/Props';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import MediaInfoConnector from 'TrackFile/MediaInfoConnector';
 import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
 import formatBytes from 'Utilities/Number/formatBytes';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
+import translate from 'Utilities/String/translate';
 import TrackActionsCell from './TrackActionsCell';
 import styles from './TrackRow.css';
 
@@ -32,6 +36,7 @@ class TrackRow extends Component {
       trackFileSize,
       customFormats,
       customFormatScore,
+      indexerFlags,
       columns,
       deleteTrackFile
     } = this.props;
@@ -141,12 +146,30 @@ class TrackRow extends Component {
                       customFormats.length
                     )}
                     tooltip={<AlbumFormats formats={customFormats} />}
-                    position={tooltipPositions.BOTTOM}
+                    position={tooltipPositions.LEFT}
                   />
                 </TableRowCell>
               );
             }
 
+            if (name === 'indexerFlags') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexerFlags}
+                >
+                  {indexerFlags ? (
+                    <Popover
+                      anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                      title={translate('IndexerFlags')}
+                      body={<IndexerFlags indexerFlags={indexerFlags} />}
+                      position={tooltipPositions.LEFT}
+                    />
+                  ) : null}
+                </TableRowCell>
+              );
+            }
+
             if (name === 'size') {
               return (
                 <TableRowCell
@@ -208,12 +231,14 @@ TrackRow.propTypes = {
   trackFileSize: PropTypes.number,
   customFormats: PropTypes.arrayOf(PropTypes.object),
   customFormatScore: PropTypes.number.isRequired,
+  indexerFlags: PropTypes.number.isRequired,
   mediaInfo: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 
 TrackRow.defaultProps = {
-  customFormats: []
+  customFormats: [],
+  indexerFlags: 0
 };
 
 export default TrackRow;

frontend/src/Album/Details/TrackRowConnector.js

@@ -13,7 +13,8 @@ function createMapStateToProps() {
         trackFilePath: trackFile ? trackFile.path : null,
         trackFileSize: trackFile ? trackFile.size : null,
         customFormats: trackFile ? trackFile.customFormats : [],
-        customFormatScore: trackFile ? trackFile.customFormatScore : 0
+        customFormatScore: trackFile ? trackFile.customFormatScore : 0,
+        indexerFlags: trackFile ? trackFile.indexerFlags : 0
       };
     }
   );

frontend/src/Album/Edit/EditAlbumModalContent.js

@@ -35,7 +35,7 @@ class EditAlbumModalContent extends Component {
       title,
       artistName,
       albumType,
-      statistics,
+      statistics = {},
       item,
       isSaving,
       onInputChange,

frontend/src/Album/IndexerFlags.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import createIndexerFlagsSelector from 'Store/Selectors/createIndexerFlagsSelector';
+
+interface IndexerFlagsProps {
+  indexerFlags: number;
+}
+
+function IndexerFlags({ indexerFlags = 0 }: IndexerFlagsProps) {
+  const allIndexerFlags = useSelector(createIndexerFlagsSelector);
+
+  const flags = allIndexerFlags.items.filter(
+    // eslint-disable-next-line no-bitwise
+    (item) => (indexerFlags & item.id) === item.id
+  );
+
+  return flags.length ? (
+    <ul>
+      {flags.map((flag, index) => {
+        return <li key={index}>{flag.name}</li>;
+      })}
+    </ul>
+  ) : null;
+}
+
+export default IndexerFlags;

frontend/src/Album/Search/AlbumInteractiveSearchModal.js

@@ -15,7 +15,7 @@ function AlbumInteractiveSearchModal(props) {
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       closeOnBackgroundClick={false}
       onModalClose={onModalClose}
     >

frontend/src/Album/Search/AlbumInteractiveSearchModalContent.js

@@ -7,6 +7,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { scrollDirections } from 'Helpers/Props';
 import InteractiveSearchConnector from 'InteractiveSearch/InteractiveSearchConnector';
+import translate from 'Utilities/String/translate';
 
 function AlbumInteractiveSearchModalContent(props) {
   const {
@@ -18,7 +19,10 @@ function AlbumInteractiveSearchModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Interactive Search  {albumId != null && `- ${albumTitle}`}
+        {albumTitle === undefined ?
+          translate('InteractiveSearchModalHeader') :
+          translate('InteractiveSearchModalHeaderTitle', { title: albumTitle })
+        }
       </ModalHeader>
 
       <ModalBody scrollDirection={scrollDirections.BOTH}>
@@ -32,7 +36,7 @@ function AlbumInteractiveSearchModalContent(props) {
 
       <ModalFooter>
         <Button onPress={onModalClose}>
-          Close
+          {translate('Close')}
         </Button>
       </ModalFooter>
     </ModalContent>

frontend/src/App/App.js

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

frontend/src/App/AppRoutes.js

@@ -11,7 +11,7 @@ import CalendarPageConnector from 'Calendar/CalendarPageConnector';
 import NotFound from 'Components/NotFound';
 import Switch from 'Components/Router/Switch';
 import AddNewItemConnector from 'Search/AddNewItemConnector';
-import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
+import CustomFormatSettingsPage from 'Settings/CustomFormats/CustomFormatSettingsPage';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
 import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
@@ -29,7 +29,7 @@ import LogsTableConnector from 'System/Events/LogsTableConnector';
 import Logs from 'System/Logs/Logs';
 import Status from 'System/Status/Status';
 import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import Updates from 'System/Updates/Updates';
 import UnmappedFilesTableConnector from 'UnmappedFiles/UnmappedFilesTableConnector';
 import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
 import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
@@ -184,7 +184,7 @@ function AppRoutes(props) {
 
       <Route
         path="/settings/customformats"
-        component={CustomFormatSettingsConnector}
+        component={CustomFormatSettingsPage}
       />
 
       <Route
@@ -248,7 +248,7 @@ function AppRoutes(props) {
 
       <Route
         path="/system/updates"
-        component={UpdatesConnector}
+        component={Updates}
       />
 
       <Route

frontend/src/App/ApplyTheme.js

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

frontend/src/App/ApplyTheme.tsx

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

frontend/src/App/State/AppState.ts

@@ -1,8 +1,12 @@
+import ParseAppState from 'App/State/ParseAppState';
 import AlbumAppState from './AlbumAppState';
 import ArtistAppState, { ArtistIndexAppState } from './ArtistAppState';
+import CalendarAppState from './CalendarAppState';
+import CommandAppState from './CommandAppState';
 import HistoryAppState from './HistoryAppState';
 import QueueAppState from './QueueAppState';
 import SettingsAppState from './SettingsAppState';
+import SystemAppState from './SystemAppState';
 import TagsAppState from './TagsAppState';
 import TrackFilesAppState from './TrackFilesAppState';
 import TracksAppState from './TracksAppState';
@@ -39,16 +43,30 @@ export interface CustomFilter {
   filers: PropertyFilter[];
 }
 
+export interface AppSectionState {
+  version: string;
+  dimensions: {
+    isSmallScreen: boolean;
+    width: number;
+    height: number;
+  };
+}
+
 interface AppState {
   albums: AlbumAppState;
+  app: AppSectionState;
   artist: ArtistAppState;
   artistIndex: ArtistIndexAppState;
+  calendar: CalendarAppState;
+  commands: CommandAppState;
   history: HistoryAppState;
+  parse: ParseAppState;
   queue: QueueAppState;
   settings: SettingsAppState;
   tags: TagsAppState;
   trackFiles: TrackFilesAppState;
   tracksSelection: TracksAppState;
+  system: SystemAppState;
 }
 
 export default AppState;

frontend/src/App/State/CalendarAppState.ts

@@ -0,0 +1,10 @@
+import Album from 'Album/Album';
+import AppSectionState, {
+  AppSectionFilterState,
+} from 'App/State/AppSectionState';
+
+interface CalendarAppState
+  extends AppSectionState<Album>,
+    AppSectionFilterState<Album> {}
+
+export default CalendarAppState;

frontend/src/App/State/CommandAppState.ts

@@ -0,0 +1,6 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Command from 'Commands/Command';
+
+export type CommandAppState = AppSectionState<Command>;
+
+export default CommandAppState;

frontend/src/App/State/ParseAppState.ts

@@ -0,0 +1,35 @@
+import Album from 'Album/Album';
+import ModelBase from 'App/ModelBase';
+import { AppSectionItemState } from 'App/State/AppSectionState';
+import Artist from 'Artist/Artist';
+import { QualityModel } from 'Quality/Quality';
+import CustomFormat from 'typings/CustomFormat';
+
+export interface ArtistTitleInfo {
+  title: string;
+}
+
+export interface ParsedAlbumInfo {
+  albumTitle: string;
+  artistName: string;
+  artistTitleInfo: ArtistTitleInfo;
+  discography: boolean;
+  quality: QualityModel;
+  releaseGroup?: string;
+  releaseHash: string;
+  releaseTitle: string;
+  releaseTokens: string;
+}
+
+export interface ParseModel extends ModelBase {
+  title: string;
+  parsedAlbumInfo: ParsedAlbumInfo;
+  artist?: Artist;
+  albums: Album[];
+  customFormats?: CustomFormat[];
+  customFormatScore?: number;
+}
+
+type ParseAppState = AppSectionItemState<ParseModel>;
+
+export default ParseAppState;

frontend/src/App/State/QueueAppState.ts

@@ -1,38 +1,10 @@
-import ModelBase from 'App/ModelBase';
-import { QualityModel } from 'Quality/Quality';
-import CustomFormat from 'typings/CustomFormat';
+import Queue from 'typings/Queue';
 import AppSectionState, {
   AppSectionFilterState,
   AppSectionItemState,
   Error,
 } from './AppSectionState';
 
-export interface StatusMessage {
-  title: string;
-  messages: string[];
-}
-
-export interface Queue extends ModelBase {
-  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;
-  artistId?: number;
-  albumId?: number;
-}
-
 export interface QueueDetailsAppState extends AppSectionState<Queue> {
   params: unknown;
 }

frontend/src/App/State/SettingsAppState.ts

@@ -1,21 +1,28 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionItemState,
   AppSectionSaveState,
   AppSectionSchemaState,
 } from 'App/State/AppSectionState';
+import CustomFormat from 'typings/CustomFormat';
 import DownloadClient from 'typings/DownloadClient';
 import ImportList from 'typings/ImportList';
 import Indexer from 'typings/Indexer';
+import IndexerFlag from 'typings/IndexerFlag';
 import MetadataProfile from 'typings/MetadataProfile';
 import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
-import { UiSettings } from 'typings/UiSettings';
+import RootFolder from 'typings/RootFolder';
+import General from 'typings/Settings/General';
+import UiSettings from 'typings/Settings/UiSettings';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
     AppSectionDeleteState,
     AppSectionSaveState {}
 
+export type GeneralAppState = AppSectionItemState<General>;
+
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
     AppSectionDeleteState,
@@ -38,16 +45,32 @@ export interface MetadataProfilesAppState
   extends AppSectionState<MetadataProfile>,
     AppSectionSchemaState<MetadataProfile> {}
 
-export type UiSettingsAppState = AppSectionState<UiSettings>;
+export interface CustomFormatAppState
+  extends AppSectionState<CustomFormat>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface RootFolderAppState
+  extends AppSectionState<RootFolder>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export type IndexerFlagSettingsAppState = AppSectionState<IndexerFlag>;
+export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 
 interface SettingsAppState {
+  advancedSettings: boolean;
+  customFormats: CustomFormatAppState;
   downloadClients: DownloadClientAppState;
+  general: GeneralAppState;
   importLists: ImportListAppState;
+  indexerFlags: IndexerFlagSettingsAppState;
   indexers: IndexerAppState;
   metadataProfiles: MetadataProfilesAppState;
   notifications: NotificationAppState;
   qualityProfiles: QualityProfilesAppState;
-  uiSettings: UiSettingsAppState;
+  rootFolders: RootFolderAppState;
+  ui: UiSettingsAppState;
 }
 
 export default SettingsAppState;

frontend/src/App/State/SystemAppState.ts

@@ -0,0 +1,13 @@
+import SystemStatus from 'typings/SystemStatus';
+import Update from 'typings/Update';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
+
+export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+export type UpdateAppState = AppSectionState<Update>;
+
+interface SystemAppState {
+  updates: UpdateAppState;
+  status: SystemStatusAppState;
+}
+
+export default SystemAppState;

frontend/src/App/State/TagsAppState.ts

@@ -1,12 +1,32 @@
 import ModelBase from 'App/ModelBase';
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionSaveState,
 } from 'App/State/AppSectionState';
 
 export interface Tag extends ModelBase {
   label: string;
 }
 
-interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {}
+export interface TagDetail extends ModelBase {
+  label: string;
+  autoTagIds: number[];
+  delayProfileIds: number[];
+  downloadClientIds: [];
+  importListIds: number[];
+  indexerIds: number[];
+  notificationIds: number[];
+  restrictionIds: number[];
+  artistIds: number[];
+}
+
+export interface TagDetailAppState
+  extends AppSectionState<TagDetail>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {
+  details: TagDetailAppState;
+}
 
 export default TagsAppState;

frontend/src/Artist/Artist.ts

@@ -23,7 +23,6 @@ export interface Ratings {
 
 interface Artist extends ModelBase {
   added: string;
-  artistMetadataId: string;
   foreignArtistId: string;
   cleanName: string;
   ended: boolean;
@@ -36,6 +35,7 @@ interface Artist extends ModelBase {
   nextAlbum?: Album;
   qualityProfileId: number;
   metadataProfileId: number;
+  monitorNewItems: string;
   ratings: Ratings;
   rootFolderPath: string;
   sortName: string;

frontend/src/Artist/Delete/DeleteArtistModalContent.js

@@ -135,14 +135,14 @@ class DeleteArtistModalContent extends Component {
 
         <ModalFooter>
           <Button onPress={onModalClose}>
-            Close
+            {translate('Close')}
           </Button>
 
           <Button
             kind={kinds.DANGER}
             onPress={this.onDeleteArtistConfirmed}
           >
-            Delete
+            {translate('Delete')}
           </Button>
         </ModalFooter>
       </ModalContent>
@@ -161,9 +161,7 @@ DeleteArtistModalContent.propTypes = {
 };
 
 DeleteArtistModalContent.defaultProps = {
-  statistics: {
-    trackFileCount: 0
-  }
+  statistics: {}
 };
 
 export default DeleteArtistModalContent;

frontend/src/Artist/Details/AlbumGroupInfo.js

@@ -10,6 +10,7 @@ function AlbumGroupInfo(props) {
   const {
     totalAlbumCount,
     monitoredAlbumCount,
+    albumFileCount,
     trackFileCount,
     sizeOnDisk
   } = props;
@@ -30,6 +31,13 @@ function AlbumGroupInfo(props) {
         data={monitoredAlbumCount}
       />
 
+      <DescriptionListItem
+        titleClassName={styles.title}
+        descriptionClassName={styles.description}
+        title={translate('WithFiles')}
+        data={albumFileCount}
+      />
+
       <DescriptionListItem
         titleClassName={styles.title}
         descriptionClassName={styles.description}
@@ -50,6 +58,7 @@ function AlbumGroupInfo(props) {
 AlbumGroupInfo.propTypes = {
   totalAlbumCount: PropTypes.number.isRequired,
   monitoredAlbumCount: PropTypes.number.isRequired,
+  albumFileCount: PropTypes.number.isRequired,
   trackFileCount: PropTypes.number.isRequired,
   sizeOnDisk: PropTypes.number.isRequired
 };

frontend/src/Artist/Details/AlbumRow.css

@@ -10,6 +10,7 @@
   width: 42px;
 }
 
+.size,
 .status {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Artist/Details/AlbumRow.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'monitored': string;
+  'size': string;
   'status': string;
   'title': string;
 }

frontend/src/Artist/Details/AlbumRow.js

@@ -10,6 +10,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { kinds, sizes } from 'Helpers/Props';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
 import styles from './AlbumRow.css';
 
@@ -87,7 +88,8 @@ class AlbumRow extends Component {
     const {
       trackCount = 0,
       trackFileCount = 0,
-      totalTrackCount = 0
+      totalTrackCount = 0,
+      sizeOnDisk = 0
     } = statistics;
 
     return (
@@ -147,9 +149,7 @@ class AlbumRow extends Component {
             if (name === 'secondaryTypes') {
               return (
                 <TableRowCell key={name}>
-                  {
-                    secondaryTypes
-                  }
+                  {secondaryTypes.join(', ')}
                 </TableRowCell>
               );
             }
@@ -158,7 +158,7 @@ class AlbumRow extends Component {
               return (
                 <TableRowCell key={name}>
                   {
-                    statistics.totalTrackCount
+                    totalTrackCount
                   }
                 </TableRowCell>
               );
@@ -196,6 +196,17 @@ class AlbumRow extends Component {
               );
             }
 
+            if (name === 'size') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.size}
+                >
+                  {!!sizeOnDisk && formatBytes(sizeOnDisk)}
+                </TableRowCell>
+              );
+            }
+
             if (name === 'status') {
               return (
                 <TableRowCell

frontend/src/Artist/Details/ArtistDetails.js

@@ -192,7 +192,7 @@ class ArtistDetails extends Component {
       artistName,
       ratings,
       path,
-      statistics,
+      statistics = {},
       qualityProfileId,
       monitored,
       genres,

frontend/src/Artist/Details/ArtistDetailsSeason.js

@@ -22,32 +22,43 @@ import styles from './ArtistDetailsSeason.css';
 
 function getAlbumStatistics(albums) {
   let albumCount = 0;
+  let albumFileCount = 0;
   let trackFileCount = 0;
   let totalAlbumCount = 0;
   let monitoredAlbumCount = 0;
   let hasMonitoredAlbums = false;
   let sizeOnDisk = 0;
 
-  albums.forEach((album) => {
-    if (album.statistics) {
-      sizeOnDisk = sizeOnDisk + album.statistics.sizeOnDisk;
-      trackFileCount = trackFileCount + album.statistics.trackFileCount;
+  albums.forEach(({ monitored, releaseDate, statistics = {} }) => {
+    const {
+      trackFileCount: albumTrackFileCount = 0,
+      totalTrackCount: albumTotalTrackCount = 0,
+      sizeOnDisk: albumSizeOnDisk = 0
+    } = statistics;
 
-      if (album.statistics.trackFileCount === album.statistics.totalTrackCount || (album.monitored && isBefore(album.airDateUtc))) {
-        albumCount++;
-      }
+    const hasFiles = albumTrackFileCount > 0 && albumTrackFileCount === albumTotalTrackCount;
+
+    if (hasFiles || (monitored && isBefore(releaseDate))) {
+      albumCount++;
     }
 
-    if (album.monitored) {
+    if (hasFiles) {
+      albumFileCount++;
+    }
+
+    if (monitored) {
       monitoredAlbumCount++;
       hasMonitoredAlbums = true;
     }
 
     totalAlbumCount++;
+    trackFileCount = trackFileCount + albumTrackFileCount;
+    sizeOnDisk = sizeOnDisk + albumSizeOnDisk;
   });
 
   return {
     albumCount,
+    albumFileCount,
     totalAlbumCount,
     trackFileCount,
     monitoredAlbumCount,
@@ -56,8 +67,8 @@ function getAlbumStatistics(albums) {
   };
 }
 
-function getAlbumCountKind(monitored, albumCount, monitoredAlbumCount) {
-  if (albumCount === monitoredAlbumCount && monitoredAlbumCount > 0) {
+function getAlbumCountKind(monitored, albumCount, albumFileCount) {
+  if (albumCount === albumFileCount && albumFileCount > 0) {
     return kinds.SUCCESS;
   }
 
@@ -192,11 +203,12 @@ class ArtistDetailsSeason extends Component {
 
     const {
       albumCount,
+      albumFileCount,
       totalAlbumCount,
       trackFileCount,
       monitoredAlbumCount,
       hasMonitoredAlbums,
-      sizeOnDisk
+      sizeOnDisk = 0
     } = getAlbumStatistics(items);
 
     const {
@@ -226,9 +238,9 @@ class ArtistDetailsSeason extends Component {
               anchor={
                 <Label
                   size={sizes.LARGE}
-                  kind={getAlbumCountKind(hasMonitoredAlbums, albumCount, monitoredAlbumCount)}
+                  kind={getAlbumCountKind(hasMonitoredAlbums, albumCount, albumFileCount)}
                 >
-                  <span>{albumCount} / {monitoredAlbumCount}</span>
+                  <span>{albumFileCount} / {albumCount}</span>
                 </Label>
               }
               title={translate('GroupInformation')}
@@ -237,6 +249,7 @@ class ArtistDetailsSeason extends Component {
                   <AlbumGroupInfo
                     totalAlbumCount={totalAlbumCount}
                     monitoredAlbumCount={monitoredAlbumCount}
+                    albumFileCount={albumFileCount}
                     trackFileCount={trackFileCount}
                     sizeOnDisk={sizeOnDisk}
                   />

frontend/src/Artist/Details/ArtistTagsConnector.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createArtistSelector from 'Store/Selectors/createArtistSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import ArtistTags from './ArtistTags';
 
 function createMapStateToProps() {
@@ -12,8 +13,8 @@ function createMapStateToProps() {
       const tags = artist.tags
         .map((tagId) => tagList.find((tag) => tag.id === tagId))
         .filter((tag) => !!tag)
-        .map((tag) => tag.label)
-        .sort((a, b) => a.localeCompare(b));
+        .sort(sortByProp('label'))
+        .map((tag) => tag.label);
 
       return {
         tags

frontend/src/Artist/Edit/EditArtistModalContent.js

@@ -15,7 +15,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
-import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import { icons, inputTypes, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './EditArtistModalContent.css';
 
@@ -93,7 +93,7 @@ class EditArtistModalContent extends Component {
 
         <ModalBody>
           <Form {...otherProps}>
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('Monitored')}
               </FormLabel>
@@ -107,9 +107,10 @@ class EditArtistModalContent extends Component {
               />
             </FormGroup>
 
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('MonitorNewItems')}
+
                 <Popover
                   anchor={
                     <Icon
@@ -132,7 +133,7 @@ class EditArtistModalContent extends Component {
               />
             </FormGroup>
 
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('QualityProfile')}
               </FormLabel>
@@ -146,10 +147,10 @@ class EditArtistModalContent extends Component {
             </FormGroup>
 
             {
-              showMetadataProfile &&
-                <FormGroup>
+              showMetadataProfile ?
+                <FormGroup size={sizes.MEDIUM}>
                   <FormLabel>
-                    Metadata Profile
+                    {translate('MetadataProfile')}
 
                     <Popover
                       anchor={
@@ -173,10 +174,11 @@ class EditArtistModalContent extends Component {
                     {...metadataProfileId}
                     onChange={onInputChange}
                   />
-                </FormGroup>
+                </FormGroup> :
+                null
             }
 
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('Path')}
               </FormLabel>
@@ -189,7 +191,7 @@ class EditArtistModalContent extends Component {
               />
             </FormGroup>
 
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('Tags')}
               </FormLabel>
@@ -209,7 +211,7 @@ class EditArtistModalContent extends Component {
             kind={kinds.DANGER}
             onPress={onDeleteArtistPress}
           >
-            Delete
+            {translate('Delete')}
           </Button>
 
           <Button

frontend/src/Artist/Index/ArtistIndex.tsx

@@ -1,6 +1,14 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { SelectProvider } from 'App/SelectContext';
+import ArtistAppState, { ArtistIndexAppState } from 'App/State/ArtistAppState';
+import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
 import NoArtist from 'Artist/NoArtist';
 import { RSS_SYNC } from 'Commands/commandNames';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -22,6 +30,7 @@ import {
   setArtistView,
 } from 'Store/Actions/artistIndexActions';
 import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchQueueDetails } from 'Store/Actions/queueActions';
 import scrollPositions from 'Store/scrollPositions';
 import createArtistClientSideCollectionItemsSelector from 'Store/Selectors/createArtistClientSideCollectionItemsSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
@@ -48,7 +57,7 @@ import ArtistIndexTable from './Table/ArtistIndexTable';
 import ArtistIndexTableOptions from './Table/ArtistIndexTableOptions';
 import styles from './ArtistIndex.css';
 
-function getViewComponent(view) {
+function getViewComponent(view: string) {
   if (view === 'posters') {
     return ArtistIndexPosters;
   }
@@ -82,18 +91,25 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
     sortKey,
     sortDirection,
     view,
-  } = useSelector(createArtistClientSideCollectionItemsSelector('artistIndex'));
+  }: ArtistAppState & ArtistIndexAppState & ClientSideCollectionAppState =
+    useSelector(createArtistClientSideCollectionItemsSelector('artistIndex'));
 
   const isRssSyncExecuting = useSelector(
     createCommandExecutingSelector(RSS_SYNC)
   );
   const { isSmallScreen } = useSelector(createDimensionsSelector());
   const dispatch = useDispatch();
-  const scrollerRef = useRef<HTMLDivElement>();
+  const scrollerRef = useRef<HTMLDivElement>(null);
   const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
-  const [jumpToCharacter, setJumpToCharacter] = useState<string | null>(null);
+  const [jumpToCharacter, setJumpToCharacter] = useState<string | undefined>(
+    undefined
+  );
   const [isSelectMode, setIsSelectMode] = useState(false);
 
+  useEffect(() => {
+    dispatch(fetchQueueDetails({ all: true }));
+  }, [dispatch]);
+
   const onRssSyncPress = useCallback(() => {
     dispatch(
       executeCommand({
@@ -107,14 +123,14 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
   }, [isSelectMode, setIsSelectMode]);
 
   const onTableOptionChange = useCallback(
-    (payload) => {
+    (payload: unknown) => {
       dispatch(setArtistTableOption(payload));
     },
     [dispatch]
   );
 
   const onViewSelect = useCallback(
-    (value) => {
+    (value: string) => {
       dispatch(setArtistView({ view: value }));
 
       if (scrollerRef.current) {
@@ -125,14 +141,14 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
   );
 
   const onSortSelect = useCallback(
-    (value) => {
+    (value: string) => {
       dispatch(setArtistSort({ sortKey: value }));
     },
     [dispatch]
   );
 
   const onFilterSelect = useCallback(
-    (value) => {
+    (value: string) => {
       dispatch(setArtistFilter({ selectedFilterKey: value }));
     },
     [dispatch]
@@ -147,15 +163,15 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
   }, [setIsOptionsModalOpen]);
 
   const onJumpBarItemPress = useCallback(
-    (character) => {
+    (character: string) => {
       setJumpToCharacter(character);
     },
     [setJumpToCharacter]
   );
 
   const onScroll = useCallback(
-    ({ scrollTop }) => {
-      setJumpToCharacter(null);
+    ({ scrollTop }: { scrollTop: number }) => {
+      setJumpToCharacter(undefined);
       scrollPositions.artistIndex = scrollTop;
     },
     [setJumpToCharacter]
@@ -169,10 +185,10 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
       };
     }
 
-    const characters = items.reduce((acc, item) => {
+    const characters = items.reduce((acc: Record<string, number>, item) => {
       let char = item.sortName.charAt(0);
 
-      if (!isNaN(char)) {
+      if (!isNaN(Number(char))) {
         char = '#';
       }
 
@@ -289,6 +305,8 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
           <PageContentBody
             ref={scrollerRef}
             className={styles.contentBody}
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             innerClassName={styles[`${view}InnerContentBody`]}
             initialScrollTop={props.initialScrollTop}
             onScroll={onScroll}

frontend/src/Artist/Index/ArtistIndexFilterModal.tsx

@@ -23,7 +23,13 @@ function createFilterBuilderPropsSelector() {
   );
 }
 
-export default function ArtistIndexFilterModal(props) {
+interface ArtistIndexFilterModalProps {
+  isOpen: boolean;
+}
+
+export default function ArtistIndexFilterModal(
+  props: ArtistIndexFilterModalProps
+) {
   const sectionItems = useSelector(createArtistSelector());
   const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
   const customFilterType = 'artist';
@@ -31,7 +37,7 @@ export default function ArtistIndexFilterModal(props) {
   const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    (payload) => {
+    (payload: unknown) => {
       dispatch(setArtistFilter(payload));
     },
     [dispatch]
@@ -39,6 +45,7 @@ export default function ArtistIndexFilterModal(props) {
 
   return (
     <FilterModal
+      // TODO: Don't spread all the props
       {...props}
       sectionItems={sectionItems}
       filterBuilderProps={filterBuilderProps}

frontend/src/Artist/Index/ArtistIndexFooter.css

@@ -50,6 +50,12 @@
   }
 }
 
+.downloading {
+  composes: legendItemColor;
+
+  background-color: var(--purple);
+}
+
 .statistics {
   display: flex;
   justify-content: space-between;

frontend/src/Artist/Index/ArtistIndexFooter.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'continuing': string;
+  'downloading': string;
   'ended': string;
   'footer': string;
   'legendItem': string;

frontend/src/Artist/Index/ArtistIndexFooter.tsx

@@ -113,6 +113,16 @@ export default function ArtistIndexFooter() {
                 />
                 <div>{translate('MissingTracksArtistNotMonitored')}</div>
               </div>
+
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.downloading,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>{translate('ArtistIndexFooterDownloading')}</div>
+              </div>
             </div>
 
             <div className={styles.statistics}>

frontend/src/Artist/Index/Banners/ArtistIndexBanner.tsx

@@ -183,13 +183,15 @@ function ArtistIndexBanner(props: ArtistIndexBannerProps) {
       </div>
 
       <ArtistIndexProgressBar
+        artistId={artistId}
         monitored={monitored}
         status={status}
         trackCount={trackCount}
         trackFileCount={trackFileCount}
         totalTrackCount={totalTrackCount}
-        posterWidth={bannerWidth}
+        width={bannerWidth}
         detailedProgressBar={detailedProgressBar}
+        isStandalone={false}
       />
 
       {showTitle ? (
@@ -204,7 +206,7 @@ function ArtistIndexBanner(props: ArtistIndexBannerProps) {
         </div>
       ) : null}
 
-      {showQualityProfile ? (
+      {showQualityProfile && !!qualityProfile?.name ? (
         <div className={styles.title} title={translate('QualityProfile')}>
           {qualityProfile.name}
         </div>

frontend/src/Artist/Index/Banners/ArtistIndexBanners.tsx

@@ -1,8 +1,9 @@
 import { throttle } from 'lodash';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FixedSizeGrid as Grid, GridChildComponentProps } from 'react-window';
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import Artist from 'Artist/Artist';
 import ArtistIndexBanner from 'Artist/Index/Banners/ArtistIndexBanner';
 import useMeasure from 'Helpers/Hooks/useMeasure';
@@ -21,7 +22,7 @@ const columnPaddingSmallScreen = parseInt(
 const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
 const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
 
-const ADDITIONAL_COLUMN_COUNT = {
+const ADDITIONAL_COLUMN_COUNT: Record<string, number> = {
   small: 3,
   medium: 2,
   large: 1,
@@ -41,17 +42,17 @@ interface CellItemData {
 
 interface ArtistIndexBannersProps {
   items: Artist[];
-  sortKey?: string;
+  sortKey: string;
   sortDirection?: SortDirection;
   jumpToCharacter?: string;
   scrollTop?: number;
-  scrollerRef: React.MutableRefObject<HTMLElement>;
+  scrollerRef: RefObject<HTMLElement>;
   isSelectMode: boolean;
   isSmallScreen: boolean;
 }
 
 const artistIndexSelector = createSelector(
-  (state) => state.artistIndex.bannerOptions,
+  (state: AppState) => state.artistIndex.bannerOptions,
   (bannerOptions) => {
     return {
       bannerOptions,
@@ -108,7 +109,7 @@ export default function ArtistIndexBanners(props: ArtistIndexBannersProps) {
   } = props;
 
   const { bannerOptions } = useSelector(artistIndexSelector);
-  const ref: React.MutableRefObject<Grid> = useRef();
+  const ref = useRef<Grid>(null);
   const [measureRef, bounds] = useMeasure();
   const [size, setSize] = useState({ width: 0, height: 0 });
 
@@ -222,8 +223,8 @@ export default function ArtistIndexBanners(props: ArtistIndexBannersProps) {
   }, [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;
@@ -232,7 +233,7 @@ export default function ArtistIndexBanners(props: ArtistIndexBannersProps) {
           ? getWindowScrollTopPosition()
           : currentScrollerRef.scrollTop) - offsetTop;
 
-      ref.current.scrollTo({ scrollLeft: 0, scrollTop });
+      ref.current?.scrollTo({ scrollLeft: 0, scrollTop });
     }, 10);
 
     currentScrollListener.addEventListener('scroll', handleScroll);
@@ -255,8 +256,8 @@ export default function ArtistIndexBanners(props: ArtistIndexBannersProps) {
 
         const scrollTop = rowIndex * rowHeight + padding;
 
-        ref.current.scrollTo({ scrollLeft: 0, scrollTop });
-        scrollerRef.current.scrollTo(0, scrollTop);
+        ref.current?.scrollTo({ scrollLeft: 0, scrollTop });
+        scrollerRef.current?.scrollTo(0, scrollTop);
       }
     }
   }, [

frontend/src/Artist/Index/Banners/Options/ArtistIndexBannerOptionsModalContent.tsx

@@ -59,7 +59,7 @@ function ArtistIndexBannerOptionsModalContent(
   const dispatch = useDispatch();
 
   const onBannerOptionChange = useCallback(
-    ({ name, value }) => {
+    ({ name, value }: { name: string; value: unknown }) => {
       dispatch(setArtistBannerOption({ [name]: value }));
     },
     [dispatch]

frontend/src/Artist/Index/Menus/ArtistIndexFilterMenu.tsx

@@ -1,10 +1,18 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import { CustomFilter } from 'App/State/AppState';
 import ArtistIndexFilterModal from 'Artist/Index/ArtistIndexFilterModal';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import { align } from 'Helpers/Props';
 
-function ArtistIndexFilterMenu(props) {
+interface ArtistIndexFilterMenuProps {
+  selectedFilterKey: string | number;
+  filters: object[];
+  customFilters: CustomFilter[];
+  isDisabled: boolean;
+  onFilterSelect(filterName: string): unknown;
+}
+
+function ArtistIndexFilterMenu(props: ArtistIndexFilterMenuProps) {
   const {
     selectedFilterKey,
     filters,
@@ -26,15 +34,6 @@ function ArtistIndexFilterMenu(props) {
   );
 }
 
-ArtistIndexFilterMenu.propTypes = {
-  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    .isRequired,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  onFilterSelect: PropTypes.func.isRequired,
-};
-
 ArtistIndexFilterMenu.defaultProps = {
   showCustomFilters: false,
 };

frontend/src/Artist/Index/Menus/ArtistIndexSortMenu.tsx

@@ -1,11 +1,19 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import MenuContent from 'Components/Menu/MenuContent';
 import SortMenu from 'Components/Menu/SortMenu';
 import SortMenuItem from 'Components/Menu/SortMenuItem';
-import { align, sortDirections } from 'Helpers/Props';
+import { align } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
+import translate from 'Utilities/String/translate';
 
-function ArtistIndexSortMenu(props) {
+interface SeriesIndexSortMenuProps {
+  sortKey?: string;
+  sortDirection?: SortDirection;
+  isDisabled: boolean;
+  onSortSelect(sortKey: string): unknown;
+}
+
+function ArtistIndexSortMenu(props: SeriesIndexSortMenuProps) {
   const { sortKey, sortDirection, isDisabled, onSortSelect } = props;
 
   return (
@@ -17,7 +25,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Monitored/Status
+          {translate('MonitoredStatus')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -26,7 +34,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Name
+          {translate('Name')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -35,7 +43,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Type
+          {translate('Type')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -44,7 +52,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Quality Profile
+          {translate('QualityProfile')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -53,7 +61,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Metadata Profile
+          {translate('MetadataProfile')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -62,7 +70,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Next Album
+          {translate('NextAlbum')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -71,7 +79,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Last Album
+          {translate('LastAlbum')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -80,7 +88,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Added
+          {translate('Added')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -89,7 +97,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Albums
+          {translate('Albums')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -98,7 +106,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Tracks
+          {translate('Tracks')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -107,7 +115,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Track Count
+          {translate('TrackCount')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -116,7 +124,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Path
+          {translate('Path')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -125,7 +133,7 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Size on Disk
+          {translate('SizeOnDisk')}
         </SortMenuItem>
 
         <SortMenuItem
@@ -134,18 +142,11 @@ function ArtistIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Tags
+          {translate('Tags')}
         </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );
 }
 
-ArtistIndexSortMenu.propTypes = {
-  sortKey: PropTypes.string,
-  sortDirection: PropTypes.oneOf(sortDirections.all),
-  isDisabled: PropTypes.bool.isRequired,
-  onSortSelect: PropTypes.func.isRequired,
-};
-
 export default ArtistIndexSortMenu;

frontend/src/Artist/Index/Menus/ArtistIndexViewMenu.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import MenuContent from 'Components/Menu/MenuContent';
 import ViewMenu from 'Components/Menu/ViewMenu';
@@ -6,7 +5,13 @@ import ViewMenuItem from 'Components/Menu/ViewMenuItem';
 import { align } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 
-function ArtistIndexViewMenu(props) {
+interface ArtistIndexViewMenuProps {
+  view: string;
+  isDisabled: boolean;
+  onViewSelect(value: string): unknown;
+}
+
+function ArtistIndexViewMenu(props: ArtistIndexViewMenuProps) {
   const { view, isDisabled, onViewSelect } = props;
 
   return (
@@ -36,10 +41,4 @@ function ArtistIndexViewMenu(props) {
   );
 }
 
-ArtistIndexViewMenu.propTypes = {
-  view: PropTypes.string.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  onViewSelect: PropTypes.func.isRequired,
-};
-
 export default ArtistIndexViewMenu;

frontend/src/Artist/Index/Overview/ArtistIndexOverview.tsx

@@ -160,13 +160,15 @@ function ArtistIndexOverview(props: ArtistIndexOverviewProps) {
           </div>
 
           <ArtistIndexProgressBar
+            artistId={artistId}
             monitored={monitored}
             status={status}
             trackCount={trackCount}
             trackFileCount={trackFileCount}
             totalTrackCount={totalTrackCount}
-            posterWidth={posterWidth}
+            width={posterWidth}
             detailedProgressBar={overviewOptions.detailedProgressBar}
+            isStandalone={false}
           />
         </div>
 

frontend/src/Artist/Index/Overview/ArtistIndexOverviewInfo.tsx

@@ -1,15 +1,51 @@
+import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import Album from 'Album/Album';
 import { icons } from 'Helpers/Props';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import dimensions from 'Styles/Variables/dimensions';
+import QualityProfile from 'typings/QualityProfile';
+import UiSettings from 'typings/Settings/UiSettings';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import ArtistIndexOverviewInfoRow from './ArtistIndexOverviewInfoRow';
 import styles from './ArtistIndexOverviewInfo.css';
 
+interface RowProps {
+  name: string;
+  showProp: string;
+  valueProp: string;
+}
+
+interface RowInfoProps {
+  title: string;
+  iconName: IconDefinition;
+  label: string;
+}
+
+interface ArtistIndexOverviewInfoProps {
+  height: number;
+  showMonitored: boolean;
+  showQualityProfile: boolean;
+  showLastAlbum: boolean;
+  showAdded: boolean;
+  showAlbumCount: boolean;
+  showPath: boolean;
+  showSizeOnDisk: boolean;
+  monitored: boolean;
+  nextAlbum?: Album;
+  qualityProfile?: QualityProfile;
+  lastAlbum?: Album;
+  added?: string;
+  albumCount: number;
+  path: string;
+  sizeOnDisk?: number;
+  sortKey: string;
+}
+
 const infoRowHeight = parseInt(dimensions.artistIndexOverviewInfoRowHeight);
 
 const rows = [
@@ -50,11 +86,17 @@ const rows = [
   },
 ];
 
-function getInfoRowProps(row, props, uiSettings) {
+function getInfoRowProps(
+  row: RowProps,
+  props: ArtistIndexOverviewInfoProps,
+  uiSettings: UiSettings
+): RowInfoProps | null {
   const { name } = row;
 
   if (name === 'monitored') {
-    const monitoredText = props.monitored ? 'Monitored' : 'Unmonitored';
+    const monitoredText = props.monitored
+      ? translate('Monitored')
+      : translate('Unmonitored');
 
     return {
       title: monitoredText,
@@ -63,9 +105,9 @@ function getInfoRowProps(row, props, uiSettings) {
     };
   }
 
-  if (name === 'qualityProfileId') {
+  if (name === 'qualityProfileId' && !!props.qualityProfile?.name) {
     return {
-      title: 'Quality Profile',
+      title: translate('QualityProfile'),
       iconName: icons.PROFILE,
       label: props.qualityProfile.name,
     };
@@ -78,15 +120,16 @@ function getInfoRowProps(row, props, uiSettings) {
     return {
       title: `Last Album: ${lastAlbum.title}`,
       iconName: icons.CALENDAR,
-      label: getRelativeDate(
-        lastAlbum.releaseDate,
-        shortDateFormat,
-        showRelativeDates,
-        {
-          timeFormat,
-          timeForToday: true,
-        }
-      ),
+      label:
+        getRelativeDate(
+          lastAlbum.releaseDate,
+          shortDateFormat,
+          showRelativeDates,
+          {
+            timeFormat,
+            timeForToday: true,
+          }
+        ) ?? '',
     };
   }
 
@@ -98,10 +141,11 @@ function getInfoRowProps(row, props, uiSettings) {
     return {
       title: `Added: ${formatDateTime(added, longDateFormat, timeFormat)}`,
       iconName: icons.ADD,
-      label: getRelativeDate(added, shortDateFormat, showRelativeDates, {
-        timeFormat,
-        timeForToday: true,
-      }),
+      label:
+        getRelativeDate(added, shortDateFormat, showRelativeDates, {
+          timeFormat,
+          timeForToday: true,
+        }) ?? '',
     };
   }
 
@@ -116,7 +160,7 @@ function getInfoRowProps(row, props, uiSettings) {
     }
 
     return {
-      title: 'Album Count',
+      title: translate('AlbumCount'),
       iconName: icons.CIRCLE,
       label: albums,
     };
@@ -124,7 +168,7 @@ function getInfoRowProps(row, props, uiSettings) {
 
   if (name === 'path') {
     return {
-      title: 'Path',
+      title: translate('Path'),
       iconName: icons.FOLDER,
       label: props.path,
     };
@@ -132,31 +176,13 @@ function getInfoRowProps(row, props, uiSettings) {
 
   if (name === 'sizeOnDisk') {
     return {
-      title: 'Size on Disk',
+      title: translate('SizeOnDisk'),
       iconName: icons.DRIVE,
       label: formatBytes(props.sizeOnDisk),
     };
   }
-}
 
-interface ArtistIndexOverviewInfoProps {
-  height: number;
-  showMonitored: boolean;
-  showQualityProfile: boolean;
-  showLastAlbum: boolean;
-  showAdded: boolean;
-  showAlbumCount: boolean;
-  showPath: boolean;
-  showSizeOnDisk: boolean;
-  monitored: boolean;
-  nextAlbum?: Album;
-  qualityProfile: object;
-  lastAlbum?: Album;
-  added?: string;
-  albumCount: number;
-  path: string;
-  sizeOnDisk?: number;
-  sortKey: string;
+  return null;
 }
 
 function ArtistIndexOverviewInfo(props: ArtistIndexOverviewInfoProps) {
@@ -175,6 +201,8 @@ function ArtistIndexOverviewInfo(props: ArtistIndexOverviewInfoProps) {
       const { name, showProp, valueProp } = row;
 
       const isVisible =
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore ts(7053)
         props[valueProp] != null && (props[showProp] || props.sortKey === name);
 
       return {
@@ -219,6 +247,10 @@ function ArtistIndexOverviewInfo(props: ArtistIndexOverviewInfoProps) {
 
         const infoRowProps = getInfoRowProps(row, props, uiSettings);
 
+        if (infoRowProps == null) {
+          return null;
+        }
+
         return <ArtistIndexOverviewInfoRow key={row.name} {...infoRowProps} />;
       })}
     </div>

frontend/src/Artist/Index/Overview/ArtistIndexOverviewInfoRow.tsx

@@ -1,11 +1,12 @@
+import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import React from 'react';
 import Icon from 'Components/Icon';
 import styles from './ArtistIndexOverviewInfoRow.css';
 
 interface ArtistIndexOverviewInfoRowProps {
   title?: string;
-  iconName: object;
-  label: string;
+  iconName?: IconDefinition;
+  label: string | null;
 }
 
 function ArtistIndexOverviewInfoRow(props: ArtistIndexOverviewInfoRowProps) {

frontend/src/Artist/Index/Overview/ArtistIndexOverviews.tsx

@@ -1,5 +1,5 @@
 import { throttle } from 'lodash';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
 import Artist from 'Artist/Artist';
@@ -33,11 +33,11 @@ interface RowItemData {
 
 interface ArtistIndexOverviewsProps {
   items: Artist[];
-  sortKey?: string;
+  sortKey: string;
   sortDirection?: string;
   jumpToCharacter?: string;
   scrollTop?: number;
-  scrollerRef: React.MutableRefObject<HTMLElement>;
+  scrollerRef: RefObject<HTMLElement>;
   isSelectMode: boolean;
   isSmallScreen: boolean;
 }
@@ -79,7 +79,7 @@ function ArtistIndexOverviews(props: ArtistIndexOverviewsProps) {
   const { size: posterSize, detailedProgressBar } = useSelector(
     selectOverviewOptions
   );
-  const listRef: React.MutableRefObject<List> = useRef();
+  const listRef = useRef<List>(null);
   const [measureRef, bounds] = useMeasure();
   const [size, setSize] = useState({ width: 0, height: 0 });
 
@@ -136,8 +136,8 @@ function ArtistIndexOverviews(props: ArtistIndexOverviewsProps) {
   }, [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;
@@ -146,7 +146,7 @@ function ArtistIndexOverviews(props: ArtistIndexOverviewsProps) {
           ? getWindowScrollTopPosition()
           : currentScrollerRef.scrollTop) - offsetTop;
 
-      listRef.current.scrollTo(scrollTop);
+      listRef.current?.scrollTo(scrollTop);
     }, 10);
 
     currentScrollListener.addEventListener('scroll', handleScroll);
@@ -175,8 +175,8 @@ function ArtistIndexOverviews(props: ArtistIndexOverviewsProps) {
           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/Artist/Index/Overview/Options/ArtistIndexOverviewOptionsModalContent.tsx

@@ -60,7 +60,7 @@ function ArtistIndexOverviewOptionsModalContent(
   const dispatch = useDispatch();
 
   const onOverviewOptionChange = useCallback(
-    ({ name, value }) => {
+    ({ name, value }: { name: string; value: unknown }) => {
       dispatch(setArtistOverviewOption({ [name]: value }));
     },
     [dispatch]

frontend/src/Artist/Index/Posters/ArtistIndexPoster.tsx

@@ -183,13 +183,15 @@ function ArtistIndexPoster(props: ArtistIndexPosterProps) {
       </div>
 
       <ArtistIndexProgressBar
+        artistId={artistId}
         monitored={monitored}
         status={status}
         trackCount={trackCount}
         trackFileCount={trackFileCount}
         totalTrackCount={totalTrackCount}
-        posterWidth={posterWidth}
+        width={posterWidth}
         detailedProgressBar={detailedProgressBar}
+        isStandalone={false}
       />
 
       {showTitle ? (
@@ -204,7 +206,7 @@ function ArtistIndexPoster(props: ArtistIndexPosterProps) {
         </div>
       ) : null}
 
-      {showQualityProfile ? (
+      {showQualityProfile && !!qualityProfile?.name ? (
         <div className={styles.title} title={translate('QualityProfile')}>
           {qualityProfile.name}
         </div>

frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx

@@ -1,8 +1,9 @@
 import { throttle } from 'lodash';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FixedSizeGrid as Grid, GridChildComponentProps } from 'react-window';
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import Artist from 'Artist/Artist';
 import ArtistIndexPoster from 'Artist/Index/Posters/ArtistIndexPoster';
 import useMeasure from 'Helpers/Hooks/useMeasure';
@@ -21,7 +22,7 @@ const columnPaddingSmallScreen = parseInt(
 const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
 const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
 
-const ADDITIONAL_COLUMN_COUNT = {
+const ADDITIONAL_COLUMN_COUNT: Record<string, number> = {
   small: 3,
   medium: 2,
   large: 1,
@@ -41,17 +42,17 @@ interface CellItemData {
 
 interface ArtistIndexPostersProps {
   items: Artist[];
-  sortKey?: string;
+  sortKey: string;
   sortDirection?: SortDirection;
   jumpToCharacter?: string;
   scrollTop?: number;
-  scrollerRef: React.MutableRefObject<HTMLElement>;
+  scrollerRef: RefObject<HTMLElement>;
   isSelectMode: boolean;
   isSmallScreen: boolean;
 }
 
 const artistIndexSelector = createSelector(
-  (state) => state.artistIndex.posterOptions,
+  (state: AppState) => state.artistIndex.posterOptions,
   (posterOptions) => {
     return {
       posterOptions,
@@ -108,7 +109,7 @@ export default function ArtistIndexPosters(props: ArtistIndexPostersProps) {
   } = props;
 
   const { posterOptions } = useSelector(artistIndexSelector);
-  const ref: React.MutableRefObject<Grid> = useRef();
+  const ref = useRef<Grid>(null);
   const [measureRef, bounds] = useMeasure();
   const [size, setSize] = useState({ width: 0, height: 0 });
 
@@ -201,11 +202,15 @@ export default function ArtistIndexPosters(props: ArtistIndexPostersProps) {
 
     if (isSmallScreen) {
       const padding = bodyPaddingSmallScreen - 5;
+      const width = window.innerWidth - padding * 2;
+      const height = window.innerHeight;
 
-      setSize({
-        width: window.innerWidth - padding * 2,
-        height: window.innerHeight,
-      });
+      if (width !== size.width || height !== size.height) {
+        setSize({
+          width,
+          height,
+        });
+      }
 
       return;
     }
@@ -213,17 +218,22 @@ export default function ArtistIndexPosters(props: ArtistIndexPostersProps) {
     if (current) {
       const width = current.clientWidth;
       const padding = bodyPadding - 5;
+      const finalWidth = width - padding * 2;
+
+      if (Math.abs(size.width - finalWidth) < 20 || size.width === finalWidth) {
+        return;
+      }
 
       setSize({
-        width: width - padding * 2,
+        width: finalWidth,
         height: window.innerHeight,
       });
     }
-  }, [isSmallScreen, scrollerRef, bounds]);
+  }, [isSmallScreen, size, 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;
@@ -232,7 +242,7 @@ export default function ArtistIndexPosters(props: ArtistIndexPostersProps) {
           ? getWindowScrollTopPosition()
           : currentScrollerRef.scrollTop) - offsetTop;
 
-      ref.current.scrollTo({ scrollLeft: 0, scrollTop });
+      ref.current?.scrollTo({ scrollLeft: 0, scrollTop });
     }, 10);
 
     currentScrollListener.addEventListener('scroll', handleScroll);
@@ -255,8 +265,8 @@ export default function ArtistIndexPosters(props: ArtistIndexPostersProps) {
 
         const scrollTop = rowIndex * rowHeight + padding;
 
-        ref.current.scrollTo({ scrollLeft: 0, scrollTop });
-        scrollerRef.current.scrollTo(0, scrollTop);
+        ref.current?.scrollTo({ scrollLeft: 0, scrollTop });
+        scrollerRef.current?.scrollTo(0, scrollTop);
       }
     }
   }, [

frontend/src/Artist/Index/Posters/Options/ArtistIndexPosterOptionsModalContent.tsx

@@ -59,7 +59,7 @@ function ArtistIndexPosterOptionsModalContent(
   const dispatch = useDispatch();
 
   const onPosterOptionChange = useCallback(
-    ({ name, value }) => {
+    ({ name, value }: { name: string; value: unknown }) => {
       dispatch(setArtistPosterOption({ [name]: value }));
     },
     [dispatch]

frontend/src/Artist/Index/ProgressBar/ArtistIndexProgressBar.tsx

@@ -1,4 +1,8 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+import createArtistQueueItemsDetailsSelector, {
+  ArtistQueueDetails,
+} from 'Artist/Index/createArtistQueueDetailsSelector';
 import ProgressBar from 'Components/ProgressBar';
 import { sizes } from 'Helpers/Props';
 import getProgressBarKind from 'Utilities/Artist/getProgressBarKind';
@@ -6,35 +10,51 @@ import translate from 'Utilities/String/translate';
 import styles from './ArtistIndexProgressBar.css';
 
 interface ArtistIndexProgressBarProps {
+  artistId: number;
   monitored: boolean;
   status: string;
   trackCount: number;
   trackFileCount: number;
   totalTrackCount: number;
-  posterWidth: number;
+  width: number;
   detailedProgressBar: boolean;
+  isStandalone: boolean;
 }
 
 function ArtistIndexProgressBar(props: ArtistIndexProgressBarProps) {
   const {
+    artistId,
     monitored,
     status,
     trackCount,
     trackFileCount,
     totalTrackCount,
-    posterWidth,
+    width,
     detailedProgressBar,
+    isStandalone,
   } = props;
 
+  const queueDetails: ArtistQueueDetails = useSelector(
+    createArtistQueueItemsDetailsSelector(artistId)
+  );
+
+  const newDownloads = queueDetails.count - queueDetails.tracksWithFiles;
   const progress = trackCount ? (trackFileCount / trackCount) * 100 : 100;
-  const text = `${trackFileCount} / ${trackCount}`;
+  const text = newDownloads
+    ? `${trackFileCount} + ${newDownloads} / ${trackCount}`
+    : `${trackFileCount} / ${trackCount}`;
 
   return (
     <ProgressBar
       className={styles.progressBar}
-      containerClassName={styles.progress}
+      containerClassName={isStandalone ? undefined : styles.progress}
       progress={progress}
-      kind={getProgressBarKind(status, monitored, progress)}
+      kind={getProgressBarKind(
+        status,
+        monitored,
+        progress,
+        queueDetails.count > 0
+      )}
       size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL}
       showText={detailedProgressBar}
       text={text}
@@ -42,8 +62,9 @@ function ArtistIndexProgressBar(props: ArtistIndexProgressBarProps) {
         trackFileCount,
         trackCount,
         totalTrackCount,
+        downloadingCount: queueDetails.count,
       })}
-      width={posterWidth}
+      width={width}
     />
   );
 }

frontend/src/Artist/Index/Select/AlbumStudio/AlbumDetails.tsx

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Statistics } from 'Album/Album';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import { kinds } from 'Helpers/Props';
@@ -56,8 +57,8 @@ function AlbumDetails(props: AlbumDetailsProps) {
               disambiguation,
               albumType,
               monitored,
-              statistics,
-              isSaving,
+              statistics = {} as Statistics,
+              isSaving = false,
             } = album;
 
             return (

frontend/src/Artist/Index/Select/AlbumStudio/AlbumStudioAlbum.tsx

@@ -11,7 +11,7 @@ interface AlbumStudioAlbumProps {
   artistId: number;
   albumId: number;
   title: string;
-  disambiguation: string;
+  disambiguation?: string;
   albumType: string;
   monitored: boolean;
   statistics: Statistics;

frontend/src/Artist/Index/Select/AlbumStudio/ChangeMonitoringModalContent.tsx

@@ -33,7 +33,7 @@ function ChangeMonitoringModalContent(
   const [monitor, setMonitor] = useState(NO_CHANGE);
 
   const onInputChange = useCallback(
-    ({ value }) => {
+    ({ value }: { value: string }) => {
       setMonitor(value);
     },
     [setMonitor]

frontend/src/Artist/Index/Select/ArtistIndexPosterSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { SyntheticEvent, useCallback } from 'react';
 import { useSelect } from 'App/SelectContext';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
@@ -15,8 +15,9 @@ function ArtistIndexPosterSelect(props: ArtistIndexPosterSelectProps) {
   const isSelected = selectState.selectedState[artistId];
 
   const onSelectPress = useCallback(
-    (event) => {
-      const shiftKey = event.nativeEvent.shiftKey;
+    (event: SyntheticEvent) => {
+      const nativeEvent = event.nativeEvent as PointerEvent;
+      const shiftKey = nativeEvent.shiftKey;
 
       selectDispatch({
         type: 'toggleSelected',

frontend/src/Artist/Index/Select/ArtistIndexSelectAllButton.tsx

@@ -6,7 +6,7 @@ import { icons } from 'Helpers/Props';
 interface ArtistIndexSelectAllButtonProps {
   label: string;
   isSelectMode: boolean;
-  overflowComponent: React.FunctionComponent;
+  overflowComponent: React.FunctionComponent<never>;
 }
 
 function ArtistIndexSelectAllButton(props: ArtistIndexSelectAllButtonProps) {

frontend/src/Artist/Index/Select/ArtistIndexSelectFooter.tsx

@@ -24,6 +24,14 @@ import OrganizeArtistModal from './Organize/OrganizeArtistModal';
 import TagsModal from './Tags/TagsModal';
 import styles from './ArtistIndexSelectFooter.css';
 
+interface SavePayload {
+  monitored?: boolean;
+  qualityProfileId?: number;
+  metadataProfileId?: number;
+  rootFolderPath?: string;
+  moveFiles?: boolean;
+}
+
 const artistEditorSelector = createSelector(
   (state: AppState) => state.artist,
   (artist) => {
@@ -79,7 +87,7 @@ function ArtistIndexSelectFooter() {
   }, [setIsEditModalOpen]);
 
   const onSavePress = useCallback(
-    (payload) => {
+    (payload: SavePayload) => {
       setIsSavingArtist(true);
       setIsEditModalOpen(false);
 
@@ -118,7 +126,7 @@ function ArtistIndexSelectFooter() {
   }, [setIsTagsModalOpen]);
 
   const onApplyTagsPress = useCallback(
-    (tags, applyTags) => {
+    (tags: number[], applyTags: string) => {
       setIsSavingTags(true);
       setIsTagsModalOpen(false);
 

frontend/src/Artist/Index/Select/ArtistIndexSelectModeButton.tsx

@@ -7,7 +7,7 @@ interface ArtistIndexSelectModeButtonProps {
   label: string;
   iconName: IconDefinition;
   isSelectMode: boolean;
-  overflowComponent: React.FunctionComponent;
+  overflowComponent: React.FunctionComponent<never>;
   onPress: () => void;
 }
 

frontend/src/Artist/Index/Select/AudioTags/RetagArtistModalContent.tsx

@@ -28,9 +28,15 @@ function RetagArtistModalContent(props: RetagArtistModalContentProps) {
   const dispatch = useDispatch();
 
   const artistNames = useMemo(() => {
-    const artists = artistIds.map((id) => {
-      return allArtists.find((a) => a.id === id);
-    });
+    const artists = artistIds.reduce((acc: Artist[], id) => {
+      const a = allArtists.find((a) => a.id === id);
+
+      if (a) {
+        acc.push(a);
+      }
+
+      return acc;
+    }, []);
 
     const sorted = orderBy(artists, ['sortName']);
 

frontend/src/Artist/Index/Select/Delete/DeleteArtistModalContent.tsx

@@ -15,6 +15,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
 import { bulkDeleteArtist, setDeleteOption } from 'Store/Actions/artistActions';
 import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
+import { CheckInputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
 import styles from './DeleteArtistModalContent.css';
 
@@ -37,16 +38,16 @@ function DeleteArtistModalContent(props: DeleteArtistModalContentProps) {
 
   const [deleteFiles, setDeleteFiles] = useState(false);
 
-  const artists = useMemo(() => {
-    const artists = artistIds.map((id) => {
+  const artists = useMemo((): Artist[] => {
+    const artistList = artistIds.map((id) => {
       return allArtists.find((a) => a.id === id);
-    });
+    }) as Artist[];
 
-    return orderBy(artists, ['sortName']);
+    return orderBy(artistList, ['sortName']);
   }, [artistIds, allArtists]);
 
   const onDeleteFilesChange = useCallback(
-    ({ value }) => {
+    ({ value }: CheckInputChanged) => {
       setDeleteFiles(value);
     },
     [setDeleteFiles]