+6 -6

actions/publishToPublication.ts

··· 305 305 if (!b) return []; 306 306 let block: PubLeafletPagesLinearDocument.Block = { 307 307 $type: "pub.leaflet.pages.linearDocument#block", 308 308 - alignment, 309 308 block: b, 310 309 }; 310 310 + if (alignment) block.alignment = alignment; 311 311 return [block]; 312 312 } else { 313 313 let block: PubLeafletPagesLinearDocument.Block = { ··· 405 405 let [stringValue, facets] = getBlockContent(b.value); 406 406 let block: $Typed<PubLeafletBlocksHeader.Main> = { 407 407 $type: "pub.leaflet.blocks.header", 408 408 - level: headingLevel?.data.value || 1, 408 408 + level: Math.floor(headingLevel?.data.value || 1), 409 409 plaintext: stringValue, 410 410 facets, 411 411 }; ··· 438 438 let block: $Typed<PubLeafletBlocksIframe.Main> = { 439 439 $type: "pub.leaflet.blocks.iframe", 440 440 url: url.data.value, 441 441 - height: height?.data.value || 600, 441 441 + height: Math.floor(height?.data.value || 600), 442 442 }; 443 443 return block; 444 444 } ··· 452 452 $type: "pub.leaflet.blocks.image", 453 453 image: blobref, 454 454 aspectRatio: { 455 455 - height: image.data.height, 456 456 - width: image.data.width, 455 455 + height: Math.floor(image.data.height), 456 456 + width: Math.floor(image.data.width), 457 457 }, 458 458 alt: altText ? altText.data.value : undefined, 459 459 }; ··· 770 770 image: blob.data.blob, 771 771 repeat: backgroundImageRepeat?.data.value ? true : false, 772 772 ...(backgroundImageRepeat?.data.value && { 773 773 - width: backgroundImageRepeat.data.value, 773 773 + width: Math.floor(backgroundImageRepeat.data.value), 774 774 }), 775 775 }; 776 776 }

+3 -1

app/(home-pages)/discover/page.tsx

··· 17 17 return ( 18 18 <DashboardLayout 19 19 id="discover" 20 20 + cardBorderHidden={false} 20 21 currentPage="discover" 21 22 defaultTab="default" 22 23 actions={null} ··· 31 32 } 32 33 33 34 const DiscoverContent = async (props: { order: string }) => { 34 34 - const orderValue = props.order === "popular" ? "popular" : "recentlyUpdated"; 35 35 + const orderValue = 36 36 + props.order === "popular" ? "popular" : "recentlyUpdated"; 35 37 let { publications, nextCursor } = await getPublications(orderValue); 36 38 37 39 return (

+8

app/(home-pages)/home/HomeLayout.tsx

··· 20 20 useDashboardState, 21 21 } from "components/PageLayouts/DashboardLayout"; 22 22 import { Actions } from "./Actions/Actions"; 23 23 + import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 23 24 import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; 24 25 import { useState } from "react"; 25 26 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; ··· 55 56 props.entityID, 56 57 "theme/background-image", 57 58 ); 59 59 + let cardBorderHidden = !!useCardBorderHidden(props.entityID); 58 60 59 61 let [searchValue, setSearchValue] = useState(""); 60 62 let [debouncedSearchValue, setDebouncedSearchValue] = useState(""); ··· 79 81 return ( 80 82 <DashboardLayout 81 83 id="home" 84 84 + cardBorderHidden={cardBorderHidden} 82 85 currentPage="home" 83 86 defaultTab="home" 84 87 actions={<Actions />} ··· 98 101 <HomeLeafletList 99 102 titles={props.titles} 100 103 initialFacts={props.initialFacts} 104 104 + cardBorderHidden={cardBorderHidden} 101 105 searchValue={debouncedSearchValue} 102 106 /> 103 107 ), ··· 113 117 [root_entity: string]: Fact<Attribute>[]; 114 118 }; 115 119 searchValue: string; 120 120 + cardBorderHidden: boolean; 116 121 }) { 117 122 let { identity } = useIdentityData(); 118 123 let { data: initialFacts } = useSWR( ··· 166 171 searchValue={props.searchValue} 167 172 leaflets={leaflets} 168 173 titles={initialFacts?.titles || {}} 174 174 + cardBorderHidden={props.cardBorderHidden} 169 175 initialFacts={initialFacts?.facts || {}} 170 176 showPreview 171 177 /> ··· 186 192 [root_entity: string]: Fact<Attribute>[]; 187 193 }; 188 194 searchValue: string; 195 195 + cardBorderHidden: boolean; 189 196 showPreview?: boolean; 190 197 }) { 191 198 let { identity } = useIdentityData(); ··· 231 238 loggedIn={!!identity} 232 239 display={display} 233 240 added_at={added_at} 241 241 + cardBorderHidden={props.cardBorderHidden} 234 242 index={index} 235 243 showPreview={props.showPreview} 236 244 isHidden={

+5 -6

app/(home-pages)/home/LeafletList/LeafletListItem.tsx

··· 4 4 import { useState, useRef, useEffect } from "react"; 5 5 import { SpeedyLink } from "components/SpeedyLink"; 6 6 import { useLeafletPublicationStatus } from "components/PageSWRDataProvider"; 7 7 - import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 8 7 9 8 export const LeafletListItem = (props: { 10 9 archived?: boolean | null; 11 10 loggedIn: boolean; 12 11 display: "list" | "grid"; 12 12 + cardBorderHidden: boolean; 13 13 added_at: string; 14 14 title?: string; 15 15 index: number; 16 16 isHidden: boolean; 17 17 showPreview?: boolean; 18 18 }) => { 19 19 - const cardBorderHidden = useCardBorderHidden(); 20 19 const pubStatus = useLeafletPublicationStatus(); 21 20 let [isOnScreen, setIsOnScreen] = useState(props.index < 16 ? true : false); 22 21 let previewRef = useRef<HTMLDivElement | null>(null); ··· 48 47 ref={previewRef} 49 48 className={`relative flex gap-3 w-full 50 49 ${props.isHidden ? "hidden" : "flex"} 51 51 - ${cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`} 50 50 + ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`} 52 51 style={{ 53 53 - backgroundColor: cardBorderHidden 52 52 + backgroundColor: props.cardBorderHidden 54 53 ? "transparent" 55 54 : "rgba(var(--bg-page), var(--bg-page-alpha))", 56 55 }} ··· 68 67 loggedIn={props.loggedIn} 69 68 /> 70 69 </div> 71 71 - {cardBorderHidden && ( 70 70 + {props.cardBorderHidden && ( 72 71 <hr 73 72 className="last:hidden border-border-light" 74 73 style={{ ··· 88 87 ${props.isHidden ? "hidden" : "flex"} 89 88 `} 90 89 style={{ 91 91 - backgroundColor: cardBorderHidden 90 90 + backgroundColor: props.cardBorderHidden 92 91 ? "transparent" 93 92 : "rgba(var(--bg-page), var(--bg-page-alpha))", 94 93 }}

+4 -16

app/(home-pages)/home/LeafletList/LeafletPreview.tsx

··· 18 18 const firstPage = useEntity(root, "root/page")[0]; 19 19 const page = firstPage?.data.value || root; 20 20 21 21 - const cardBorderHidden = useEntity(root, "theme/card-border-hidden")?.data 22 22 - .value; 21 21 + const cardBorderHidden = useCardBorderHidden(root); 23 22 const rootBackgroundImage = useEntity(root, "theme/card-background-image"); 24 23 const rootBackgroundRepeat = useEntity( 25 24 root, ··· 50 49 51 50 const contentWrapperClass = `leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`; 52 51 53 53 - return { 54 54 - root, 55 55 - page, 56 56 - cardBorderHidden, 57 57 - contentWrapperStyle, 58 58 - contentWrapperClass, 59 59 - }; 52 52 + return { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass }; 60 53 } 61 54 62 55 export const LeafletListPreview = (props: { isVisible: boolean }) => { 63 63 - const { 64 64 - root, 65 65 - page, 66 66 - cardBorderHidden, 67 67 - contentWrapperStyle, 68 68 - contentWrapperClass, 69 69 - } = useLeafletPreviewData(); 56 56 + const { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass } = 57 57 + useLeafletPreviewData(); 70 58 71 59 return ( 72 60 <Tooltip

+6

app/(home-pages)/looseleafs/LooseleafsLayout.tsx

··· 1 1 "use client"; 2 2 import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; 3 3 + import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 3 4 import { useState } from "react"; 4 5 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; 5 6 import { Fact, PermissionToken } from "src/replicache"; ··· 29 30 [searchValue], 30 31 ); 31 32 33 33 + let cardBorderHidden = !!useCardBorderHidden(props.entityID); 32 34 return ( 33 35 <DashboardLayout 34 36 id="looseleafs" 37 37 + cardBorderHidden={cardBorderHidden} 35 38 currentPage="looseleafs" 36 39 defaultTab="home" 37 40 actions={<Actions />} ··· 42 45 <LooseleafList 43 46 titles={props.titles} 44 47 initialFacts={props.initialFacts} 48 48 + cardBorderHidden={cardBorderHidden} 45 49 searchValue={debouncedSearchValue} 46 50 /> 47 51 ), ··· 57 61 [root_entity: string]: Fact<Attribute>[]; 58 62 }; 59 63 searchValue: string; 64 64 + cardBorderHidden: boolean; 60 65 }) => { 61 66 let { identity } = useIdentityData(); 62 67 let { data: initialFacts } = useSWR( ··· 103 108 searchValue={props.searchValue} 104 109 leaflets={leaflets} 105 110 titles={initialFacts?.titles || {}} 111 111 + cardBorderHidden={props.cardBorderHidden} 106 112 initialFacts={initialFacts?.facts || {}} 107 113 showPreview 108 114 />

+1

app/(home-pages)/notifications/page.tsx

··· 10 10 return ( 11 11 <DashboardLayout 12 12 id="discover" 13 13 + cardBorderHidden={true} 13 14 currentPage="notifications" 14 15 defaultTab="default" 15 16 actions={null}

-88

app/(home-pages)/p/[didOrHandle]/PostsContent.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { PostListing } from "components/PostListing"; 4 4 - import type { Post } from "app/(home-pages)/reader/getReaderFeed"; 5 5 - import type { Cursor } from "./getProfilePosts"; 6 6 - import { getProfilePosts } from "./getProfilePosts"; 7 7 - import useSWRInfinite from "swr/infinite"; 8 8 - import { useEffect, useRef } from "react"; 9 9 - 10 10 - export const ProfilePostsContent = (props: { 11 11 - did: string; 12 12 - posts: Post[]; 13 13 - nextCursor: Cursor | null; 14 14 - }) => { 15 15 - const getKey = ( 16 16 - pageIndex: number, 17 17 - previousPageData: { 18 18 - posts: Post[]; 19 19 - nextCursor: Cursor | null; 20 20 - } | null, 21 21 - ) => { 22 22 - // Reached the end 23 23 - if (previousPageData && !previousPageData.nextCursor) return null; 24 24 - 25 25 - // First page, we don't have previousPageData 26 26 - if (pageIndex === 0) return ["profile-posts", props.did, null] as const; 27 27 - 28 28 - // Add the cursor to the key 29 29 - return ["profile-posts", props.did, previousPageData?.nextCursor] as const; 30 30 - }; 31 31 - 32 32 - const { data, size, setSize, isValidating } = useSWRInfinite( 33 33 - getKey, 34 34 - ([_, did, cursor]) => getProfilePosts(did, cursor), 35 35 - { 36 36 - fallbackData: [{ posts: props.posts, nextCursor: props.nextCursor }], 37 37 - revalidateFirstPage: false, 38 38 - }, 39 39 - ); 40 40 - 41 41 - const loadMoreRef = useRef<HTMLDivElement>(null); 42 42 - 43 43 - // Set up intersection observer to load more when trigger element is visible 44 44 - useEffect(() => { 45 45 - const observer = new IntersectionObserver( 46 46 - (entries) => { 47 47 - if (entries[0].isIntersecting && !isValidating) { 48 48 - const hasMore = data && data[data.length - 1]?.nextCursor; 49 49 - if (hasMore) { 50 50 - setSize(size + 1); 51 51 - } 52 52 - } 53 53 - }, 54 54 - { threshold: 0.1 }, 55 55 - ); 56 56 - 57 57 - if (loadMoreRef.current) { 58 58 - observer.observe(loadMoreRef.current); 59 59 - } 60 60 - 61 61 - return () => observer.disconnect(); 62 62 - }, [data, size, setSize, isValidating]); 63 63 - 64 64 - const allPosts = data ? data.flatMap((page) => page.posts) : []; 65 65 - 66 66 - if (allPosts.length === 0 && !isValidating) { 67 67 - return <div className="text-tertiary text-center py-4">No posts yet</div>; 68 68 - } 69 69 - 70 70 - return ( 71 71 - <div className="flex flex-col gap-3 text-left relative"> 72 72 - {allPosts.map((post) => ( 73 73 - <PostListing key={post.documents.uri} {...post} /> 74 74 - ))} 75 75 - {/* Trigger element for loading more posts */} 76 76 - <div 77 77 - ref={loadMoreRef} 78 78 - className="absolute bottom-96 left-0 w-full h-px pointer-events-none" 79 79 - aria-hidden="true" 80 80 - /> 81 81 - {isValidating && ( 82 82 - <div className="text-center text-tertiary py-4"> 83 83 - Loading more posts... 84 84 - </div> 85 85 - )} 86 86 - </div> 87 87 - ); 88 88 - };

-200

app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx

··· 1 1 - "use client"; 2 2 - import { Avatar } from "components/Avatar"; 3 3 - import { AppBskyActorProfile, PubLeafletPublication } from "lexicons/api"; 4 4 - import { blobRefToSrc } from "src/utils/blobRefToSrc"; 5 5 - import type { ProfileData } from "./layout"; 6 6 - import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider"; 7 7 - import { colorToString } from "components/ThemeManager/useColorAttribute"; 8 8 - import { PubIcon } from "components/ActionBar/Publications"; 9 9 - import { Json } from "supabase/database.types"; 10 10 - import { BlueskyTiny } from "components/Icons/BlueskyTiny"; 11 11 - import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs"; 12 12 - import { SpeedyLink } from "components/SpeedyLink"; 13 13 - import { ReactNode } from "react"; 14 14 - 15 15 - export const ProfileHeader = (props: { 16 16 - profile: ProfileViewDetailed; 17 17 - publications: { record: Json; uri: string }[]; 18 18 - popover?: boolean; 19 19 - }) => { 20 20 - let profileRecord = props.profile; 21 21 - const profileUrl = `/p/${props.profile.handle}`; 22 22 - 23 23 - const avatarElement = ( 24 24 - <Avatar 25 25 - src={profileRecord.avatar} 26 26 - displayName={profileRecord.displayName} 27 27 - className="mx-auto mt-3 sm:mt-4" 28 28 - giant 29 29 - /> 30 30 - ); 31 31 - 32 32 - const displayNameElement = ( 33 33 - <h3 className=" px-3 sm:px-4 pt-2 leading-tight"> 34 34 - {profileRecord.displayName 35 35 - ? profileRecord.displayName 36 36 - : `@${props.profile.handle}`} 37 37 - </h3> 38 38 - ); 39 39 - 40 40 - const handleElement = profileRecord.displayName && ( 41 41 - <div 42 42 - className={`text-tertiary ${props.popover ? "text-xs" : "text-sm"} pb-1 italic px-3 sm:px-4 truncate`} 43 43 - > 44 44 - @{props.profile.handle} 45 45 - </div> 46 46 - ); 47 47 - 48 48 - return ( 49 49 - <div 50 50 - className={`flex flex-col relative ${props.popover && "text-sm"}`} 51 51 - id="profile-header" 52 52 - > 53 53 - <ProfileLinks handle={props.profile.handle || ""} /> 54 54 - <div className="flex flex-col"> 55 55 - <div className="flex flex-col group"> 56 56 - {props.popover ? ( 57 57 - <SpeedyLink className={"hover:no-underline!"} href={profileUrl}> 58 58 - {avatarElement} 59 59 - </SpeedyLink> 60 60 - ) : ( 61 61 - avatarElement 62 62 - )} 63 63 - {props.popover ? ( 64 64 - <SpeedyLink 65 65 - className={" text-primary group-hover:underline"} 66 66 - href={profileUrl} 67 67 - > 68 68 - {displayNameElement} 69 69 - </SpeedyLink> 70 70 - ) : ( 71 71 - displayNameElement 72 72 - )} 73 73 - {props.popover && handleElement ? ( 74 74 - <SpeedyLink className={"group-hover:underline"} href={profileUrl}> 75 75 - {handleElement} 76 76 - </SpeedyLink> 77 77 - ) : ( 78 78 - handleElement 79 79 - )} 80 80 - </div> 81 81 - <pre className="text-secondary px-3 sm:px-4 whitespace-pre-wrap"> 82 82 - {profileRecord.description 83 83 - ? parseDescription(profileRecord.description) 84 84 - : null} 85 85 - </pre> 86 86 - <div className=" w-full overflow-x-scroll py-3 mb-3 "> 87 87 - <div 88 88 - className={`grid grid-flow-col gap-2 mx-auto w-fit px-3 sm:px-4 ${props.popover ? "auto-cols-[164px]" : "auto-cols-[164px] sm:auto-cols-[240px]"}`} 89 89 - > 90 90 - {props.publications.map((p) => ( 91 91 - <PublicationCard 92 92 - key={p.uri} 93 93 - record={p.record as PubLeafletPublication.Record} 94 94 - uri={p.uri} 95 95 - /> 96 96 - ))} 97 97 - </div> 98 98 - </div> 99 99 - </div> 100 100 - </div> 101 101 - ); 102 102 - }; 103 103 - 104 104 - const ProfileLinks = (props: { handle: string }) => { 105 105 - return ( 106 106 - <div className="absolute sm:top-4 top-3 sm:right-4 right-3 flex flex-row gap-2"> 107 107 - <a 108 108 - className="text-tertiary hover:text-accent-contrast hover:no-underline!" 109 109 - href={`https://bsky.app/profile/${props.handle}`} 110 110 - > 111 111 - <BlueskyTiny /> 112 112 - </a> 113 113 - </div> 114 114 - ); 115 115 - }; 116 116 - const PublicationCard = (props: { 117 117 - record: PubLeafletPublication.Record; 118 118 - uri: string; 119 119 - }) => { 120 120 - const { record, uri } = props; 121 121 - const { bgLeaflet, bgPage, primary } = usePubTheme(record.theme); 122 122 - 123 123 - return ( 124 124 - <a 125 125 - href={`https://${record.base_path}`} 126 126 - className="border border-border p-2 rounded-lg hover:no-underline! text-primary basis-1/2" 127 127 - style={{ backgroundColor: `rgb(${colorToString(bgLeaflet, "rgb")})` }} 128 128 - > 129 129 - <div 130 130 - className="rounded-md p-2 flex flex-row gap-2" 131 131 - style={{ 132 132 - backgroundColor: record.theme?.showPageBackground 133 133 - ? `rgb(${colorToString(bgPage, "rgb")})` 134 134 - : undefined, 135 135 - }} 136 136 - > 137 137 - <PubIcon record={record} uri={uri} /> 138 138 - <h4 139 139 - className="truncate min-w-0" 140 140 - style={{ 141 141 - color: `rgb(${colorToString(primary, "rgb")})`, 142 142 - }} 143 143 - > 144 144 - {record.name} 145 145 - </h4> 146 146 - </div> 147 147 - </a> 148 148 - ); 149 149 - }; 150 150 - 151 151 - function parseDescription(description: string): ReactNode[] { 152 152 - const combinedRegex = /(@\S+|https?:\/\/\S+)/g; 153 153 - 154 154 - const parts: ReactNode[] = []; 155 155 - let lastIndex = 0; 156 156 - let match; 157 157 - let key = 0; 158 158 - 159 159 - while ((match = combinedRegex.exec(description)) !== null) { 160 160 - // Add text before this match 161 161 - if (match.index > lastIndex) { 162 162 - parts.push(description.slice(lastIndex, match.index)); 163 163 - } 164 164 - 165 165 - const matched = match[0]; 166 166 - 167 167 - if (matched.startsWith("@")) { 168 168 - // It's a mention 169 169 - const handle = matched.slice(1); 170 170 - parts.push( 171 171 - <SpeedyLink key={key++} href={`/p/${handle}`}> 172 172 - {matched} 173 173 - </SpeedyLink>, 174 174 - ); 175 175 - } else { 176 176 - // It's a URL 177 177 - const urlWithoutProtocol = matched 178 178 - .replace(/^https?:\/\//, "") 179 179 - .replace(/\/+$/, ""); 180 180 - const displayText = 181 181 - urlWithoutProtocol.length > 50 182 182 - ? urlWithoutProtocol.slice(0, 50) + "…" 183 183 - : urlWithoutProtocol; 184 184 - parts.push( 185 185 - <a key={key++} href={matched} target="_blank" rel="noopener noreferrer"> 186 186 - {displayText} 187 187 - </a>, 188 188 - ); 189 189 - } 190 190 - 191 191 - lastIndex = match.index + matched.length; 192 192 - } 193 193 - 194 194 - // Add remaining text after last match 195 195 - if (lastIndex < description.length) { 196 196 - parts.push(description.slice(lastIndex)); 197 197 - } 198 198 - 199 199 - return parts; 200 200 - }

-24

app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 4 4 - 5 5 - export function ProfileLayout(props: { children: React.ReactNode }) { 6 6 - let cardBorderHidden = useCardBorderHidden(); 7 7 - return ( 8 8 - <div 9 9 - id="profile-content" 10 10 - className={` 11 11 - ${ 12 12 - cardBorderHidden 13 13 - ? "" 14 14 - : "overflow-y-scroll h-full border border-border-light rounded-lg bg-bg-page" 15 15 - } 16 16 - max-w-prose mx-auto w-full 17 17 - flex flex-col 18 18 - text-center 19 19 - `} 20 20 - > 21 21 - {props.children} 22 22 - </div> 23 23 - ); 24 24 - }

-119

app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { SpeedyLink } from "components/SpeedyLink"; 4 4 - import { useSelectedLayoutSegment } from "next/navigation"; 5 5 - import { useState, useEffect } from "react"; 6 6 - import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 7 7 - 8 8 - export type ProfileTabType = "posts" | "comments" | "subscriptions"; 9 9 - 10 10 - export const ProfileTabs = (props: { didOrHandle: string }) => { 11 11 - const cardBorderHidden = useCardBorderHidden(); 12 12 - const segment = useSelectedLayoutSegment(); 13 13 - const currentTab = (segment || "posts") as ProfileTabType; 14 14 - const [scrollPosWithinTabContent, setScrollPosWithinTabContent] = useState(0); 15 15 - const [headerHeight, setHeaderHeight] = useState(0); 16 16 - useEffect(() => { 17 17 - let headerHeight = 18 18 - document.getElementById("profile-header")?.clientHeight || 0; 19 19 - setHeaderHeight(headerHeight); 20 20 - 21 21 - const profileContent = cardBorderHidden 22 22 - ? document.getElementById("home-content") 23 23 - : document.getElementById("profile-content"); 24 24 - const handleScroll = () => { 25 25 - if (profileContent) { 26 26 - setScrollPosWithinTabContent( 27 27 - profileContent.scrollTop - headerHeight > 0 28 28 - ? profileContent.scrollTop - headerHeight 29 29 - : 0, 30 30 - ); 31 31 - } 32 32 - }; 33 33 - 34 34 - if (profileContent) { 35 35 - profileContent.addEventListener("scroll", handleScroll); 36 36 - return () => profileContent.removeEventListener("scroll", handleScroll); 37 37 - } 38 38 - }, []); 39 39 - 40 40 - const baseUrl = `/p/${props.didOrHandle}`; 41 41 - const bgColor = cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)"; 42 42 - 43 43 - return ( 44 44 - <div className="flex flex-col w-full sticky top-3 sm:top-4 z-20 sm:px-4 px-3"> 45 45 - <div 46 46 - style={ 47 47 - scrollPosWithinTabContent < 20 48 48 - ? { 49 49 - paddingLeft: `calc(${scrollPosWithinTabContent / 20} * 12px )`, 50 50 - paddingRight: `calc(${scrollPosWithinTabContent / 20} * 12px )`, 51 51 - } 52 52 - : { paddingLeft: "12px", paddingRight: "12px" } 53 53 - } 54 54 - > 55 55 - <div 56 56 - className={` 57 57 - border rounded-lg 58 58 - ${scrollPosWithinTabContent > 20 ? "border-border-light" : "border-transparent"} 59 59 - py-1 60 60 - w-full `} 61 61 - style={ 62 62 - scrollPosWithinTabContent < 20 63 63 - ? { 64 64 - backgroundColor: !cardBorderHidden 65 65 - ? `rgba(${bgColor}, ${scrollPosWithinTabContent / 60 + 0.75})` 66 66 - : `rgba(${bgColor}, ${scrollPosWithinTabContent / 20})`, 67 67 - paddingLeft: !cardBorderHidden 68 68 - ? "4px" 69 69 - : `calc(${scrollPosWithinTabContent / 20} * 4px)`, 70 70 - paddingRight: !cardBorderHidden 71 71 - ? "4px" 72 72 - : `calc(${scrollPosWithinTabContent / 20} * 4px)`, 73 73 - } 74 74 - : { 75 75 - backgroundColor: `rgb(${bgColor})`, 76 76 - paddingLeft: "4px", 77 77 - paddingRight: "4px", 78 78 - } 79 79 - } 80 80 - > 81 81 - <div className="flex gap-2 justify-between"> 82 82 - <div className="flex gap-2"> 83 83 - <TabLink 84 84 - href={baseUrl} 85 85 - name="Posts" 86 86 - selected={currentTab === "posts"} 87 87 - /> 88 88 - <TabLink 89 89 - href={`${baseUrl}/comments`} 90 90 - name="Comments" 91 91 - selected={currentTab === "comments"} 92 92 - /> 93 93 - </div> 94 94 - <TabLink 95 95 - href={`${baseUrl}/subscriptions`} 96 96 - name="Subscriptions" 97 97 - selected={currentTab === "subscriptions"} 98 98 - /> 99 99 - </div> 100 100 - </div> 101 101 - </div> 102 102 - </div> 103 103 - ); 104 104 - }; 105 105 - 106 106 - const TabLink = (props: { href: string; name: string; selected: boolean }) => { 107 107 - return ( 108 108 - <SpeedyLink 109 109 - href={props.href} 110 110 - className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer hover:no-underline! ${ 111 111 - props.selected 112 112 - ? "text-accent-2 bg-accent-1 font-bold -mb-px" 113 113 - : "text-tertiary" 114 114 - }`} 115 115 - > 116 116 - {props.name} 117 117 - </SpeedyLink> 118 118 - ); 119 119 - };

-219

app/(home-pages)/p/[didOrHandle]/comments/CommentsContent.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useEffect, useRef, useMemo } from "react"; 4 4 - import useSWRInfinite from "swr/infinite"; 5 5 - import { AppBskyActorProfile, AtUri } from "@atproto/api"; 6 6 - import { PubLeafletComment, PubLeafletDocument } from "lexicons/api"; 7 7 - import { ReplyTiny } from "components/Icons/ReplyTiny"; 8 8 - import { Avatar } from "components/Avatar"; 9 9 - import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock"; 10 10 - import { blobRefToSrc } from "src/utils/blobRefToSrc"; 11 11 - import { 12 12 - getProfileComments, 13 13 - type ProfileComment, 14 14 - type Cursor, 15 15 - } from "./getProfileComments"; 16 16 - import { timeAgo } from "src/utils/timeAgo"; 17 17 - import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 18 18 - 19 19 - export const ProfileCommentsContent = (props: { 20 20 - did: string; 21 21 - comments: ProfileComment[]; 22 22 - nextCursor: Cursor | null; 23 23 - }) => { 24 24 - const getKey = ( 25 25 - pageIndex: number, 26 26 - previousPageData: { 27 27 - comments: ProfileComment[]; 28 28 - nextCursor: Cursor | null; 29 29 - } | null, 30 30 - ) => { 31 31 - // Reached the end 32 32 - if (previousPageData && !previousPageData.nextCursor) return null; 33 33 - 34 34 - // First page, we don't have previousPageData 35 35 - if (pageIndex === 0) return ["profile-comments", props.did, null] as const; 36 36 - 37 37 - // Add the cursor to the key 38 38 - return [ 39 39 - "profile-comments", 40 40 - props.did, 41 41 - previousPageData?.nextCursor, 42 42 - ] as const; 43 43 - }; 44 44 - 45 45 - const { data, size, setSize, isValidating } = useSWRInfinite( 46 46 - getKey, 47 47 - ([_, did, cursor]) => getProfileComments(did, cursor), 48 48 - { 49 49 - fallbackData: [ 50 50 - { comments: props.comments, nextCursor: props.nextCursor }, 51 51 - ], 52 52 - revalidateFirstPage: false, 53 53 - }, 54 54 - ); 55 55 - 56 56 - const loadMoreRef = useRef<HTMLDivElement>(null); 57 57 - 58 58 - // Set up intersection observer to load more when trigger element is visible 59 59 - useEffect(() => { 60 60 - const observer = new IntersectionObserver( 61 61 - (entries) => { 62 62 - if (entries[0].isIntersecting && !isValidating) { 63 63 - const hasMore = data && data[data.length - 1]?.nextCursor; 64 64 - if (hasMore) { 65 65 - setSize(size + 1); 66 66 - } 67 67 - } 68 68 - }, 69 69 - { threshold: 0.1 }, 70 70 - ); 71 71 - 72 72 - if (loadMoreRef.current) { 73 73 - observer.observe(loadMoreRef.current); 74 74 - } 75 75 - 76 76 - return () => observer.disconnect(); 77 77 - }, [data, size, setSize, isValidating]); 78 78 - 79 79 - const allComments = data ? data.flatMap((page) => page.comments) : []; 80 80 - 81 81 - if (allComments.length === 0 && !isValidating) { 82 82 - return ( 83 83 - <div className="text-tertiary text-center py-4">No comments yet</div> 84 84 - ); 85 85 - } 86 86 - 87 87 - return ( 88 88 - <div className="flex flex-col gap-2 text-left relative"> 89 89 - {allComments.map((comment) => ( 90 90 - <CommentItem key={comment.uri} comment={comment} /> 91 91 - ))} 92 92 - {/* Trigger element for loading more comments */} 93 93 - <div 94 94 - ref={loadMoreRef} 95 95 - className="absolute bottom-96 left-0 w-full h-px pointer-events-none" 96 96 - aria-hidden="true" 97 97 - /> 98 98 - {isValidating && ( 99 99 - <div className="text-center text-tertiary py-4"> 100 100 - Loading more comments... 101 101 - </div> 102 102 - )} 103 103 - </div> 104 104 - ); 105 105 - }; 106 106 - 107 107 - const CommentItem = ({ comment }: { comment: ProfileComment }) => { 108 108 - const record = comment.record as PubLeafletComment.Record; 109 109 - const profile = comment.bsky_profiles?.record as 110 110 - | AppBskyActorProfile.Record 111 111 - | undefined; 112 112 - const displayName = 113 113 - profile?.displayName || comment.bsky_profiles?.handle || "Unknown"; 114 114 - 115 115 - // Get commenter DID from comment URI 116 116 - const commenterDid = new AtUri(comment.uri).host; 117 117 - 118 118 - const isReply = !!record.reply; 119 119 - 120 120 - // Get document title 121 121 - const docData = comment.document?.data as 122 122 - | PubLeafletDocument.Record 123 123 - | undefined; 124 124 - const postTitle = docData?.title || "Untitled"; 125 125 - 126 126 - // Get parent comment info for replies 127 127 - const parentRecord = comment.parentComment?.record as 128 128 - | PubLeafletComment.Record 129 129 - | undefined; 130 130 - const parentProfile = comment.parentComment?.bsky_profiles?.record as 131 131 - | AppBskyActorProfile.Record 132 132 - | undefined; 133 133 - const parentDisplayName = 134 134 - parentProfile?.displayName || comment.parentComment?.bsky_profiles?.handle; 135 135 - 136 136 - // Build direct link to the comment 137 137 - const commentLink = useMemo(() => { 138 138 - if (!comment.document) return null; 139 139 - const docUri = new AtUri(comment.document.uri); 140 140 - 141 141 - // Get base URL using getPublicationURL if publication exists, otherwise build path 142 142 - let baseUrl: string; 143 143 - if (comment.publication) { 144 144 - baseUrl = getPublicationURL(comment.publication); 145 145 - const pubUri = new AtUri(comment.publication.uri); 146 146 - // If getPublicationURL returns a relative path, append the document rkey 147 147 - if (baseUrl.startsWith("/")) { 148 148 - baseUrl = `${baseUrl}/${docUri.rkey}`; 149 149 - } else { 150 150 - // For custom domains, append the document rkey 151 151 - baseUrl = `${baseUrl}/${docUri.rkey}`; 152 152 - } 153 153 - } else { 154 154 - baseUrl = `/lish/${docUri.host}/-/${docUri.rkey}`; 155 155 - } 156 156 - 157 157 - // Build query parameters 158 158 - const params = new URLSearchParams(); 159 159 - params.set("interactionDrawer", "comments"); 160 160 - if (record.onPage) { 161 161 - params.set("page", record.onPage); 162 162 - } 163 163 - 164 164 - // Use comment URI as hash for direct reference 165 165 - const commentId = encodeURIComponent(comment.uri); 166 166 - 167 167 - return `${baseUrl}?${params.toString()}#${commentId}`; 168 168 - }, [comment.document, comment.publication, comment.uri, record.onPage]); 169 169 - 170 170 - // Get avatar source 171 171 - const avatarSrc = profile?.avatar?.ref 172 172 - ? blobRefToSrc(profile.avatar.ref, commenterDid) 173 173 - : undefined; 174 174 - 175 175 - return ( 176 176 - <div id={comment.uri} className="w-full flex flex-col text-left mb-8"> 177 177 - <div className="flex gap-2 w-full"> 178 178 - <Avatar src={avatarSrc} displayName={displayName} /> 179 179 - <div className="flex flex-col w-full min-w-0 grow"> 180 180 - <div className="flex flex-row gap-2"> 181 181 - <div className="text-tertiary text-sm truncate"> 182 182 - <span className="font-bold text-secondary">{displayName}</span>{" "} 183 183 - {isReply ? "replied" : "commented"} on{" "} 184 184 - {commentLink ? ( 185 185 - <a 186 186 - href={commentLink} 187 187 - className="italic text-accent-contrast hover:underline" 188 188 - > 189 189 - {postTitle} 190 190 - </a> 191 191 - ) : ( 192 192 - <span className="italic text-accent-contrast">{postTitle}</span> 193 193 - )} 194 194 - </div> 195 195 - </div> 196 196 - {isReply && parentRecord && ( 197 197 - <div className="text-xs text-tertiary flex flex-row gap-2 w-full my-0.5 items-center"> 198 198 - <ReplyTiny className="shrink-0 scale-75" /> 199 199 - {parentDisplayName && ( 200 200 - <div className="font-bold shrink-0">{parentDisplayName}</div> 201 201 - )} 202 202 - <div className="grow truncate">{parentRecord.plaintext}</div> 203 203 - </div> 204 204 - )} 205 205 - <pre 206 206 - style={{ wordBreak: "break-word" }} 207 207 - className="whitespace-pre-wrap text-secondary" 208 208 - > 209 209 - <BaseTextBlock 210 210 - index={[]} 211 211 - plaintext={record.plaintext} 212 212 - facets={record.facets} 213 213 - /> 214 214 - </pre> 215 215 - </div> 216 216 - </div> 217 217 - </div> 218 218 - ); 219 219 - };

-133

app/(home-pages)/p/[didOrHandle]/comments/getProfileComments.ts

··· 1 1 - "use server"; 2 2 - 3 3 - import { supabaseServerClient } from "supabase/serverClient"; 4 4 - import { Json } from "supabase/database.types"; 5 5 - import { PubLeafletComment } from "lexicons/api"; 6 6 - 7 7 - export type Cursor = { 8 8 - indexed_at: string; 9 9 - uri: string; 10 10 - }; 11 11 - 12 12 - export type ProfileComment = { 13 13 - uri: string; 14 14 - record: Json; 15 15 - indexed_at: string; 16 16 - bsky_profiles: { record: Json; handle: string | null } | null; 17 17 - document: { 18 18 - uri: string; 19 19 - data: Json; 20 20 - } | null; 21 21 - publication: { 22 22 - uri: string; 23 23 - record: Json; 24 24 - } | null; 25 25 - // For replies, include the parent comment info 26 26 - parentComment: { 27 27 - uri: string; 28 28 - record: Json; 29 29 - bsky_profiles: { record: Json; handle: string | null } | null; 30 30 - } | null; 31 31 - }; 32 32 - 33 33 - export async function getProfileComments( 34 34 - did: string, 35 35 - cursor?: Cursor | null, 36 36 - ): Promise<{ comments: ProfileComment[]; nextCursor: Cursor | null }> { 37 37 - const limit = 20; 38 38 - 39 39 - let query = supabaseServerClient 40 40 - .from("comments_on_documents") 41 41 - .select( 42 42 - `*, 43 43 - bsky_profiles(record, handle), 44 44 - documents(uri, data, documents_in_publications(publications(*)))`, 45 45 - ) 46 46 - .eq("profile", did) 47 47 - .order("indexed_at", { ascending: false }) 48 48 - .order("uri", { ascending: false }) 49 49 - .limit(limit); 50 50 - 51 51 - if (cursor) { 52 52 - query = query.or( 53 53 - `indexed_at.lt.${cursor.indexed_at},and(indexed_at.eq.${cursor.indexed_at},uri.lt.${cursor.uri})`, 54 54 - ); 55 55 - } 56 56 - 57 57 - const { data: rawComments } = await query; 58 58 - 59 59 - if (!rawComments || rawComments.length === 0) { 60 60 - return { comments: [], nextCursor: null }; 61 61 - } 62 62 - 63 63 - // Collect parent comment URIs for replies 64 64 - const parentUris = rawComments 65 65 - .map((c) => (c.record as PubLeafletComment.Record).reply?.parent) 66 66 - .filter((uri): uri is string => !!uri); 67 67 - 68 68 - // Fetch parent comments if there are any replies 69 69 - let parentCommentsMap = new Map< 70 70 - string, 71 71 - { 72 72 - uri: string; 73 73 - record: Json; 74 74 - bsky_profiles: { record: Json; handle: string | null } | null; 75 75 - } 76 76 - >(); 77 77 - 78 78 - if (parentUris.length > 0) { 79 79 - const { data: parentComments } = await supabaseServerClient 80 80 - .from("comments_on_documents") 81 81 - .select(`uri, record, bsky_profiles(record, handle)`) 82 82 - .in("uri", parentUris); 83 83 - 84 84 - if (parentComments) { 85 85 - for (const pc of parentComments) { 86 86 - parentCommentsMap.set(pc.uri, { 87 87 - uri: pc.uri, 88 88 - record: pc.record, 89 89 - bsky_profiles: pc.bsky_profiles, 90 90 - }); 91 91 - } 92 92 - } 93 93 - } 94 94 - 95 95 - // Transform to ProfileComment format 96 96 - const comments: ProfileComment[] = rawComments.map((comment) => { 97 97 - const record = comment.record as PubLeafletComment.Record; 98 98 - const doc = comment.documents; 99 99 - const pub = doc?.documents_in_publications?.[0]?.publications; 100 100 - 101 101 - return { 102 102 - uri: comment.uri, 103 103 - record: comment.record, 104 104 - indexed_at: comment.indexed_at, 105 105 - bsky_profiles: comment.bsky_profiles, 106 106 - document: doc 107 107 - ? { 108 108 - uri: doc.uri, 109 109 - data: doc.data, 110 110 - } 111 111 - : null, 112 112 - publication: pub 113 113 - ? { 114 114 - uri: pub.uri, 115 115 - record: pub.record, 116 116 - } 117 117 - : null, 118 118 - parentComment: record.reply?.parent 119 119 - ? parentCommentsMap.get(record.reply.parent) || null 120 120 - : null, 121 121 - }; 122 122 - }); 123 123 - 124 124 - const nextCursor = 125 125 - comments.length === limit 126 126 - ? { 127 127 - indexed_at: comments[comments.length - 1].indexed_at, 128 128 - uri: comments[comments.length - 1].uri, 129 129 - } 130 130 - : null; 131 131 - 132 132 - return { comments, nextCursor }; 133 133 - }

-28

app/(home-pages)/p/[didOrHandle]/comments/page.tsx

··· 1 1 - import { idResolver } from "app/(home-pages)/reader/idResolver"; 2 2 - import { getProfileComments } from "./getProfileComments"; 3 3 - import { ProfileCommentsContent } from "./CommentsContent"; 4 4 - 5 5 - export default async function ProfileCommentsPage(props: { 6 6 - params: Promise<{ didOrHandle: string }>; 7 7 - }) { 8 8 - let params = await props.params; 9 9 - let didOrHandle = decodeURIComponent(params.didOrHandle); 10 10 - 11 11 - // Resolve handle to DID if necessary 12 12 - let did = didOrHandle; 13 13 - if (!didOrHandle.startsWith("did:")) { 14 14 - let resolved = await idResolver.handle.resolve(didOrHandle); 15 15 - if (!resolved) return null; 16 16 - did = resolved; 17 17 - } 18 18 - 19 19 - const { comments, nextCursor } = await getProfileComments(did); 20 20 - 21 21 - return ( 22 22 - <ProfileCommentsContent 23 23 - did={did} 24 24 - comments={comments} 25 25 - nextCursor={nextCursor} 26 26 - /> 27 27 - ); 28 28 - }

-95

app/(home-pages)/p/[didOrHandle]/getProfilePosts.ts

··· 1 1 - "use server"; 2 2 - 3 3 - import { supabaseServerClient } from "supabase/serverClient"; 4 4 - import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 5 5 - import type { Post } from "app/(home-pages)/reader/getReaderFeed"; 6 6 - 7 7 - export type Cursor = { 8 8 - indexed_at: string; 9 9 - uri: string; 10 10 - }; 11 11 - 12 12 - export async function getProfilePosts( 13 13 - did: string, 14 14 - cursor?: Cursor | null, 15 15 - ): Promise<{ posts: Post[]; nextCursor: Cursor | null }> { 16 16 - const limit = 20; 17 17 - 18 18 - let query = supabaseServerClient 19 19 - .from("documents") 20 20 - .select( 21 21 - `*, 22 22 - comments_on_documents(count), 23 23 - document_mentions_in_bsky(count), 24 24 - documents_in_publications(publications(*))`, 25 25 - ) 26 26 - .like("uri", `at://${did}/%`) 27 27 - .order("indexed_at", { ascending: false }) 28 28 - .order("uri", { ascending: false }) 29 29 - .limit(limit); 30 30 - 31 31 - if (cursor) { 32 32 - query = query.or( 33 33 - `indexed_at.lt.${cursor.indexed_at},and(indexed_at.eq.${cursor.indexed_at},uri.lt.${cursor.uri})`, 34 34 - ); 35 35 - } 36 36 - 37 37 - let [{ data: docs }, { data: pubs }, { data: profile }] = await Promise.all([ 38 38 - query, 39 39 - supabaseServerClient 40 40 - .from("publications") 41 41 - .select("*") 42 42 - .eq("identity_did", did), 43 43 - supabaseServerClient 44 44 - .from("bsky_profiles") 45 45 - .select("handle") 46 46 - .eq("did", did) 47 47 - .single(), 48 48 - ]); 49 49 - 50 50 - // Build a map of publications for quick lookup 51 51 - let pubMap = new Map<string, NonNullable<typeof pubs>[number]>(); 52 52 - for (let pub of pubs || []) { 53 53 - pubMap.set(pub.uri, pub); 54 54 - } 55 55 - 56 56 - // Transform data to Post[] format 57 57 - let handle = profile?.handle ? `@${profile.handle}` : null; 58 58 - let posts: Post[] = []; 59 59 - 60 60 - for (let doc of docs || []) { 61 61 - let pubFromDoc = doc.documents_in_publications?.[0]?.publications; 62 62 - let pub = pubFromDoc ? pubMap.get(pubFromDoc.uri) || pubFromDoc : null; 63 63 - 64 64 - let post: Post = { 65 65 - author: handle, 66 66 - documents: { 67 67 - data: doc.data, 68 68 - uri: doc.uri, 69 69 - indexed_at: doc.indexed_at, 70 70 - comments_on_documents: doc.comments_on_documents, 71 71 - document_mentions_in_bsky: doc.document_mentions_in_bsky, 72 72 - }, 73 73 - }; 74 74 - 75 75 - if (pub) { 76 76 - post.publication = { 77 77 - href: getPublicationURL(pub), 78 78 - pubRecord: pub.record, 79 79 - uri: pub.uri, 80 80 - }; 81 81 - } 82 82 - 83 83 - posts.push(post); 84 84 - } 85 85 - 86 86 - const nextCursor = 87 87 - posts.length === limit 88 88 - ? { 89 89 - indexed_at: posts[posts.length - 1].documents.indexed_at, 90 90 - uri: posts[posts.length - 1].documents.uri, 91 91 - } 92 92 - : null; 93 93 - 94 94 - return { posts, nextCursor }; 95 95 - }

-77

app/(home-pages)/p/[didOrHandle]/layout.tsx

··· 1 1 - import { idResolver } from "app/(home-pages)/reader/idResolver"; 2 2 - import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout"; 3 3 - import { supabaseServerClient } from "supabase/serverClient"; 4 4 - import { Json } from "supabase/database.types"; 5 5 - import { ProfileHeader } from "./ProfileHeader"; 6 6 - import { ProfileTabs } from "./ProfileTabs"; 7 7 - import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; 8 8 - import { ProfileLayout } from "./ProfileLayout"; 9 9 - import { Agent } from "@atproto/api"; 10 10 - import { get_profile_data } from "app/api/rpc/[command]/get_profile_data"; 11 11 - 12 12 - export default async function ProfilePageLayout(props: { 13 13 - params: Promise<{ didOrHandle: string }>; 14 14 - children: React.ReactNode; 15 15 - }) { 16 16 - let params = await props.params; 17 17 - let didOrHandle = decodeURIComponent(params.didOrHandle); 18 18 - 19 19 - // Resolve handle to DID if necessary 20 20 - let did = didOrHandle; 21 21 - 22 22 - if (!didOrHandle.startsWith("did:")) { 23 23 - let resolved = await idResolver.handle.resolve(didOrHandle); 24 24 - if (!resolved) { 25 25 - return ( 26 26 - <NotFoundLayout> 27 27 - <p className="font-bold">Sorry, can&apos;t resolve handle!</p> 28 28 - <p> 29 29 - This may be a glitch on our end. If the issue persists please{" "} 30 30 - <a href="mailto:contact@leaflet.pub">send us a note</a>. 31 31 - </p> 32 32 - </NotFoundLayout> 33 33 - ); 34 34 - } 35 35 - did = resolved; 36 36 - } 37 37 - let profileData = await get_profile_data.handler( 38 38 - { didOrHandle: did }, 39 39 - { supabase: supabaseServerClient }, 40 40 - ); 41 41 - let { publications, profile } = profileData.result; 42 42 - 43 43 - if (!profile) return null; 44 44 - 45 45 - return ( 46 46 - <DashboardLayout 47 47 - id="profile" 48 48 - defaultTab="default" 49 49 - currentPage="profile" 50 50 - actions={null} 51 51 - tabs={{ 52 52 - default: { 53 53 - controls: null, 54 54 - content: ( 55 55 - <ProfileLayout> 56 56 - <ProfileHeader 57 57 - profile={profile} 58 58 - publications={publications || []} 59 59 - /> 60 60 - <ProfileTabs didOrHandle={params.didOrHandle} /> 61 61 - <div className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col"> 62 62 - {props.children} 63 63 - </div> 64 64 - </ProfileLayout> 65 65 - ), 66 66 - }, 67 67 - }} 68 68 - /> 69 69 - ); 70 70 - } 71 71 - 72 72 - export type ProfileData = { 73 73 - did: string; 74 74 - handle: string | null; 75 75 - indexed_at: string; 76 76 - record: Json; 77 77 - };

-24

app/(home-pages)/p/[didOrHandle]/page.tsx

··· 1 1 - import { idResolver } from "app/(home-pages)/reader/idResolver"; 2 2 - import { getProfilePosts } from "./getProfilePosts"; 3 3 - import { ProfilePostsContent } from "./PostsContent"; 4 4 - 5 5 - export default async function ProfilePostsPage(props: { 6 6 - params: Promise<{ didOrHandle: string }>; 7 7 - }) { 8 8 - let params = await props.params; 9 9 - let didOrHandle = decodeURIComponent(params.didOrHandle); 10 10 - 11 11 - // Resolve handle to DID if necessary 12 12 - let did = didOrHandle; 13 13 - if (!didOrHandle.startsWith("did:")) { 14 14 - let resolved = await idResolver.handle.resolve(didOrHandle); 15 15 - if (!resolved) return null; 16 16 - did = resolved; 17 17 - } 18 18 - 19 19 - const { posts, nextCursor } = await getProfilePosts(did); 20 20 - 21 21 - return ( 22 22 - <ProfilePostsContent did={did} posts={posts} nextCursor={nextCursor} /> 23 23 - ); 24 24 - }

-103

app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useEffect, useRef } from "react"; 4 4 - import useSWRInfinite from "swr/infinite"; 5 5 - import { PubListing } from "app/(home-pages)/discover/PubListing"; 6 6 - import { 7 7 - getSubscriptions, 8 8 - type PublicationSubscription, 9 9 - } from "app/(home-pages)/reader/getSubscriptions"; 10 10 - import { Cursor } from "app/(home-pages)/reader/getReaderFeed"; 11 11 - 12 12 - export const ProfileSubscriptionsContent = (props: { 13 13 - did: string; 14 14 - subscriptions: PublicationSubscription[]; 15 15 - nextCursor: Cursor | null; 16 16 - }) => { 17 17 - const getKey = ( 18 18 - pageIndex: number, 19 19 - previousPageData: { 20 20 - subscriptions: PublicationSubscription[]; 21 21 - nextCursor: Cursor | null; 22 22 - } | null, 23 23 - ) => { 24 24 - // Reached the end 25 25 - if (previousPageData && !previousPageData.nextCursor) return null; 26 26 - 27 27 - // First page, we don't have previousPageData 28 28 - if (pageIndex === 0) 29 29 - return ["profile-subscriptions", props.did, null] as const; 30 30 - 31 31 - // Add the cursor to the key 32 32 - return [ 33 33 - "profile-subscriptions", 34 34 - props.did, 35 35 - previousPageData?.nextCursor, 36 36 - ] as const; 37 37 - }; 38 38 - 39 39 - const { data, size, setSize, isValidating } = useSWRInfinite( 40 40 - getKey, 41 41 - ([_, did, cursor]) => getSubscriptions(did, cursor), 42 42 - { 43 43 - fallbackData: [ 44 44 - { subscriptions: props.subscriptions, nextCursor: props.nextCursor }, 45 45 - ], 46 46 - revalidateFirstPage: false, 47 47 - }, 48 48 - ); 49 49 - 50 50 - const loadMoreRef = useRef<HTMLDivElement>(null); 51 51 - 52 52 - // Set up intersection observer to load more when trigger element is visible 53 53 - useEffect(() => { 54 54 - const observer = new IntersectionObserver( 55 55 - (entries) => { 56 56 - if (entries[0].isIntersecting && !isValidating) { 57 57 - const hasMore = data && data[data.length - 1]?.nextCursor; 58 58 - if (hasMore) { 59 59 - setSize(size + 1); 60 60 - } 61 61 - } 62 62 - }, 63 63 - { threshold: 0.1 }, 64 64 - ); 65 65 - 66 66 - if (loadMoreRef.current) { 67 67 - observer.observe(loadMoreRef.current); 68 68 - } 69 69 - 70 70 - return () => observer.disconnect(); 71 71 - }, [data, size, setSize, isValidating]); 72 72 - 73 73 - const allSubscriptions = data 74 74 - ? data.flatMap((page) => page.subscriptions) 75 75 - : []; 76 76 - 77 77 - if (allSubscriptions.length === 0 && !isValidating) { 78 78 - return ( 79 79 - <div className="text-tertiary text-center py-4">No subscriptions yet</div> 80 80 - ); 81 81 - } 82 82 - 83 83 - return ( 84 84 - <div className="relative"> 85 85 - <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3"> 86 86 - {allSubscriptions.map((sub) => ( 87 87 - <PubListing key={sub.uri} {...sub} /> 88 88 - ))} 89 89 - </div> 90 90 - {/* Trigger element for loading more subscriptions */} 91 91 - <div 92 92 - ref={loadMoreRef} 93 93 - className="absolute bottom-96 left-0 w-full h-px pointer-events-none" 94 94 - aria-hidden="true" 95 95 - /> 96 96 - {isValidating && ( 97 97 - <div className="text-center text-tertiary py-4"> 98 98 - Loading more subscriptions... 99 99 - </div> 100 100 - )} 101 101 - </div> 102 102 - ); 103 103 - };

-28

app/(home-pages)/p/[didOrHandle]/subscriptions/page.tsx

··· 1 1 - import { idResolver } from "app/(home-pages)/reader/idResolver"; 2 2 - import { getSubscriptions } from "app/(home-pages)/reader/getSubscriptions"; 3 3 - import { ProfileSubscriptionsContent } from "./SubscriptionsContent"; 4 4 - 5 5 - export default async function ProfileSubscriptionsPage(props: { 6 6 - params: Promise<{ didOrHandle: string }>; 7 7 - }) { 8 8 - const params = await props.params; 9 9 - const didOrHandle = decodeURIComponent(params.didOrHandle); 10 10 - 11 11 - // Resolve handle to DID if necessary 12 12 - let did = didOrHandle; 13 13 - if (!didOrHandle.startsWith("did:")) { 14 14 - const resolved = await idResolver.handle.resolve(didOrHandle); 15 15 - if (!resolved) return null; 16 16 - did = resolved; 17 17 - } 18 18 - 19 19 - const { subscriptions, nextCursor } = await getSubscriptions(did); 20 20 - 21 21 - return ( 22 22 - <ProfileSubscriptionsContent 23 23 - did={did} 24 24 - subscriptions={subscriptions} 25 25 - nextCursor={nextCursor} 26 26 - /> 27 27 - ); 28 28 - }

+1 -1

app/(home-pages)/reader/SubscriptionsContent.tsx

··· 32 32 33 33 const { data, error, size, setSize, isValidating } = useSWRInfinite( 34 34 getKey, 35 35 - ([_, cursor]) => getSubscriptions(null, cursor), 35 35 + ([_, cursor]) => getSubscriptions(cursor), 36 36 { 37 37 fallbackData: [ 38 38 { subscriptions: props.publications, nextCursor: props.nextCursor },

+1 -1

app/(home-pages)/reader/getReaderFeed.ts

··· 83 83 84 84 export type Post = { 85 85 author: string | null; 86 86 - publication?: { 86 86 + publication: { 87 87 href: string; 88 88 pubRecord: Json; 89 89 uri: string;

+4 -13

app/(home-pages)/reader/getSubscriptions.ts

··· 8 8 import { idResolver } from "./idResolver"; 9 9 import { Cursor } from "./getReaderFeed"; 10 10 11 11 - export async function getSubscriptions( 12 12 - did?: string | null, 13 13 - cursor?: Cursor | null, 14 14 - ): Promise<{ 11 11 + export async function getSubscriptions(cursor?: Cursor | null): Promise<{ 15 12 nextCursor: null | Cursor; 16 13 subscriptions: PublicationSubscription[]; 17 14 }> { 18 18 - // If no DID provided, use logged-in user's DID 19 19 - let identity = did; 20 20 - if (!identity) { 21 21 - const auth_res = await getIdentityData(); 22 22 - if (!auth_res?.atp_did) return { subscriptions: [], nextCursor: null }; 23 23 - identity = auth_res.atp_did; 24 24 - } 25 25 - 15 15 + let auth_res = await getIdentityData(); 16 16 + if (!auth_res?.atp_did) return { subscriptions: [], nextCursor: null }; 26 17 let query = supabaseServerClient 27 18 .from("publication_subscriptions") 28 19 .select(`*, publications(*, documents_in_publications(*, documents(*)))`) ··· 34 25 }) 35 26 .limit(1, { referencedTable: "publications.documents_in_publications" }) 36 27 .limit(25) 37 37 - .eq("identity", identity); 28 28 + .eq("identity", auth_res.atp_did); 38 29 39 30 if (cursor) { 40 31 query = query.or(

+1

app/(home-pages)/reader/page.tsx

··· 12 12 return ( 13 13 <DashboardLayout 14 14 id="reader" 15 15 + cardBorderHidden={false} 15 16 currentPage="reader" 16 17 defaultTab="Read" 17 18 actions={null}

+1 -4

app/(home-pages)/tag/[tag]/getDocumentsByTag.ts

··· 10 10 export async function getDocumentsByTag( 11 11 tag: string, 12 12 ): Promise<{ posts: Post[] }> { 13 13 - // Normalize tag to lowercase for case-insensitive search 14 14 - const normalizedTag = tag.toLowerCase(); 15 15 - 16 13 // Query documents that have this tag 17 14 const { data: documents, error } = await supabaseServerClient 18 15 .from("documents") ··· 22 19 document_mentions_in_bsky(count), 23 20 documents_in_publications(publications(*))`, 24 21 ) 25 25 - .contains("data->tags", `["${normalizedTag}"]`) 22 22 + .contains("data->tags", `["${tag}"]`) 26 23 .order("indexed_at", { ascending: false }) 27 24 .limit(50); 28 25

+1

app/(home-pages)/tag/[tag]/page.tsx

··· 14 14 return ( 15 15 <DashboardLayout 16 16 id="tag" 17 17 + cardBorderHidden={false} 17 18 currentPage="tag" 18 19 defaultTab="default" 19 20 actions={null}

+24 -2

app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx

··· 1 1 "use client"; 2 2 import { AppBskyRichtextFacet, UnicodeString } from "@atproto/api"; 3 3 - import { useState, useCallback, useRef, useLayoutEffect } from "react"; 3 3 + import { useEffect, useState, useCallback, useRef, useLayoutEffect } from "react"; 4 4 import { EditorState } from "prosemirror-state"; 5 5 import { EditorView } from "prosemirror-view"; 6 6 import { Schema, MarkSpec, Mark } from "prosemirror-model"; ··· 292 292 }; 293 293 }, [openMentionAutocomplete]); 294 294 295 295 + const haveContent = (editorState?.doc.textContent.length ?? 0) > 0 296 296 + 297 297 + // Warn if there's content in the editor on page change, unload or reload. 298 298 + useWarnOnUnsavedChanges(haveContent); 299 299 + 295 300 return ( 296 301 <div className="relative w-full h-full group"> 297 302 <MentionAutocomplete ··· 302 307 coords={mentionCoords} 303 308 placeholder="Search people..." 304 309 /> 305 305 - {editorState?.doc.textContent.length === 0 && ( 310 310 + {!haveContent && ( 306 311 <div className="italic text-tertiary absolute top-0 left-0 pointer-events-none"> 307 312 Write a post to share your writing! 308 313 </div> ··· 445 450 view.dispatch(tr); 446 451 view.focus(); 447 452 }; 453 453 + 454 454 + 455 455 + function useWarnOnUnsavedChanges(hasUnsavedContent: boolean) { 456 456 + useEffect(() => { 457 457 + const handleBeforeUnload = (e: BeforeUnloadEvent) => { 458 458 + if (hasUnsavedContent) { 459 459 + e.preventDefault(); 460 460 + // Chrome requires returnValue to be set 461 461 + e.returnValue = ""; 462 462 + } 463 463 + }; 464 464 + window.addEventListener("beforeunload", handleBeforeUnload); 465 465 + return () => { 466 466 + window.removeEventListener("beforeunload", handleBeforeUnload); 467 467 + }; 468 468 + }, [hasUnsavedContent]); 469 469 + }

-69

app/api/rpc/[command]/get_profile_data.ts

··· 1 1 - import { z } from "zod"; 2 2 - import { makeRoute } from "../lib"; 3 3 - import type { Env } from "./route"; 4 4 - import { idResolver } from "app/(home-pages)/reader/idResolver"; 5 5 - import { supabaseServerClient } from "supabase/serverClient"; 6 6 - import { Agent } from "@atproto/api"; 7 7 - import { getIdentityData } from "actions/getIdentityData"; 8 8 - import { createOauthClient } from "src/atproto-oauth"; 9 9 - 10 10 - export type GetProfileDataReturnType = Awaited< 11 11 - ReturnType<(typeof get_profile_data)["handler"]> 12 12 - >; 13 13 - 14 14 - export const get_profile_data = makeRoute({ 15 15 - route: "get_profile_data", 16 16 - input: z.object({ 17 17 - didOrHandle: z.string(), 18 18 - }), 19 19 - handler: async ({ didOrHandle }, { supabase }: Pick<Env, "supabase">) => { 20 20 - // Resolve handle to DID if necessary 21 21 - let did = didOrHandle; 22 22 - 23 23 - if (!didOrHandle.startsWith("did:")) { 24 24 - const resolved = await idResolver.handle.resolve(didOrHandle); 25 25 - if (!resolved) { 26 26 - throw new Error("Could not resolve handle to DID"); 27 27 - } 28 28 - did = resolved; 29 29 - } 30 30 - let agent; 31 31 - let authed_identity = await getIdentityData(); 32 32 - if (authed_identity?.atp_did) { 33 33 - try { 34 34 - const oauthClient = await createOauthClient(); 35 35 - let credentialSession = await oauthClient.restore( 36 36 - authed_identity.atp_did, 37 37 - ); 38 38 - agent = new Agent(credentialSession); 39 39 - } catch (e) { 40 40 - agent = new Agent({ 41 41 - service: "https://public.api.bsky.app", 42 42 - }); 43 43 - } 44 44 - } else { 45 45 - agent = new Agent({ 46 46 - service: "https://public.api.bsky.app", 47 47 - }); 48 48 - } 49 49 - 50 50 - let profileReq = agent.app.bsky.actor.getProfile({ actor: did }); 51 51 - 52 52 - let publicationsReq = supabase 53 53 - .from("publications") 54 54 - .select("*") 55 55 - .eq("identity_did", did); 56 56 - 57 57 - let [{ data: profile }, { data: publications }] = await Promise.all([ 58 58 - profileReq, 59 59 - publicationsReq, 60 60 - ]); 61 61 - 62 62 - return { 63 63 - result: { 64 64 - profile, 65 65 - publications: publications || [], 66 66 - }, 67 67 - }; 68 68 - }, 69 69 - });

-2

app/api/rpc/[command]/route.ts

··· 13 13 import { get_publication_data } from "./get_publication_data"; 14 14 import { search_publication_names } from "./search_publication_names"; 15 15 import { search_publication_documents } from "./search_publication_documents"; 16 16 - import { get_profile_data } from "./get_profile_data"; 17 16 18 17 let supabase = createClient<Database>( 19 18 process.env.NEXT_PUBLIC_SUPABASE_API_URL as string, ··· 40 39 get_publication_data, 41 40 search_publication_names, 42 41 search_publication_documents, 43 43 - get_profile_data, 44 42 ]; 45 43 export async function POST( 46 44 req: Request,

+4 -22

app/globals.css

··· 296 296 @apply py-[1.5px]; 297 297 } 298 298 299 299 - .ProseMirror:focus-within .selection-highlight { 300 300 - background-color: transparent; 301 301 - } 302 302 - 299 299 + /* Underline mention nodes when selected in ProseMirror */ 303 300 .ProseMirror .atMention.ProseMirror-selectednode, 304 301 .ProseMirror .didMention.ProseMirror-selectednode { 305 305 - @apply text-accent-contrast; 306 306 - @apply px-0.5; 307 307 - @apply -mx-[3px]; /* extra px to account for the border*/ 308 308 - @apply -my-px; /*to account for the border*/ 309 309 - @apply rounded-[4px]; 310 310 - @apply box-decoration-clone; 311 311 - background-color: rgba(var(--accent-contrast), 0.2); 312 312 - border: 1px solid rgba(var(--accent-contrast), 1); 302 302 + text-decoration: underline; 313 303 } 314 304 315 315 - .mention { 316 316 - @apply cursor-pointer; 317 317 - @apply text-accent-contrast; 318 318 - @apply px-0.5; 319 319 - @apply -mx-[3px]; 320 320 - @apply -my-px; /*to account for the border*/ 321 321 - @apply rounded-[4px]; 322 322 - @apply box-decoration-clone; 323 323 - background-color: rgba(var(--accent-contrast), 0.2); 324 324 - border: 1px solid transparent; 305 305 + .ProseMirror:focus-within .selection-highlight { 306 306 + background-color: transparent; 325 307 } 326 308 327 309 .multiselected:focus-within .selection-highlight {

+13 -10

app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx

··· 2 2 import { PubLeafletRichtextFacet } from "lexicons/api"; 3 3 import { didToBlueskyUrl } from "src/utils/mentionUtils"; 4 4 import { AtMentionLink } from "components/AtMentionLink"; 5 5 - import { ProfilePopover } from "components/ProfilePopover"; 6 5 7 6 type Facet = PubLeafletRichtextFacet.Main; 8 7 export function BaseTextBlock(props: { ··· 28 27 let isDidMention = segment.facet?.find( 29 28 PubLeafletRichtextFacet.isDidMention, 30 29 ); 31 31 - let isAtMention = segment.facet?.find(PubLeafletRichtextFacet.isAtMention); 30 30 + let isAtMention = segment.facet?.find( 31 31 + PubLeafletRichtextFacet.isAtMention, 32 32 + ); 32 33 let isUnderline = segment.facet?.find(PubLeafletRichtextFacet.isUnderline); 33 34 let isItalic = segment.facet?.find(PubLeafletRichtextFacet.isItalic); 34 35 let isHighlighted = segment.facet?.find( ··· 44 45 ${isHighlighted ? "highlight bg-highlight-1" : ""}`.replaceAll("\n", " "); 45 46 46 47 // Split text by newlines and insert <br> tags 47 47 - const textParts = segment.text.split("\n"); 48 48 + const textParts = segment.text.split('\n'); 48 49 const renderedText = textParts.flatMap((part, i) => 49 49 - i < textParts.length - 1 50 50 - ? [part, <br key={`br-${counter}-${i}`} />] 51 51 - : [part], 50 50 + i < textParts.length - 1 ? [part, <br key={`br-${counter}-${i}`} />] : [part] 52 51 ); 53 52 54 53 if (isCode) { ··· 59 58 ); 60 59 } else if (isDidMention) { 61 60 children.push( 62 62 - <ProfilePopover 61 61 + <a 63 62 key={counter} 64 64 - didOrHandle={isDidMention.did} 65 65 - trigger={<span className="mention">{renderedText}</span>} 66 66 - />, 63 63 + href={didToBlueskyUrl(isDidMention.did)} 64 64 + className={`text-accent-contrast hover:underline cursor-pointer ${className}`} 65 65 + target="_blank" 66 66 + rel="noopener noreferrer" 67 67 + > 68 68 + {renderedText} 69 69 + </a>, 67 70 ); 68 71 } else if (isAtMention) { 69 72 children.push(

+1

app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx

··· 57 57 <PageWrapper 58 58 pageType="canvas" 59 59 fullPageScroll={fullPageScroll} 60 60 + cardBorderHidden={!hasPageBackground} 60 61 id={pageId ? `post-page-${pageId}` : "post-page"} 61 62 drawerOpen={ 62 63 !!drawer && (pageId ? drawer.pageId === pageId : !drawer.pageId)

+2 -5

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx

··· 1 1 - import { AtUri, UnicodeString } from "@atproto/api"; 1 1 + import { UnicodeString } from "@atproto/api"; 2 2 import { autolink } from "components/Blocks/TextBlock/autolink-plugin"; 3 3 import { multiBlockSchema } from "components/Blocks/TextBlock/schema"; 4 4 import { PubLeafletRichtextFacet } from "lexicons/api"; ··· 196 196 { 197 197 record: comment.record, 198 198 uri: comment.uri, 199 199 - bsky_profiles: { 200 200 - record: comment.profile as Json, 201 201 - did: new AtUri(comment.uri).host, 202 202 - }, 199 199 + bsky_profiles: { record: comment.profile as Json }, 203 200 }, 204 201 ], 205 202 }));

+99 -15

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx

··· 18 18 import { QuoteContent } from "../Quotes"; 19 19 import { timeAgo } from "src/utils/timeAgo"; 20 20 import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 21 21 - import { ProfilePopover } from "components/ProfilePopover"; 22 21 23 22 export type Comment = { 24 23 record: Json; 25 24 uri: string; 26 26 - bsky_profiles: { record: Json; did: string } | null; 25 25 + bsky_profiles: { record: Json } | null; 27 26 }; 28 27 export function Comments(props: { 29 28 document_uri: string; ··· 110 109 document: string; 111 110 comment: Comment; 112 111 comments: Comment[]; 113 113 - profile: AppBskyActorProfile.Record; 112 112 + profile?: AppBskyActorProfile.Record; 114 113 record: PubLeafletComment.Record; 115 114 pageId?: string; 116 115 }) => { 117 117 - const did = props.comment.bsky_profiles?.did; 118 118 - 119 116 return ( 120 120 - <div id={props.comment.uri} className="comment"> 117 117 + <div className="comment"> 121 118 <div className="flex gap-2"> 122 122 - {did && ( 123 123 - <ProfilePopover 124 124 - didOrHandle={did} 125 125 - trigger={ 126 126 - <div className="text-sm text-tertiary font-bold hover:underline"> 127 127 - {props.profile.displayName} 128 128 - </div> 129 129 - } 130 130 - /> 119 119 + {props.profile && ( 120 120 + <ProfilePopover profile={props.profile} comment={props.comment.uri} /> 131 121 )} 122 122 + <DatePopover date={props.record.createdAt} /> 132 123 </div> 133 124 {props.record.attachment && 134 125 PubLeafletComment.isLinearDocumentQuote(props.record.attachment) && ( ··· 300 291 </Popover> 301 292 ); 302 293 }; 294 294 + 295 295 + const ProfilePopover = (props: { 296 296 + profile: AppBskyActorProfile.Record; 297 297 + comment: string; 298 298 + }) => { 299 299 + let commenterId = new AtUri(props.comment).host; 300 300 + 301 301 + return ( 302 302 + <> 303 303 + <a 304 304 + className="font-bold text-tertiary text-sm hover:underline" 305 305 + href={`https://bsky.app/profile/${commenterId}`} 306 306 + > 307 307 + {props.profile.displayName} 308 308 + </a> 309 309 + {/*<Media mobile={false}> 310 310 + <Popover 311 311 + align="start" 312 312 + trigger={ 313 313 + <div 314 314 + onMouseOver={() => { 315 315 + setHovering(true); 316 316 + hoverTimeout.current = window.setTimeout(() => { 317 317 + setLoadProfile(true); 318 318 + }, 500); 319 319 + }} 320 320 + onMouseOut={() => { 321 321 + setHovering(false); 322 322 + clearTimeout(hoverTimeout.current); 323 323 + }} 324 324 + className="font-bold text-tertiary text-sm hover:underline" 325 325 + > 326 326 + {props.profile.displayName} 327 327 + </div> 328 328 + } 329 329 + className="max-w-sm" 330 330 + > 331 331 + {profile && ( 332 332 + <> 333 333 + <div className="profilePopover text-sm flex gap-2"> 334 334 + <div className="w-5 h-5 bg-test rounded-full shrink-0 mt-[2px]" /> 335 335 + <div className="flex flex-col"> 336 336 + <div className="flex justify-between"> 337 337 + <div className="profileHeader flex gap-2 items-center"> 338 338 + <div className="font-bold">celine</div> 339 339 + <a className="text-tertiary" href="/"> 340 340 + @{profile.handle} 341 341 + </a> 342 342 + </div> 343 343 + </div> 344 344 + 345 345 + <div className="profileBio text-secondary "> 346 346 + {profile.description} 347 347 + </div> 348 348 + <div className="flex flex-row gap-2 items-center pt-2 font-bold"> 349 349 + {!profile.viewer?.following ? ( 350 350 + <div className="text-tertiary bg-border-light rounded-md px-1 py-0"> 351 351 + Following 352 352 + </div> 353 353 + ) : ( 354 354 + <ButtonPrimary compact className="text-sm"> 355 355 + Follow <BlueskyTiny /> 356 356 + </ButtonPrimary> 357 357 + )} 358 358 + {profile.viewer?.followedBy && ( 359 359 + <div className="text-tertiary">Follows You</div> 360 360 + )} 361 361 + </div> 362 362 + </div> 363 363 + </div> 364 364 + 365 365 + <hr className="my-2 border-border-light" /> 366 366 + <div className="flex gap-2 leading-tight items-center text-tertiary text-sm"> 367 367 + <div className="flex flex-col w-6 justify-center"> 368 368 + {profile.viewer?.knownFollowers?.followers.map((follower) => { 369 369 + return ( 370 370 + <div 371 371 + className="w-[18px] h-[18px] bg-test rounded-full border-2 border-bg-page" 372 372 + key={follower.did} 373 373 + /> 374 374 + ); 375 375 + })} 376 376 + <div className="w-[18px] h-[18px] bg-test rounded-full -mt-2 border-2 border-bg-page" /> 377 377 + <div className="w-[18px] h-[18px] bg-test rounded-full -mt-2 border-2 border-bg-page" /> 378 378 + </div> 379 379 + </div> 380 380 + </> 381 381 + )} 382 382 + </Popover> 383 383 + </Media>*/} 384 384 + </> 385 385 + ); 386 386 + };

+1 -4

app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx

··· 58 58 export const useDrawerOpen = (uri: string) => { 59 59 let params = useSearchParams(); 60 60 let interactionDrawerSearchParam = params.get("interactionDrawer"); 61 61 - let pageParam = params.get("page"); 62 61 let { drawerOpen: open, drawer, pageId } = useInteractionState(uri); 63 62 if (open === false || (open === undefined && !interactionDrawerSearchParam)) 64 63 return null; 65 64 drawer = 66 65 drawer || (interactionDrawerSearchParam as InteractionState["drawer"]); 67 67 - // Use pageId from state, or fall back to page search param 68 68 - const resolvedPageId = pageId ?? pageParam ?? undefined; 69 69 - return { drawer, pageId: resolvedPageId }; 66 66 + return { drawer, pageId }; 70 67 };

+1

app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx

··· 61 61 <PageWrapper 62 62 pageType="doc" 63 63 fullPageScroll={fullPageScroll} 64 64 + cardBorderHidden={!hasPageBackground} 64 65 id={pageId ? `post-page-${pageId}` : "post-page"} 65 66 drawerOpen={ 66 67 !!drawer && (pageId ? drawer.pageId === pageId : !drawer.pageId)

+1 -1

app/lish/[did]/[publication]/[rkey]/PostContent.tsx

··· 324 324 return ( 325 325 // all this margin stuff is a highly unfortunate hack so that the border-l on blockquote is the height of just the text rather than the height of the block, which includes padding. 326 326 <blockquote 327 327 - className={`blockquoteBlock py-0! mb-2! ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-2! pt-3!" : "mt-1!"}`} 327 327 + className={`blockquote py-0! mb-2! ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-2! pt-3!" : "mt-1!"}`} 328 328 {...blockProps} 329 329 > 330 330 <TextBlock

+2 -2

app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx

··· 119 119 {props.postTitle ? props.postTitle : "Untitled"} 120 120 </h2> 121 121 {props.postDescription ? ( 122 122 - <div className="postDescription italic text-secondary outline-hidden bg-transparent pt-1"> 122 122 + <p className="postDescription italic text-secondary outline-hidden bg-transparent pt-1"> 123 123 {props.postDescription} 124 124 - </div> 124 124 + </p> 125 125 ) : null} 126 126 <div className="postInfo text-sm text-tertiary pt-3 flex gap-1 flex-wrap justify-between"> 127 127 {props.postInfo}

+10 -27

app/lish/[did]/[publication]/[rkey]/PostPages.tsx

··· 19 19 import { Fragment, useEffect } from "react"; 20 20 import { flushSync } from "react-dom"; 21 21 import { scrollIntoView } from "src/utils/scrollIntoView"; 22 22 - import { useParams, useSearchParams } from "next/navigation"; 22 22 + import { useParams } from "next/navigation"; 23 23 import { decodeQuotePosition } from "./quotePosition"; 24 24 import { PollData } from "./fetchPollData"; 25 25 import { LinearDocumentPage } from "./LinearDocumentPage"; ··· 32 32 33 33 export const useOpenPages = () => { 34 34 const { quote } = useParams(); 35 35 - const searchParams = useSearchParams(); 36 36 - const pageParam = searchParams.get("page"); 37 35 const state = usePostPageUIState((s) => s); 38 36 39 39 - if (!state.initialized) { 40 40 - // Check for page search param first (for comment links) 41 41 - if (pageParam) { 42 42 - return [pageParam]; 43 43 - } 44 44 - // Then check for quote param 45 45 - if (quote) { 46 46 - const decodedQuote = decodeQuotePosition(quote as string); 47 47 - if (decodedQuote?.pageId) { 48 48 - return [decodedQuote.pageId]; 49 49 - } 37 37 + if (!state.initialized && quote) { 38 38 + const decodedQuote = decodeQuotePosition(quote as string); 39 39 + if (decodedQuote?.pageId) { 40 40 + return [decodedQuote.pageId]; 50 41 } 51 42 } 52 43 ··· 55 46 56 47 export const useInitializeOpenPages = () => { 57 48 const { quote } = useParams(); 58 58 - const searchParams = useSearchParams(); 59 59 - const pageParam = searchParams.get("page"); 60 49 61 50 useEffect(() => { 62 51 const state = usePostPageUIState.getState(); 63 52 if (!state.initialized) { 64 64 - // Check for page search param first (for comment links) 65 65 - if (pageParam) { 66 66 - usePostPageUIState.setState({ 67 67 - pages: [pageParam], 68 68 - initialized: true, 69 69 - }); 70 70 - return; 71 71 - } 72 72 - // Then check for quote param 73 53 if (quote) { 74 54 const decodedQuote = decodeQuotePosition(quote as string); 75 55 if (decodedQuote?.pageId) { ··· 83 63 // Mark as initialized even if no pageId found 84 64 usePostPageUIState.setState({ initialized: true }); 85 65 } 86 86 - }, [quote, pageParam]); 66 66 + }, [quote]); 87 67 }; 88 68 89 69 export const openPage = ( ··· 310 290 absolute sm:-right-[20px] right-3 sm:top-3 top-0 311 291 flex sm:flex-col flex-row-reverse gap-1 items-start`} 312 292 > 313 313 - <PageOptionButton onClick={props.onClick}> 293 293 + <PageOptionButton 294 294 + cardBorderHidden={!props.hasPageBackground} 295 295 + onClick={props.onClick} 296 296 + > 314 297 <CloseTiny /> 315 298 </PageOptionButton> 316 299 </div>

+1

app/lish/[did]/[publication]/dashboard/DraftList.tsx

··· 23 23 searchValue={props.searchValue} 24 24 showPreview={false} 25 25 defaultDisplay="list" 26 26 + cardBorderHidden={!props.showPageBackground} 26 27 leaflets={leaflets_in_publications 27 28 .filter((l) => !l.documents) 28 29 .filter((l) => !l.archived)

+1

app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx

··· 39 39 return ( 40 40 <DashboardLayout 41 41 id={publication.uri} 42 42 + cardBorderHidden={!!record.theme?.showPageBackground} 42 43 defaultTab="Drafts" 43 44 tabs={{ 44 45 Drafts: {

+7 -9

app/p/[didOrHandle]/[rkey]/page.tsx

··· 5 5 import { Metadata } from "next"; 6 6 import { idResolver } from "app/(home-pages)/reader/idResolver"; 7 7 import { DocumentPageRenderer } from "app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer"; 8 8 - import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout"; 9 8 10 9 export async function generateMetadata(props: { 11 10 params: Promise<{ didOrHandle: string; rkey: string }>; ··· 35 34 let docRecord = document.data as PubLeafletDocument.Record; 36 35 37 36 // For documents in publications, include publication name 38 38 - let publicationName = 39 39 - document.documents_in_publications[0]?.publications?.name; 37 37 + let publicationName = document.documents_in_publications[0]?.publications?.name; 40 38 41 39 return { 42 40 icons: { ··· 65 63 let resolved = await idResolver.handle.resolve(didOrHandle); 66 64 if (!resolved) { 67 65 return ( 68 68 - <NotFoundLayout> 69 69 - <p className="font-bold">Sorry, we can't find this handle!</p> 66 66 + <div className="p-4 text-lg text-center flex flex-col gap-4"> 67 67 + <p>Sorry, can&apos;t resolve handle.</p> 70 68 <p> 71 69 This may be a glitch on our end. If the issue persists please{" "} 72 70 <a href="mailto:contact@leaflet.pub">send us a note</a>. 73 71 </p> 74 74 - </NotFoundLayout> 72 72 + </div> 75 73 ); 76 74 } 77 75 did = resolved; 78 76 } catch (e) { 79 77 return ( 80 80 - <NotFoundLayout> 81 81 - <p className="font-bold">Sorry, we can't find this leaflet!</p> 78 78 + <div className="p-4 text-lg text-center flex flex-col gap-4"> 79 79 + <p>Sorry, can&apos;t resolve handle.</p> 82 80 <p> 83 81 This may be a glitch on our end. If the issue persists please{" "} 84 82 <a href="mailto:contact@leaflet.pub">send us a note</a>. 85 83 </p> 86 86 - </NotFoundLayout> 84 84 + </div> 87 85 ); 88 86 } 89 87 }

+1 -2

components/ActionBar/Navigation.tsx

··· 25 25 | "discover" 26 26 | "notifications" 27 27 | "looseleafs" 28 28 - | "tag" 29 29 - | "profile"; 28 28 + | "tag"; 30 29 31 30 export const DesktopNavigation = (props: { 32 31 currentPage: navPages;

+1 -1

components/ActionBar/Publications.tsx

··· 193 193 194 194 return props.record.icon ? ( 195 195 <div 196 196 - className={`${iconSizeClassName} ${props.className} relative overflow-hidden shrink-0`} 196 196 + className={`${iconSizeClassName} ${props.className} relative overflow-hidden`} 197 197 > 198 198 <img 199 199 src={`/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]}`}

+2 -2

components/AtMentionLink.tsx

··· 24 24 isPublication || isDocument ? ( 25 25 <img 26 26 src={`/api/pub_icon?at_uri=${encodeURIComponent(atURI)}`} 27 27 - className="inline-block w-4 h-4 rounded-full mr-1 mt-[3px] align-text-top" 27 27 + className="inline-block w-5 h-5 rounded-full mr-1 align-text-top" 28 28 alt="" 29 29 width="20" 30 30 height="20" ··· 37 37 href={atUriToUrl(atURI)} 38 38 target="_blank" 39 39 rel="noopener noreferrer" 40 40 - className={`mention ${isPublication ? "font-bold" : ""} ${isDocument ? "italic" : ""} ${className}`} 40 40 + className={`text-accent-contrast hover:underline cursor-pointer ${isPublication ? "font-bold" : ""} ${isDocument ? "italic" : ""} ${className}`} 41 41 > 42 42 {icon} 43 43 {children}

+1 -4

components/Avatar.tsx

··· 3 3 export const Avatar = (props: { 4 4 src: string | undefined; 5 5 displayName: string | undefined; 6 6 - className?: string; 7 6 tiny?: boolean; 8 8 - large?: boolean; 9 9 - giant?: boolean; 10 7 }) => { 11 8 if (props.src) 12 9 return ( 13 10 <img 14 14 - className={`${props.tiny ? "w-4 h-4" : props.large ? "h-8 w-8" : props.giant ? "h-16 w-16" : "w-5 h-5"} rounded-full shrink-0 border border-border-light ${props.className}`} 11 11 + className={`${props.tiny ? "w-4 h-4" : "w-5 h-5"} rounded-full shrink-0 border border-border-light`} 15 12 src={props.src} 16 13 alt={ 17 14 props.displayName

+5 -14

components/Blocks/TextBlock/RenderYJSFragment.tsx

··· 6 6 import { didToBlueskyUrl } from "src/utils/mentionUtils"; 7 7 import { AtMentionLink } from "components/AtMentionLink"; 8 8 import { Delta } from "src/utils/yjsFragmentToString"; 9 9 - import { ProfilePopover } from "components/ProfilePopover"; 10 9 11 10 type BlockElements = "h1" | "h2" | "h3" | null | "blockquote" | "p"; 12 11 export function RenderYJSFragment({ ··· 64 63 ); 65 64 } 66 65 67 67 - if ( 68 68 - node.constructor === XmlElement && 69 69 - node.nodeName === "hard_break" 70 70 - ) { 66 66 + if (node.constructor === XmlElement && node.nodeName === "hard_break") { 71 67 return <br key={index} />; 72 68 } 73 69 74 70 // Handle didMention inline nodes 75 75 - if ( 76 76 - node.constructor === XmlElement && 77 77 - node.nodeName === "didMention" 78 78 - ) { 71 71 + if (node.constructor === XmlElement && node.nodeName === "didMention") { 79 72 const did = node.getAttribute("did") || ""; 80 73 const text = node.getAttribute("text") || ""; 81 74 return ( ··· 84 77 target="_blank" 85 78 rel="noopener noreferrer" 86 79 key={index} 87 87 - className="mention" 80 80 + className="text-accent-contrast hover:underline cursor-pointer" 88 81 > 89 82 {text} 90 83 </a> ··· 92 85 } 93 86 94 87 // Handle atMention inline nodes 95 95 - if ( 96 96 - node.constructor === XmlElement && 97 97 - node.nodeName === "atMention" 98 98 - ) { 88 88 + if (node.constructor === XmlElement && node.nodeName === "atMention") { 99 89 const atURI = node.getAttribute("atURI") || ""; 100 90 const text = node.getAttribute("text") || ""; 101 91 return ( ··· 171 161 172 162 return props; 173 163 } 164 164 +

+3 -4

components/Blocks/TextBlock/schema.ts

··· 147 147 toDOM(node) { 148 148 // NOTE: This rendering should match the AtMentionLink component in 149 149 // components/AtMentionLink.tsx. If you update one, update the other. 150 150 - let className = "atMention mention"; 150 150 + let className = "atMention text-accent-contrast"; 151 151 let aturi = new AtUri(node.attrs.atURI); 152 152 if (aturi.collection === "pub.leaflet.publication") 153 153 className += " font-bold"; ··· 168 168 "img", 169 169 { 170 170 src: `/api/pub_icon?at_uri=${encodeURIComponent(node.attrs.atURI)}`, 171 171 - class: 172 172 - "inline-block w-4 h-4 rounded-full mt-[3px] mr-1 align-text-top", 171 171 + class: "inline-block w-5 h-5 rounded-full mr-1 align-text-top", 173 172 alt: "", 174 173 width: "16", 175 174 height: "16", ··· 215 214 return [ 216 215 "span", 217 216 { 218 218 - class: "didMention mention", 217 217 + class: "didMention text-accent-contrast", 219 218 "data-did": node.attrs.did, 220 219 }, 221 220 node.attrs.text,

-1

components/Icons/ReplyTiny.tsx

··· 8 8 viewBox="0 0 16 16" 9 9 fill="none" 10 10 xmlns="http://www.w3.org/2000/svg" 11 11 - {...props} 12 11 > 13 12 <path 14 13 fillRule="evenodd"

+8 -7

components/PageHeader.tsx

··· 1 1 "use client"; 2 2 import { useState, useEffect } from "react"; 3 3 - import { useCardBorderHidden } from "./Pages/useCardBorderHidden"; 4 3 5 5 - export const Header = (props: { children: React.ReactNode }) => { 6 6 - let cardBorderHidden = useCardBorderHidden(); 4 4 + export const Header = (props: { 5 5 + children: React.ReactNode; 6 6 + cardBorderHidden: boolean; 7 7 + }) => { 7 8 let [scrollPos, setScrollPos] = useState(0); 8 9 9 10 useEffect(() => { ··· 21 22 } 22 23 }, []); 23 24 24 24 - let headerBGColor = !cardBorderHidden 25 25 + let headerBGColor = props.cardBorderHidden 25 26 ? "var(--bg-leaflet)" 26 27 : "var(--bg-page)"; 27 28 ··· 53 54 style={ 54 55 scrollPos < 20 55 56 ? { 56 56 - backgroundColor: !cardBorderHidden 57 57 + backgroundColor: props.cardBorderHidden 57 58 ? `rgba(${headerBGColor}, ${scrollPos / 60 + 0.75})` 58 59 : `rgba(${headerBGColor}, ${scrollPos / 20})`, 59 59 - paddingLeft: !cardBorderHidden 60 60 + paddingLeft: props.cardBorderHidden 60 61 ? "4px" 61 62 : `calc(${scrollPos / 20}*4px)`, 62 62 - paddingRight: !cardBorderHidden 63 63 + paddingRight: props.cardBorderHidden 63 64 ? "8px" 64 65 : `calc(${scrollPos / 20}*8px)`, 65 66 }

+23 -3

components/PageLayouts/DashboardLayout.tsx

··· 25 25 import Link from "next/link"; 26 26 import { ExternalLinkTiny } from "components/Icons/ExternalLinkTiny"; 27 27 import { usePreserveScroll } from "src/hooks/usePreserveScroll"; 28 28 - import { Tab } from "components/Tab"; 29 28 30 29 export type DashboardState = { 31 30 display?: "grid" | "list"; ··· 134 133 }, 135 134 >(props: { 136 135 id: string; 136 136 + cardBorderHidden: boolean; 137 137 tabs: T; 138 138 defaultTab: keyof T; 139 139 currentPage: navPages; ··· 186 186 > 187 187 {Object.keys(props.tabs).length <= 1 && !controls ? null : ( 188 188 <> 189 189 - <Header> 189 189 + <Header cardBorderHidden={props.cardBorderHidden}> 190 190 {headerState === "default" ? ( 191 191 <> 192 192 {Object.keys(props.tabs).length > 1 && ( ··· 355 355 ); 356 356 }; 357 357 358 358 - const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => { 358 358 + function Tab(props: { 359 359 + name: string; 360 360 + selected: boolean; 361 361 + onSelect: () => void; 362 362 + href?: string; 363 363 + }) { 364 364 + return ( 365 365 + <div 366 366 + className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-tertiary"}`} 367 367 + onClick={() => props.onSelect()} 368 368 + > 369 369 + {props.name} 370 370 + {props.href && <ExternalLinkTiny />} 371 371 + </div> 372 372 + ); 373 373 + } 374 374 + 375 375 + const FilterOptions = (props: { 376 376 + hasPubs: boolean; 377 377 + hasArchived: boolean; 378 378 + }) => { 359 379 let { filter } = useDashboardState(); 360 380 let setState = useSetDashboardState(); 361 381 let filterCount = Object.values(filter).filter(Boolean).length;

+5 -3

components/Pages/Page.tsx

··· 34 34 return focusedPageID === props.entityID; 35 35 }); 36 36 let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc"; 37 37 + let cardBorderHidden = useCardBorderHidden(props.entityID); 37 38 38 39 let drawerOpen = useDrawerOpen(props.entityID); 39 40 return ( ··· 48 49 }} 49 50 id={elementId.page(props.entityID).container} 50 51 drawerOpen={!!drawerOpen} 52 52 + cardBorderHidden={!!cardBorderHidden} 51 53 isFocused={isFocused} 52 54 fullPageScroll={props.fullPageScroll} 53 55 pageType={pageType} ··· 75 77 id: string; 76 78 children: React.ReactNode; 77 79 pageOptions?: React.ReactNode; 80 80 + cardBorderHidden: boolean; 78 81 fullPageScroll: boolean; 79 82 isFocused?: boolean; 80 83 onClickAction?: (e: React.MouseEvent) => void; 81 84 pageType: "canvas" | "doc"; 82 85 drawerOpen: boolean | undefined; 83 86 }) => { 84 84 - const cardBorderHidden = useCardBorderHidden(); 85 87 let { ref } = usePreserveScroll<HTMLDivElement>(props.id); 86 88 return ( 87 89 // this div wraps the contents AND the page options. ··· 104 106 shrink-0 snap-center 105 107 overflow-y-scroll 106 108 ${ 107 107 - !cardBorderHidden && 109 109 + !props.cardBorderHidden && 108 110 `h-full border 109 111 bg-[rgba(var(--bg-page),var(--bg-page-alpha))] 110 112 ${props.drawerOpen ? "rounded-l-lg " : "rounded-lg"} 111 113 ${props.isFocused ? "shadow-md border-border" : "border-border-light"}` 112 114 } 113 113 - ${cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"} 115 115 + ${props.cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"} 114 116 ${props.fullPageScroll && "max-w-full "} 115 117 ${props.pageType === "doc" && !props.fullPageScroll && "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]"} 116 118 ${

+29 -7

components/Pages/PageOptions.tsx

··· 21 21 export const PageOptionButton = ({ 22 22 children, 23 23 secondary, 24 24 + cardBorderHidden, 24 25 className, 25 26 disabled, 26 27 ...props 27 28 }: { 28 29 children: React.ReactNode; 29 30 secondary?: boolean; 31 31 + cardBorderHidden: boolean | undefined; 30 32 className?: string; 31 33 disabled?: boolean; 32 34 } & Omit<JSX.IntrinsicElements["button"], "content">) => { 33 33 - const cardBorderHidden = useCardBorderHidden(); 34 35 return ( 35 36 <button 36 37 className={` ··· 57 58 first: boolean | undefined; 58 59 isFocused: boolean; 59 60 }) => { 61 61 + let cardBorderHidden = useCardBorderHidden(props.entityID); 62 62 + 60 63 return ( 61 64 <div 62 65 className={`pageOptions w-fit z-10 ··· 66 69 > 67 70 {!props.first && ( 68 71 <PageOptionButton 72 72 + cardBorderHidden={cardBorderHidden} 69 73 secondary 70 74 onClick={() => { 71 75 useUIState.getState().closePage(props.entityID); ··· 74 78 <CloseTiny /> 75 79 </PageOptionButton> 76 80 )} 77 77 - <OptionsMenu entityID={props.entityID} first={!!props.first} /> 78 78 - <UndoButtons /> 81 81 + <OptionsMenu 82 82 + entityID={props.entityID} 83 83 + first={!!props.first} 84 84 + cardBorderHidden={cardBorderHidden} 85 85 + /> 86 86 + <UndoButtons cardBorderHidden={cardBorderHidden} /> 79 87 </div> 80 88 ); 81 89 }; 82 90 83 83 - export const UndoButtons = () => { 91 91 + export const UndoButtons = (props: { 92 92 + cardBorderHidden: boolean | undefined; 93 93 + }) => { 84 94 let undoState = useUndoState(); 85 95 let { undoManager } = useReplicache(); 86 96 return ( 87 97 <Media mobile> 88 98 {undoState.canUndo && ( 89 99 <div className="gap-1 flex sm:flex-col"> 90 90 - <PageOptionButton secondary onClick={() => undoManager.undo()}> 100 100 + <PageOptionButton 101 101 + secondary 102 102 + cardBorderHidden={props.cardBorderHidden} 103 103 + onClick={() => undoManager.undo()} 104 104 + > 91 105 <UndoTiny /> 92 106 </PageOptionButton> 93 107 94 108 <PageOptionButton 95 109 secondary 110 110 + cardBorderHidden={props.cardBorderHidden} 96 111 onClick={() => undoManager.undo()} 97 112 disabled={!undoState.canRedo} 98 113 > ··· 104 119 ); 105 120 }; 106 121 107 107 - export const OptionsMenu = (props: { entityID: string; first: boolean }) => { 122 122 + export const OptionsMenu = (props: { 123 123 + entityID: string; 124 124 + first: boolean; 125 125 + cardBorderHidden: boolean | undefined; 126 126 + }) => { 108 127 let [state, setState] = useState<"normal" | "theme" | "share">("normal"); 109 128 let { permissions } = useEntitySetContext(); 110 129 if (!permissions.write) return null; ··· 119 138 if (!open) setState("normal"); 120 139 }} 121 140 trigger={ 122 122 - <PageOptionButton className="!w-8 !h-5 sm:!w-5 sm:!h-8"> 141 141 + <PageOptionButton 142 142 + cardBorderHidden={props.cardBorderHidden} 143 143 + className="!w-8 !h-5 sm:!w-5 sm:!h-8" 144 144 + > 123 145 <MoreOptionsTiny className="sm:rotate-90" /> 124 146 </PageOptionButton> 125 147 }

+18 -3

components/Pages/useCardBorderHidden.ts

··· 1 1 - import { useCardBorderHiddenContext } from "components/ThemeManager/ThemeProvider"; 1 1 + import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 2 2 + import { PubLeafletPublication } from "lexicons/api"; 3 3 + import { useEntity, useReplicache } from "src/replicache"; 4 4 + 5 5 + export function useCardBorderHidden(entityID: string | null) { 6 6 + let { rootEntity } = useReplicache(); 7 7 + let { data: pub } = useLeafletPublicationData(); 8 8 + let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden"); 2 9 3 3 - export function useCardBorderHidden(entityID?: string | null) { 4 4 - return useCardBorderHiddenContext(); 10 10 + let cardBorderHidden = 11 11 + useEntity(entityID, "theme/card-border-hidden") || rootCardBorderHidden; 12 12 + if (!cardBorderHidden && !rootCardBorderHidden) { 13 13 + if (pub?.publications?.record) { 14 14 + let record = pub.publications.record as PubLeafletPublication.Record; 15 15 + return !record.theme?.showPageBackground; 16 16 + } 17 17 + return false; 18 18 + } 19 19 + return (cardBorderHidden || rootCardBorderHidden)?.data.value; 5 20 }

+22 -31

components/PostListing.tsx

··· 15 15 import { InteractionPreview } from "./InteractionsPreview"; 16 16 17 17 export const PostListing = (props: Post) => { 18 18 - let pubRecord = props.publication?.pubRecord as 19 19 - | PubLeafletPublication.Record 20 20 - | undefined; 18 18 + let pubRecord = props.publication.pubRecord as PubLeafletPublication.Record; 21 19 22 20 let postRecord = props.documents.data as PubLeafletDocument.Record; 23 21 let postUri = new AtUri(props.documents.uri); 24 22 25 25 - let theme = usePubTheme(pubRecord?.theme); 26 26 - let backgroundImage = 27 27 - pubRecord?.theme?.backgroundImage?.image?.ref && props.publication 28 28 - ? blobRefToSrc( 29 29 - pubRecord.theme.backgroundImage.image.ref, 30 30 - new AtUri(props.publication.uri).host, 31 31 - ) 32 32 - : null; 23 23 + let theme = usePubTheme(pubRecord.theme); 24 24 + let backgroundImage = pubRecord?.theme?.backgroundImage?.image?.ref 25 25 + ? blobRefToSrc( 26 26 + pubRecord?.theme?.backgroundImage?.image?.ref, 27 27 + new AtUri(props.publication.uri).host, 28 28 + ) 29 29 + : null; 33 30 34 31 let backgroundImageRepeat = pubRecord?.theme?.backgroundImage?.repeat; 35 32 let backgroundImageSize = pubRecord?.theme?.backgroundImage?.width || 500; 36 33 37 37 - let showPageBackground = pubRecord?.theme?.showPageBackground; 34 34 + let showPageBackground = pubRecord.theme?.showPageBackground; 38 35 39 36 let quotes = props.documents.document_mentions_in_bsky?.[0]?.count || 0; 40 37 let comments = 41 41 - pubRecord?.preferences?.showComments === false 38 38 + pubRecord.preferences?.showComments === false 42 39 ? 0 43 40 : props.documents.comments_on_documents?.[0]?.count || 0; 44 41 let tags = (postRecord?.tags as string[] | undefined) || []; 45 42 46 46 - // For standalone posts, link directly to the document 47 47 - let postHref = props.publication 48 48 - ? `${props.publication.href}/${postUri.rkey}` 49 49 - : `/doc/${postUri.host}/${postUri.rkey}`; 50 50 - 51 43 return ( 52 44 <BaseThemeProvider {...theme} local> 53 45 <div 54 46 style={{ 55 55 - backgroundImage: backgroundImage 56 56 - ? `url(${backgroundImage})` 57 57 - : undefined, 47 47 + backgroundImage: `url(${backgroundImage})`, 58 48 backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat", 59 49 backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`, 60 50 }} ··· 65 55 hover:outline-accent-contrast hover:border-accent-contrast 66 56 `} 67 57 > 68 68 - <Link className="h-full w-full absolute top-0 left-0" href={postHref} /> 58 58 + <Link 59 59 + className="h-full w-full absolute top-0 left-0" 60 60 + href={`${props.publication.href}/${postUri.rkey}`} 61 61 + /> 69 62 <div 70 63 className={`${showPageBackground ? "bg-bg-page " : "bg-transparent"} rounded-md w-full px-[10px] pt-2 pb-2`} 71 64 style={{ ··· 78 71 79 72 <p className="text-secondary italic">{postRecord.description}</p> 80 73 <div className="flex flex-col-reverse md:flex-row md gap-2 text-sm text-tertiary items-center justify-start pt-1.5 md:pt-3 w-full"> 81 81 - {props.publication && pubRecord && ( 82 82 - <PubInfo 83 83 - href={props.publication.href} 84 84 - pubRecord={pubRecord} 85 85 - uri={props.publication.uri} 86 86 - /> 87 87 - )} 74 74 + <PubInfo 75 75 + href={props.publication.href} 76 76 + pubRecord={pubRecord} 77 77 + uri={props.publication.uri} 78 78 + /> 88 79 <div className="flex flex-row justify-between gap-2 items-center w-full"> 89 80 <PostInfo publishedAt={postRecord.publishedAt} /> 90 81 <InteractionPreview 91 91 - postUrl={postHref} 82 82 + postUrl={`${props.publication.href}/${postUri.rkey}`} 92 83 quotesCount={quotes} 93 84 commentsCount={comments} 94 85 tags={tags} 95 95 - showComments={pubRecord?.preferences?.showComments} 86 86 + showComments={pubRecord.preferences?.showComments} 96 87 share 97 88 /> 98 89 </div>

-98

components/ProfilePopover.tsx

··· 1 1 - "use client"; 2 2 - import { Popover } from "./Popover"; 3 3 - import useSWR from "swr"; 4 4 - import { callRPC } from "app/api/rpc/client"; 5 5 - import { useRef, useState } from "react"; 6 6 - import { ProfileHeader } from "app/(home-pages)/p/[didOrHandle]/ProfileHeader"; 7 7 - import { SpeedyLink } from "./SpeedyLink"; 8 8 - import { Tooltip } from "./Tooltip"; 9 9 - import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs"; 10 10 - 11 11 - export const ProfilePopover = (props: { 12 12 - trigger: React.ReactNode; 13 13 - didOrHandle: string; 14 14 - }) => { 15 15 - const [isOpen, setIsOpen] = useState(false); 16 16 - let [isHovered, setIsHovered] = useState(false); 17 17 - const hoverTimeout = useRef<null | number>(null); 18 18 - 19 19 - const { data, isLoading } = useSWR( 20 20 - isHovered ? ["profile-data", props.didOrHandle] : null, 21 21 - async () => { 22 22 - const response = await callRPC("get_profile_data", { 23 23 - didOrHandle: props.didOrHandle, 24 24 - }); 25 25 - return response.result; 26 26 - }, 27 27 - ); 28 28 - 29 29 - return ( 30 30 - <Tooltip 31 31 - className="max-w-sm p-0! text-center" 32 32 - asChild 33 33 - trigger={ 34 34 - <a 35 35 - className="no-underline" 36 36 - href={`https://leaflet.pub/p/${props.didOrHandle}`} 37 37 - target="_blank" 38 38 - onPointerEnter={(e) => { 39 39 - if (hoverTimeout.current) { 40 40 - window.clearTimeout(hoverTimeout.current); 41 41 - } 42 42 - hoverTimeout.current = window.setTimeout(async () => { 43 43 - setIsHovered(true); 44 44 - }, 150); 45 45 - }} 46 46 - onPointerLeave={() => { 47 47 - if (isHovered) return; 48 48 - if (hoverTimeout.current) { 49 49 - window.clearTimeout(hoverTimeout.current); 50 50 - hoverTimeout.current = null; 51 51 - } 52 52 - setIsHovered(false); 53 53 - }} 54 54 - > 55 55 - {props.trigger} 56 56 - </a> 57 57 - } 58 58 - onOpenChange={setIsOpen} 59 59 - > 60 60 - {isLoading ? ( 61 61 - <div className="text-secondary p-4">Loading...</div> 62 62 - ) : data ? ( 63 63 - <div> 64 64 - <ProfileHeader 65 65 - profile={data.profile} 66 66 - publications={data.publications} 67 67 - popover 68 68 - /> 69 69 - <KnownFollowers viewer={data.profile.viewer} did={data.profile.did} /> 70 70 - </div> 71 71 - ) : ( 72 72 - <div className="text-secondary py-2 px-4">Profile not found</div> 73 73 - )} 74 74 - </Tooltip> 75 75 - ); 76 76 - }; 77 77 - 78 78 - let KnownFollowers = (props: { 79 79 - viewer: ProfileViewDetailed["viewer"]; 80 80 - did: string; 81 81 - }) => { 82 82 - if (!props.viewer?.knownFollowers) return null; 83 83 - let count = props.viewer.knownFollowers.count; 84 84 - return ( 85 85 - <> 86 86 - <hr className="border-border" /> 87 87 - Followed by{" "} 88 88 - <a 89 89 - className="hover:underline" 90 90 - href={`https://bsky.social/profile/${props.did}/known-followers`} 91 91 - target="_blank" 92 92 - > 93 93 - {props.viewer?.knownFollowers?.followers[0]?.displayName}{" "} 94 94 - {count > 1 ? `and ${count - 1} other${count > 2 ? "s" : ""}` : ""} 95 95 - </a> 96 96 - </> 97 97 - ); 98 98 - };

-18

components/Tab.tsx

··· 1 1 - import { ExternalLinkTiny } from "./Icons/ExternalLinkTiny"; 2 2 - 3 3 - export const Tab = (props: { 4 4 - name: string; 5 5 - selected: boolean; 6 6 - onSelect: () => void; 7 7 - href?: string; 8 8 - }) => { 9 9 - return ( 10 10 - <div 11 11 - className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-tertiary"}`} 12 12 - onClick={() => props.onSelect()} 13 13 - > 14 14 - {props.name} 15 15 - {props.href && <ExternalLinkTiny />} 16 16 - </div> 17 17 - ); 18 18 - };

+4 -7

components/ThemeManager/PublicationThemeProvider.tsx

··· 4 4 import { useEntity } from "src/replicache"; 5 5 import { getColorContrast } from "./themeUtils"; 6 6 import { useColorAttribute, colorToString } from "./useColorAttribute"; 7 7 - import { BaseThemeProvider, CardBorderHiddenContext } from "./ThemeProvider"; 7 7 + import { BaseThemeProvider } from "./ThemeProvider"; 8 8 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api"; 9 9 import { usePublicationData } from "app/lish/[did]/[publication]/dashboard/PublicationSWRProvider"; 10 10 import { blobRefToSrc } from "src/utils/blobRefToSrc"; ··· 103 103 isStandalone?: boolean; 104 104 }) { 105 105 let colors = usePubTheme(props.theme, props.isStandalone); 106 106 - let cardBorderHidden = !colors.showPageBackground; 107 106 return ( 108 108 - <CardBorderHiddenContext.Provider value={cardBorderHidden}> 109 109 - <BaseThemeProvider local={props.local} {...colors}> 110 110 - {props.children} 111 111 - </BaseThemeProvider> 112 112 - </CardBorderHiddenContext.Provider> 107 107 + <BaseThemeProvider local={props.local} {...colors}> 108 108 + {props.children} 109 109 + </BaseThemeProvider> 113 110 ); 114 111 } 115 112

+22 -26

components/ThemeManager/ThemeProvider.tsx

··· 1 1 "use client"; 2 2 3 3 - import { createContext, CSSProperties, useContext, useEffect } from "react"; 4 4 - 5 5 - // Context for cardBorderHidden 6 6 - export const CardBorderHiddenContext = createContext<boolean>(false); 7 7 - 8 8 - export function useCardBorderHiddenContext() { 9 9 - return useContext(CardBorderHiddenContext); 10 10 - } 3 3 + import { 4 4 + createContext, 5 5 + CSSProperties, 6 6 + useContext, 7 7 + useEffect, 8 8 + } from "react"; 11 9 import { 12 10 colorToString, 13 11 useColorAttribute, ··· 60 58 }) { 61 59 let bgLeaflet = useColorAttribute(props.entityID, "theme/page-background"); 62 60 let bgPage = useColorAttribute(props.entityID, "theme/card-background"); 63 63 - let cardBorderHiddenValue = useEntity( 61 61 + let showPageBackground = !useEntity( 64 62 props.entityID, 65 63 "theme/card-border-hidden", 66 64 )?.data.value; 67 67 - let showPageBackground = !cardBorderHiddenValue; 68 65 let primary = useColorAttribute(props.entityID, "theme/primary"); 69 66 70 67 let highlight1 = useEntity(props.entityID, "theme/highlight-1"); ··· 75 72 let accent2 = useColorAttribute(props.entityID, "theme/accent-text"); 76 73 77 74 return ( 78 78 - <CardBorderHiddenContext.Provider value={!!cardBorderHiddenValue}> 79 79 - <BaseThemeProvider 80 80 - local={props.local} 81 81 - bgLeaflet={bgLeaflet} 82 82 - bgPage={bgPage} 83 83 - primary={primary} 84 84 - highlight2={highlight2} 85 85 - highlight3={highlight3} 86 86 - highlight1={highlight1?.data.value} 87 87 - accent1={accent1} 88 88 - accent2={accent2} 89 89 - showPageBackground={showPageBackground} 90 90 - > 91 91 - {props.children} 92 92 - </BaseThemeProvider> 93 93 - </CardBorderHiddenContext.Provider> 75 75 + <BaseThemeProvider 76 76 + local={props.local} 77 77 + bgLeaflet={bgLeaflet} 78 78 + bgPage={bgPage} 79 79 + primary={primary} 80 80 + highlight2={highlight2} 81 81 + highlight3={highlight3} 82 82 + highlight1={highlight1?.data.value} 83 83 + accent1={accent1} 84 84 + accent2={accent2} 85 85 + showPageBackground={showPageBackground} 86 86 + > 87 87 + {props.children} 88 88 + </BaseThemeProvider> 94 89 ); 95 90 } 96 91 ··· 342 337 </div> 343 338 ); 344 339 }; 340 340 +

+1 -1

components/Tooltip.tsx

··· 26 26 props.skipDelayDuration ? props.skipDelayDuration : 300 27 27 } 28 28 > 29 29 - <RadixTooltip.Root onOpenChange={props.onOpenChange} open={props.open}> 29 29 + <RadixTooltip.Root> 30 30 <RadixTooltip.Trigger disabled={props.disabled} asChild={props.asChild}> 31 31 {props.trigger} 32 32 </RadixTooltip.Trigger>

+2

src/hooks/useLocalizedDate.ts

··· 31 31 ? timezone || "UTC" 32 32 : Intl.DateTimeFormat().resolvedOptions().timeZone; 33 33 34 34 + console.log("tz", effectiveTimezone); 35 35 + 34 36 // Apply timezone if available 35 37 if (effectiveTimezone) { 36 38 dateTime = dateTime.setZone(effectiveTimezone);