New: Show Proper or Repack tag in interactive search

frontend/src/Episode/EpisodeQuality.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 EpisodeQuality(props) {
   const {
     className,
     title,
     quality,
     size,
-    isCutoffNotMet
+    isCutoffNotMet,
+    showRevision
   } = props;
 
   if (!quality) {
@@ -40,13 +72,15 @@ function EpisodeQuality(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 @@ EpisodeQuality.propTypes = {
   title: PropTypes.string,
   quality: PropTypes.object.isRequired,
   size: PropTypes.number,
-  isCutoffNotMet: PropTypes.bool
+  isCutoffNotMet: PropTypes.bool,
+  showRevision: PropTypes.bool
 };
 
 EpisodeQuality.defaultProps = {
-  title: ''
+  title: '',
+  showRevision: false
 };
 
 export default EpisodeQuality;

frontend/src/InteractiveSearch/InteractiveSearchRow.css

@@ -28,6 +28,10 @@
   text-align: center;
 }
 
+.quality {
+  white-space: nowrap;
+}
+
 .languages {
   width: 100px;
 }

frontend/src/InteractiveSearch/InteractiveSearchRow.tsx

@@ -244,7 +244,7 @@ function InteractiveSearchRow(props: InteractiveSearchRowProps) {
       </TableRowCell>
 
       <TableRowCell className={styles.quality}>
-        <EpisodeQuality quality={quality} />
+        <EpisodeQuality quality={quality} showRevision={true} />
       </TableRowCell>
 
       <TableRowCell className={styles.customFormatScore}>