fix(linux): avoid transitions API on WebKitGTK on Linux (#3417)

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();

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 {

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;
+};