diff --git a/app/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx b/app/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx index 703dc5a6..99cbc481 100644 --- a/app/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx +++ b/app/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx @@ -1,18 +1,6 @@ import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs"; import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api"; -import { Separator } from "components/Layout"; -import { useHasPageLoaded } from "components/InitialPageLoadProvider"; -import { BlueskyTiny } from "components/Icons/BlueskyTiny"; -import { CommentTiny } from "components/Icons/CommentTiny"; -import { QuoteTiny } from "components/Icons/QuoteTiny"; -import { ThreadLink, QuotesLink } from "../PostLinks"; -import { useLocalizedDate } from "src/hooks/useLocalizedDate"; -import { - BlueskyEmbed, - PostNotAvailable, -} from "components/Blocks/BlueskyPostBlock/BlueskyEmbed"; -import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText"; -import { openPage } from "../PostPages"; +import { PostNotAvailable } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed"; import { BskyPostContent } from "../BskyPostContent"; export const PubBlueskyPostBlock = (props: { @@ -22,13 +10,6 @@ export const PubBlueskyPostBlock = (props: { }) => { let post = props.post; - const handleOpenThread = () => { - openPage(props.pageId ? { type: "doc", id: props.pageId } : undefined, { - type: "thread", - uri: post.uri, - }); - }; - switch (true) { case AppBskyFeedDefs.isBlockedPost(post) || AppBskyFeedDefs.isBlockedAuthor(post) || diff --git a/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx b/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx index 0d982e50..f2812cb8 100644 --- a/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx +++ b/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx @@ -98,8 +98,7 @@ function QuotePost(props: { post: PostView; quotesUri: string }) { showBlueskyLink={true} quoteEnabled replyEnabled - onEmbedClick={(e) => e.stopPropagation()} - className="relative rounded cursor-pointer text-sm" + className="relative rounded text-sm" /> ); } diff --git a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx index da33db08..d8145d12 100644 --- a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx +++ b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx @@ -25,13 +25,9 @@ export function BskyPostContent(props: { showEmbed?: boolean; compactEmbed?: boolean; showBlueskyLink?: boolean; - onEmbedClick?: (e: React.MouseEvent) => void; quoteEnabled?: boolean; replyEnabled?: boolean; replyOnClick?: (e: React.MouseEvent) => void; - replyLine?: { - onToggle: (e: React.MouseEvent) => void; - }; }) { const { post, @@ -40,11 +36,9 @@ export function BskyPostContent(props: { showEmbed = true, compactEmbed = false, showBlueskyLink = true, - onEmbedClick, quoteEnabled, replyEnabled, replyOnClick, - replyLine, } = props; const record = post.record as AppBskyFeedPost.Record; @@ -52,24 +46,27 @@ export function BskyPostContent(props: { const url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`; return ( - // pointer events non so that is there is a replyLine, it can be clicked even though its underneath the postContent (buttons here have pointer-events-auto applied to make them clickable) -
-
-
+
+ +
{props.showBlueskyLink || (props.post.quoteCount && props.post.quoteCount > 0) || (props.post.replyCount && props.post.replyCount > 0) ? ( @@ -137,12 +138,8 @@ export function CompactBskyPostContent(props: { quoteEnabled?: boolean; replyEnabled?: boolean; replyOnClick?: (e: React.MouseEvent) => void; - replyLine?: { - onToggle: (e: React.MouseEvent) => void; - }; }) { - const { post, parent, quoteEnabled, replyEnabled, replyOnClick, replyLine } = - props; + const { post, parent, quoteEnabled, replyEnabled, replyOnClick } = props; const record = post.record as AppBskyFeedPost.Record; const postId = post.uri.split("/")[4]; @@ -150,28 +147,19 @@ export function CompactBskyPostContent(props: { return (
+ - )} -
-
+ +
+ <> +
+
+
+
-
+ ); } diff --git a/components/Blocks/BlueskyPostBlock/index.tsx b/components/Blocks/BlueskyPostBlock/index.tsx index 4c3639bf..10353ad2 100644 --- a/components/Blocks/BlueskyPostBlock/index.tsx +++ b/components/Blocks/BlueskyPostBlock/index.tsx @@ -6,9 +6,9 @@ import { BlockProps, BlockLayout } from "../Block"; import { elementId } from "src/utils/elementId"; import { focusBlock } from "src/utils/focusBlock"; import { AppBskyFeedDefs, AppBskyFeedPost, RichText } from "@atproto/api"; -import { BlueskyEmbed, PostNotAvailable } from "./BlueskyEmbed"; +import { PostNotAvailable } from "./BlueskyEmbed"; import { BlueskyPostEmpty } from "./BlueskyEmpty"; -import { BlueskyRichText } from "./BlueskyRichText"; + import { Separator } from "components/Layout"; import { BlueskyTiny } from "components/Icons/BlueskyTiny"; import { CommentTiny } from "components/Icons/CommentTiny"; diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx index 623a3adf..134f6ede 100644 --- a/components/Pages/Page.tsx +++ b/components/Pages/Page.tsx @@ -113,7 +113,7 @@ export const PageWrapper = (props: { } ${cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"} ${props.fullPageScroll && "max-w-full "} - ${props.pageType === "doc" && !props.fullPageScroll ? (props.fixedWidth ? "sm:max-w-prose max-w-[var(--page-width-units)]" : "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]") : ""} + ${props.pageType === "doc" && !props.fullPageScroll ? (props.fixedWidth ? "w-[10000px] sm:max-w-prose max-w-[var(--page-width-units)]" : "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]") : ""} ${ props.pageType === "canvas" && !props.fullPageScroll && diff --git a/src/utils/scrollIntoView.ts b/src/utils/scrollIntoView.ts index 1b8ff6a1..ce2dd4de 100644 --- a/src/utils/scrollIntoView.ts +++ b/src/utils/scrollIntoView.ts @@ -6,5 +6,12 @@ export function scrollIntoView( threshold: number = 0.9, ) { const element = document.getElementById(elementId); - scrollIntoViewIfNeeded(element, false, "smooth"); + // Use double requestAnimationFrame to ensure the element is fully painted + // before attempting to scroll. This fixes smooth scrolling when opening + // pages from within other pages. + requestAnimationFrame(() => { + requestAnimationFrame(() => { + scrollIntoViewIfNeeded(element, false, "smooth"); + }); + }); }