Finish reworking update indicator

src/components/Settings/SettingsMenu.tsx

@@ -8,6 +8,7 @@ import {
   Indicator,
   Alert,
   Notification,
+  Anchor,
 } from '@mantine/core';
 import { useElementSize, useHotkeys, useViewportSize } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
@@ -18,27 +19,14 @@ import AdvancedSettings from './AdvancedSettings';
 import CommonSettings from './CommonSettings';
 import Credits from './Credits';
 import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
+import Link from 'next/link';
+import { NextLink } from '@mantine/next';
 
 function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
   const { t } = useTranslation('settings/common');
   const { height, width } = useViewportSize();
 
   return (
-    <>
-      <Notification
-        icon={<IconInfoCircle size={25} />}
-        disallowClose
-        color="teal"
-        radius="md"
-        title="New update available"
-        hidden={newVersionAvailable === ''}
-      >
-        {
-          //TODO: Translate and add link to release page}
-        }
-        Version <b>{newVersionAvailable}</b> is available, update now!
-      </Notification>
-
     <Tabs defaultValue="Common">
       <Tabs.List grow>
         <Tabs.Tab value="Common">{t('tabs.common')}</Tabs.Tab>
@@ -46,6 +34,7 @@ function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string })
       </Tabs.List>
       <Tabs.Panel data-autofocus value="Common">
         <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+          {newVersionAvailable && <NewUpdateIndicator newVersionAvailable={newVersionAvailable} />}
           <CommonSettings />
           <Credits />
         </ScrollArea>
@@ -57,7 +46,6 @@ function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string })
         </ScrollArea>
       </Tabs.Panel>
     </Tabs>
-    </>
   );
 }
 
@@ -107,3 +95,28 @@ export function SettingsMenuButton(props: any) {
     </>
   );
 }
+
+function NewUpdateIndicator({ newVersionAvailable }: { newVersionAvailable: string }) {
+  return (
+    <Notification
+      mt={10}
+      icon={<IconInfoCircle size={25} />}
+      disallowClose
+      color="teal"
+      radius="md"
+      title="New update available"
+      hidden={newVersionAvailable === ''}
+    >
+      Version{' '}
+      <b>
+        <Anchor
+          target="_blank"
+          href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
+        >
+          {newVersionAvailable}
+        </Anchor>
+      </b>{' '}
+      is available ! Current version: {CURRENT_VERSION}
+    </Notification>
+  );
+}