diff --git a/data/constants.ts b/data/constants.ts index 8ca22cd0b..db44a4c1e 100644 --- a/data/constants.ts +++ b/data/constants.ts @@ -1,2 +1,2 @@ export const REPO_URL = 'ajnart/homarr'; -export const CURRENT_VERSION = 'v0.10.7'; +export const CURRENT_VERSION = 'v0.10.6'; diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx index 903989a10..b97bc00a1 100644 --- a/src/components/Settings/SettingsMenu.tsx +++ b/src/components/Settings/SettingsMenu.tsx @@ -1,39 +1,80 @@ -import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core'; -import { useHotkeys } from '@mantine/hooks'; -import { useState } from 'react'; -import { IconSettings } from '@tabler/icons'; +import { + ActionIcon, + Title, + Tooltip, + Drawer, + Tabs, + ScrollArea, + Indicator, + Alert, + Notification, +} from '@mantine/core'; +import { useElementSize, useHotkeys, useViewportSize } from '@mantine/hooks'; +import { useEffect, useState } from 'react'; +import { IconInfoCircle, IconSettings } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; import AdvancedSettings from './AdvancedSettings'; import CommonSettings from './CommonSettings'; import Credits from './Credits'; +import { CURRENT_VERSION, REPO_URL } from '../../../data/constants'; -function SettingsMenu(props: any) { +function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) { const { t } = useTranslation('settings/common'); + const { height, width } = useViewportSize(); return ( - - - {t('tabs.common')} - {t('tabs.customizations')} - - - - - - - - - - - - + <> + } + disallowClose + color="teal" + radius="md" + title="New update available" + hidden={newVersionAvailable === ''} + > + { + //TODO: Translate and add link to release page} + } + Version {newVersionAvailable} is available, update now! + + + + + {t('tabs.common')} + {t('tabs.customizations')} + + + + + + + + + + + + + + + ); } export function SettingsMenuButton(props: any) { useHotkeys([['ctrl+L', () => setOpened(!opened)]]); const { t } = useTranslation('settings/common'); + const [newVersionAvailable, setNewVersionAvailable] = useState(''); + useEffect(() => { + // Fetch Data here when component first mounted + fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => { + res.json().then((data) => { + if (data.tag_name > CURRENT_VERSION) { + setNewVersionAvailable(data.tag_name); + } + }); + }); + }, [CURRENT_VERSION]); const [opened, setOpened] = useState(false); @@ -47,20 +88,21 @@ export function SettingsMenuButton(props: any) { opened={props.opened || opened} onClose={() => setOpened(false)} > - - + - setOpened(true)} - > - - + + setOpened(true)} + > + + + ); diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx deleted file mode 100644 index f1b58cd2a..000000000 --- a/src/components/layout/Footer.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useEffect } from 'react'; -import { createStyles, Footer as FooterComponent } from '@mantine/core'; -import { showNotification } from '@mantine/notifications'; -import { IconAlertCircle as AlertCircle } from '@tabler/icons'; -import { CURRENT_VERSION, REPO_URL } from '../../../data/constants'; - -const useStyles = createStyles((theme) => ({ - footer: { - borderTop: `1px solid ${ - theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2] - }`, - }, - - inner: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - padding: `${theme.spacing.md}px ${theme.spacing.md}px`, - - [theme.fn.smallerThan('sm')]: { - flexDirection: 'column', - }, - }, - - links: { - [theme.fn.smallerThan('sm')]: { - marginTop: theme.spacing.lg, - marginBottom: theme.spacing.sm, - }, - }, -})); - -interface FooterCenteredProps { - links: { link: string; label: string }[]; -} - -export function Footer({ links }: FooterCenteredProps) { - useEffect(() => { - // Fetch Data here when component first mounted - fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => { - res.json().then((data) => { - if (data.tag_name > CURRENT_VERSION) { - showNotification({ - color: 'yellow', - autoClose: false, - title: 'New version available', - icon: , - message: `Version ${data.tag_name} is available, update now!`, - }); - } else if (data.tag_name < CURRENT_VERSION) { - showNotification({ - color: 'orange', - autoClose: 5000, - title: 'You are using a development version', - icon: , - message: 'This version of Homarr is still in development! Bugs are expected 🐛', - }); - } - }); - }); - }, []); - - return ( - - ); -} diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 5e8f074e0..db29e482a 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -1,6 +1,5 @@ import { AppShell, createStyles } from '@mantine/core'; import { Header } from './header/Header'; -import { Footer } from './Footer'; import Aside from './Aside'; import Navbar from './Navbar'; import { HeaderConfig } from './header/HeaderConfig'; @@ -30,7 +29,6 @@ export default function Layout({ children, style }: any) { header={
} navbar={widgetPosition ? : undefined} aside={widgetPosition ? undefined :