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

This reverts commit c61cca7952.

.editorconfig

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

.gitattributes

@@ -3,7 +3,7 @@
 
 # Explicitly set bash scripts to have unix endings
 *.sh text eol=lf
-macOS/Radarr text eol=lf
+distribution/osx/Radarr text eol=lf
 
 # Custom for Visual Studio
 *.cs     diff=csharp

.github/ISSUE_TEMPLATE/bug_report.yml

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

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '4.5.1'
+  majorVersion: '4.7.1'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
@@ -211,8 +211,8 @@ stages:
         displayName: Fetch Frontend
       - bash: |
           ./build.sh --packages --installer
-          cp setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
-          cp setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
+          cp distribution/windows/setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
+          cp distribution/windows/setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
         displayName: Create Installers
       - publish: $(Build.ArtifactStagingDirectory)
         artifact: 'WindowsInstaller'
@@ -363,7 +363,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="Radarr@${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p radarr -p radarr-ui -p radarr-update "${RELEASENAME}"
           sentry-cli releases -p radarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"

build.sh

@@ -21,7 +21,7 @@ UpdateVersionNumber()
         echo "Updating Version Info"
         sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$RADARRVERSION<\/AssemblyVersion>/g" src/Directory.Build.props
         sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BUILD_SOURCEBRANCHNAME}<\/AssemblyConfiguration>/g" src/Directory.Build.props
-        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" macOS/Radarr.app/Contents/Info.plist
+        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" distribution/osx/Radarr.app/Contents/Info.plist
     fi
 }
 
@@ -184,7 +184,7 @@ PackageMacOSApp()
 
     rm -rf $folder
     mkdir -p $folder
-    cp -r macOS/Radarr.app $folder
+    cp -r distribution/osx/Radarr.app $folder
     mkdir -p $folder/Radarr.app/Contents/MacOS
 
     echo "Copying Binaries"
@@ -246,7 +246,7 @@ BuildInstaller()
     local framework="$1"
     local runtime="$2"
     
-    ./_inno/ISCC.exe setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
+    ./_inno/ISCC.exe distribution/windows/setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
 }
 
 InstallInno()

debian/changelog

@@ -1,5 +0,0 @@
-nzbdrone {version} {branch}; urgency=low
-
-  * Automatic Release.
-
- -- NzbDrone <contact@nzbdrone.com>  Mon, 26 Aug 2013 00:00:00 -0700

debian/compat

@@ -1 +0,0 @@
-8

debian/control

@@ -1,12 +0,0 @@
-Section: web
-Priority: optional
-Maintainer: Sonarr <contact@nzbdrone.com>
-Source: nzbdrone
-Homepage: https://sonarr.tv
-Vcs-Git: git@github.com:Sonarr/Sonarr.git
-Vcs-Browser: https://github.com/Sonarr/Sonarr
-
-Package: nzbdrone
-Architecture: all
-Depends: libmono-cil-dev (>= 3.2), sqlite3 (>= 3.7), mediainfo (>= 0.7.52)
-Description: Sonarr is an internet PVR

debian/copyright

@@ -1,24 +0,0 @@
-Format: http://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
-Upstream-Name: nzbdrone
-Source: https://github.com/Sonarr/Sonarr
-
-Files: *
-Copyright: 2010-2016 Sonarr <hello@sonarr.tv>
-
-License: GPL-3.0+
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
- .
- This package is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- GNU General Public License for more details.
- .
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
- .
- On Debian systems, the complete text of the GNU General
- Public License version 3 can be found in "/usr/share/common-licenses/GPL-3".

debian/install

@@ -1 +0,0 @@
-nzbdrone_bin/* opt/NzbDrone

debian/rules

@@ -1,13 +0,0 @@
-#!/usr/bin/make -f
-# -*- makefile -*-
-# Sample debian/rules that uses debhelper.
-# This file was originally written by Joey Hess and Craig Small.
-# As a special exception, when this file is copied by dh-make into a
-# dh-make output file, you may use that output file without restriction.
-# This special exception was added by Craig Small in version 0.37 of dh-make.
-
-# Uncomment this to turn on verbose mode.
-#export DH_VERBOSE=1
-
-%:
-	dh $@ 

distribution/windows/setup/radarr.iss

@@ -52,8 +52,8 @@ Name: "none"; Description: "Do not start automatically"; GroupDescription: "Star
 Name: "{app}"; Permissions: users-modify
 
 [Files]
-Source: "..\_artifacts\{#Runtime}\{#Framework}\Radarr\Radarr.exe"; DestDir: "{app}\bin"; Flags: ignoreversion
-Source: "..\_artifacts\{#Runtime}\{#Framework}\Radarr\*"; Excludes: "Radarr.Update"; DestDir: "{app}\bin"; Flags: ignoreversion recursesubdirs createallsubdirs
+Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Radarr\Radarr.exe"; DestDir: "{app}\bin"; Flags: ignoreversion
+Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Radarr\*"; Excludes: "Radarr.Update"; DestDir: "{app}\bin"; Flags: ignoreversion recursesubdirs createallsubdirs
 ; NOTE: Don't use "Flags: ignoreversion" on any shared system files
 
 [Icons]

frontend/src/Activity/Blocklist/Blocklist.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
@@ -156,16 +157,16 @@ class Blocklist extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadBlocklist')}
-              </div>
+              </Alert>
           }
 
           {
             isPopulated && !error && !items.length &&
-              <div>
-                {translate('NoHistory')}
-              </div>
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistoryBlocklist')}
+              </Alert>
           }
 
           {
@@ -209,7 +210,7 @@ class Blocklist extends Component {
           isOpen={isConfirmRemoveModalOpen}
           kind={kinds.DANGER}
           title={translate('RemoveSelected')}
-          message={translate('AreYouSureYouWantToRemoveTheSelectedItemsFromBlocklist')}
+          message={translate('RemoveSelectedItemBlocklistMessageText')}
           confirmLabel={translate('RemoveSelected')}
           onConfirm={this.onRemoveSelectedConfirmed}
           onCancel={this.onConfirmRemoveModalClose}

frontend/src/Activity/History/History.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
@@ -11,7 +12,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
 
@@ -83,9 +84,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -93,9 +94,9 @@ class History extends Component {
             // wait for the episodes to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoHistory')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Activity/History/HistoryRow.js

@@ -4,12 +4,13 @@ import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, tooltipPositions } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
+import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
 import styles from './HistoryRow.css';
@@ -176,7 +177,14 @@ class HistoryRow extends Component {
                   key={name}
                   className={styles.customFormatScore}
                 >
-                  {formatCustomFormatScore(customFormatScore)}
+                  <Tooltip
+                    anchor={formatPreferredWordScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
                 </TableRowCell>
               );
             }
@@ -257,4 +265,8 @@ HistoryRow.propTypes = {
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 
+HistoryRow.defaultProps = {
+  customFormats: []
+};
+
 export default HistoryRow;

frontend/src/Activity/Queue/Queue.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -12,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
@@ -231,17 +232,17 @@ class Queue extends Component {
 
           {
             !isRefreshing && hasError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('FailedToLoadQueue')}
-              </div> :
+              </Alert> :
               null
           }
 
           {
             isAllPopulated && !hasError && !items.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('QueueIsEmpty')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/Activity/Queue/QueueRow.css

@@ -16,6 +16,12 @@
   width: 150px;
 }
 
+.customFormatScore {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 55px;
+}
+
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

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

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
+  'customFormatScore': string;
   'progress': string;
   'protocol': string;
   'quality': string;

frontend/src/Activity/Queue/QueueRow.js

@@ -8,13 +8,15 @@ import ProgressBar from 'Components/ProgressBar';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import formatBytes from 'Utilities/Number/formatBytes';
+import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import translate from 'Utilities/String/translate';
 import QueueStatusCell from './QueueStatusCell';
 import RemoveQueueItemModal from './RemoveQueueItemModal';
@@ -88,6 +90,7 @@ class QueueRow extends Component {
       movie,
       quality,
       customFormats,
+      customFormatScore,
       languages,
       protocol,
       indexer,
@@ -201,6 +204,24 @@ class QueueRow extends Component {
               );
             }
 
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatPreferredWordScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
+                </TableRowCell>
+              );
+            }
+
             if (name === 'protocol') {
               return (
                 <TableRowCell key={name}>
@@ -365,6 +386,7 @@ QueueRow.propTypes = {
   movie: PropTypes.object,
   quality: PropTypes.object.isRequired,
   customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,
@@ -390,6 +412,7 @@ QueueRow.propTypes = {
 };
 
 QueueRow.defaultProps = {
+  customFormats: [],
   isGrabbing: false,
   isRemoving: false
 };

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -88,7 +88,7 @@ class RemoveQueueItemsModal extends Component {
 
           <ModalBody>
             <div className={styles.message}>
-              {selectedCount > 1 ? translate('AreYouSureYouWantToRemoveSelectedItemsFromQueue', selectedCount) : translate('AreYouSureYouWantToRemoveSelectedItemFromQueue')}
+              {selectedCount > 1 ? translate('RemoveSelectedItemsQueueMessageText', selectedCount) : translate('RemoveSelectedItemQueueMessageText')}
             </div>
 
             {
@@ -133,7 +133,7 @@ class RemoveQueueItemsModal extends Component {
               kind={kinds.DANGER}
               onPress={this.onRemoveConfirmed}
             >
-              Remove
+              {translate('Remove')}
             </Button>
           </ModalFooter>
         </ModalContent>

frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js

@@ -1,9 +1,11 @@
 import { reduce } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
@@ -105,9 +107,9 @@ class ImportMovie extends Component {
 
           {
             !rootFoldersFetching && !!rootFoldersError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
               null
           }
 
@@ -116,9 +118,9 @@ class ImportMovie extends Component {
             !rootFoldersFetching &&
             rootFoldersPopulated &&
             !unmappedFolders.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('AllMoviesInPathHaveBeenImported', [path])}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -92,9 +92,9 @@ class ImportMovieSelectFolder extends Component {
 
           {
             !isFetching && error ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/App/State/SettingsAppState.ts

@@ -1,14 +1,33 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionSaveState,
   AppSectionSchemaState,
 } from 'App/State/AppSectionState';
 import Language from 'Language/Language';
 import DownloadClient from 'typings/DownloadClient';
+import ImportList from 'typings/ImportList';
+import Indexer from 'typings/Indexer';
+import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
 import { UiSettings } from 'typings/UiSettings';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface ImportListAppState
+  extends AppSectionState<ImportList>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface IndexerAppState
+  extends AppSectionState<Indexer>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface NotificationAppState
+  extends AppSectionState<Notification>,
     AppSectionDeleteState {}
 
 export interface QualityProfilesAppState
@@ -20,6 +39,9 @@ export type UiSettingsAppState = AppSectionState<UiSettings>;
 
 interface SettingsAppState {
   downloadClients: DownloadClientAppState;
+  importLists: ImportListAppState;
+  indexers: IndexerAppState;
+  notifications: NotificationAppState;
   language: LanguageSettingsAppState;
   uiSettings: UiSettingsAppState;
   qualityProfiles: QualityProfilesAppState;

frontend/src/Calendar/Calendar.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
@@ -31,9 +33,9 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadTheCalendar')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Collection/AddNewCollectionMovieModalContentConnector.js

@@ -28,7 +28,7 @@ function createMapStateToProps() {
         qualityProfileId: collection.qualityProfileId,
         minimumAvailability: collection.minimumAvailability,
         searchForMovie: collection.searchOnAdd,
-        tags: []
+        tags: collection.tags || []
       };
 
       const {

frontend/src/Collection/Collection.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -9,7 +10,7 @@ import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -313,9 +314,9 @@ class Collection extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadCollections')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/Collection/CollectionItemConnector.js

@@ -2,17 +2,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import createCollectionSelector from 'Store/Selectors/createCollectionSelector';
 
 function createMapStateToProps() {
   return createSelector(
     createCollectionSelector(),
-    createAllMoviesSelector(),
-    (
-      collection,
-      allMovies
-    ) => {
+    (collection) => {
       // If a movie is deleted this selector may fire before the parent
       // selecors, which will result in an undefined movie, if that happens
       // we want to return early here and again in the render function to avoid
@@ -22,21 +17,11 @@ function createMapStateToProps() {
         return {};
       }
 
-      let allGenres = [];
-      let libraryMovies = 0;
-
-      collection.movies.forEach((movie) => {
-        allGenres = allGenres.concat(movie.genres);
-
-        if (allMovies.find((libraryMovie) => libraryMovie.tmdbId === movie.tmdbId)) {
-          libraryMovies++;
-        }
-      });
+      const allGenres = collection.movies.flatMap((movie) => movie.genres);
 
       return {
         ...collection,
-        genres: Array.from(new Set(allGenres)).slice(0, 3),
-        missingMovies: collection.movies.length - libraryMovies
+        genres: Array.from(new Set(allGenres)).slice(0, 3)
       };
     }
   );

frontend/src/Collection/Edit/EditCollectionModalContent.js

@@ -50,6 +50,7 @@ class EditCollectionModalContent extends Component {
       minimumAvailability,
       // Id,
       rootFolderPath,
+      tags,
       searchOnAdd
     } = item;
 
@@ -126,6 +127,17 @@ class EditCollectionModalContent extends Component {
                   />
                 </FormGroup>
 
+                <FormGroup>
+                  <FormLabel>{translate('Tags')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="tags"
+                    onChange={onInputChange}
+                    {...tags}
+                  />
+                </FormGroup>
+
                 <FormGroup>
                   <FormLabel>{translate('SearchOnAdd')}</FormLabel>
 

frontend/src/Collection/Edit/EditCollectionModalContentConnector.js

@@ -42,6 +42,7 @@ function createMapStateToProps() {
         qualityProfileId: collection.qualityProfileId,
         minimumAvailability: collection.minimumAvailability,
         rootFolderPath: collection.rootFolderPath,
+        tags: collection.tags,
         searchOnAdd: collection.searchOnAdd
       };
 

frontend/src/Collection/Menus/CollectionSortMenu.js

@@ -28,6 +28,14 @@ function CollectionSortMenu(props) {
         >
           {translate('Title')}
         </SortMenuItem>
+        <SortMenuItem
+          name="missingMovies"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Missing')}
+        </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );

frontend/src/Collection/Overview/CollectionMovie.css

@@ -102,7 +102,7 @@ $hoverScale: 1.05;
 
   position: relative;
   display: block;
-  background-color: var(--defaultColor);
+  background-color: var(--black);
 }
 
 .monitorToggleButton {

frontend/src/Components/Form/EnhancedSelectInput.js

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

frontend/src/Components/Form/FormInputGroup.js

@@ -265,6 +265,8 @@ FormInputGroup.propTypes = {
   values: PropTypes.arrayOf(PropTypes.any),
   type: PropTypes.string.isRequired,
   kind: PropTypes.oneOf(kinds.all),
+  min: PropTypes.number,
+  max: PropTypes.number,
   unit: PropTypes.string,
   buttons: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   helpText: PropTypes.string,

frontend/src/Components/Form/NumberInput.js

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

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -63,6 +63,7 @@ function ProviderFieldFormGroup(props) {
     name,
     label,
     helpText,
+    helpTextWarning,
     helpLink,
     placeholder,
     value,
@@ -96,6 +97,7 @@ function ProviderFieldFormGroup(props) {
         name={name}
         label={label}
         helpText={helpText}
+        helpTextWarning={helpTextWarning}
         helpLink={helpLink}
         placeholder={placeholder}
         value={value}
@@ -122,6 +124,7 @@ ProviderFieldFormGroup.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   helpText: PropTypes.string,
+  helpTextWarning: PropTypes.string,
   helpLink: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.any,

frontend/src/Components/Loading/LoadingMessage.js

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

frontend/src/Components/Page/Header/MovieSearchInputConnector.js

@@ -19,6 +19,8 @@ function createCleanMovieSelector() {
           year,
           images,
           alternateTitles = [],
+          tmdbId,
+          imdbId,
           tags = []
         } = movie;
 
@@ -29,6 +31,8 @@ function createCleanMovieSelector() {
           year,
           images,
           alternateTitles,
+          tmdbId,
+          imdbId,
           firstCharacter: title.charAt(0).toLowerCase(),
           tags: tags.reduce((acc, id) => {
             const matchingTag = allTags.find((tag) => tag.id === id);

frontend/src/Components/Page/Header/MovieSearchResult.js

@@ -12,6 +12,8 @@ function MovieSearchResult(props) {
     year,
     images,
     alternateTitles,
+    tmdbId,
+    imdbId,
     tags
   } = props;
 
@@ -47,6 +49,22 @@ function MovieSearchResult(props) {
             null
         }
 
+        {
+          match.key === 'tmdbId' && tmdbId ?
+            <div className={styles.alternateTitle}>
+              TmdbId: {tmdbId}
+            </div> :
+            null
+        }
+
+        {
+          match.key === 'imdbId' && imdbId ?
+            <div className={styles.alternateTitle}>
+              ImdbId: {imdbId}
+            </div> :
+            null
+        }
+
         {
           tag ?
             <div className={styles.tagContainer}>
@@ -69,6 +87,8 @@ MovieSearchResult.propTypes = {
   year: PropTypes.number.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tmdbId: PropTypes.number,
+  imdbId: PropTypes.string,
   tags: PropTypes.arrayOf(PropTypes.object).isRequired,
   match: PropTypes.object.isRequired
 };

frontend/src/Components/Page/Header/fuse.worker.js

@@ -9,6 +9,8 @@ const fuseOptions = {
   keys: [
     'title',
     'alternateTitles.title',
+    'tmdbId',
+    'imdbId',
     'tags.label'
   ]
 };

frontend/src/Components/Page/PageSectionContent.js

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

frontend/src/Components/ProgressBar.css

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

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

@@ -5,6 +5,7 @@ interface CssExports {
   'backTextContainer': string;
   'container': string;
   'danger': string;
+  'default': string;
   'frontText': string;
   'frontTextContainer': string;
   'info': string;

frontend/src/Components/ProgressBar.js

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

frontend/src/Components/Table/VirtualTableRowButton.css

@@ -0,0 +1,4 @@
+.row {
+  composes: link from '~Components/Link/Link.css';
+  composes: row from '~./VirtualTableRow.css';
+}

frontend/src/Components/Table/VirtualTableRowButton.css.d.ts

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

frontend/src/Components/Table/VirtualTableRowButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'Components/Link/Link';
+import VirtualTableRow from './VirtualTableRow';
+import styles from './VirtualTableRowButton.css';
+
+function VirtualTableRowButton(props) {
+  return (
+    <Link
+      className={styles.row}
+      component={VirtualTableRow}
+      {...props}
+    />
+  );
+}
+
+export default VirtualTableRowButton;

frontend/src/Components/TagList.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
@@ -6,16 +5,15 @@ import Label from './Label';
 import styles from './TagList.css';
 
 function TagList({ tags, tagList }) {
+  const sortedTags = tags
+    .map((tagId) => tagList.find((tag) => tag.id === tagId))
+    .filter((tag) => !!tag)
+    .sort((a, b) => a.label.localeCompare(b.label));
+
   return (
     <div className={styles.tags}>
       {
-        tags.map((t) => {
-          const tag = _.find(tagList, { id: t });
-
-          if (!tag) {
-            return null;
-          }
-
+        sortedTags.map((tag) => {
           return (
             <Label
               key={tag.id}

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

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

frontend/src/DiscoverMovie/DiscoverMovie.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -10,7 +11,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -369,9 +370,9 @@ class DiscoverMovie extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadMovies')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css

@@ -39,6 +39,12 @@
   flex: 0 0 90px;
 }
 
+.popularity {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 100px;
+}
+
 .lists {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'lists': string;
   'originalLanguage': string;
   'physicalRelease': string;
+  'popularity': string;
   'ratings': string;
   'runtime': string;
   'sortTitle': string;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css

@@ -64,6 +64,12 @@
   flex: 0 0 90px;
 }
 
+.popularity {
+  composes: cell;
+
+  flex: 0 0 100px;
+}
+
 .lists {
   composes: cell;
 

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css.d.ts

@@ -16,6 +16,7 @@ interface CssExports {
   'lists': string;
   'originalLanguage': string;
   'physicalRelease': string;
+  'popularity': string;
   'ratings': string;
   'runtime': string;
   'sortTitle': string;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js

@@ -13,6 +13,7 @@ import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
 import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
 import { icons } from 'Helpers/Props';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
+import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import translate from 'Utilities/String/translate';
 import ListMovieStatusCell from './ListMovieStatusCell';
@@ -73,6 +74,7 @@ class DiscoverMovieRow extends Component {
       images,
       genres,
       ratings,
+      popularity,
       certification,
       collection,
       columns,
@@ -261,6 +263,14 @@ class DiscoverMovieRow extends Component {
               );
             }
 
+            if (name === 'popularity') {
+              return (
+                <VirtualTableRowCell key={name} className={styles[name]}>
+                  <MoviePopularityIndex popularity={popularity} />
+                </VirtualTableRowCell>
+              );
+            }
+
             if (name === 'certification') {
               return (
                 <VirtualTableRowCell
@@ -384,6 +394,7 @@ DiscoverMovieRow.propTypes = {
   runtime: PropTypes.number,
   genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   ratings: PropTypes.object.isRequired,
+  popularity: PropTypes.number.isRequired,
   certification: PropTypes.string,
   collection: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Helpers/Props/icons.js

@@ -61,6 +61,7 @@ import {
   faFileInvoice as farFileInvoice,
   faFilm as fasFilm,
   faFilter as fasFilter,
+  faFire as fasFire,
   faFlag as fasFlag,
   faFolderOpen as fasFolderOpen,
   faForward as fasForward,
@@ -71,6 +72,7 @@ import {
   faLanguage as fasLanguage,
   faLaptop as fasLaptop,
   faLevelUpAlt as fasLevelUpAlt,
+  faListCheck as fasListCheck,
   faMedkit as fasMedkit,
   faMinus as fasMinus,
   faPause as fasPause,
@@ -172,6 +174,7 @@ export const INFO = fasInfoCircle;
 export const INTERACTIVE = fasUser;
 export const KEYBOARD = farKeyboard;
 export const LOGOUT = fasSignOutAlt;
+export const MANAGE = fasListCheck;
 export const MEDIA_INFO = farFileInvoice;
 export const MISSING = fasExclamationTriangle;
 export const MONITORED = fasBookmark;
@@ -190,6 +193,7 @@ export const PAUSED = fasPause;
 export const PENDING = farClock;
 export const PLAY = fasPlay;
 export const PROFILE = fasUser;
+export const POPULAR = fasFire;
 export const POSTER = fasTh;
 export const QUEUED = fasCloud;
 export const QUICK = fasRocket;

frontend/src/InteractiveImport/Language/SelectLanguageModalContent.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { LanguageSettingsAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -86,7 +87,9 @@ function SelectLanguageModalContent(props: SelectLanguageModalContentProps) {
         {isFetching ? <LoadingIndicator /> : null}
 
         {!isFetching && error ? (
-          <div>{translate('UnableToLoadLanguages')}</div>
+          <Alert kind={kinds.DANGER}>
+            {translate('UnableToLoadLanguages')}
+          </Alert>
         ) : null}
 
         {isPopulated && !error ? (

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx

@@ -15,13 +15,40 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Scroller from 'Components/Scroller/Scroller';
+import Column from 'Components/Table/Column';
+import VirtualTableRowButton from 'Components/Table/VirtualTableRowButton';
 import { scrollDirections } from 'Helpers/Props';
 import Movie from 'Movie/Movie';
 import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import dimensions from 'Styles/Variables/dimensions';
+import translate from 'Utilities/String/translate';
+import SelectMovieModalTableHeader from './SelectMovieModalTableHeader';
 import SelectMovieRow from './SelectMovieRow';
 import styles from './SelectMovieModalContent.css';
 
+const columns = [
+  {
+    name: 'title',
+    label: translate('Title'),
+    isVisible: true,
+  },
+  {
+    name: 'year',
+    label: translate('Year'),
+    isVisible: true,
+  },
+  {
+    name: 'imdbId',
+    label: translate('ImdbId'),
+    isVisible: true,
+  },
+  {
+    name: 'tmdbId',
+    label: translate('TmdbId'),
+    isVisible: true,
+  },
+];
+
 const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
 
 interface SelectMovieModalContentProps {
@@ -32,6 +59,7 @@ interface SelectMovieModalContentProps {
 
 interface RowItemData {
   items: Movie[];
+  columns: Column[];
   onMovieSelect(movieId: number): void;
 }
 
@@ -40,7 +68,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
   style,
   data,
 }) => {
-  const { items, onMovieSelect } = data;
+  const { items, columns, onMovieSelect } = data;
 
   if (index >= items.length) {
     return null;
@@ -49,20 +77,24 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
   const movie = items[index];
 
   return (
-    <div
+    <VirtualTableRowButton
       style={{
         display: 'flex',
         justifyContent: 'space-between',
         ...style,
       }}
+      onPress={() => onMovieSelect(movie.id)}
     >
       <SelectMovieRow
         id={movie.id}
         title={movie.title}
+        tmdbId={movie.tmdbId}
+        imdbId={movie.imdbId}
         year={movie.year}
+        columns={columns}
         onMovieSelect={onMovieSelect}
       />
-    </div>
+    </VirtualTableRowButton>
   );
 };
 
@@ -161,6 +193,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
           autoFocus={false}
           ref={scrollerRef}
         >
+          <SelectMovieModalTableHeader columns={columns} />
           <List<RowItemData>
             ref={listRef}
             style={{
@@ -174,6 +207,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
             itemSize={38}
             itemData={{
               items,
+              columns,
               onMovieSelect: onMovieSelectWrapper,
             }}
           >

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css

@@ -0,0 +1,18 @@
+.title {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 4 0 140px;
+}
+
+.year {
+  composes: headerCell  from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 70px;
+}
+
+.imdbId,
+.tmdbId {
+  composes: headerCell  from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 110px;
+}

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css.d.ts

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

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Column from 'Components/Table/Column';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import styles from './SelectMovieModalTableHeader.css';
+
+interface SelectMovieModalTableHeaderProps {
+  columns: Column[];
+}
+
+function SelectMovieModalTableHeader(props: SelectMovieModalTableHeaderProps) {
+  const { columns } = props;
+
+  return (
+    <VirtualTableHeader>
+      {columns.map((column) => {
+        const { name, label, isVisible } = column;
+
+        if (!isVisible) {
+          return null;
+        }
+
+        return (
+          <VirtualTableHeaderCell
+            key={name}
+            className={
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              styles[name]
+            }
+            name={name}
+          >
+            {label}
+          </VirtualTableHeaderCell>
+        );
+      })}
+    </VirtualTableHeader>
+  );
+}
+
+export default SelectMovieModalTableHeader;

frontend/src/InteractiveImport/Movie/SelectMovieRow.css

@@ -1,5 +1,25 @@
-.movie {
-  padding: 8px;
-  width: 100%;
-  border-bottom: 1px solid var(--borderColor);
+.cell {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  composes: cell;
+
+  flex: 4 0 140px;
+}
+
+.year {
+  composes: cell;
+
+  flex: 0 0 70px;
+}
+
+.tmdbId,
+.imdbId {
+  composes: cell;
+
+  flex: 0 0 110px;
 }

frontend/src/InteractiveImport/Movie/SelectMovieRow.css.d.ts

@@ -1,7 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'movie': string;
+  'cell': string;
+  'imdbId': string;
+  'title': string;
+  'tmdbId': string;
+  'year': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/InteractiveImport/Movie/SelectMovieRow.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Link from 'Components/Link/Link';
+import Label from 'Components/Label';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import styles from './SelectMovieRow.css';
 
 class SelectMovieRow extends Component {
@@ -17,13 +18,23 @@ class SelectMovieRow extends Component {
 
   render() {
     return (
-      <Link
-        className={styles.movie}
-        component="div"
-        onPress={this.onPress}
-      >
-        {this.props.title} ({this.props.year})
-      </Link>
+      <>
+        <VirtualTableRowCell className={styles.title}>
+          {this.props.title}
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.year}>
+          {this.props.year}
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.imdbId}>
+          <Label>{this.props.imdbId}</Label>
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.tmdbId}>
+          <Label>{this.props.tmdbId}</Label>
+        </VirtualTableRowCell>
+      </>
     );
   }
 }
@@ -31,6 +42,8 @@ class SelectMovieRow extends Component {
 SelectMovieRow.propTypes = {
   id: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
+  tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   onMovieSelect: PropTypes.func.isRequired
 };

frontend/src/InteractiveImport/Quality/SelectQualityModalContent.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Error } from 'App/State/AppSectionState';
 import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -130,7 +131,9 @@ function SelectQualityModalContent(props: SelectQualityModalContentProps) {
         {isFetching && <LoadingIndicator />}
 
         {!isFetching && error ? (
-          <div>{translate('UnableToLoadQualities')}</div>
+          <Alert kind={kinds.DANGER}>
+            {translate('UnableToLoadQualities')}
+          </Alert>
         ) : null}
 
         {isPopulated && !error ? (

frontend/src/Movie/Delete/DeleteMovieModalContentConnector.js

@@ -31,6 +31,7 @@ function createMapDispatchToProps(dispatch, props) {
       dispatch(
         deleteMovie({
           id: props.movieId,
+          collectionTmdbId: this.collection?.tmdbId,
           deleteFiles,
           addImportExclusion
         })

frontend/src/Movie/Details/MovieDetails.js

@@ -303,6 +303,7 @@ class MovieDetails extends Component {
       selectedTabIndex
     } = this.state;
 
+    const fanartUrl = getFanartUrl(images);
     const marqueeWidth = isSmallScreen ? titleWidth : (titleWidth - 150);
 
     return (
@@ -361,9 +362,11 @@ class MovieDetails extends Component {
           <div className={styles.header}>
             <div
               className={styles.backdrop}
-              style={{
-                backgroundImage: `url(${getFanartUrl(images)})`
-              }}
+              style={
+                fanartUrl ?
+                  { backgroundImage: `url(${fanartUrl})` } :
+                  null
+              }
             >
               <div className={styles.backdropOverlay} />
             </div>

frontend/src/Movie/Details/MovieTagsConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createMovieSelector from 'Store/Selectors/createMovieSelector';
@@ -10,15 +9,11 @@ function createMapStateToProps() {
     createMovieSelector(),
     createTagsSelector(),
     (movie, tagList) => {
-      const tags = _.reduce(movie.tags, (acc, tag) => {
-        const matchingTag = _.find(tagList, { id: tag });
-
-        if (matchingTag) {
-          acc.push(matchingTag.label);
-        }
-
-        return acc;
-      }, []);
+      const tags = movie.tags
+        .map((tagId) => tagList.find((tag) => tag.id === tagId))
+        .filter((tag) => !!tag)
+        .map((tag) => tag.label)
+        .sort((a, b) => a.localeCompare(b));
 
       return {
         tags

frontend/src/Movie/History/MovieHistoryTable.css

@@ -0,0 +1,10 @@
+.container {
+  margin-top: 20px;
+  border: 1px solid var(--borderColor);
+  border-radius: 4px;
+  background-color: var(--inputBackgroundColor);
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}

frontend/src/Movie/History/MovieHistoryTable.css.d.ts

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

frontend/src/Movie/History/MovieHistoryTable.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import MovieHistoryTableContentConnector from './MovieHistoryTableContentConnector';
+import styles from './MovieHistoryTable.css';
 
 function MovieHistoryTable(props) {
   const {
@@ -7,9 +8,11 @@ function MovieHistoryTable(props) {
   } = props;
 
   return (
-    <MovieHistoryTableContentConnector
-      {...otherProps}
-    />
+    <div className={styles.container}>
+      <MovieHistoryTableContentConnector
+        {...otherProps}
+      />
+    </div>
   );
 }
 

frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx

@@ -118,6 +118,15 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
           {translate('TmdbRating')}
         </SortMenuItem>
 
+        <SortMenuItem
+          name="popularity"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Popularity')}
+        </SortMenuItem>
+
         <SortMenuItem
           name="path"
           sortKey={sortKey}

frontend/src/Movie/Index/MovieIndex.tsx

@@ -10,6 +10,7 @@ import { SelectProvider } from 'App/SelectContext';
 import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
 import MoviesAppState, { MovieIndexAppState } from 'App/State/MoviesAppState';
 import { RSS_SYNC } from 'Commands/commandNames';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -20,12 +21,11 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import withScrollPosition from 'Components/withScrollPosition';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import SortDirection from 'Helpers/Props/SortDirection';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import NoMovie from 'Movie/NoMovie';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchMovies } from 'Store/Actions/movieActions';
 import {
   setMovieFilter,
   setMovieSort,
@@ -105,7 +105,6 @@ const MovieIndex = withScrollPosition((props: MovieIndexProps) => {
   const [isSelectMode, setIsSelectMode] = useState(false);
 
   useEffect(() => {
-    dispatch(fetchMovies());
     dispatch(fetchQueueDetails({ all: true }));
   }, [dispatch]);
 
@@ -339,7 +338,9 @@ const MovieIndex = withScrollPosition((props: MovieIndexProps) => {
             {isFetching && !isPopulated ? <LoadingIndicator /> : null}
 
             {!isFetching && !!error ? (
-              <div>{translate('UnableToLoadMovies')}</div>
+              <Alert kind={kinds.DANGER}>
+                {translate('UnableToLoadMovies')}
+              </Alert>
             ) : null}
 
             {isLoaded ? (

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -71,6 +71,9 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
     isAvailable,
     tmdbId,
     imdbId,
+    studio,
+    sizeOnDisk,
+    added,
     youTubeTrailerId,
   } = movie;
 
@@ -219,6 +222,9 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
               height={overviewHeight}
               monitored={monitored}
               qualityProfile={qualityProfile}
+              studio={studio}
+              sizeOnDisk={sizeOnDisk}
+              added={added}
               path={path}
               sortKey={sortKey}
               {...overviewOptions}

frontend/src/Movie/Index/Overview/MovieIndexOverviewInfo.tsx

@@ -56,7 +56,7 @@ const rows = [
   {
     name: 'qualityProfileId',
     showProp: 'showQualityProfile',
-    valueProp: 'qualityProfileId',
+    valueProp: 'qualityProfile',
   },
   {
     name: 'added',

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -16,6 +16,7 @@ import MovieIndexPosterSelect from 'Movie/Index/Select/MovieIndexPosterSelect';
 import MoviePoster from 'Movie/MoviePoster';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import translate from 'Utilities/String/translate';
 import createMovieIndexItemSelector from '../createMovieIndexItemSelector';
 import MovieIndexPosterInfo from './MovieIndexPosterInfo';
@@ -41,13 +42,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     showTitle,
     showMonitored,
     showQualityProfile,
+    showCinemaRelease,
     showReleaseDate,
     showSearchAction,
   } = useSelector(selectPosterOptions);
 
-  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
+  const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+    useSelector(createUISettingsSelector());
 
   const {
     title,
@@ -59,12 +60,19 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     youTubeTrailerId,
     hasFile,
     isAvailable,
+    studio,
+    added,
+    year,
     inCinemas,
     physicalRelease,
     digitalRelease,
     path,
     movieFile,
+    ratings,
+    sizeOnDisk,
     certification,
+    originalTitle,
+    originalLanguage,
   } = movie;
 
   const dispatch = useDispatch();
@@ -122,9 +130,23 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     height: `${posterHeight}px`,
   };
 
+  let releaseDate = '';
+  let releaseDateType = '';
+  if (physicalRelease && digitalRelease) {
+    releaseDate =
+      physicalRelease < digitalRelease ? physicalRelease : digitalRelease;
+    releaseDateType = physicalRelease < digitalRelease ? 'Released' : 'Digital';
+  } else if (physicalRelease && !digitalRelease) {
+    releaseDate = physicalRelease;
+    releaseDateType = 'Released';
+  } else if (digitalRelease && !physicalRelease) {
+    releaseDate = digitalRelease;
+    releaseDateType = 'Digital';
+  }
+
   return (
     <div className={styles.content}>
-      <div className={styles.posterContainer}>
+      <div className={styles.posterContainer} title={title}>
         {isSelectMode ? <MovieIndexPosterSelect movieId={movieId} /> : null}
 
         <Label className={styles.controls}>
@@ -195,31 +217,68 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         bottomRadius={false}
       />
 
-      {showTitle ? <div className={styles.title}>{title}</div> : null}
+      {showTitle ? (
+        <div className={styles.title} title={title}>
+          {title}
+        </div>
+      ) : null}
 
       {showMonitored ? (
         <div className={styles.title}>
-          {monitored ? translate('monitored') : translate('unmonitored')}
+          {monitored ? translate('Monitored') : translate('Unmonitored')}
         </div>
       ) : null}
 
       {showQualityProfile ? (
-        <div className={styles.title}>{qualityProfile.name}</div>
+        <div className={styles.title} title={translate('QualityProfile')}>
+          {qualityProfile.name}
+        </div>
+      ) : null}
+
+      {showCinemaRelease && inCinemas ? (
+        <div className={styles.title} title={translate('InCinemas')}>
+          <Icon name={icons.IN_CINEMAS} />{' '}
+          {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, {
+            timeFormat,
+            timeForToday: false,
+          })}
+        </div>
+      ) : null}
+
+      {showReleaseDate && releaseDate ? (
+        <div className={styles.title}>
+          <Icon
+            name={releaseDateType === 'Digital' ? icons.MOVIE_FILE : icons.DISC}
+          />{' '}
+          {getRelativeDate(releaseDate, shortDateFormat, showRelativeDates, {
+            timeFormat,
+            timeForToday: false,
+          })}
+        </div>
       ) : null}
 
       <MovieIndexPosterInfo
+        studio={studio}
         qualityProfile={qualityProfile}
+        added={added}
+        year={year}
         showQualityProfile={showQualityProfile}
+        showCinemaRelease={showCinemaRelease}
         showReleaseDate={showReleaseDate}
         showRelativeDates={showRelativeDates}
         shortDateFormat={shortDateFormat}
+        longDateFormat={longDateFormat}
         timeFormat={timeFormat}
         inCinemas={inCinemas}
         physicalRelease={physicalRelease}
         digitalRelease={digitalRelease}
+        ratings={ratings}
+        sizeOnDisk={sizeOnDisk}
         sortKey={sortKey}
         path={path}
         certification={certification}
+        originalTitle={originalTitle}
+        originalLanguage={originalLanguage}
       />
 
       <EditMovieModalConnector

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css

@@ -3,3 +3,9 @@
   text-align: center;
   font-size: $smallFontSize;
 }
+
+.title {
+  @add-mixin truncate;
+
+  composes: info;
+}

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'info': string;
+  'title': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import Icon from 'Components/Icon';
+import ImdbRating from 'Components/ImdbRating';
+import TmdbRating from 'Components/TmdbRating';
 import { icons } from 'Helpers/Props';
+import { Language, Ratings } from 'Movie/Movie';
+import QualityProfile from 'typings/QualityProfile';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
@@ -9,19 +14,24 @@ import styles from './MovieIndexPosterInfo.css';
 interface MovieIndexPosterInfoProps {
   studio?: string;
   showQualityProfile: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  qualityProfile: any;
+  qualityProfile: QualityProfile;
   added?: string;
+  year: number;
   inCinemas?: string;
   digitalRelease?: string;
   physicalRelease?: string;
   path: string;
+  ratings: Ratings;
   certification: string;
+  originalTitle: string;
+  originalLanguage: Language;
   sizeOnDisk?: number;
   sortKey: string;
   showRelativeDates: boolean;
+  showCinemaRelease: boolean;
   showReleaseDate: boolean;
   shortDateFormat: string;
+  longDateFormat: string;
   timeFormat: string;
 }
 
@@ -31,25 +41,39 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     showQualityProfile,
     qualityProfile,
     added,
+    year,
     inCinemas,
     digitalRelease,
     physicalRelease,
     path,
+    ratings,
     certification,
+    originalTitle,
+    originalLanguage,
     sizeOnDisk,
     sortKey,
     showRelativeDates,
+    showCinemaRelease,
     showReleaseDate,
     shortDateFormat,
+    longDateFormat,
     timeFormat,
   } = props;
 
   if (sortKey === 'studio' && studio) {
-    return <div className={styles.info}>{studio}</div>;
+    return (
+      <div className={styles.info} title={translate('Studio')}>
+        {studio}
+      </div>
+    );
   }
 
   if (sortKey === 'qualityProfileId' && !showQualityProfile) {
-    return <div className={styles.info}>{qualityProfile.name}</div>;
+    return (
+      <div className={styles.info} title={translate('QualityProfile')}>
+        {qualityProfile.name}
+      </div>
+    );
   }
 
   if (sortKey === 'added' && added) {
@@ -64,13 +88,24 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
 
     return (
-      <div className={styles.info}>
+      <div
+        className={styles.info}
+        title={formatDateTime(added, longDateFormat, timeFormat)}
+      >
         {translate('Added')}: {addedDate}
       </div>
     );
   }
 
-  if (sortKey === 'inCinemas' && inCinemas && !showReleaseDate) {
+  if (sortKey === 'year' && year) {
+    return (
+      <div className={styles.info} title={translate('Year')}>
+        {year}
+      </div>
+    );
+  }
+
+  if (sortKey === 'inCinemas' && inCinemas && !showCinemaRelease) {
     const inCinemasDate = getRelativeDate(
       inCinemas,
       shortDateFormat,
@@ -82,7 +117,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
 
     return (
-      <div className={styles.info}>
+      <div className={styles.info} title={translate('InCinemas')}>
         <Icon name={icons.IN_CINEMAS} /> {inCinemasDate}
       </div>
     );
@@ -124,18 +159,58 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
+  if (sortKey === 'imdbRating' && !!ratings.imdb) {
+    return (
+      <div className={styles.info}>
+        <ImdbRating ratings={ratings} iconSize={12} />
+      </div>
+    );
+  }
+
+  if (sortKey === 'tmdbRating' && !!ratings.tmdb) {
+    return (
+      <div className={styles.info}>
+        <TmdbRating ratings={ratings} iconSize={12} />
+      </div>
+    );
+  }
+
   if (sortKey === 'path') {
-    return <div className={styles.info}>{path}</div>;
+    return (
+      <div className={styles.info} title={translate('Path')}>
+        {path}
+      </div>
+    );
   }
 
   if (sortKey === 'sizeOnDisk') {
-    return <div className={styles.info}>{formatBytes(sizeOnDisk)}</div>;
+    return (
+      <div className={styles.info} title={translate('SizeOnDisk')}>
+        {formatBytes(sizeOnDisk)}
+      </div>
+    );
   }
 
   if (sortKey === 'certification') {
     return <div className={styles.info}>{certification}</div>;
   }
 
+  if (sortKey === 'originalTitle' && originalTitle) {
+    return (
+      <div className={styles.title} title={originalTitle}>
+        {originalTitle}
+      </div>
+    );
+  }
+
+  if (sortKey === 'originalLanguage' && originalLanguage) {
+    return (
+      <div className={styles.info} title={translate('OriginalLanguage')}>
+        {originalLanguage.name}
+      </div>
+    );
+  }
+
   return null;
 }
 

frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx

@@ -143,6 +143,7 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       showTitle,
       showMonitored,
       showQualityProfile,
+      showCinemaRelease,
       showReleaseDate,
     } = posterOptions;
 
@@ -167,6 +168,10 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       heights.push(19);
     }
 
+    if (showCinemaRelease) {
+      heights.push(19);
+    }
+
     if (showReleaseDate) {
       heights.push(19);
     }
@@ -174,8 +179,13 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
     switch (sortKey) {
       case 'studio':
       case 'added':
+      case 'year':
+      case 'imdbRating':
+      case 'tmdbRating':
       case 'path':
       case 'sizeOnDisk':
+      case 'originalTitle':
+      case 'originalLanguage':
         heights.push(19);
         break;
       case 'qualityProfileId':
@@ -183,6 +193,17 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
           heights.push(19);
         }
         break;
+      case 'inCinemas':
+        if (!showCinemaRelease) {
+          heights.push(19);
+        }
+        break;
+      case 'digitalRelease':
+      case 'physicalRelease':
+        if (!showReleaseDate) {
+          heights.push(19);
+        }
+        break;
       default:
       // No need to add a height of 0
     }

frontend/src/Movie/Index/Select/Edit/EditMoviesModalContent.tsx

@@ -203,7 +203,7 @@ function EditMoviesModalContent(props: EditMoviesModalContentProps) {
           <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
           <Button onPress={onSavePressWrapper}>
-            {translate('Apply Changes')}
+            {translate('ApplyChanges')}
           </Button>
         </div>
       </ModalFooter>

frontend/src/Movie/Index/Select/Organize/OrganizeMoviesModalContent.tsx

@@ -65,7 +65,7 @@ function OrganizeMoviesModalContent(props: OrganizeMoviesModalContentProps) {
         </Alert>
 
         <div className={styles.message}>
-          {translate('OrganizeConfirm', movieTitles.length)}
+          {translate('OrganizeConfirm', [movieTitles.length])}
         </div>
 
         <ul>

frontend/src/Movie/Index/Table/MovieIndexRow.css

@@ -48,6 +48,7 @@
 }
 
 .added,
+.popularity,
 .runtime {
   composes: cell;
 

frontend/src/Movie/Index/Table/MovieIndexRow.css.d.ts

@@ -18,6 +18,7 @@ interface CssExports {
   'originalTitle': string;
   'path': string;
   'physicalRelease': string;
+  'popularity': string;
   'qualityProfileId': string;
   'rottenTomatoesRating': string;
   'runtime': string;

frontend/src/Movie/Index/Table/MovieIndexRow.tsx

@@ -19,6 +19,7 @@ import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import createMovieIndexItemSelector from 'Movie/Index/createMovieIndexItemSelector';
+import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
@@ -69,6 +70,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
     sizeOnDisk,
     genres = [],
     ratings,
+    popularity,
     certification,
     tags = [],
     tmdbId,
@@ -362,6 +364,14 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           );
         }
 
+        if (name === 'popularity') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <MoviePopularityIndex popularity={popularity} />
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'certification') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>

frontend/src/Movie/Index/Table/MovieIndexTableHeader.css

@@ -41,6 +41,7 @@
 }
 
 .added,
+.popularity,
 .runtime {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/Movie/Index/Table/MovieIndexTableHeader.css.d.ts

@@ -15,6 +15,7 @@ interface CssExports {
   'originalTitle': string;
   'path': string;
   'physicalRelease': string;
+  'popularity': string;
   'qualityProfileId': string;
   'rottenTomatoesRating': string;
   'runtime': string;

frontend/src/Movie/Movie.ts

@@ -16,6 +16,13 @@ export interface Collection {
   title: string;
 }
 
+export interface Ratings {
+  imdb: object;
+  tmdb: object;
+  metacritic: object;
+  rottenTomatoes: object;
+}
+
 interface Movie extends ModelBase {
   tmdbId: number;
   imdbId: string;
@@ -41,7 +48,8 @@ interface Movie extends ModelBase {
   path: string;
   sizeOnDisk: number;
   genres: string[];
-  ratings: object;
+  ratings: Ratings;
+  popularity: number;
   certification: string;
   tags: number[];
   images: Image[];

frontend/src/Movie/MoviePopularityIndex.css

@@ -0,0 +1,5 @@
+.popularityIcon {
+  margin-right: 2px;
+  width: 12px !important;
+  text-align: center;
+}

frontend/src/Movie/MoviePopularityIndex.css.d.ts

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

frontend/src/Movie/MoviePopularityIndex.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './MoviePopularityIndex.css';
+
+interface MoviePopularityIndexProps {
+  popularity: number;
+}
+
+function MoviePopularityIndex(props: MoviePopularityIndexProps) {
+  const { popularity } = props;
+
+  return (
+    <Label kind={kinds.INVERSE} title={translate('PopularityIndex')}>
+      <Icon className={styles.popularityIcon} name={icons.POPULAR} size={11} />
+      {popularity.toFixed()}
+    </Label>
+  );
+}
+
+export default MoviePopularityIndex;

frontend/src/MovieFile/Edit/FileEditModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -109,9 +110,9 @@ class FileEditModalContent extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadQualities')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/MovieFile/Quality/SelectQualityModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -92,9 +93,9 @@ class SelectQualityModalContent extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadQualities')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/RootFolder/RootFolders.js

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import RootFolderRowConnector from './RootFolderRowConnector';
 
@@ -44,9 +46,9 @@ function RootFolders(props) {
 
   if (!isFetching && !!error) {
     return (
-      <div>
+      <Alert kind={kinds.DANGER}>
         {translate('UnableToLoadRootFolders')}
-      </div>
+      </Alert>
     );
   }
 

frontend/src/Settings/AdvancedSettingsButton.js

@@ -10,7 +10,8 @@ import styles from './AdvancedSettingsButton.css';
 function AdvancedSettingsButton(props) {
   const {
     advancedSettings,
-    onAdvancedSettingsPress
+    onAdvancedSettingsPress,
+    showLabel
   } = props;
 
   return (
@@ -43,18 +44,27 @@ function AdvancedSettingsButton(props) {
         />
       </span>
 
-      <div className={styles.labelContainer}>
-        <div className={styles.label}>
-          {advancedSettings ? translate('HideAdvanced') : translate('ShowAdvanced')}
-        </div>
-      </div>
+      {
+        showLabel ?
+          <div className={styles.labelContainer}>
+            <div className={styles.label}>
+              {advancedSettings ? translate('HideAdvanced') : translate('ShowAdvanced')}
+            </div>
+          </div> :
+          null
+      }
     </Link>
   );
 }
 
 AdvancedSettingsButton.propTypes = {
   advancedSettings: PropTypes.bool.isRequired,
-  onAdvancedSettingsPress: PropTypes.func.isRequired
+  onAdvancedSettingsPress: PropTypes.func.isRequired,
+  showLabel: PropTypes.bool.isRequired
+};
+
+AdvancedSettingsButton.defaultProps = {
+  showLabel: true
 };
 
 export default AdvancedSettingsButton;

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js

@@ -152,13 +152,7 @@ class CustomFormat extends Component {
           isOpen={this.state.isDeleteCustomFormatModalOpen}
           kind={kinds.DANGER}
           title={translate('DeleteCustomFormat')}
-          message={
-            <div>
-              <div>
-                {translate('AreYouSureYouWantToDeleteFormat', [name])}
-              </div>
-            </div>
-          }
+          message={translate('DeleteCustomFormatMessageText', [name])}
           confirmLabel={translate('Delete')}
           isSpinning={isDeleting}
           onConfirm={this.onConfirmDeleteCustomFormat}

frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import ClipboardButton from 'Components/Link/ClipboardButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -41,9 +42,9 @@ class ExportCustomFormatModalContent extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadCustomFormats')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -11,7 +12,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes, sizes } from 'Helpers/Props';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './ImportCustomFormatModalContent.css';
 
@@ -95,9 +96,9 @@ class ImportCustomFormatModalContent extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadCustomFormats')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/Specification.js

@@ -78,7 +78,7 @@ class Specification extends Component {
 
           <IconButton
             className={styles.cloneButton}
-            title={translate('CloneFormatTag')}
+            title={translate('CloneCondition')}
             name={icons.CLONE}
             onPress={this.onCloneSpecificationPress}
           />
@@ -114,14 +114,8 @@ class Specification extends Component {
         <ConfirmModal
           isOpen={this.state.isDeleteSpecificationModalOpen}
           kind={kinds.DANGER}
-          title={translate('DeleteCustomFormat')}
-          message={
-            <div>
-              <div>
-                {translate('AreYouSureYouWantToDeleteFormat', [name])}
-              </div>
-            </div>
-          }
+          title={translate('DeleteCondition')}
+          message={translate('DeleteConditionMessageText', [name])}
           confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteSpecification}
           onCancel={this.onDeleteSpecificationModalClose}