refactor: show source content in modal in social media and video

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"
+
+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 }) => {
+      const ViewTag = window.electron ? "webview" : "iframe"
+      present({
+        id: src,
+        title,
+        content: () => <ViewTag src={src} style={{ width: "100%", height: "100%" }} />,
+        resizeable: true,
+        clickOutsideToDismiss: true,
+        // The number was picked arbitrarily
+        resizeDefaultSize: { width: 900, height: 900 },
+      })
+    },
+    [present],
+  )
+}

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

@@ -14,9 +14,10 @@ import {
 } from "~/atoms/readability"
 import { useIntegrationSettingKey } from "~/atoms/settings/integration"
 import {
-  getShowSourceContent,
   setShowSourceContent,
   toggleShowSourceContent,
+  useShowSourceContent,
+  useSourceContentModal,
 } from "~/atoms/source-content"
 import { whoami } from "~/atoms/user"
 import { mountLottie } from "~/components/ui/lottie-container"
@@ -28,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"
@@ -155,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()
@@ -362,8 +367,16 @@ export const useEntryActions = ({
         // shortcut: shortcuts.entry.openInBrowser.key,
         className: "i-mgc-world-2-cute-re",
         hide: !populatedEntry.entries.url,
-        active: getShowSourceContent(),
+        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
@@ -428,9 +441,12 @@ export const useEntryActions = ({
     instapaperPassword,
     instapaperUsername,
     feed?.ownerUserId,
+    type,
+    showSourceContent,
     openTipModal,
     collect,
     uncollect,
+    showSourceContentModal,
     read,
     unread,
   ])