diff --git a/apps/renderer/src/atoms/source-content.ts b/apps/renderer/src/atoms/source-content.ts deleted file mode 100644 index 860fafcd23..0000000000 --- a/apps/renderer/src/atoms/source-content.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { atom } from "jotai" - -import { createAtomHooks } from "~/lib/jotai" - -export const [, , useShowSourceContent, , getShowSourceContent, setShowSourceContent] = - createAtomHooks(atom(false)) - -export const toggleShowSourceContent = () => setShowSourceContent(!getShowSourceContent()) -export const resetShowSourceContent = () => setShowSourceContent(false) diff --git a/apps/renderer/src/atoms/source-content.tsx b/apps/renderer/src/atoms/source-content.tsx new file mode 100644 index 0000000000..04cb15e17e --- /dev/null +++ b/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(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: () => , + resizeable: true, + clickOutsideToDismiss: true, + // The number was picked arbitrarily + resizeDefaultSize: { width: 900, height: 900 }, + }) + }, + [present], + ) +} diff --git a/apps/renderer/src/hooks/biz/useEntryActions.tsx b/apps/renderer/src/hooks/biz/useEntryActions.tsx index 36b5ea77ab..3480115699 100644 --- a/apps/renderer/src/hooks/biz/useEntryActions.tsx +++ b/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, ])