fix: fix outofdate string & display version status badge in Settings > About (#1417)

src/components/Common/List/index.tsx

@@ -3,15 +3,16 @@ import { withProperties } from '../../../utils/typeHelpers';
 
 interface ListItemProps {
   title: string;
+  className?: string;
 }
 
-const ListItem: React.FC<ListItemProps> = ({ title, children }) => {
+const ListItem: React.FC<ListItemProps> = ({ title, className, children }) => {
   return (
     <div>
       <div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
         <dt className="block text-sm font-medium text-gray-400">{title}</dt>
         <dd className="flex text-sm text-white sm:mt-0 sm:col-span-2">
-          <span className="flex-grow">{children}</span>
+          <span className={`flex-grow ${className}`}>{children}</span>
         </dd>
       </div>
     </div>

src/components/Layout/VersionStatus/index.tsx

@@ -7,7 +7,7 @@ import { StatusResponse } from '../../../../server/interfaces/api/settingsInterf
 const messages = defineMessages({
   streamdevelop: 'Overseerr Develop',
   streamstable: 'Overseerr Stable',
-  outofdate: 'Out of date',
+  outofdate: 'Out of Date',
   commitsbehind:
     '{commitsBehind} {commitsBehind, plural, one {commit} other {commits}} behind',
 });
@@ -24,7 +24,7 @@ const VersionStatus: React.FC = () => {
 
   const versionStream =
     data.commitTag === 'local'
-      ? 'Keep it up!'
+      ? 'Keep it up! 👍'
       : data.version.startsWith('develop-')
       ? intl.formatMessage(messages.streamdevelop)
       : intl.formatMessage(messages.streamstable);
@@ -34,7 +34,7 @@ const VersionStatus: React.FC = () => {
       <a
         className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
           data.updateAvailable
-            ? 'bg-green-500 text-white hover:bg-green-400'
+            ? 'bg-yellow-500 text-white hover:bg-yellow-400'
             : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
         }`}
       >
@@ -87,15 +87,19 @@ const VersionStatus: React.FC = () => {
         <div className="flex flex-col flex-1 min-w-0 px-2 truncate last:pr-0">
           <span className="font-bold">{versionStream}</span>
           <span className="truncate">
-            {data.commitTag === 'local'
-              ? '(⌐■_■)'
-              : data.commitsBehind > 0
-              ? intl.formatMessage(messages.commitsbehind, {
-                  commitsBehind: data.commitsBehind,
-                })
-              : data.commitsBehind === -1
-              ? intl.formatMessage(messages.outofdate)
-              : data.version.replace('develop-', '')}
+            {data.commitTag === 'local' ? (
+              '(⌐■_■)'
+            ) : data.commitsBehind > 0 ? (
+              intl.formatMessage(messages.commitsbehind, {
+                commitsBehind: data.commitsBehind,
+              })
+            ) : data.commitsBehind === -1 ? (
+              intl.formatMessage(messages.outofdate)
+            ) : (
+              <code className="p-0 bg-transparent">
+                {data.version.replace('develop-', '')}
+              </code>
+            )}
           </span>
         </div>
         {data.updateAvailable && (

src/components/Settings/SettingsAbout/index.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
+import {
+  SettingsAboutResponse,
+  StatusResponse,
+} from '../../../../server/interfaces/api/settingsInterfaces';
+import globalMessages from '../../../i18n/globalMessages';
 import Error from '../../../pages/_error';
+import Badge from '../../Common/Badge';
 import List from '../../Common/List';
 import LoadingSpinner from '../../Common/LoadingSpinner';
-import { SettingsAboutResponse } from '../../../../server/interfaces/api/settingsInterfaces';
-import { defineMessages, useIntl } from 'react-intl';
-import Releases from './Releases';
-import Badge from '../../Common/Badge';
 import PageTitle from '../../Common/PageTitle';
-import globalMessages from '../../../i18n/globalMessages';
+import Releases from './Releases';
 
 const messages = defineMessages({
   about: 'About',
@@ -23,6 +26,8 @@ const messages = defineMessages({
   helppaycoffee: 'Help Pay for Coffee',
   documentation: 'Documentation',
   preferredmethod: 'Preferred',
+  outofdate: 'Out of Date',
+  uptodate: 'Up to Date',
 });
 
 const SettingsAbout: React.FC = () => {
@@ -31,6 +36,8 @@ const SettingsAbout: React.FC = () => {
     '/api/v1/settings/about'
   );
 
+  const { data: status } = useSWR<StatusResponse>('/api/v1/status');
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -49,8 +56,22 @@ const SettingsAbout: React.FC = () => {
       />
       <div className="section">
         <List title={intl.formatMessage(messages.overseerrinformation)}>
-          <List.Item title={intl.formatMessage(messages.version)}>
-            <code>{data.version}</code>
+          <List.Item
+            title={intl.formatMessage(messages.version)}
+            className="truncate"
+          >
+            <code>{data.version.replace('develop-', '')}</code>
+            {status?.updateAvailable ? (
+              <Badge badgeType="warning" className="ml-2">
+                {intl.formatMessage(messages.outofdate)}
+              </Badge>
+            ) : (
+              status?.commitTag !== 'local' && (
+                <Badge badgeType="success" className="ml-2">
+                  {intl.formatMessage(messages.uptodate)}
+                </Badge>
+              )
+            )}
           </List.Item>
           <List.Item title={intl.formatMessage(messages.totalmedia)}>
             {intl.formatNumber(data.totalMediaItems)}

src/i18n/locale/en.json

@@ -44,7 +44,7 @@
   "components.Layout.UserDropdown.settings": "Settings",
   "components.Layout.UserDropdown.signout": "Sign Out",
   "components.Layout.VersionStatus.commitsbehind": "{commitsBehind} {commitsBehind, plural, one {commit} other {commits}} behind",
-  "components.Layout.VersionStatus.outofdate": "Out of date",
+  "components.Layout.VersionStatus.outofdate": "Out of Date",
   "components.Layout.VersionStatus.streamdevelop": "Overseerr Develop",
   "components.Layout.VersionStatus.streamstable": "Overseerr Stable",
   "components.Layout.alphawarning": "This is ALPHA software. Features may be broken and/or unstable. Please report any issues on GitHub!",
@@ -390,12 +390,14 @@
   "components.Settings.SettingsAbout.gettingsupport": "Getting Support",
   "components.Settings.SettingsAbout.githubdiscussions": "GitHub Discussions",
   "components.Settings.SettingsAbout.helppaycoffee": "Help Pay for Coffee",
+  "components.Settings.SettingsAbout.outofdate": "Out of Date",
   "components.Settings.SettingsAbout.overseerrinformation": "Overseerr Information",
   "components.Settings.SettingsAbout.preferredmethod": "Preferred",
   "components.Settings.SettingsAbout.supportoverseerr": "Support Overseerr",
   "components.Settings.SettingsAbout.timezone": "Time Zone",
   "components.Settings.SettingsAbout.totalmedia": "Total Media",
   "components.Settings.SettingsAbout.totalrequests": "Total Requests",
+  "components.Settings.SettingsAbout.uptodate": "Up to Date",
   "components.Settings.SettingsAbout.version": "Version",
   "components.Settings.SettingsJobsCache.cache": "Cache",
   "components.Settings.SettingsJobsCache.cacheDescription": "Overseerr caches requests to external API endpoints to optimize performance and avoid making unnecessary API calls.",