add release notes modal to appmenu

src/renderer/features/titlebar/components/app-menu.tsx

@@ -9,6 +9,7 @@ import packageJson from '../../../../../package.json';
 import { isServerLock } from '/@/renderer/features/action-required/utils/window-properties';
 import { ServerList } from '/@/renderer/features/servers/components/server-list';
 import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
+import { openReleaseNotesModal } from '/@/renderer/release-notes-modal';
 import { useAppStore, useAppStoreActions, useCommandPalette } from '/@/renderer/store';
 import { DropdownMenu, MenuItemProps } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -225,16 +226,19 @@ export const AppMenu = () => {
             type: 'divider',
         },
         {
-            component: 'a',
-            href: 'https://github.com/jeffvli/feishin/releases',
             icon: 'brandGitHub',
             id: 'version',
             label: t('page.appMenu.version', {
                 postProcess: 'sentenceCase',
                 version: packageJson.version,
             }),
-            rightSection: <Icon icon="externalLink" />,
-            target: '_blank',
+            onClick: () =>
+                openReleaseNotesModal(
+                    t('common.newVersion', {
+                        postProcess: 'sentenceCase',
+                        version: packageJson.version,
+                    }) as string,
+                ),
             type: 'item',
         },
         {

src/renderer/release-notes-modal.tsx

@@ -2,7 +2,7 @@ import { closeAllModals, openModal } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import DOMPurify from 'dompurify';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import packageJson from '../../package.json';
@@ -216,10 +216,14 @@ const ReleaseNotesContent = ({ onDismiss, version }: ReleaseNotesContentProps) =
 
 const WAIT_FOR_LOCAL_STORAGE = 1000 * 2;
 
-export const ReleaseNotesModal = () => {
-    const { version } = packageJson;
-    const { t } = useTranslation();
+interface ReleaseNotesModalContentWrapperProps {
+    setDismissRef?: (fn: (() => void) | undefined) => void;
+}
 
+const ReleaseNotesModalContentWrapper = ({
+    setDismissRef,
+}: ReleaseNotesModalContentWrapperProps) => {
+    const { version } = packageJson;
     const [, setValue] = useLocalStorage({ key: 'version' });
 
     const handleDismiss = useCallback(() => {
@@ -227,6 +231,36 @@ export const ReleaseNotesModal = () => {
         closeAllModals();
     }, [setValue, version]);
 
+    useEffect(() => {
+        setDismissRef?.(handleDismiss);
+        return () => setDismissRef?.(undefined);
+    }, [handleDismiss, setDismissRef]);
+
+    return <ReleaseNotesContent onDismiss={handleDismiss} version={version} />;
+};
+
+export const openReleaseNotesModal = (title: string) => {
+    const dismissRef = { current: null as (() => void) | null };
+
+    openModal({
+        children: (
+            <ReleaseNotesModalContentWrapper
+                setDismissRef={(fn) => {
+                    dismissRef.current = fn ?? null;
+                }}
+            />
+        ),
+        onClose: () => dismissRef.current?.(),
+        size: 'xl',
+        title,
+    });
+};
+
+export const ReleaseNotesModal = () => {
+    const { version } = packageJson;
+    const { t } = useTranslation();
+    const dismissRef = useRef<(() => void) | null>(null);
+
     useEffect(() => {
         const timeoutId = setTimeout(() => {
             const valueFromLocalStorage = localStorage.getItem('version');
@@ -235,8 +269,14 @@ export const ReleaseNotesModal = () => {
             // Only show modal if the stored version is different from current version
             if (valueFromLocalStorage !== versionString) {
                 openModal({
-                    children: <ReleaseNotesContent onDismiss={handleDismiss} version={version} />,
-                    onClose: handleDismiss,
+                    children: (
+                        <ReleaseNotesModalContentWrapper
+                            setDismissRef={(fn) => {
+                                dismissRef.current = fn ?? null;
+                            }}
+                        />
+                    ),
+                    onClose: () => dismissRef.current?.(),
                     size: 'xl',
                     title: t('common.newVersion', {
                         postProcess: 'sentenceCase',
@@ -249,7 +289,7 @@ export const ReleaseNotesModal = () => {
         return () => {
             clearTimeout(timeoutId);
         };
-    }, [handleDismiss, t, version]);
+    }, [t, version]);
 
     return null;
 };