From bac77599f574612f49970475884aaaa2a0e15668 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 19 Jul 2025 19:09:22 +0200
Subject: [PATCH] Add WebView support

---
 public/locales/en.json                        |  4 +-
 src/assets/icons/IconBrowser.tsx              | 11 +++++
 src/assets/icons/IconWebView.tsx              | 11 +++++
 src/lib/requests/RequestManager.ts            |  4 ++
 .../actions/ChapterActionMenuItems.tsx        | 36 +++++++++++----
 .../manga/components/details/MangaDetails.tsx | 46 +++++++++++++------
 .../overlay/ReaderOverlayHeaderMobile.tsx     | 12 ++++-
 .../desktop/ReaderNavBarDesktopActions.tsx    | 19 ++++++--
 8 files changed, 113 insertions(+), 30 deletions(-)
 create mode 100644 src/assets/icons/IconBrowser.tsx
 create mode 100644 src/assets/icons/IconWebView.tsx

diff --git a/public/locales/en.json b/public/locales/en.json
index a1b3125b..fe308dce 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -104,7 +104,6 @@
         }
       },
       "label": {
-        "open_on_source": "Open on source",
         "select": "Select"
       },
       "mark_as_read": {
@@ -349,7 +348,8 @@
       "migrate": "Migrate",
       "ok": "Ok",
       "open": "Open",
-      "open_site": "Open Site",
+      "open_browser": "Open in browser",
+      "open_webview": "Open in WebView",
       "options": "Options",
       "popular": "Popular",
       "refresh": "Refresh",
diff --git a/src/assets/icons/IconBrowser.tsx b/src/assets/icons/IconBrowser.tsx
new file mode 100644
index 00000000..ba05abfb
--- /dev/null
+++ b/src/assets/icons/IconBrowser.tsx
@@ -0,0 +1,11 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import LaunchIcon from '@mui/icons-material/Launch';
+
+export const IconBrowser = LaunchIcon;
diff --git a/src/assets/icons/IconWebView.tsx b/src/assets/icons/IconWebView.tsx
new file mode 100644
index 00000000..dfa9ccc6
--- /dev/null
+++ b/src/assets/icons/IconWebView.tsx
@@ -0,0 +1,11 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser';
+
+export const IconWebView = OpenInBrowserIcon;
diff --git a/src/lib/requests/RequestManager.ts b/src/lib/requests/RequestManager.ts
index 3db93a7e..99d937c2 100644
--- a/src/lib/requests/RequestManager.ts
+++ b/src/lib/requests/RequestManager.ts
@@ -466,6 +466,10 @@ export class RequestManager {
         return `${this.getBaseUrl()}${apiVersion}${endpoint}`;
     }
 
+    public getWebviewUrl(url: string): string {
+        return `${this.getValidUrlFor('webview')}#${url}`;
+    }
+
     public clearBrowseCacheFor(sourceId: string) {
         const cacheKeys = this.cache.getMatchingKeys(
             new RegExp(`${CACHE_INITIAL_PAGES_FETCHING_KEY}|${CACHE_PAGES_KEY}|${CACHE_RESULTS_KEY}.*${sourceId}`),
diff --git a/src/modules/chapter/components/actions/ChapterActionMenuItems.tsx b/src/modules/chapter/components/actions/ChapterActionMenuItems.tsx
index d18fc9fb..f9e6942f 100644
--- a/src/modules/chapter/components/actions/ChapterActionMenuItems.tsx
+++ b/src/modules/chapter/components/actions/ChapterActionMenuItems.tsx
@@ -16,7 +16,6 @@ import BookmarkRemove from '@mui/icons-material/BookmarkRemove';
 import BookmarkAdd from '@mui/icons-material/BookmarkAdd';
 import DoneAll from '@mui/icons-material/DoneAll';
 import { ComponentProps, useMemo } from 'react';
-import LaunchIcon from '@mui/icons-material/Launch';
 import { SelectableCollectionReturnType } from '@/modules/collection/hooks/useSelectableCollection.ts';
 import { Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { MenuItem } from '@/modules/core/components/menu/MenuItem.tsx';
@@ -41,6 +40,8 @@ import {
     ChapterReadInfo,
     ChapterRealUrlInfo,
 } from '@/modules/chapter/Chapter.types.ts';
+import { IconWebView } from '@/assets/icons/IconWebView.tsx';
+import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
 
 type BaseProps = { onClose: () => void; selectable?: boolean };
 
@@ -173,15 +174,30 @@ export const ChapterActionMenuItems = ({
                 <MenuItem onClick={handleSelect} Icon={CheckBoxOutlineBlank} title={t('chapter.action.label.select')} />
             )}
             {isSingleMode && (
-                <MenuItem
-                    Icon={LaunchIcon}
-                    disabled={!chapter!.realUrl}
-                    onClick={() => {
-                        window.open(chapter!.realUrl!, '_blank', 'noopener,noreferrer');
-                        onClose();
-                    }}
-                    title={t('chapter.action.label.open_on_source')}
-                />
+                <>
+                    <MenuItem
+                        Icon={IconBrowser}
+                        disabled={!chapter!.realUrl}
+                        onClick={() => {
+                            window.open(chapter!.realUrl!, '_blank', 'noopener,noreferrer');
+                            onClose();
+                        }}
+                        title={t('global.button.open_browser')}
+                    />
+                    <MenuItem
+                        Icon={IconWebView}
+                        disabled={!chapter!.realUrl}
+                        onClick={() => {
+                            window.open(
+                                requestManager.getWebviewUrl(chapter!.realUrl!),
+                                '_blank',
+                                'noopener,noreferrer',
+                            );
+                            onClose();
+                        }}
+                        title={t('global.button.open_webview')}
+                    />
+                </>
             )}
             {shouldShowMenuItem(canBeDownloaded) && (
                 <MenuItem
diff --git a/src/modules/manga/components/details/MangaDetails.tsx b/src/modules/manga/components/details/MangaDetails.tsx
index fa75d623..ef58be74 100644
--- a/src/modules/manga/components/details/MangaDetails.tsx
+++ b/src/modules/manga/components/details/MangaDetails.tsx
@@ -14,10 +14,10 @@ import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-import LaunchIcon from '@mui/icons-material/Launch';
 import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ButtonGroup from '@mui/material/ButtonGroup';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
@@ -51,6 +51,9 @@ import { SourceIdInfo } from '@/modules/source/Source.types.ts';
 import { Thumbnail } from '@/modules/manga/components/details/Thumbnail.tsx';
 import { DescriptionGenre } from '@/modules/manga/components/details/DescriptionGenre.tsx';
 import { SearchLink } from '@/modules/manga/components/details/SearchLink.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
+import { IconWebView } from '@/assets/icons/IconWebView.tsx';
 
 const DetailsWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -136,19 +139,34 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
     const { t } = useTranslation();
 
     return (
-        <CustomTooltip title={t('global.button.open_site')} disabled={!url}>
-            <CustomButtonIcon
-                size="medium"
-                disabled={!url}
-                component={Link}
-                href={url ?? undefined}
-                target="_blank"
-                rel="noreferrer"
-                variant="outlined"
-            >
-                <LaunchIcon />
-            </CustomButtonIcon>
-        </CustomTooltip>
+        <ButtonGroup>
+            <CustomTooltip title={t('global.button.open_browser')} disabled={!url}>
+                <CustomButtonIcon
+                    size="medium"
+                    disabled={!url}
+                    component={Link}
+                    href={url ?? undefined}
+                    target="_blank"
+                    rel="noreferrer"
+                    variant="outlined"
+                >
+                    <IconBrowser />
+                </CustomButtonIcon>
+            </CustomTooltip>
+            <CustomTooltip title={t('global.button.open_webview')} disabled={!url}>
+                <CustomButtonIcon
+                    size="medium"
+                    disabled={!url}
+                    component={Link}
+                    href={url ? requestManager.getWebviewUrl(url) : undefined}
+                    target="_blank"
+                    rel="noreferrer"
+                    variant="outlined"
+                >
+                    <IconWebView />
+                </CustomButtonIcon>
+            </CustomTooltip>
+        </ButtonGroup>
     );
 };
 
diff --git a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
index 9cee8d1b..7a328a0a 100644
--- a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
+++ b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
@@ -38,6 +38,7 @@ import { ReaderBookmarkButton } from '@/modules/reader/components/overlay/naviga
 import { FALLBACK_CHAPTER } from '@/modules/chapter/Chapter.constants.ts';
 import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
 import { ReaderExitButton } from '@/modules/reader/components/overlay/navigation/ReaderExitButton.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 
 const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
 
@@ -107,7 +108,16 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
                         rel="noreferrer"
                         target="_blank"
                     >
-                        {t('chapter.action.label.open_on_source')}
+                        {t('global.button.open_browser')}
+                    </MenuItem>
+                    <MenuItem
+                        component={Link}
+                        disabled={!realUrl}
+                        href={realUrl ? requestManager.getWebviewUrl(realUrl) : ''}
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                        {t('global.button.open_webview')}
                     </MenuItem>
                     <MenuItem
                         disabled={!realUrl}
diff --git a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx
index 307bf10f..af32929a 100644
--- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx
@@ -9,7 +9,6 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import DownloadIcon from '@mui/icons-material/Download';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { memo, useMemo, useRef } from 'react';
@@ -25,6 +24,9 @@ import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/Rea
 import { ReaderLibraryButton } from '@/modules/reader/components/overlay/navigation/ReaderLibraryButton.tsx';
 import { ReaderBookmarkButton } from '@/modules/reader/components/overlay/navigation/ReaderBookmarkButton.tsx';
 import { CHAPTER_ACTION_TO_TRANSLATION, FALLBACK_CHAPTER } from '@/modules/chapter/Chapter.constants.ts';
+import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
+import { IconWebView } from '@/assets/icons/IconWebView.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 
 const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, 'currentChapter'>>) => {
     const { t } = useTranslation();
@@ -100,7 +102,7 @@ const BaseReaderNavBarDesktopActions = memo(
                     </IconButton>
                 </CustomTooltip>
                 <DownloadButton currentChapter={currentChapter} />
-                <CustomTooltip title={t('chapter.action.label.open_on_source')} disabled={!realUrl}>
+                <CustomTooltip title={t('global.button.open_browser')} disabled={!realUrl}>
                     <IconButton
                         disabled={!realUrl}
                         href={realUrl ?? ''}
@@ -108,7 +110,18 @@ const BaseReaderNavBarDesktopActions = memo(
                         target="_blank"
                         color="inherit"
                     >
-                        <OpenInNewIcon />
+                        <IconBrowser />
+                    </IconButton>
+                </CustomTooltip>
+                <CustomTooltip title={t('global.button.open_webview')} disabled={!realUrl}>
+                    <IconButton
+                        disabled={!realUrl}
+                        href={realUrl ? requestManager.getWebviewUrl(realUrl) : ''}
+                        rel="noreferrer"
+                        target="_blank"
+                        color="inherit"
+                    >
+                        <IconWebView />
                     </IconButton>
                 </CustomTooltip>
             </Stack>