Change add to library "show duplicate entry" button to be a link

CHANGELOG.md

@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**General**) Improve loading of images
 - (**Category**) Prevent creating categories without a name
 - (**WebUI Update**) Do not require a forced page refresh when an update has been detected in case the app just got opened
+- (**Manga**) Change "duplicate entry detected" dialog "show entry" button to be a link instead of a button
 
 ### Fixed
 - (**General**) Fix tooltips sometimes causing a layout shift

src/base/components/modals/ConfirmDialog.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import { AwaitableComponentProps } from 'awaitable-component';
+import { Link as RouterLink } from 'react-router-dom';
 
 type Action = {
     show?: boolean;
@@ -22,7 +23,7 @@ type Action = {
 };
 
 type Actions = {
-    extra?: Action;
+    extra?: Action & { link?: string };
     cancel?: Action;
     confirm?: Action;
 };
@@ -49,6 +50,7 @@ export const ConfirmDialog = ({
             show: passedActions?.extra?.show ?? false,
             title: passedActions?.extra?.title ?? '',
             contain: passedActions?.extra?.contain ?? false,
+            link: passedActions?.extra?.link ?? undefined,
         },
         cancel: {
             show: passedActions?.cancel?.show ?? true,
@@ -85,17 +87,39 @@ export const ConfirmDialog = ({
                         gap: 1,
                     }}
                 >
-                    {actions.extra.show && (
+                    {(() => {
-                        <Button
+                        if (!actions.extra.show) {
-                            onClick={() => {
+                            return null;
-                                onDismiss();
+                        }
-                                onExtra?.();
+
-                            }}
+                        if (actions.extra.link) {
-                            variant={actions.extra.contain ? 'contained' : undefined}
+                            return (
-                        >
+                                <Button
-                            {actions.extra.title}
+                                    component={RouterLink}
-                        </Button>
+                                    to={actions.extra.link}
-                    )}
+                                    onClick={() => {
+                                        onDismiss();
+                                        onExtra?.();
+                                    }}
+                                    variant={actions.extra.contain ? 'contained' : undefined}
+                                >
+                                    {actions.extra.title}
+                                </Button>
+                            );
+                        }
+
+                        return (
+                            <Button
+                                onClick={() => {
+                                    onDismiss();
+                                    onExtra?.();
+                                }}
+                                variant={actions.extra.contain ? 'contained' : undefined}
+                            >
+                                {actions.extra.title}
+                            </Button>
+                        );
+                    })()}
                     <Stack
                         sx={{
                             flexDirection: 'row',

src/features/manga/hooks/useManageMangaLibraryState.tsx

@@ -8,7 +8,6 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import gql from 'graphql-tag';
 import { AwaitableComponent } from 'awaitable-component';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -29,7 +28,6 @@ export const useManageMangaLibraryState = (
     confirmRemoval: boolean = false,
 ) => {
     const { t } = useTranslation();
-    const navigate = useNavigate();
 
     const [isInLibrary, setIsInLibrary] = useState(!!manga.inLibrary);
 
@@ -137,10 +135,15 @@ export const useManageMangaLibraryState = (
                         title: t('global.label.are_you_sure'),
                         message: t('manga.action.library.add.dialog.duplicate.label.info'),
                         actions: {
-                            extra: { show: true, title: t('migrate.dialog.action.button.show_entry'), contain: true },
+                            extra: {
+                                show: true,
+                                title: t('migrate.dialog.action.button.show_entry'),
+                                contain: true,
+                                link: AppRoutes.manga.path(duplicatedLibraryMangas!.data.mangas.nodes[0].id),
+                            },
                             confirm: { title: t('global.button.add') },
                         },
-                        onExtra: () => navigate(AppRoutes.manga.path(duplicatedLibraryMangas!.data.mangas.nodes[0].id)),
+                        onExtra: () => {},
                     },
                     { id: `manga-library-state-add-duplicated-${manga.id}` },
                 );