From 09c45b4615ababce45043d9b0854b646f22d00a6 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 28 Feb 2026 23:35:39 +0800
Subject: [PATCH] fix(linux): avoid transitions API on WebKitGTK on Linux
 (#3417)

---
 .../src/app/library/components/BookshelfItem.tsx     |  6 +++---
 apps/readest-app/src/app/library/page.tsx            |  4 ++--
 apps/readest-app/src/hooks/useAppRouter.ts           | 12 ++++++++++++
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 apps/readest-app/src/hooks/useAppRouter.ts

diff --git a/apps/readest-app/src/app/library/components/BookshelfItem.tsx b/apps/readest-app/src/app/library/components/BookshelfItem.tsx
index f57f7509..ef64a7b4 100644
--- a/apps/readest-app/src/app/library/components/BookshelfItem.tsx
+++ b/apps/readest-app/src/app/library/components/BookshelfItem.tsx
@@ -1,17 +1,17 @@
 import clsx from 'clsx';
 import { useCallback } from 'react';
-import { useTransitionRouter } from 'next-view-transitions';
-import { navigateToReader, showReaderWindow } from '@/utils/nav';
 import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useAppRouter } from '@/hooks/useAppRouter';
 import { useLongPress } from '@/hooks/useLongPress';
 import { Menu, MenuItem } from '@tauri-apps/api/menu';
 import { revealItemInDir } from '@tauri-apps/plugin-opener';
 import { eventDispatcher } from '@/utils/event';
 import { getOSPlatform } from '@/utils/misc';
 import { throttle } from '@/utils/throttle';
+import { navigateToReader, showReaderWindow } from '@/utils/nav';
 import { LibraryCoverFitType, LibraryViewModeType } from '@/types/settings';
 import { BOOK_UNGROUPED_ID, BOOK_UNGROUPED_NAME } from '@/services/constants';
 import { FILE_REVEAL_LABELS, FILE_REVEAL_PLATFORMS } from '@/utils/os';
@@ -121,7 +121,7 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
   handleUpdateReadingStatus,
 }) => {
   const _ = useTranslation();
-  const router = useTransitionRouter();
+  const router = useAppRouter();
   const { envConfig, appService } = useEnv();
   const { settings } = useSettingsStore();
   const { updateBook } = useLibraryStore();
diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx
index 41f168b1..45a2154e 100644
--- a/apps/readest-app/src/app/library/page.tsx
+++ b/apps/readest-app/src/app/library/page.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import { MdChevronRight } from 'react-icons/md';
 import { useState, useRef, useEffect, Suspense, useCallback } from 'react';
 import { ReadonlyURLSearchParams, useSearchParams } from 'next/navigation';
-import { useTransitionRouter } from 'next-view-transitions';
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from 'overlayscrollbars-react';
 import 'overlayscrollbars/overlayscrollbars.css';
 
@@ -60,6 +59,7 @@ import { CatalogDialog } from './components/OPDSDialog';
 import { MigrateDataWindow } from './components/MigrateDataWindow';
 import { useDragDropImport } from './hooks/useDragDropImport';
 import { useTransferQueue } from '@/hooks/useTransferQueue';
+import { useAppRouter } from '@/hooks/useAppRouter';
 import { Toast } from '@/components/Toast';
 import {
   createBookGroups,
@@ -83,7 +83,7 @@ const LibraryPageWithSearchParams = () => {
 };
 
 const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchParams | null }) => {
-  const router = useTransitionRouter();
+  const router = useAppRouter();
   const { envConfig, appService } = useEnv();
   const { token, user } = useAuth();
   const {
diff --git a/apps/readest-app/src/hooks/useAppRouter.ts b/apps/readest-app/src/hooks/useAppRouter.ts
new file mode 100644
index 00000000..10538e70
--- /dev/null
+++ b/apps/readest-app/src/hooks/useAppRouter.ts
@@ -0,0 +1,12 @@
+import { useEnv } from '@/context/EnvContext';
+import { useRouter } from 'next/navigation';
+import { useTransitionRouter } from 'next-view-transitions';
+
+export const useAppRouter = () => {
+  const { appService } = useEnv();
+  const transitionRouter = useTransitionRouter();
+  const plainRouter = useRouter();
+
+  // View Transitions API crashes WebKitGTK 4.1 on Linux
+  return appService?.isLinuxApp ? plainRouter : transitionRouter;
+};