🚚 Move the update indicator to the Footer

Co-authored-by: Bjorn L. <walkxnl@gmail.com>

src/components/layout/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   createStyles,
   Anchor,
@@ -6,9 +6,11 @@ import {
   Group,
   ActionIcon,
   Footer as FooterComponent,
+  Alert,
+  useMantineTheme,
 } from '@mantine/core';
-import { BrandGithub } from 'tabler-icons-react';
+import { AlertCircle, BrandGithub } from 'tabler-icons-react';
-import { CURRENT_VERSION } from '../../../data/constants';
+import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
 
 const useStyles = createStyles((theme) => ({
   footer: {
@@ -41,6 +43,8 @@ interface FooterCenteredProps {
 }
 
 export function Footer({ links }: FooterCenteredProps) {
+  const [update, setUpdate] = useState(false);
+  const theme = useMantineTheme();
   const { classes } = useStyles();
   const items = links.map((link) => (
     <Anchor<'a'>
@@ -55,42 +59,88 @@ export function Footer({ links }: FooterCenteredProps) {
     </Anchor>
   ));
 
+  const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
+  const [isOpen, setOpen] = useState(true);
+  useEffect(() => {
+    // Fetch Data here when component first mounted
+    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
+      res.json().then((data) => {
+        setLatestVersion(data.tag_name);
+        if (data.tag_name !== CURRENT_VERSION) {
+          setUpdate(true);
+        }
+      });
+    });
+  }, []);
+
   return (
     <FooterComponent
       p={5}
       height="auto"
-      style={{ border: 'none', position: 'fixed', bottom: 0, right: 0 }}
+      style={{
+        background: 'none',
+        border: 'none',
+        clear: 'both',
+        position: 'fixed',
+        bottom: '0',
+        left: '0',
+      }}
     >
-      <Group position="right" mr="xs" mb="xs">
+      <Group position="apart" direction="row" style={{ alignItems: 'end' }} mr="xs" mb="xs">
-        <Group spacing={0}>
+        <Group position="left">
-          <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+          <Alert
-            <BrandGithub size={18} />
+            // onClick open latest release page
-          </ActionIcon>
+            onClose={() => setOpen(false)}
+            icon={<AlertCircle size={16} />}
+            title={`Updated version: ${latestVersion} is available. Current version: ${CURRENT_VERSION}`}
+            withCloseButton
+            radius="lg"
+            hidden={CURRENT_VERSION === latestVersion || !isOpen}
+            variant="outline"
+            styles={{
+              root: {
+                backgroundColor:
+                  theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+              },
+
+              closeButton: {
+                marginLeft: '5px',
+              },
+            }}
+            children={undefined}
+          />
+        </Group>
+        <Group position="right">
+          <Group spacing={0}>
+            <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+              <BrandGithub size={18} />
+            </ActionIcon>
+            <Text
+              style={{
+                position: 'relative',
+                fontSize: '0.90rem',
+                color: 'gray',
+              }}
+            >
+              {CURRENT_VERSION}
+            </Text>
+          </Group>
           <Text
             style={{
-              position: 'relative',
               fontSize: '0.90rem',
-              color: 'gray',
+              textAlign: 'center',
+              color: '#a0aec0',
             }}
           >
-            {CURRENT_VERSION}
+            Made with ❤️ by @
+            <Anchor
+              href="https://github.com/ajnart"
+              style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
+            >
+              ajnart
+            </Anchor>
           </Text>
         </Group>
-        <Text
-          style={{
-            fontSize: '0.90rem',
-            textAlign: 'center',
-            color: '#a0aec0',
-          }}
-        >
-          Made with ❤️ by @
-          <Anchor
-            href="https://github.com/ajnart"
-            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-          >
-            ajnart
-          </Anchor>
-        </Text>
       </Group>
     </FooterComponent>
   );