Add new version dialog

src/renderer/app.tsx

@@ -4,9 +4,11 @@ import { ModuleRegistry } from '@ag-grid-community/core';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
 import { MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
+import isElectron from 'is-electron';
 import { initSimpleImg } from 'react-simple-img';
 import { BaseContextModal, toast } from './components';
 import { useTheme } from './hooks';
+import { IsUpdatedDialog } from './is-updated-dialog';
 import { AppRouter } from './router/app-router';
 import {
     useHotkeySettings,
@@ -19,7 +21,6 @@ import { ContextMenuProvider } from '/@/renderer/features/context-menu';
 import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
 import { PlayQueueHandlerContext } from '/@/renderer/features/player';
 import { AddToPlaylistContextModal } from '/@/renderer/features/playlists';
-import isElectron from 'is-electron';
 import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
 import { PlayerState, usePlayerStore, useQueueControls } from '/@/renderer/store';
 import { PlaybackType, PlayerStatus } from '/@/renderer/types';
@@ -214,6 +215,7 @@ export const App = () => {
                     </ContextMenuProvider>
                 </PlayQueueHandlerContext.Provider>
             </ModalsProvider>
+            <IsUpdatedDialog />
         </MantineProvider>
     );
 };

src/renderer/is-updated-dialog.tsx

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { Group, Stack } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { RiExternalLinkLine } from 'react-icons/ri';
+import { Button, Dialog, Text } from './components';
+import packageJson from '../../package.json';
+
+export const IsUpdatedDialog = () => {
+    const { version } = packageJson;
+
+    const [value, setValue] = useLocalStorage({ key: 'version' });
+
+    const handleDismiss = useCallback(() => {
+        setValue(version);
+    }, [setValue, version]);
+
+    return (
+        <Dialog
+            opened={value !== version}
+            position={{ bottom: '5rem', right: '1rem' }}
+            styles={{
+                root: {
+                    marginBottom: '50px',
+                    right: '1rem',
+                },
+            }}
+        >
+            <Stack>
+                <Text>A new version of Feishin has been installed ({version})</Text>
+                <Group noWrap>
+                    <Button
+                        component="a"
+                        href={`https://github.com/jeffvli/feishin/releases/tag/v${version}`}
+                        rightIcon={<RiExternalLinkLine />}
+                        target="_blank"
+                        variant="filled"
+                        onClick={handleDismiss}
+                    >
+                        View release notes
+                    </Button>
+                    <Button
+                        variant="default"
+                        onClick={handleDismiss}
+                    >
+                        Dismiss
+                    </Button>
+                </Group>
+            </Stack>
+        </Dialog>
+    );
+};