feat: view source content in app

apps/renderer/src/atoms/source-content.tsx

@@ -0,0 +1,31 @@
+import { atom } from "jotai"
+import { useCallback } from "react"
+
+import { useModalStack } from "~/components/ui/modal"
+import { createAtomHooks } from "~/lib/jotai"
+import { SourceContentView } from "~/modules/entry-content/components/SourceContentView"
+
+export const [, , useShowSourceContent, , getShowSourceContent, setShowSourceContent] =
+  createAtomHooks(atom<boolean>(false))
+
+export const toggleShowSourceContent = () => setShowSourceContent(!getShowSourceContent())
+export const resetShowSourceContent = () => setShowSourceContent(false)
+
+export const useSourceContentModal = () => {
+  const { present } = useModalStack()
+
+  return useCallback(
+    ({ title, src }: { title?: string; src: string }) => {
+      present({
+        id: src,
+        title,
+        content: () => <SourceContentView src={src} />,
+        resizeable: true,
+        clickOutsideToDismiss: true,
+        // The number was picked arbitrarily
+        resizeDefaultSize: { width: 900, height: 700 },
+      })
+    },
+    [present],
+  )
+}

apps/renderer/src/hooks/biz/useEntryActions.tsx

@@ -13,6 +13,12 @@ import {
   setReadabilityStatus,
 } from "~/atoms/readability"
 import { useIntegrationSettingKey } from "~/atoms/settings/integration"
+import {
+  setShowSourceContent,
+  toggleShowSourceContent,
+  useShowSourceContent,
+  useSourceContentModal,
+} from "~/atoms/source-content"
 import { whoami } from "~/atoms/user"
 import { mountLottie } from "~/components/ui/lottie-container"
 import {
@@ -23,6 +29,7 @@ import {
 import { shortcuts } from "~/constants/shortcuts"
 import { tipcClient } from "~/lib/client"
 import { nextFrame } from "~/lib/dom"
+import { FeedViewType } from "~/lib/enum"
 import { getOS } from "~/lib/utils"
 import StarAnimationUri from "~/lottie/star.lottie?url"
 import type { CombinedEntryModel } from "~/models"
@@ -31,6 +38,8 @@ import type { FlatEntryModel } from "~/store/entry"
 import { entryActions } from "~/store/entry"
 import { useFeedById } from "~/store/feed"
 
+import { navigateEntry } from "./useNavigateEntry"
+
 const absoluteStarAnimationUri = new URL(StarAnimationUri, import.meta.url).href
 
 export const useEntryReadabilityToggle = ({ id, url }: { id: string; url: string }) =>
@@ -148,6 +157,9 @@ export const useEntryActions = ({
     entryId: populatedEntry?.entries.id ?? undefined,
   })
 
+  const showSourceContent = useShowSourceContent()
+  const showSourceContentModal = useSourceContentModal()
+
   const collect = useCollect(populatedEntry)
   const uncollect = useUnCollect(populatedEntry)
   const read = useRead()
@@ -344,12 +356,36 @@ export const useEntryActions = ({
         }),
         shortcut: shortcuts.entry.openInBrowser.key,
         className: "i-mgc-world-2-cute-re",
-        hide: !populatedEntry.entries.url,
+        hide: type === "toolbar" || !populatedEntry.entries.url,
         onClick: () => {
           if (!populatedEntry.entries.url) return
           window.open(populatedEntry.entries.url, "_blank")
         },
       },
+      {
+        key: "viewSourceContent",
+        name: t("entry_actions.view_source_content"),
+        // shortcut: shortcuts.entry.openInBrowser.key,
+        className: !showSourceContent ? "i-mgc-world-2-cute-re" : tw`i-mgc-world-2-cute-fi`,
+        hide: !populatedEntry.entries.url,
+        active: showSourceContent,
+        onClick: () => {
+          if (!populatedEntry.entries.url) return
+          if (view === FeedViewType.SocialMedia || view === FeedViewType.Videos) {
+            showSourceContentModal({
+              title: populatedEntry.entries.title ?? undefined,
+              src: populatedEntry.entries.url,
+            })
+            return
+          }
+          if (type === "toolbar") {
+            toggleShowSourceContent()
+            return
+          }
+          navigateEntry({ entryId: populatedEntry.entries.id })
+          setShowSourceContent(true)
+        },
+      },
       {
         name: t("entry_actions.share"),
         key: "share",
@@ -406,9 +442,12 @@ export const useEntryActions = ({
     instapaperPassword,
     instapaperUsername,
     feed?.ownerUserId,
+    type,
+    showSourceContent,
     openTipModal,
     collect,
     uncollect,
+    showSourceContentModal,
     read,
     unread,
   ])

apps/renderer/src/hooks/biz/useNavigateEntry.ts

@@ -2,6 +2,7 @@ import { isUndefined } from "lodash-es"
 
 import { getReadonlyRoute, getStableRouterNavigate } from "~/atoms/route"
 import { setSidebarActiveView } from "~/atoms/sidebar"
+import { resetShowSourceContent } from "~/atoms/source-content"
 import { ROUTE_ENTRY_PENDING, ROUTE_FEED_IN_FOLDER, ROUTE_FEED_PENDING } from "~/constants"
 import { FeedViewType } from "~/lib/enum"
 
@@ -37,6 +38,7 @@ export const navigateEntry = (options: NavigateEntryOptions) => {
     nextSearchParams.set("view", view.toString())
     setSidebarActiveView(view)
   }
+  resetShowSourceContent()
 
   const finalView = nextSearchParams.get("view")
 

apps/renderer/src/modules/entry-content/components/SourceContentView.tsx

@@ -0,0 +1,95 @@
+import { AnimatePresence } from "framer-motion"
+import { useEffect, useRef, useState } from "react"
+
+import { useShowSourceContent } from "~/atoms/source-content"
+import { m } from "~/components/common/Motion"
+import { softSpringPreset } from "~/components/ui/constants/spring"
+
+import { EntryContentLoading } from "../loading"
+
+const ViewTag = window.electron ? "webview" : "iframe"
+const variants = {
+  hidden: { x: "100%" },
+  visible: { x: 0 },
+  exit: { x: "100%" },
+}
+
+const Banner = () => {
+  return (
+    <div className="z-50 w-full bg-yellow-600 p-3 text-white">
+      <div className="text-center">
+        <p>Some websites can't be displayed here. Download desktop app to view it.</p>
+      </div>
+    </div>
+  )
+}
+
+export const SourceContentView = ({ src }: { src: string }) => {
+  const showSourceContent = useShowSourceContent()
+  const [loading, setLoading] = useState(true)
+  const webviewRef = useRef<HTMLIFrameElement | null>(null)
+
+  useEffect(() => {
+    const abortController = new AbortController()
+    const webview = webviewRef.current
+    if (!webview) return
+    const handleDidStopLoading = () => setLoading(false)
+
+    // See https://www.electronjs.org/docs/latest/api/webview-tag#example
+    webview.addEventListener("did-start-loading", handleDidStopLoading, {
+      signal: abortController.signal,
+    })
+
+    return () => {
+      abortController.abort()
+    }
+  }, [src, showSourceContent])
+
+  return (
+    <>
+      {!window.electron && <Banner />}
+      <div className="relative flex size-full flex-col">
+        {loading && (
+          <div className="center mt-16 min-w-0">
+            <EntryContentLoading icon={src} />
+          </div>
+        )}
+        <m.div
+          className="size-full"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: loading ? 0 : 1 }}
+          transition={softSpringPreset}
+        >
+          <ViewTag
+            ref={webviewRef}
+            className="size-full"
+            src={src}
+            sandbox="allow-scripts allow-same-origin"
+            // For iframe
+            onLoad={() => setLoading(false)}
+          />
+        </m.div>
+      </div>
+    </>
+  )
+}
+
+export const SourceContentPanel = ({ src }: { src: string | null }) => {
+  const showSourceContent = useShowSourceContent()
+  return (
+    <AnimatePresence>
+      {showSourceContent && src && (
+        <m.div
+          className="absolute left-0 top-0 z-[1] size-full bg-theme-background"
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          variants={variants}
+          transition={softSpringPreset}
+        >
+          <SourceContentView src={src} />
+        </m.div>
+      )}
+    </AnimatePresence>
+  )
+}