New: Show Proper or Repack tag in interactive search

(cherry picked from commit efb000529b5dff42829df3ef151e4750a7b15cf6)

Closes #4386

frontend/src/Album/TrackQuality.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Label from 'Components/Label';
 import { kinds } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 
 function getTooltip(title, quality, size) {
   if (!title) {
@@ -26,13 +27,44 @@ function getTooltip(title, quality, size) {
   return title;
 }
 
+function revisionLabel(className, quality, showRevision) {
+  if (!showRevision) {
+    return;
+  }
+
+  if (quality.revision.isRepack) {
+    return (
+      <Label
+        className={className}
+        kind={kinds.PRIMARY}
+        title={translate('Repack')}
+      >
+        R
+      </Label>
+    );
+  }
+
+  if (quality.revision.version && quality.revision.version > 1) {
+    return (
+      <Label
+        className={className}
+        kind={kinds.PRIMARY}
+        title={translate('Proper')}
+      >
+        P
+      </Label>
+    );
+  }
+}
+
 function TrackQuality(props) {
   const {
     className,
     title,
     quality,
     size,
-    isCutoffNotMet
+    isCutoffNotMet,
+    showRevision
   } = props;
 
   if (!quality) {
@@ -40,13 +72,15 @@ function TrackQuality(props) {
   }
 
   return (
-    <Label
+    <span>
-      className={className}
+      <Label
-      kind={isCutoffNotMet ? kinds.INVERSE : kinds.DEFAULT}
+        className={className}
-      title={getTooltip(title, quality, size)}
+        kind={isCutoffNotMet ? kinds.INVERSE : kinds.DEFAULT}
-    >
+        title={getTooltip(title, quality, size)}
-      {quality.quality.name}
+      >
-    </Label>
+        {quality.quality.name}
+      </Label>{revisionLabel(className, quality, showRevision)}
+    </span>
   );
 }
 
@@ -55,11 +89,13 @@ TrackQuality.propTypes = {
   title: PropTypes.string,
   quality: PropTypes.object.isRequired,
   size: PropTypes.number,
-  isCutoffNotMet: PropTypes.bool
+  isCutoffNotMet: PropTypes.bool,
+  showRevision: PropTypes.bool
 };
 
 TrackQuality.defaultProps = {
-  title: ''
+  title: '',
+  showRevision: false
 };
 
 export default TrackQuality;

frontend/src/InteractiveSearch/InteractiveSearchRow.css

@@ -22,6 +22,10 @@
   text-align: center;
 }
 
+.quality {
+  white-space: nowrap;
+}
+
 .customFormatScore {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/InteractiveSearch/InteractiveSearchRow.js

@@ -178,7 +178,7 @@ class InteractiveSearchRow extends Component {
         </TableRowCell>
 
         <TableRowCell className={styles.quality}>
-          <TrackQuality quality={quality} />
+          <TrackQuality quality={quality} showRevision={true} />
         </TableRowCell>
 
         <TableRowCell className={styles.customFormatScore}>