Add the status indicator for new versions

src/components/layout/header/SettingsMenu.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Menu, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
@@ -6,7 +6,7 @@ import { AboutModal } from '../../About/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
 
-export const SettingsMenu = () => {
+export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
   const [drawerOpened, drawer] = useDisclosure(false);
   const { t } = useTranslation('common');
   const [aboutModalOpened, aboutModal] = useDisclosure(false);
@@ -28,15 +28,30 @@ export const SettingsMenu = () => {
             </Menu.Item>
             <Menu.Item
               icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
-              onClick={aboutModal.open}
+              rightSection={
+                newVersionAvailable && (
+                  <Badge variant="light" color="blue">
+                    New
+                  </Badge>
+                )
+              }
+              onClick={() => aboutModal.open()}
             >
               About
             </Menu.Item>
           </Menu.Dropdown>
         </Menu>
       </Tooltip>
-      <SettingsDrawer opened={drawerOpened} closeDrawer={drawer.close} />
-      <AboutModal opened={aboutModalOpened} closeModal={aboutModal.close} />
+      <SettingsDrawer
+        opened={drawerOpened}
+        closeDrawer={drawer.close}
+        newVersionAvailable={newVersionAvailable}
+      />
+      <AboutModal
+        opened={aboutModalOpened}
+        closeModal={aboutModal.close}
+        newVersionAvailable={newVersionAvailable}
+      />
     </>
   );
-};
+}