fix(ui): display "Season" vs. "Seasons" as appropriate, and fix request block "Seasons" formatting (#1127)

src/components/RequestBlock/index.tsx

@@ -10,7 +10,7 @@ import RequestModal from '../RequestModal';
 import useRequestOverride from '../../hooks/useRequestOverride';
 
 const messages = defineMessages({
-  seasons: 'Seasons',
+  seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
   requestoverrides: 'Request Overrides',
   server: 'Server',
   profilechanged: 'Profile Changed',
@@ -65,12 +65,12 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
           setShowEditModal(false);
         }}
       />
-      <div className="px-4 py-4">
+      <div className="px-4 py-4 text-gray-300">
         <div className="flex items-center justify-between">
-          <div className="flex-col items-center flex-1 min-w-0 mr-6 text-sm leading-5 text-gray-300">
+          <div className="flex-col items-center flex-1 min-w-0 mr-6 text-sm leading-5">
             <div className="flex mb-1 flex-nowrap white">
               <svg
-                className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
+                className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5"
                 fill="currentColor"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"
@@ -88,7 +88,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
             {request.modifiedBy && (
               <div className="flex flex-nowrap">
                 <svg
-                  className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
+                  className="flex-shrink-0 mr-1.5 h-5 w-5"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -191,7 +191,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
         </div>
         <div className="mt-2 sm:flex sm:justify-between">
           <div className="sm:flex">
-            <div className="flex items-center mr-6 text-sm leading-5 text-gray-300">
+            <div className="flex items-center mr-6 text-sm leading-5">
               {request.is4k && (
                 <span className="mr-1">
                   <Badge badgeType="warning">4K</Badge>
@@ -214,9 +214,9 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
               )}
             </div>
           </div>
-          <div className="flex items-center mt-2 text-sm leading-5 text-gray-300 sm:mt-0">
+          <div className="flex items-center mt-2 text-sm leading-5 sm:mt-0">
             <svg
-              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
+              className="flex-shrink-0 mr-1.5 h-5 w-5"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"
               fill="currentColor"
@@ -234,7 +234,11 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
         </div>
         {(request.seasons ?? []).length > 0 && (
           <div className="flex flex-col mt-2 text-sm">
-            <div className="mb-2">{intl.formatMessage(messages.seasons)}</div>
+            <div className="mb-1 font-medium">
+              {intl.formatMessage(messages.seasons, {
+                seasonCount: request.seasons.length,
+              })}
+            </div>
             <div>
               {request.seasons.map((season) => (
                 <span

src/components/RequestCard/index.tsx

@@ -21,7 +21,7 @@ import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
   status: 'Status',
-  seasons: 'Seasons',
+  seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
   all: 'All',
 });
 
@@ -129,13 +129,18 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             </a>
           </Link>
         </div>
-        {request.seasons.length > 0 && (
+        {!isMovie(title) && request.seasons.length > 0 && (
           <div className="sm:flex items-center my-0.5 sm:my-1 text-sm hidden">
             <span className="mr-2 font-medium">
-              {intl.formatMessage(messages.seasons)}
+              {intl.formatMessage(messages.seasons, {
+                seasonCount:
+                  title.seasons.filter((season) => season.seasonNumber !== 0)
+                    .length === request.seasons.length
+                    ? 0
+                    : request.seasons.length,
+              })}
             </span>
-            {!isMovie(title) &&
-            title.seasons.filter((season) => season.seasonNumber !== 0)
+            {title.seasons.filter((season) => season.seasonNumber !== 0)
               .length === request.seasons.length ? (
               <span className="mr-2 uppercase">
                 <Badge>{intl.formatMessage(messages.all)}</Badge>

src/components/RequestList/RequestItem/index.tsx

@@ -22,7 +22,7 @@ import RequestModal from '../../RequestModal';
 import ConfirmButton from '../../Common/ConfirmButton';
 
 const messages = defineMessages({
-  seasons: 'Seasons',
+  seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
   all: 'All',
   notavailable: 'N/A',
   failedretry: 'Something went wrong while retrying the request.',
@@ -190,13 +190,19 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   </a>
                 </Link>
               </div>
-              {request.seasons.length > 0 && (
+              {!isMovie(title) && request.seasons.length > 0 && (
                 <div className="card-field">
                   <span className="card-field-name">
-                    {intl.formatMessage(messages.seasons)}
+                    {intl.formatMessage(messages.seasons, {
+                      seasonCount:
+                        title.seasons.filter(
+                          (season) => season.seasonNumber !== 0
+                        ).length === request.seasons.length
+                          ? 0
+                          : request.seasons.length,
+                    })}
                   </span>
-                  {!isMovie(title) &&
-                  title.seasons.filter((season) => season.seasonNumber !== 0)
+                  {title.seasons.filter((season) => season.seasonNumber !== 0)
                     .length === request.seasons.length ? (
                     <span className="mr-2 uppercase">
                       <Badge>{intl.formatMessage(messages.all)}</Badge>

src/i18n/locale/en.json

@@ -151,7 +151,7 @@
   "components.RequestBlock.profilechanged": "Quality Profile",
   "components.RequestBlock.requestoverrides": "Request Overrides",
   "components.RequestBlock.rootfolder": "Root Folder",
-  "components.RequestBlock.seasons": "Seasons",
+  "components.RequestBlock.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
   "components.RequestBlock.server": "Destination Server",
   "components.RequestButton.approve4krequests": "Approve {requestCount} 4K {requestCount, plural, one {Request} other {Requests}}",
   "components.RequestButton.approverequest": "Approve Request",
@@ -168,7 +168,7 @@
   "components.RequestButton.viewrequest": "View Request",
   "components.RequestButton.viewrequest4k": "View 4K Request",
   "components.RequestCard.all": "All",
-  "components.RequestCard.seasons": "Seasons",
+  "components.RequestCard.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
   "components.RequestCard.status": "Status",
   "components.RequestList.RequestItem.all": "All",
   "components.RequestList.RequestItem.areyousure": "Are you sure?",
@@ -177,7 +177,7 @@
   "components.RequestList.RequestItem.modifieduserdate": "{date} by {user}",
   "components.RequestList.RequestItem.notavailable": "N/A",
   "components.RequestList.RequestItem.requested": "Requested",
-  "components.RequestList.RequestItem.seasons": "Seasons",
+  "components.RequestList.RequestItem.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
   "components.RequestList.RequestItem.status": "Status",
   "components.RequestList.filterAll": "All",
   "components.RequestList.filterApproved": "Approved",