New: Season Pass is now part of series list

frontend/src/Series/Index/Table/SeasonsCell.css

@@ -0,0 +1,4 @@
+.seasonCount {
+  width: 100%;
+  cursor: default;
+}

frontend/src/Series/Index/Table/SeasonsCell.css.d.ts

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

frontend/src/Series/Index/Table/SeasonsCell.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import Popover from 'Components/Tooltip/Popover';
+import TooltipPosition from 'Helpers/Props/TooltipPosition';
+import SeasonDetails from 'Series/Index/Select/SeasonPass/SeasonDetails';
+import { Season } from 'Series/Series';
+import translate from 'Utilities/String/translate';
+import styles from './SeasonsCell.css';
+
+interface SeriesStatusCellProps {
+  className: string;
+  seriesId: number;
+  seasonCount: number;
+  seasons: Season[];
+  isSelectMode: boolean;
+}
+
+function SeasonsCell(props: SeriesStatusCellProps) {
+  const {
+    className,
+    seriesId,
+    seasonCount,
+    seasons,
+    isSelectMode,
+    ...otherProps
+  } = props;
+
+  return (
+    <VirtualTableRowCell className={className} {...otherProps}>
+      {isSelectMode ? (
+        <Popover
+          className={styles.seasonCount}
+          anchor={seasonCount}
+          title={translate('Season Details')}
+          body={<SeasonDetails seriesId={seriesId} seasons={seasons} />}
+          position={TooltipPosition.Left}
+        />
+      ) : (
+        seasonCount
+      )}
+    </VirtualTableRowCell>
+  );
+}
+
+export default SeasonsCell;

frontend/src/Series/Index/Table/SeriesIndexRow.tsx

@@ -25,6 +25,7 @@ import formatBytes from 'Utilities/Number/formatBytes';
 import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
 import titleCase from 'Utilities/String/titleCase';
 import hasGrowableColumns from './hasGrowableColumns';
+import SeasonsCell from './SeasonsCell';
 import selectTableOptions from './selectTableOptions';
 import SeriesStatusCell from './SeriesStatusCell';
 import styles from './SeriesIndexRow.css';
@@ -69,7 +70,9 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
     useSceneNumbering,
     genres = [],
     ratings,
+    seasons = [],
     tags = [],
+    isSaving = false,
   } = series;
 
   const {
@@ -169,8 +172,11 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
             <SeriesStatusCell
               key={name}
               className={styles[name]}
+              seriesId={seriesId}
               monitored={monitored}
               status={status}
+              isSelectMode={isSelectMode}
+              isSaving={isSaving}
               component={VirtualTableRowCell}
             />
           );
@@ -275,9 +281,14 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
 
         if (name === 'seasonCount') {
           return (
-            <VirtualTableRowCell key={name} className={styles[name]}>
-              {seasonCount}
-            </VirtualTableRowCell>
+            <SeasonsCell
+              key={name}
+              className={styles[name]}
+              seriesId={seriesId}
+              seasonCount={seasonCount}
+              seasons={seasons}
+              isSelectMode={isSelectMode}
+            />
           );
         }
 

frontend/src/Series/Index/Table/SeriesStatusCell.css

@@ -6,4 +6,5 @@
 
 .statusIcon {
   width: 20px !important;
+  text-align: center;
 }

frontend/src/Series/Index/Table/SeriesStatusCell.tsx

@@ -1,35 +1,63 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 import Icon from 'Components/Icon';
+import MonitorToggleButton from 'Components/MonitorToggleButton';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons } from 'Helpers/Props';
 import { getSeriesStatusDetails } from 'Series/SeriesStatus';
+import { toggleSeriesMonitored } from 'Store/Actions/seriesActions';
+import translate from 'Utilities/String/translate';
 import styles from './SeriesStatusCell.css';
 
 interface SeriesStatusCellProps {
   className: string;
+  seriesId: number;
   monitored: boolean;
   status: string;
+  isSelectMode: boolean;
+  isSaving: boolean;
   component?: React.ElementType;
 }
 
 function SeriesStatusCell(props: SeriesStatusCellProps) {
   const {
     className,
+    seriesId,
     monitored,
     status,
+    isSelectMode,
+    isSaving,
     component: Component = VirtualTableRowCell,
     ...otherProps
   } = props;
 
   const statusDetails = getSeriesStatusDetails(status);
+  const dispatch = useDispatch();
+
+  const onMonitoredPress = useCallback(() => {
+    dispatch(toggleSeriesMonitored({ seriesId, monitored: !monitored }));
+  }, [seriesId, monitored, dispatch]);
 
   return (
     <Component className={className} {...otherProps}>
-      <Icon
-        className={styles.statusIcon}
-        name={monitored ? icons.MONITORED : icons.UNMONITORED}
-        title={monitored ? 'Series is monitored' : 'Series is unmonitored'}
-      />
+      {isSelectMode ? (
+        <MonitorToggleButton
+          className={styles.statusIcon}
+          monitored={monitored}
+          isSaving={isSaving}
+          onPress={onMonitoredPress}
+        />
+      ) : (
+        <Icon
+          className={styles.statusIcon}
+          name={monitored ? icons.MONITORED : icons.UNMONITORED}
+          title={
+            monitored
+              ? translate('Series is monitored')
+              : translate('Series is unmonitored')
+          }
+        />
+      )}
 
       <Icon
         className={styles.statusIcon}