From c6eccec30ed09c7bad335d2bab4bf5c1e9ee3308 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sun, 9 Aug 2026 16:42:58 +0200
Subject: [PATCH] refactor(settings): show new app indicator

---
 .../panel/about-panel/AppVersion.module.scss          |  7 +++++++
 .../app-settings/panel/about-panel/AppVersion.tsx     | 11 +++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 apps/client/src/features/app-settings/panel/about-panel/AppVersion.module.scss

diff --git a/apps/client/src/features/app-settings/panel/about-panel/AppVersion.module.scss b/apps/client/src/features/app-settings/panel/about-panel/AppVersion.module.scss
new file mode 100644
index 000000000..3d073947d
--- /dev/null
+++ b/apps/client/src/features/app-settings/panel/about-panel/AppVersion.module.scss
@@ -0,0 +1,7 @@
+.updateIndicator {
+  width: 0.5em;
+  height: 0.5em;
+  flex: 0 0 auto;
+  border-radius: 99px;
+  background-color: $red-400;
+}
diff --git a/apps/client/src/features/app-settings/panel/about-panel/AppVersion.tsx b/apps/client/src/features/app-settings/panel/about-panel/AppVersion.tsx
index c76bd0375..3dcc6e978 100644
--- a/apps/client/src/features/app-settings/panel/about-panel/AppVersion.tsx
+++ b/apps/client/src/features/app-settings/panel/about-panel/AppVersion.tsx
@@ -3,6 +3,8 @@ import useAppVersion from '../../../../common/hooks-query/useAppVersion';
 import { appVersion, isOntimeCloud, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
+import style from './AppVersion.module.scss';
+
 export default function AppVersion() {
   const { data, isError } = useAppVersion();
 
@@ -18,7 +20,12 @@ export default function AppVersion() {
     return (
       <Panel.ListItem>
         <Panel.Field
-          title={`Ontime ${appVersion}`}
+          title={
+            <>
+              <span className={style.updateIndicator} aria-hidden='true' />
+              {`Ontime ${appVersion}`}
+            </>
+          }
           description={
             isOntimeCloud
               ? `Version ${data.version} is available. Restart your stage to update.`
@@ -26,7 +33,7 @@ export default function AppVersion() {
           }
         />
         {!isOntimeCloud && (
-          <ExternalLink href={websiteUrl}>Visit Ontime's page to download the latest version.</ExternalLink>
+          <ExternalLink href={websiteUrl}>Download the latest version from Ontime's page</ExternalLink>
         )}
       </Panel.ListItem>
     );